[chaos] Configure eslint (#9)

* [chaos] Create local configs

* [chaos] Create ci configs

* [chaos] Create ignore file

* [chaos] Reference right packages

* [chaos] Autofix eslint errors

* [chaos] Configure root imports

* [chaos] Use absolute imports

* [chaos] Change eslint configs

* [chaos] Fix eslint errors

* [chaos] Change lint scripts

* [chaos] Change ci dockerfile

* [chaos] Change node version

* [chaos] Change from dockerfile

* [chaos] Change release dockerfile

.eslintignore

@@ -0,0 +1,7 @@
+.node_modules
+doc
+scripts
+build
+src/serviceWorkerRegistration.js
+src/service-worker.js
+src/reportWebVitals.js

dockerfile.ci

@@ -1,13 +1,14 @@
 FROM mcr.microsoft.com/dotnet/sdk:5.0
 
-RUN curl -sL https://deb.nodesource.com/setup_12.x | sh
+RUN curl -sL https://deb.nodesource.com/setup_14.x | sh
 
 RUN apt update
 RUN apt install ncftp -y
 RUN apt install lftp -y
 RUN apt install wget -y
 RUN apt install python3 -y
 RUN apt install nodejs -y
+RUN npm install -g yarn
 
 RUN curl -LO https://storage.googleapis.com/kubernetes-release/release/`curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt`/bin/linux/amd64/kubectl
 RUN chmod +x ./kubectl

dockerfile.from

@@ -1,10 +1,10 @@
-FROM node:14.16-alpine
+FROM node:14.17-alpine
 WORKDIR /srv/hermes.cam
 
 COPY package.json ./
 COPY yarn.lock ./
 
-RUN npm install
+RUN yarn install
 
 RUN rm package.json
 RUN rm yarn.lock

dockerfile.release

@@ -10,7 +10,7 @@ RUN echo '{ "version": "'$VERSION'" }' > ./public/version.json
 RUN yarn
 RUN yarn build
 
-FROM node:14.16-alpine
+FROM node:14.17-alpine
 WORKDIR /srv/hermes.cam
 COPY --from=build /srv/hermes.cam/build .
 

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": [
+    "src"
+  ]
+}

package.json

@@ -6,7 +6,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint . --ext=js,jsx --config .eslintconfig;",
+    "lint:fix": "eslint . --ext=js,jsx --fix --config .eslintconfig;"
   },
   "dependencies": {
     "@reduxjs/toolkit": "1.6.0",
@@ -15,6 +17,7 @@
     "@tensorflow/tfjs-backend-webgl": "3.7.0",
     "@tensorflow/tfjs-converter": "3.7.0",
     "@tensorflow/tfjs-core": "3.7.0",
+    "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-ga": "3.3.0",
@@ -37,14 +40,19 @@
     "workbox-strategies": "5.1.3",
     "workbox-streams": "5.1.3"
   },
