Add Prettier, ESLint, Pretty Quick & Husky 😎

Author: deadcoder0904

.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": "react-app",
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": false,
+  "trailingComma": "es5"
+}

package.json

@@ -12,9 +12,10 @@
     "url": "https://github.com/deadcoder0904/wip-desktop.git"
   },
   "homepage": "https://akshaykadam.me/apps/wip-desktop",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "license": "MIT",
   "scripts": {
+    "precommit": "pretty-quick --staged",
     "dev": "electron-webpack dev",
     "compile": "electron-webpack",
     "pack": "electron-builder --dir",
@@ -122,7 +123,11 @@
     "electron": "^3.0.0-beta.1",
     "electron-builder": "^20.27.1",
     "electron-webpack": "^2.1.2",
+    "eslint-plugin-prettier": "^2.6.2",
     "file-loader": "^1.1.11",
+    "husky": "^0.14.3",
+    "prettier": "1.14.2",
+    "pretty-quick": "^1.6.0",
     "webpack": "^4.16.5"
   },
   "resolutions": {

src/components/Loading/index.js

@@ -14,7 +14,7 @@ export const Loading = ({
   type = "spinningBubbles",
   color = "#000",
   width = 50,
-  height = 50
+  height = 50,
 }) => (
   <Container>
     <ReactLoading type={type} color={color} width={width} height={height} />

src/components/Main/CreateTodo.js

@@ -52,8 +52,8 @@ class CreateTodoContainer extends React.Component {
       mutate({
         variables: {
           body: this.state.input,
-          completedAt: status === "DONE" ? new Date().toISOString() : null
-        }
+          completedAt: status === "DONE" ? new Date().toISOString() : null,
+        },
       });
       this._clearInput();
     }
@@ -94,24 +94,24 @@ class CreateTodoContainer extends React.Component {
                     id: v4(),
                     body: input,
                     completed_at:
-                      status === "DONE" ? new Date().toISOString() : null
-                  }
+                      status === "DONE" ? new Date().toISOString() : null,
+                  },
                 }}
                 update={(cache, { data: { createTodo } }) => {
                   const data = cache.readQuery({
                     query: GET_TODOS_BY_PRODUCT,
-                    variables: { id, completed: status === "DONE" }
+                    variables: { id, completed: status === "DONE" },
                   });
                   const todos = data.product.todos.map(t => t); // make a shallow copy otherwise error "Object is not extensible" is thrown
                   todos.push(createTodo);
                   const newData = {
                     ...data,
-                    product: { ...data.product, todos }
+                    product: { ...data.product, todos },
                   };
                   cache.writeQuery({
                     query: GET_TODOS_BY_PRODUCT,
                     variables: { id, completed: status === "DONE" },
-                    data: newData
+                    data: newData,
                   });
                 }}
               >

src/components/Main/Status.js

@@ -57,7 +57,7 @@ const StatusContainer = ({ theme }) => (
                   const status = "PENDING";
                   setStatus({ variables: { status } });
                   state.set({
-                    status
+                    status,
                   });
                 }}
                 highlight={status === "PENDING"}
@@ -69,7 +69,7 @@ const StatusContainer = ({ theme }) => (
                   const status = "DONE";
                   setStatus({ variables: { status } });
                   state.set({
-                    status
+                    status,
                   });
                 }}
                 highlight={status === "DONE"}

src/components/Main/index.js

@@ -138,17 +138,17 @@ class MainContainer extends React.Component {
                                   __typename: "Todo",
                                   id: todo.id,
                                   body: todo.body,
-                                  completed_at
-                                }
+                                  completed_at,
+                                },
                               }}
                               update={(cache, { data }) => {
                                 // remove todo item from current status ,i.e, PENDING or DONE
                                 const cacheData1 = cache.readQuery({
                                   query: GET_TODOS_BY_PRODUCT,
                                   variables: {
                                     id: productId,
-                                    completed
-                                  }
+                                    completed,
+                                  },
                                 });
 
                                 const todos1 = cacheData1.product.todos.filter(
@@ -159,26 +159,26 @@ class MainContainer extends React.Component {
                                   ...cacheData1,
                                   product: {
                                     ...cacheData1.product,
-                                    todos: todos1
-                                  }
+                                    todos: todos1,
+                                  },
                                 };
 
                                 cache.writeQuery({
                                   query: GET_TODOS_BY_PRODUCT,
                                   variables: {
                                     id: productId,
-                                    completed
+                                    completed,
                                   },
-                                  data: newData1
+                                  data: newData1,
                                 });
 
                                 // add todo item to current status ,i.e, PENDING or DONE
                                 const cacheData2 = cache.readQuery({
                                   query: GET_TODOS_BY_PRODUCT,
                                   variables: {
                                     id: productId,
-                                    completed: status !== "DONE"
-                                  }
+                                    completed: status !== "DONE",
+                                  },
                                 });
 
                                 const todos2 = cacheData2.product.todos.map(
@@ -191,23 +191,23 @@ class MainContainer extends React.Component {
                                       : "completeTodo"
                                   ],
                                   id: todo.id,
-                                  completed_at
+                                  completed_at,
                                 });
                                 const newData2 = {
                                   ...cacheData2,
                                   product: {
                                     ...cacheData2.product,
-                                    todos: todos2
-                                  }
+                                    todos: todos2,
+                                  },
                                 };
 
                                 cache.writeQuery({
                                   query: GET_TODOS_BY_PRODUCT,
                                   variables: {
                                     id: productId,
-                                    completed: status !== "DONE"
+                                    completed: status !== "DONE",
                                   },
-                                  data: newData2
+                                  data: newData2,
                                 });
                               }}
                             >

src/components/Products/index.js

@@ -102,11 +102,11 @@ class ProductsContainer extends React.Component {
                                   const selectedProduct = {
                                     id: product.id,
                                     name: product.name,
-                                    __typename: "Product"
+                                    __typename: "Product",
                                   };
                                   state.set({ selectedProduct });
                                   mutate({
-                                    variables: selectedProduct
+                                    variables: selectedProduct,
                                   });
                                 }}
                               >

src/components/Titlebar/Moon.js

@@ -27,13 +27,13 @@ const modeObject = {
   DARK: {
     src: LIGHT_MOON,
     alt: "Enable Light mode",
-    pressed: "false"
+    pressed: "false",
   },
   LIGHT: {
     src: DARK_MOON,
     alt: "Enable Dark mode",
-    pressed: "true"
-  }
+    pressed: "true",
+  },
 };
 
 const MoonContainer = ({ theme }) => (

src/components/Titlebar/WindowButtons/index.js

@@ -25,5 +25,5 @@ export {
   Minimize,
   MinimizePressed,
   Maximize,
-  MaximizePressed
+  MaximizePressed,
 };