Add ESLint ❤️

deadcoder0904 · deadcoder0904 · commit cc7e2738acca · 2018-08-12T11:25:57.000+05:30
diff --git a/.eslintrc b/.eslintrc
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,25 @@
+{
+  "extends": ["airbnb", "eslint:recommended", "plugin:react/recommended"],
+  "parser": "babel-eslint",
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "quotes": [
+      "error",
+      "double",
+      {
+        "avoidEscape": true,
+        "allowTemplateLiterals": true
+      }
+    ],
+    "import/prefer-default-export": "off",
+    "no-console": "off",
+    "no-undef": "off",
+    "no-unused-vars": "off",
+    "react/prop-types": "off",
+    "react/jsx-filename-extension": "off",
+    "react/jsx-indent-props": "off",
+    "import/no-extraneous-dependencies": "off",
+    "no-useless-escape": "off"
+  }
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+  "prettier.eslintIntegration": true,
+  "editor.formatOnSave": true,
+  "files.exclude": {
+    "**/*.git": true,
+    "**/*.DS_Store": true
+  }
+}
diff --git a/package.json b/package.json
@@ -15,7 +15,9 @@
   "version": "1.6.0",
   "license": "MIT",
   "scripts": {
-    "precommit": "pretty-quick --staged",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "precommit": "npm run lint && pretty-quick --staged",
     "dev": "electron-webpack dev",
     "compile": "electron-webpack",
     "pack": "electron-builder --dir",
@@ -119,11 +121,17 @@
     "@babel/plugin-transform-runtime": "^7.0.0-beta.56",
     "@babel/preset-env": "^7.0.0-beta.56",
     "@babel/preset-react": "^7.0.0-beta.56",
+    "babel-eslint": "^8.2.6",
     "babel-plugin-emotion": "^9.2.6",
     "electron": "^3.0.0-beta.1",
     "electron-builder": "^20.27.1",
     "electron-webpack": "^2.1.2",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-prettier": "^2.6.2",
+    "eslint-plugin-react": "^7.10.0",
     "file-loader": "^1.1.11",
     "husky": "^0.14.3",
     "prettier": "1.14.2",
diff --git a/src/components/Main/CreateTodo.js b/src/components/Main/CreateTodo.js
@@ -12,7 +12,6 @@ import { Error } from "../Error/index";
 
 import { GET_TODOS_BY_PRODUCT } from "../../graphql/queries/GET_TODOS_BY_PRODUCT";
 import { CREATE_TODO } from "../../graphql/mutation/CREATE_TODO";
-import { SWITCH_SELECTED_PRODUCT } from "../../graphql/mutation/Local/SWITCH_SELECTED_PRODUCT";
 import { GET_STATUS } from "../../graphql/queries/Local/GET_STATUS";
 
 const InputBox = styled.div`
diff --git a/src/components/Main/Status.js b/src/components/Main/Status.js
@@ -38,7 +38,7 @@ const Btn = styled.button`
 const StatusContainer = ({ theme }) => (
   <Query query={GET_STATUS}>
     {({ data: { status }, loading, error }) => {
-      if (loading)
+      if (loading) {
         return (
           <Loading
             color={theme.loading.color}
@@ -47,6 +47,7 @@ const StatusContainer = ({ theme }) => (
             height={30}
           />
         );
+      }
       if (error) return <Error err={error} />;
       return (
         <Mutation mutation={SET_STATUS}>
diff --git a/src/components/Main/index.js b/src/components/Main/index.js
@@ -19,8 +19,6 @@ import { GET_STATUS } from "../../graphql/queries/Local/GET_STATUS";
 import { COMPLETE_TODO } from "../../graphql/mutation/COMPLETE_TODO";
 import { UNCOMPLETE_TODO } from "../../graphql/mutation/UNCOMPLETE_TODO";
 
-import { state } from "../../utils/state";
-
 const Content = styled.div`
   background: ${props => props.theme.global.bgColor};
   height: 100vh;
diff --git a/src/components/Products/index.js b/src/components/Products/index.js
@@ -10,8 +10,6 @@ import { SearchBar } from "../SearchBar/index";
 
 import { SWITCH_SELECTED_PRODUCT } from "../../graphql/mutation/Local/SWITCH_SELECTED_PRODUCT";
 import { GET_SELECTED_PRODUCT } from "../../graphql/queries/Local/GET_SELECTED_PRODUCT";
-import { GET_TODOS_BY_PRODUCT } from "../../graphql/queries/GET_TODOS_BY_PRODUCT";
-import { GET_STATUS } from "../../graphql/queries/Local/GET_STATUS";
 
 import { state } from "../../utils/state";
 
@@ -56,7 +54,7 @@ class ProductsContainer extends React.Component {
     const { products, theme } = this.props;
 
     return (
-      <>
+      <React.Fragment>
         <SearchBar
           input={input}
           onInputChange={this._onInputChange}
@@ -77,55 +75,39 @@ class ProductsContainer extends React.Component {
             return (
               <Container>
                 {this._filterProducts(products, input).map((product, i) => (
-                  <Query query={GET_STATUS} key={v4()}>
-                    {({ data: { status } }) => {
-                      if (loading)
-                        return (
-                          <Loading
-                            color={theme.loading.color}
-                            type="bubbles"
-                            width={50}
-                            height={50}
-                          />
-                        );
-                      if (error) return <Error err={error} />;
+                  <Mutation key={v4()} mutation={SWITCH_SELECTED_PRODUCT}>
+                    {mutate => {
+                      const highlightedProduct = selectedProduct
+                        ? product.name === selectedProduct.name
+                        : i === 0;
                       return (
-                        <Mutation mutation={SWITCH_SELECTED_PRODUCT}>
-                          {mutate => {
-                            const highlightedProduct = selectedProduct
-                              ? product.name === selectedProduct.name
-                              : i === 0;
-                            return (
-                              <Product
-                                onClick={() => {
-                                  if (highlightedProduct) return;
-                                  const selectedProduct = {
-                                    id: product.id,
-                                    name: product.name,
-                                    __typename: "Product",
-                                  };
-                                  state.set({ selectedProduct });
-                                  mutate({
-                                    variables: selectedProduct,
-                                  });
-                                }}
-                              >
-                                <Name highlight={highlightedProduct}>
-                                  {product.name}
-                                </Name>
-                              </Product>
-                            );
+                        <Product
+                          onClick={() => {
+                            if (highlightedProduct) return;
+                            const selectedProduct = {
+                              id: product.id,
+                              name: product.name,
+                              __typename: "Product",
+                            };
+                            state.set({ selectedProduct });
+                            mutate({
+                              variables: selectedProduct,
+                            });
                           }}
-                        </Mutation>
+                        >
+                          <Name highlight={highlightedProduct}>
+                            {product.name}
+                          </Name>
+                        </Product>
                       );
                     }}
-                  </Query>
+                  </Mutation>
                 ))}
               </Container>
             );
           }}
         </Query>
-      </>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/components/Titlebar/Moon.js b/src/components/Titlebar/Moon.js
@@ -3,6 +3,9 @@ import { Mutation, Query } from "react-apollo";
 import styled from "react-emotion";
 import { withTheme } from "emotion-theming";
 
+import { Loading } from "../Loading/index";
+import { Error } from "../Error/index";
+
 import { SWITCH_MODE } from "../../graphql/mutation/Local/SWITCH_MODE";
 import { GET_MODE } from "../../graphql/queries/Local/GET_MODE";
 
@@ -41,7 +44,7 @@ const MoonContainer = ({ theme }) => (
     {switchMode => (
       <Query query={GET_MODE}>
         {({ data: { mode }, loading, error }) => {
-          if (loading)
+          if (loading) {
             return (
               <Loading
                 color={theme.loading.color}
@@ -50,6 +53,7 @@ const MoonContainer = ({ theme }) => (
                 height={10}
               />
             );
+          }
           if (error) return <Error err={error} />;
           const { src, alt, pressed } = modeObject[mode];
           return (
diff --git a/src/components/Titlebar/index.js b/src/components/Titlebar/index.js
@@ -1,7 +1,6 @@
 import React from "react";
 import styled, { css } from "react-emotion";
 import { callMain, answerMain } from "electron-better-ipc";
-import { Mutation } from "react-apollo";
 
 import {
   Close,
@@ -13,9 +12,6 @@ import {
   Unfocused,
 } from "./WindowButtons/index";
 import { Moon } from "./Moon";
-import { Logo } from "../Logo/index";
-
-import construction from "../../static/construction.svg";
 
 const Container = styled.div`
   display: flex;
@@ -37,7 +33,7 @@ export class Titlebar extends React.Component {
   state = { iconsHovered: false, isFullScreen: false };
 
   componentDidMount() {
-    answerMain("window-blur", isBlur => {
+    answerMain("window-blur", () => {
       this.setState(prevState => ({
         isBlur: !prevState.isBlur,
       }));
diff --git a/src/graphql/queries/GET_PRODUCTS.js b/src/graphql/queries/GET_PRODUCTS.js
@@ -6,9 +6,9 @@ export const GET_PRODUCTS = gql`
       products {
         name
         website_url
-				todos(limit: $limit, offset: $offset) {
-					body
-				}
+        todos(limit: $limit, offset: $offset) {
+          body
+        }
       }
     }
   }
diff --git a/src/main/autoUpdater.js b/src/main/autoUpdater.js
@@ -3,7 +3,6 @@ import log from "electron-log";
 
 export class AppUpdater {
   constructor() {
-    const log = require("electron-log");
     log.transports.file.level = "info";
     autoUpdater.logger = log;
     autoUpdater.checkForUpdatesAndNotify();
diff --git a/src/main/createWindow.js b/src/main/createWindow.js
@@ -2,6 +2,7 @@ import { BrowserWindow } from "electron";
 import * as path from "path";
 import { format as formatUrl } from "url";
 import { callRenderer } from "electron-better-ipc";
+
 const isDevelopment = process.env.NODE_ENV !== "production";
 
 export const createMainWindow = mainWindow => {
@@ -10,7 +11,7 @@ export const createMainWindow = mainWindow => {
     height: 768,
     minWidth: 1024,
     minHeight: 768,
-    /* 
+    /*
     only setting minWidth or minHeight doesn't work, have to set width & height too
     also setting one of minWidth or minHeight doesn't work, have to set both minWidth & minHeight
     */
diff --git a/src/main/index.js b/src/main/index.js
@@ -1,8 +1,5 @@
-import { app, BrowserWindow, Menu, shell } from "electron";
-import * as path from "path";
-import { format as formatUrl } from "url";
-import { answerRenderer, callRenderer } from "electron-better-ipc";
-const isDevelopment = process.env.NODE_ENV !== "production";
+import { app } from "electron";
+import { answerRenderer } from "electron-better-ipc";
 
 import { createMenu } from "./menu";
 import { createMainWindow } from "./createWindow";
diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -1,16 +1,14 @@
 import React from "react";
 import styled from "react-emotion";
 import { withTheme } from "emotion-theming";
-import { Query, ApolloConsumer } from "react-apollo";
+import { Query } from "react-apollo";
 
 import { Main } from "../components/Main/index";
 import { Sidebar } from "../components/Sidebar/index";
 import { Loading } from "../components/Loading/index";
 import { Error } from "../components/Error/index";
 
 import { GET_ALL_PRODUCTS } from "../graphql/queries/GET_ALL_PRODUCTS";
-import { GET_TODOS_BY_PRODUCT } from "../graphql/queries/GET_TODOS_BY_PRODUCT";
-import { SWITCH_SELECTED_PRODUCT } from "../graphql/mutation/Local/SWITCH_SELECTED_PRODUCT";
 
 import { state } from "../utils/state";
 
@@ -19,38 +17,30 @@ const Container = styled.div`
   -webkit-app-region: no-drag;
 `;
 
-class HomeContainer extends React.Component {
-  render() {
-    const { theme } = this.props;
-    return (
-      <Container>
-        <Query
-          query={GET_ALL_PRODUCTS}
-          variables={{ id: state.get("user.id") }}
-        >
-          {({ data: { user }, loading, error }) => {
-            if (loading)
-              return (
-                <Loading
-                  color={theme.loading.color}
-                  type="bubbles"
-                  width={100}
-                  height={100}
-                />
-              );
-            if (error) return <Error err={error} />;
-            const { id, name } = user.products ? user.products[0] : [];
-            return (
-              <>
-                <Sidebar products={user.products} />
-                <Main id={id} name={name} />
-              </>
-            );
-          }}
-        </Query>
-      </Container>
-    );
-  }
-}
+const HomeContainer = ({ theme }) => (
+  <Container>
+    <Query query={GET_ALL_PRODUCTS} variables={{ id: state.get("user.id") }}>
+      {({ data: { user }, loading, error }) => {
+        if (loading)
+          return (
+            <Loading
+              color={theme.loading.color}
+              type="bubbles"
+              width={100}
+              height={100}
+            />
+          );
+        if (error) return <Error err={error} />;
+        const { id, name } = user.products ? user.products[0] : [];
+        return (
+          <React.Fragment>
+            <Sidebar products={user.products} />
+            <Main id={id} name={name} />
+          </React.Fragment>
+        );
+      }}
+    </Query>
+  </Container>
+);
 
 export const Home = withTheme(HomeContainer);
diff --git a/src/pages/Token.js b/src/pages/Token.js
diff --git a/src/renderer/index.js b/src/renderer/index.js
diff --git a/src/styles/theme.js b/src/styles/theme.js
diff --git a/src/utils/state.js b/src/utils/state.js
diff --git a/src/utils/stateLink.js b/src/utils/stateLink.js
diff --git a/yarn.lock b/yarn.lock