-  "engines": {
-    "node": "14.16"
+  "devDependencies": {
+    "babel-eslint": "10.1.0",
+    "eslint": "7.28.0",
+    "eslint-config-standard": "16.0.3",
+    "eslint-plugin-filenames": "1.3.2",
+    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-promise": "5.1.0",
+    "eslint-plugin-react": "7.24.0",
+    "eslint-plugin-react-hooks": "4.2.0"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "engines": {
+    "node": "14.17"
   },
   "browserslist": {
     "production": [

src/camera/behaviour.jsx

@@ -1,4 +1,4 @@
-import {usePrediction} from "./use-prediction";
+import { usePrediction } from 'camera/use-prediction'
 
 export const Behaviour = () => {
   usePrediction()

src/camera/camera.jsx

@@ -1,10 +1,10 @@
-import React from "react";
-import Webcam from "react-webcam";
+import React from 'react'
+import Webcam from 'react-webcam'
 
-import {useContext} from "./context";
+import { useContext } from 'camera/context'
 
 export const Camera = () => {
-  const {camera} = useContext()
+  const { camera } = useContext()
 
-  return <Webcam ref={camera} videoConstraints={{facingMode: "environment"}} />
+  return <Webcam ref={camera} videoConstraints={{ facingMode: 'environment' }} />
 }

src/camera/context.js

@@ -1,4 +1,4 @@
-import React, {useRef, useState} from "react";
+import React, { useRef, useState } from 'react'
 
 export const Context = React.createContext({})
 
@@ -8,9 +8,5 @@ export const useValue = () => {
   const camera = useRef()
   const [objects, setObjects] = useState([])
 
-  return {
-    camera,
-    objects,
-    setObjects
-  }
+  return { camera, objects, setObjects }
 }

src/camera/detection.jsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const makeStyles = ([left, top, right, _bottom]) => ({
-  position: "absolute",
+  position: 'absolute',
   left: left + (right - left) / 2,
-  top: top,
+  top,
 })
 
-export const Detection = ({data}) => <div style={makeStyles(data.bbox)}>
+export const Detection = ({ data }) => <div style={makeStyles(data.bbox)}>
   {data.class}
 </div>
+
+Detection.propTypes = { data: PropTypes.object.isRequired }

src/camera/detections.jsx

@@ -1,22 +1,22 @@
-import React from "react";
+import React from 'react'
 
-import {useContext} from "./context";
-import {Detection} from "./detection";
+import { useContext } from 'camera/context'
+import { Detection } from 'camera/detection'
 
 const styles = {
   position: 'absolute',
   color: 'yellow',
   fontWeight: 600,
   top: 0,
-  left: 0
+  left: 0,
 }
 
 export const Detections = () => {
-  const {objects} = useContext()
+  const { objects } = useContext()
 
   return <div style={styles}>
     {
-      objects.map((item, index) => <Detection data={item} key={index}/>)
+      objects.map((item, index) => <Detection data={item} key={index} />)
     }
-  </div>;
+  </div>
 }

src/camera/index.jsx

@@ -1,15 +1,15 @@
-import '@tensorflow/tfjs-backend-cpu';
-import '@tensorflow/tfjs-backend-webgl';
+import '@tensorflow/tfjs-backend-cpu'
+import '@tensorflow/tfjs-backend-webgl'
 
-import React from 'react';
+import React from 'react'
 
-import {Behaviour} from "./behaviour";
-import {Detections} from "./detections";
-import {Context, useValue} from "./context";
-import {Camera as CameraComponent} from "./camera";
+import { Behaviour } from 'camera/behaviour'
+import { Detections } from 'camera/detections'
+import { useValue, Context } from 'camera/context'
+import { Camera as CameraComponent } from 'camera/camera'
 
 export const Camera = () => <Context.Provider value={useValue()}>
-  <Behaviour/>
-  <CameraComponent/>
-  <Detections/>
+  <Behaviour />
+  <CameraComponent />
+  <Detections />
 </Context.Provider>

src/camera/repository.js

@@ -1,11 +1,11 @@
-import {from, fromEvent} from "rxjs";
-import {load} from "@tensorflow-models/coco-ssd";
+import { from, fromEvent } from 'rxjs'
+import { load } from '@tensorflow-models/coco-ssd'
 
 const camera = ref => fromEvent(ref.current.video, 'play')
 
-const model = () => from(load({base: "mobilenet_v2"}))
+const model = () => from(load({ base: 'mobilenet_v2' }))
 
 export const repository = {
   camera,
-  model
+  model,
 }

src/camera/use-coroutine.js

@@ -1,14 +1,15 @@
-import {useContext} from "./context";
-import {from, of} from "rxjs";
-import {delay, mergeMap, repeat, tap} from "rxjs/operators";
-import {useCallback} from "react";
+import { from, of } from 'rxjs'
+import { useCallback } from 'react'
+import { delay, mergeMap, repeat, tap } from 'rxjs/operators'
+
+import { useContext } from 'camera/context'
 
 export const useCoroutine = () => {
-  const {camera, setObjects} = useContext()
+  const { camera, setObjects } = useContext()
 
   return useCallback(model => of({})
     .pipe(mergeMap(() => from(model.detect(camera.current.video))))
     .pipe(tap(setObjects))
     .pipe(delay(1000))
-    .pipe(repeat()), [])
+    .pipe(repeat()), [camera, setObjects])
 }

src/camera/use-prediction.js

@@ -1,23 +1,23 @@
-import {useEffect} from "react";
-import {combineLatest} from "rxjs";
-import {mergeMap, map, tap} from "rxjs/operators";
+import { useEffect } from 'react'
+import { combineLatest } from 'rxjs'
+import { mergeMap, map } from 'rxjs/operators'
 
-import {useContext} from "./context";
-import {repository} from "./repository";
-import {useCoroutine} from "./use-coroutine";
+import { useContext } from 'camera/context'
+import { repository } from 'camera/repository'
+import { useCoroutine } from 'camera/use-coroutine'
 
 const makeSubscription = params => combineLatest([repository.camera(params.camera), repository.model()])
   .pipe(map(([_, model]) => model))
   .pipe(mergeMap(params.startPrediction))
   .subscribe()
 
 export const usePrediction = () => {
-  const {camera} = useContext()
+  const { camera } = useContext()
   const startPrediction = useCoroutine()
 
   useEffect(() => {
-    const subscription = makeSubscription({camera, startPrediction})
+    const subscription = makeSubscription({ camera, startPrediction })
 
     return () => subscription.unsubscribe()
-  }, [])
+  }, [camera, startPrediction])
 }

src/index.jsx

@@ -1,17 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react'
+import ReactDOM from 'react-dom'
 
-import {Startup} from "./startup";
-import reportWebVitals from './reportWebVitals';
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
+import { Startup } from 'startup'
+import reportWebVitals from 'reportWebVitals'
+import * as serviceWorkerRegistration from 'serviceWorkerRegistration'
 
-ReactDOM.render(
-  <React.StrictMode>
-    <Startup />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+ReactDOM.render(<React.StrictMode>
+  <Startup />
+</React.StrictMode>, document.getElementById('root'))
 
-serviceWorkerRegistration.unregister();
+serviceWorkerRegistration.unregister()
 
-reportWebVitals();
+reportWebVitals()

src/loading/hooks/use-should-show.js

@@ -1,3 +1,3 @@
-import {useSelector} from "react-redux";
+import { useSelector } from 'react-redux'
 
 export const useShouldShow = () => useSelector(state => state.loading.length)

src/loading/index.jsx

@@ -1,5 +1,7 @@
-import {style} from "./style";
-import {useShouldShow} from "./hooks/use-should-show";
+import React from 'react'
+
+import { style } from 'loading/style'
+import { useShouldShow } from 'loading/hooks/use-should-show'
 
 export const Loading = () => useShouldShow() && <div style={style}>
   ...

src/loading/slices/loading.js

@@ -1,6 +1,6 @@
-import {createSlice} from "@reduxjs/toolkit";
+import { createSlice } from '@reduxjs/toolkit'
 
-import * as settings from '../../settings/slices/settings'
+import * as settings from 'settings/slices/settings'
 
 const state = () => [settings.actions.attempt.type]
 
@@ -9,12 +9,12 @@ const show = (state, action) => [...state, action.payload]
 const hide = (state, action) => state.filter(item => item !== action.payload)
 
 export const loading = createSlice({
-  name: "loading",
+  name: 'loading',
   initialState: state(),
   reducers: {
     show,
-    hide
-  }
+    hide,
+  },
 })
 
-export const actions = loading.actions
+export const { actions } = loading

src/loading/style.js

@@ -18,5 +18,5 @@ export const style = {
 
   background: 'white',
   zIndex: 99999,
-  fontWeight: 600
+  fontWeight: 600,
 }

src/reportWebVitals.js

@@ -1,13 +1,13 @@
-const reportWebVitals = (onPerfEntry) => {
+const reportWebVitals = onPerfEntry => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
   }
-};
+}
 
-export default reportWebVitals;
+export default reportWebVitals