REF: React eslint (forem#2432)

anonymous-security-public · Apr 16, 2019 · bf68782 · bf68782
1 parent c6ee9fe
commit bf68782
Show file tree

Hide file tree

Showing 34 changed files with 586 additions and 372 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+package.json
diff --git a/app/javascript/article-form/elements/bodyPreview.jsx b/app/javascript/article-form/elements/bodyPreview.jsx
@@ -2,43 +2,58 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 
 const BodyPreview = ({ previewHTML, version, articleState }) => (
-  <div className="container" style={{marginTop: "10px",minHeight:"508px", overflow:"hidden", boxShadow: "0px 0px 0px #fff",border:"0px"}}>
+  <div
+    className="container"
+    style={{
+      marginTop: '10px',
+      minHeight: '508px',
+      overflow: 'hidden',
+      boxShadow: '0px 0px 0px #fff',
+      border: '0px',
+    }}
+  >
     {titleArea(version, articleState)}
-    <div className="body" dangerouslySetInnerHTML={{__html: previewHTML}} style={{width: "90%"}}>
-    </div>
+    <div
+      className="body"
+      dangerouslySetInnerHTML={{ __html: previewHTML }}
+      style={{ width: '90%' }}
+    />
   </div>
 );
 
-
 function titleArea(version, articleState) {
-  if(version === 'help'){
-    //possibly something different here in future.
-    return ''
-  } else {
-    const tags = articleState.tagList.split(", ").map(tag => {
-      return <span><div class="tag">{tag}</div> </span>
-    })
-    return   <div class="title" style={{width: "90%", maxWidth:"1000px"}}>
-              <h1>{articleState.title}</h1>
-              <h3>
-              <img class="profile-pic" src={window.currentUser.profile_image_90} alt="image" />&nbsp;
-              <span>{window.currentUser.name}</span>
-              </h3>
-              <div class="tags">
-                {tags}
-              </div>
-            </div>
+  if (version === 'help') {
+    // possibly something different here in future.
+    return '';
+  }
+  const tags = articleState.tagList.split(', ').map(tag => {
+    return (
+      <span>
+        <div className="tag">{tag}</div>
+        {' '}
+      </span>
+    );
+  });
+  return (
+    <div className="title" style={{ width: '90%', maxWidth: '1000px' }}>
+      <h1>{articleState.title}</h1>
+      <h3>
+        <img
+          className="profile-pic"
+          src={window.currentUser.profile_image_90}
+          alt="image"
+        />
+        &nbsp;
+        <span>{window.currentUser.name}</span>
+      </h3>
+      <div className="tags">{tags}</div>
+    </div>
+  );
 }
-};
 
 BodyPreview.propTypes = {
   previewHTML: PropTypes.string.isRequired,
   version: PropTypes.string.isRequired,
 };
 
 export default BodyPreview;
-
-
-
-
-
diff --git a/app/javascript/article-form/elements/errors.jsx b/app/javascript/article-form/elements/errors.jsx
@@ -2,11 +2,19 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 
 const Errors = ({ errorsList }) => (
-  <div className='articleform__errors'>
+  <div className="articleform__errors">
     <h2>😱 Heads up:</h2>
-    <ul>{Object.keys(errorsList).map((key) => {
-      return <li>{key}: {errorsList[key]}</li>
-    })}</ul>
+    <ul>
+      {Object.keys(errorsList).map(key => {
+        return (
+          <li>
+            {key}
+:
+            {errorsList[key]}
+          </li>
+        );
+      })}
+    </ul>
   </div>
 );
 

diff --git a/app/javascript/article-form/elements/moreConfig.jsx b/app/javascript/article-form/elements/moreConfig.jsx
@@ -1,8 +1,6 @@
 import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
-import { generateMainImage } from '../actions'
-
-
+import { generateMainImage } from '../actions';
 
 // const ImageManagement = ({ onExit }) => (
 export default class MoreConfig extends Component {
@@ -14,50 +12,91 @@ export default class MoreConfig extends Component {
   handleSeriesButtonClick = e => {
     e.preventDefault();
     this.props.onConfigChange(e);
-  }
+  };
 
   render() {
     const { onExit, passedData, onSaveDraft } = this.props;
     let publishedField = '';
-    let seriesTip = <small>Will this post be part of a series? Give the series a unique name. (Series visible once it has multiple posts)</small>
+    let seriesTip = (
+      <small>
+        Will this post be part of a series? Give the series a unique name.
+        (Series visible once it has multiple posts)
+      </small>
+    );
     if (passedData.allSeries.length > 0) {
-      const seriesNames = passedData.allSeries.map( name => {
-        return <button name='series' onClick={this.props.onConfigChange} value={name}>{name}</button>
-      })
-      seriesTip = <small>Existing series: {seriesNames}</small>
+      const seriesNames = passedData.allSeries.map(name => {
+        return (
+          <button
+            name="series"
+            onClick={this.props.onConfigChange}
+            value={name}
+          >
+            {name}
+          </button>
+        );
+      });
+      seriesTip = (
+        <small>
+          Existing series:
+          {seriesNames}
+        </small>
+      );
     }
     if (passedData.published) {
-      publishedField =  <div>
-                          <h4>Danger Zone</h4>
-                          <button onClick={onSaveDraft}>Unpublish Post</button>
-                        </div>
-
+      publishedField = (
+        <div>
+          <h4>Danger Zone</h4>
+          <button onClick={onSaveDraft}>Unpublish Post</button>
+        </div>
+      );
     }
-    return   <div
-                className="articleform__overlay"
-              >
-              <h3>Additional Config/Settings</h3>
-              <button
-                class="articleform__exitbutton"
-                data-content="exit"
-                onClick={onExit}
-                >×</button>
-              <div>
-                <label>Canonical URL</label>
-                <input type="text" value={passedData.canonicalUrl} name="canonicalUrl" onKeyUp={this.props.onConfigChange}/>
-              </div>
-              <small>Change meta tag <code>canonical_url</code> if this post was first published elsewhere (like your own blog)</small>
-              <div>
-                <label>Series Name</label>
-                <input type="text" value={passedData.series} name="series" onKeyUp={this.props.onConfigChange}/>
-              </div>
-              {seriesTip}
-              <div><button class="articleform__donebutton" onClick={onExit}>Done</button></div>
-              {publishedField}
-             </div>
+    return (
+      <div className="articleform__overlay">
+        <h3>Additional Config/Settings</h3>
+        <button
+          className="articleform__exitbutton"
+          data-content="exit"
+          onClick={onExit}
+        >
+          ×
+        </button>
+        <div>
+          <label>Canonical URL</label>
+          <input
+            type="text"
+            value={passedData.canonicalUrl}
+            name="canonicalUrl"
+            onKeyUp={this.props.onConfigChange}
+          />
+        </div>
+        <small>
+          Change meta tag
+          <code>canonical_url</code>
+          {' '}
+if this post was first published elsewhere
+          (like your own blog)
+        </small>
+        <div>
+          <label>Series Name</label>
+          <input
+            type="text"
+            value={passedData.series}
+            name="series"
+            onKeyUp={this.props.onConfigChange}
+          />
+        </div>
+        {seriesTip}
+        <div>
+          <button className="articleform__donebutton" onClick={onExit}>
+            Done
+          </button>
+        </div>
+        {publishedField}
+      </div>
+    );
   }
 }
 
 MoreConfig.propTypes = {
   onExit: PropTypes.func.isRequired,
-};
+};
diff --git a/app/javascript/article-form/elements/notice.jsx b/app/javascript/article-form/elements/notice.jsx
@@ -2,7 +2,13 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 
 const Notice = ({ published }) => (
-  <div className={'articleform__notice articleform__notice--'+(published ? "publishing" : "draft")}>{published ? "Publishing..." : "Saving Draft..."}</div>
+  <div
+    className={`articleform__notice articleform__notice--${
+      published ? 'publishing' : 'draft'
+    }`}
+  >
+    {published ? 'Publishing...' : 'Saving Draft...'}
+  </div>
 );
 
 Notice.propTypes = {

diff --git a/app/javascript/article-form/elements/orgSettings.jsx b/app/javascript/article-form/elements/orgSettings.jsx
@@ -2,11 +2,17 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 
 const OrgSettings = ({ organization, postUnderOrg, onToggle }) => (
-  <div
-    className='articleform__orgsettings'
-    onClick={onToggle}
-    >
-    <img src={organization.profile_image_90} style={{opacity: postUnderOrg ? '1' : '0.7' }} /> {organization.name} <button class={postUnderOrg ? 'yes' : 'no'}>{postUnderOrg ? '✅ YES' : '◻️ NO'}</button>
+  <div className="articleform__orgsettings" onClick={onToggle}>
+    <img
+      src={organization.profile_image_90}
+      style={{ opacity: postUnderOrg ? '1' : '0.7' }}
+    />
+    {' '}
+    {organization.name}
+    {' '}
+    <button className={postUnderOrg ? 'yes' : 'no'}>
+      {postUnderOrg ? '✅ YES' : '◻️ NO'}
+    </button>
   </div>
 );
 

diff --git a/app/javascript/article-form/elements/tags.jsx b/app/javascript/article-form/elements/tags.jsx
@@ -100,7 +100,7 @@ class Tags extends Component {
   };
 
   handleInput = e => {
-    let value = e.target.value;
+    let { value } = e.target;
     // If we start typing immediately after a comma, add a space
     // before what we typed.
     // e.g. If value = "javascript," and we type a "p",

diff --git a/app/javascript/chat/__tests__/channelDetails.test.jsx b/app/javascript/chat/__tests__/channelDetails.test.jsx
@@ -199,16 +199,19 @@ describe('<ChannelDetails />', () => {
       let inviteAttrAns;
       const included = (list, el) => {
         const keys = Object.keys(list);
-        for (var key of keys) {
+        for (const key of keys) {
           if (list[key].id === el.id) {
             return true;
           }
         }
       };
       for (let i = 0; i < searchedusersdivs.length; i += 1) {
-        if (!included(
+        if (
+          !included(
             moddetails.pending_users_select_fields,
-            searchedusers.searchedUsers[i])) {
+            searchedusers.searchedUsers[i],
+          )
+        ) {
           expect(
             searchedusersdivs
               .at(i)
@@ -226,7 +229,9 @@ describe('<ChannelDetails />', () => {
             }`,
           );
 
-          if (included(moddetails.channel_users, searchedusers.searchedUsers[i])) {
+          if (
+            included(moddetails.channel_users, searchedusers.searchedUsers[i])
+          ) {
             inviteMessage = `is already in ${moddetails.channel_name}`;
             inviteAttr = 'className';
             inviteAttrAns = 'channel__member';
@@ -247,8 +252,8 @@ describe('<ChannelDetails />', () => {
               .childAt(2)
               .attr(inviteAttr),
           ).toEqual(inviteAttrAns);
-          }
         }
+      }
       const tree = render(context);
       expect(tree).toMatchSnapshot();
     });

diff --git a/app/javascript/chat/__tests__/view.test.jsx b/app/javascript/chat/__tests__/view.test.jsx
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import render from 'preact-render-to-json';
-import { shallow } from 'preact-render-spy';
+import { deep } from 'preact-render-spy';
 import View from '../view';
 
 let exited = false;
@@ -43,12 +43,12 @@ describe('<View />', () => {
   });
 
   it('should render and test snapshot (with channel)', () => {
-    const tree = shallow(getView(sampleChannel));
+    const tree = deep(getView(sampleChannel), { depth: 2 });
     expect(tree).toMatchSnapshot();
   });
 
   it('should have the proper attributes and text values (no channel provided)', () => {
-    const context = shallow(getView([]));
+    const context = deep(getView([]), { depth: 2 });
     expect(context.find('.chatNonChatView').exists()).toEqual(true);
     expect(context.find('.container').exists()).toEqual(true);
 
@@ -64,7 +64,7 @@ describe('<View />', () => {
   });
 
   it('should have the proper attributes and text values (with channel provided)', () => {
-    const context = shallow(getView(sampleChannel));
+    const context = deep(getView(sampleChannel), { depth: 2 });
     expect(context.find('.chatNonChatView_contentblock').exists()).toEqual(
       true,
     );
@@ -103,14 +103,14 @@ describe('<View />', () => {
   });
 
   it('should trigger exit', () => {
-    const context = shallow(getView([]));
+    const context = deep(getView([]), { depth: 2 });
     context.find('.chatNonChatView_exitbutton').simulate('click');
     expect(exited).toEqual(true);
     exited = false;
   });
 
   it('should trigger accept', () => {
-    const context = shallow(getView(sampleChannel));
+    const context = deep(getView(sampleChannel), { depth: 2 });
     context
       .find('.cta')
       .at(0)
@@ -124,7 +124,7 @@ describe('<View />', () => {
   });
 
   it('should trigger decline', () => {
-    const context = shallow(getView(sampleChannel));
+    const context = deep(getView(sampleChannel), { depth: 2 });
     context
       .find('.cta')
       .at(1)