Code formating updated

package.json

@@ -9,9 +9,12 @@
     "@testing-library/jest-dom": "^5.11.1",
     "@testing-library/react": "^10.4.7",
     "@testing-library/user-event": "^12.0.11",
+    "husky": "^4.2.5",
     "konva": "^7.0.3",
+    "lint-staged": "^10.2.11",
     "material-ui-popup-state": "^1.6.1",
     "notistack": "^0.9.17",
+    "prettier": "^2.0.5",
     "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-debounce-input": "^3.2.2",
@@ -43,6 +46,16 @@
       "last 1 safari version"
     ]
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+      "prettier --write"
+    ]
+  },
   "devDependencies": {
     "@types/jest": "^26.0.5",
     "@types/node": "^13.13.0",

src/App.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { SnackbarProvider } from 'notistack';
+import { SnackbarProvider } from "notistack";
 import "./App.css";
 import Header from "./components/Header";
 import {

src/App.test.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   const { getByText } = render(<App />);
   const linkElement = getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

src/_config/api.config.ts

@@ -1 +1 @@
-export const API_URL = process.env.REACT_APP_API_URL
+export const API_URL = process.env.REACT_APP_API_URL;

src/_helpers/service.helpers.ts

@@ -1,32 +1,32 @@
-import { usersService } from '../services'
-import { User } from '../types';
+import { usersService } from "../services";
+import { User } from "../types";
 
 export function authHeader() {
-    // return authorization header with jwt token
-    const userString = localStorage.getItem('user')
-    if (userString) {
-        const user: User = JSON.parse(userString);
-        if (user && user.token) {
-            return { 'Authorization': 'Bearer ' + user.token };
-        }
+  // return authorization header with jwt token
+  const userString = localStorage.getItem("user");
+  if (userString) {
+    const user: User = JSON.parse(userString);
+    if (user && user.token) {
+      return { Authorization: "Bearer " + user.token };
     }
-    return [];
+  }
+  return [];
 }
 
 export function handleResponse(response: Response) {
-    return response.text().then((text: string) => {
-        const data = text && JSON.parse(text);
-        if (!response.ok) {
-            if (response.status === 401) {
-                // auto logout if 401 response returned from api
-                usersService.logout();
-                window.location.reload();
-            }
+  return response.text().then((text: string) => {
+    const data = text && JSON.parse(text);
+    if (!response.ok) {
+      if (response.status === 401) {
+        // auto logout if 401 response returned from api
+        usersService.logout();
+        window.location.reload();
+      }
 
-            const error = (data && data.message) || response.statusText;
-            return Promise.reject(error);
-        }
+      const error = (data && data.message) || response.statusText;
+      return Promise.reject(error);
+    }
 
-        return data;
-    });
-}
+    return data;
+  });
+}

src/components/DrawArea.tsx

@@ -126,7 +126,11 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
     <React.Fragment>
       <Grid container direction="column">
         <Grid item>
-          <ImageDetails type={type} branchName={branchName} imageName={imageName} />
+          <ImageDetails
+            type={type}
+            branchName={branchName}
+            imageName={imageName}
+          />
         </Grid>
         {imageStatus === "loading" && (
           <Grid

src/components/PrivateRoute.tsx

@@ -4,27 +4,27 @@ import { useAuthState } from "../contexts";
 import { routes } from "../constants";
 
 const PrivateRoute: React.SFC<RouteProps> = ({
-    component: Component,
-    ...rest
+  component: Component,
+  ...rest
 }) => {
-    const { loggedIn } = useAuthState();
-    if (!Component) {
-        return null;
-    }
-    return (
-        <Route
-            {...rest}
-            render={(props) =>
-                loggedIn ? (
-                    <Component {...props} />
-                ) : (
-                        <Redirect
-                            to={{ pathname: routes.LOGIN, state: { from: props.location } }}
-                        />
-                    )
-            }
-        />
-    );
+  const { loggedIn } = useAuthState();
+  if (!Component) {
+    return null;
+  }
+  return (
+    <Route
+      {...rest}
+      render={(props) =>
+        loggedIn ? (
+          <Component {...props} />
+        ) : (
+          <Redirect
+            to={{ pathname: routes.LOGIN, state: { from: props.location } }}
+          />
+        )
+      }
+    />
+  );
 };
 
 export default PrivateRoute;

src/components/TestRunDetails.tsx

@@ -16,7 +16,7 @@ export const TestRunDetails: React.FunctionComponent<IProps> = ({
           <Typography>OS: {testRun.os}</Typography>
         </Grid>
       )}
-       {testRun.device && (
+      {testRun.device && (
         <Grid item>
           <Typography>Device: {testRun.device}</Typography>
         </Grid>

src/components/TestStatusChip.tsx

@@ -19,7 +19,7 @@ const TestStatusChip: React.FunctionComponent<{ status: TestStatus }> = ({
     default:
       color = undefined;
   }
-  return <Chip variant="outlined" color={color} label={status} size="small"/>;
+  return <Chip variant="outlined" color={color} label={status} size="small" />;
 };
 
 export default TestStatusChip;

src/constants/index.ts

@@ -1 +1 @@
-export * from './routes'
+export * from "./routes";

src/constants/routes.ts

@@ -1,7 +1,7 @@
 export const routes = {
   // open
-  LOGIN: '/login',
-  REGISTER: '/register',
+  LOGIN: "/login",
+  REGISTER: "/register",
 
   // secured
   HOME: "/",

src/contexts/index.ts

@@ -1,4 +1,4 @@
-export * from './auth.context'
-export * from './build.context'
-export * from './project.context'
-export * from './testRun.context'
+export * from "./auth.context";
+export * from "./build.context";
+export * from "./project.context";
+export * from "./testRun.context";

src/contexts/socket.context.tsx

@@ -1,6 +1,11 @@
 import * as React from "react";
 import socketIOClient from "socket.io-client";
-import { useBuildState, useBuildDispatch, addBuild, updateBuild } from "./build.context";
+import {
+  useBuildState,
+  useBuildDispatch,
+  addBuild,
+  updateBuild,
+} from "./build.context";
 import { Build, TestRun } from "../types";
 import { useTestRunDispatch, addTestRun } from "./testRun.context";
 

src/pages/ProjectListPage.tsx

@@ -132,7 +132,7 @@ const ProjectsListPage = () => {
           <Grid item xs={4} key={project.id}>
             <Card>
               <CardContent>
-                <Typography>Key: {project.id}</Typography>
+                <Typography>Id: {project.id}</Typography>
                 <Typography>Name: {project.name}</Typography>
                 <Typography>Main branch: {project.mainBranchName}</Typography>
                 <Typography>

src/pages/ProjectPage.tsx

@@ -71,10 +71,7 @@ const ProjectPage = () => {
   const { enqueueSnackbar } = useSnackbar();
   const { buildList, selectedBuildId } = useBuildState();
   const buildDispatch = useBuildDispatch();
-  const {
-    testRuns,
-    selectedTestRunIndex,
-  } = useTestRunState();
+  const { testRuns, selectedTestRunIndex } = useTestRunState();
   const testRunDispatch = useTestRunDispatch();
 
   // filter