💄Setting up eslint

Joshua-rose · Apr 2, 2020 · 6ba1d29 · 6ba1d29
1 parent 0c7bb08
commit 6ba1d29
Show file tree

Hide file tree

Showing 17 changed files with 399 additions and 227 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,52 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": [
+        "plugin:react/recommended",
+        "airbnb",
+        "plugin:import/typescript"
+    ],
+    "ignorePatterns": ["**/generated/*.*", "node_modules/", "*.scss"],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+        "import/extensions": [2, {
+            tsx: "never",
+            jsx: "never",
+            ts: "never",
+            js: "never",
+        }],
+        "max-len":[1, 200],
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": ["warn", {
+            "vars": "all",
+            "args": "after-used",
+            "ignoreRestSiblings": false
+        }],
+        "react/no-array-index-key": 0,
+        "import/prefer-default-export": 1,
+        "react/prop-types": [1, {
+            ignore: [
+                'children',
+            ]
+        }]
+    }
+};
diff --git a/package.json b/package.json
@@ -51,6 +51,14 @@
     "@graphql-codegen/introspection": "1.13.1",
     "@graphql-codegen/typescript": "1.13.1",
     "@graphql-codegen/typescript-operations": "1.13.1",
-    "@graphql-codegen/typescript-react-apollo": "1.13.1"
+    "@graphql-codegen/typescript-react-apollo": "1.13.1",
+    "@typescript-eslint/eslint-plugin": "^2.26.0",
+    "@typescript-eslint/parser": "^2.26.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^2.5.0"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,53 +1,49 @@
 import React, { useState } from 'react';
 // import logo from './logo.svg';
 import './App.scss';
-import Issues from './components/Issues'
-import RepoList, { RepoDetails } from './components/Repo'
-import Header from './components/Header'
-import Login from './components/Login'
+import Issues from './components/Issues';
+import RepoList from './components/Repo';
+import { RepoDetails } from './components/Repo/types';
+import AppContext from './utils/AppContext';
+import Header from './components/Header';
+import Login from './components/Login';
 
 
-const AppContext = React.createContext({
-  setAppError: (error:any)=>{},
-  setToken: (tokenString: string) => { },
-  token: '',
-  setLogin: (loginString: string) => { },
-});
 function App() {
-  const initialRepoDetails: RepoDetails = { owner: '', repo: '' }
-  const [repoDetails, setRepoDetails] = useState(initialRepoDetails)
-  const [appError, setAppError] = useState({})
-  const [token, setToken] = useState('')
-  const [login, setLogin] = useState('')
-
+  const initialRepoDetails: RepoDetails = { owner: '', repo: '' };
+  const [repoDetails, setRepoDetails] = useState(initialRepoDetails);
+  const [appError, setAppError] = useState({});
+  const [token, setToken] = useState('');
+  const [login, setLogin] = useState('');
+  const { owner, repo } = repoDetails;
   return (
     <div className="App">
       <AppContext.Provider value={{
         setAppError,
         setToken,
         token,
         setLogin,
-      }}>
+      }}
+      >
+
+        <Header />
+        {token !== '' ? (
+          <Login>
+            <RepoList login={login} setRepoDetails={setRepoDetails} />
+            {repoDetails.owner && repoDetails.repo && (
+            <Issues repo={repo} owner={owner} />
 
-      <Header></Header>
-      {token !== ''? (
-        <Login>
-          <RepoList login={login} setRepoDetails={setRepoDetails}></RepoList>
-          {repoDetails.owner && repoDetails.repo && (
-            <Issues {...repoDetails}></Issues>
-
             )}
 
-        </Login>
-      ):
-      (
-        <div className="not_logged_in"></div>
+          </Login>
         )
-      }
+          : (
+            <div className="not_logged_in" />
+          )}
       </AppContext.Provider>
     </div>
   );
 }
 
 export default App;
-export {AppContext}
+export { AppContext };
diff --git a/src/components/Auth/index.tsx b/src/components/Auth/index.tsx
@@ -1,59 +1,59 @@
-import React, {useEffect, useContext} from 'react'
-import netlify from 'netlify-auth-providers'
-import {AppContext} from '../../App'
+import React, { useEffect, useContext } from 'react';
+import Netlify from 'netlify-auth-providers';
+import AppContext from '../../utils/AppContext';
 
 interface Props {
 
 }
 
-const Auth = (props: Props) => {
-    // const testForToken = localStorage.getItem('GitHubToken') || '';
-    // const [token, setToken] = useState(testForToken)
-    const context = useContext(AppContext)
-    const {token, setToken} = context
-    useEffect(() => {
-        const localToken = localStorage.getItem('GitHubToken')
-        if (token === '' && localToken) setToken(localToken as string)
-        }, [])
+const Auth = () => {
+  // const testForToken = localStorage.getItem('GitHubToken') || '';
+  // const [token, setToken] = useState(testForToken)
+  const context = useContext(AppContext);
+  const { token, setToken } = context;
+  useEffect(() => {
+    const localToken = localStorage.getItem('GitHubToken');
+    if (token === '' && localToken) setToken(localToken as string);
+  }, []);
     /**
      * see @link{https://github.com/kentcdodds/react-github-profile/blob/b0c6a4628535fcea32f4f6617efd03f6b29574f4/src/github-client.js#L1}
      */
     type auth = {
         token: string
     }
     async function authWithGitHub(): Promise<auth> {
-        return new Promise((resolve, reject) => {
-            var authenticator = new netlify({
-                site_id: '6c020ac7-0ac3-4c9a-a2b6-7928880178c4',
-            })
-            authenticator.authenticate(
-                { provider: 'github', scope: 'public_repo,repo,read:org,read:user' },
-                function (err: any, data: { token: string }) {
-                    if (err) {
-                        reject(err)
-                    }
-                    resolve(data)
-                },
-            )
-        })
+      return new Promise((resolve, reject) => {
+        const authenticator = new Netlify({
+          site_id: '6c020ac7-0ac3-4c9a-a2b6-7928880178c4',
+        });
+        authenticator.authenticate(
+          { provider: 'github', scope: 'public_repo,repo,read:org,read:user' },
+          (err: any, data: { token: string }) => {
+            if (err) {
+              reject(err);
+            }
+            resolve(data);
+          },
+        );
+      });
     }
 
     const login = async () => {
-        const data = await authWithGitHub();
-        if (data) setToken(data.token);
-        localStorage.setItem('GitHubToken', data.token)
-    }
+      const data = await authWithGitHub();
+      if (data) setToken(data.token);
+      localStorage.setItem('GitHubToken', data.token);
+    };
     const logout = () => {
-        setToken('');
-        localStorage.removeItem('GitHubToken')
-    }
+      setToken('');
+      localStorage.removeItem('GitHubToken');
+    };
 
     return token ? (
-        <button type="button" onClick={logout}>Logout</button>
-    ) :
-        (
-            <button type="button" onClick={login}>Login</button>
-        )
-}
+      <button type="button" onClick={logout}>Logout</button>
+    )
+      : (
+        <button type="button" onClick={login}>Login</button>
+      );
+};
 
-export default Auth
+export default Auth;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,16 +1,14 @@
-import React from 'react'
-import Auth from '../Auth'
+import React from 'react';
+import Auth from '../Auth';
 
 interface Props {
-
-}
 
-const Header = (props: Props) => {
-    return (
-        <div id="Header">
-           <Auth></Auth> 
-        </div>
-    )
 }
 
-export default Header
+const Header = (props: Props) => (
+  <div id="Header">
+    <Auth />
+  </div>
+);
+
+export default Header;
diff --git a/src/components/Issues/Issues.tsx b/src/components/Issues/Issues.tsx
@@ -1,60 +1,63 @@
-import React from 'react'
-import XLSX from 'xlsx'
-import { IssueListQuery } from '../../generated/graphql'
-
+import React from 'react';
+import XLSX from 'xlsx';
+import { IssueListQuery } from '../../generated/graphql';
 
 
 interface Props {
     data: IssueListQuery,
     repo: string,
 }
-const className = 'IssueList'
+const className = 'IssueList';
 
 const Issues = ({ data, repo }: Props) => {
-    const createSheet = ()=>{
-        const wb = XLSX.utils.book_new();
-        const sheet = XLSX.utils.table_to_sheet(document.getElementById('data_table'));
-        XLSX.utils.book_append_sheet(wb, sheet, repo );
-        XLSX.writeFile(wb, `${repo} Issues.xlsx`);
-    }
-    return (
-        <div className={className}>
-            <h3>Issues</h3>
-            {
+  const createSheet = () => {
+    const wb = XLSX.utils.book_new();
+    const sheet = XLSX.utils.table_to_sheet(document.getElementById('data_table'));
+    XLSX.utils.book_append_sheet(wb, sheet, repo);
+    XLSX.writeFile(wb, `${repo} Issues.xlsx`);
+  };
+  return (
+    <div className={className}>
+      <h3>Issues</h3>
+      {
                 data.repository?.issues ? (
-                    <div>
+                  <div>
                     <table id="data_table">
-                        <thead>
-                            <tr>
-                                <th>Issue Title</th><th>Labels</th><th>Date Opened</th><th>Date Updated</th><th>Id</th><th>url</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {
-                                data.repository.issues.nodes?.map((issue,i) => (
-                                    <tr key={i}>
-                                        {[
+                      <thead>
+                        <tr>
+                          <th>Issue Title</th>
+                          <th>Labels</th>
+                          <th>Date Opened</th>
+                          <th>Date Updated</th>
+                          <th>Id</th>
+                          <th>url</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {
+                                data.repository.issues.nodes?.map((issue, i) => (
+                                  <tr key={i}>
+                                    {[
                                             issue?.title,
-                                            issue?.labels?.nodes?.map(label=>label?.name).join(';'),
+                                            issue?.labels?.nodes?.map((label) => label?.name).join(';'),
                                             issue?.createdAt,
                                             issue?.updatedAt,
                                             issue?.number,
                                             issue?.url,
-                                        ].map((value,j) => (<td key={`row${i}cell${j}`}>{value}</td>))
-                                        }
-                                    </tr>
+                                    ].map((value, j) => (<td key={`row${i}cell${j}`}>{value}</td>))}
+                                  </tr>
                                 ))
                             }
-                        </tbody>
+                      </tbody>
                     </table>
-                            <button type="button" className="createSheet" onClick={createSheet}>Export to Excel</button>
-                    </div>
+                    <button type="button" className="createSheet" onClick={createSheet}>Export to Excel</button>
+                  </div>
                 ) : (
-                        <div className="no_issues">No Issues found</div>
+                  <div className="no_issues">No Issues found</div>
                     )
             }
-        </div>
-    )
-}
+    </div>
+  );
+};
 
-export default Issues
+export default Issues;