Add eslint, pre-commit hooks and refactor to stick to linter rules

frontend/.gitignore

@@ -20,3 +20,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .vscode
+.env

frontend/package.json

@@ -33,10 +33,63 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint \"src/**/*.ts*\""
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.46",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
+    "eslint-import-resolver-typescript": "^2.3.0",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.4.2",
+    "prettier": "^2.1.2"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {},
+    "overrides": [
+      {
+        "files": [
+          "**/*.ts?(x)"
+        ],
+        "rules": {
+          "react/jsx-filename-extension": [
+            1,
+            {
+              "extensions": [
+                ".tsx"
+              ]
+            }
+          ],
+          "import/extensions": [
+            "error",
+            "ignorePackages",
+            {
+              "ts": "never",
+              "tsx": "never"
+            }
+          ]
+        }
+      }
+    ],
+    "settings": {
+      "import/parsers": {
+        "@typescript-eslint/parser": [
+          ".ts",
+          ".tsx"
+        ]
+      },
+      "import/resolver": {
+        "typescript": {
+          "alwaysTryTypes": true
+        }
+      }
+    }
   },
   "browserslist": {
     "production": [
@@ -50,9 +103,15 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-redux": "^7.1.9"
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+      "prettier --write",
+      "eslint \"src/**/*.ts*\" "
+    ]
   }
 }

frontend/src/api/backend.ts

@@ -11,11 +11,11 @@ class Backend {
     });
   }
 
-  getErrors(schedule: ScheduleDataModel): Promise<ScheduleErrorModel[]> {
+  public getErrors(schedule: ScheduleDataModel): Promise<ScheduleErrorModel[]> {
     return this.axios.post("/schedule_errors", schedule).then((resp) => resp.data);
   }
 
-  fixSchedule(schedule: ScheduleDataModel): Promise<ScheduleDataModel[]> {
+  public fixSchedule(schedule: ScheduleDataModel): Promise<ScheduleDataModel[]> {
     return this.axios.post("/fix_schedule", schedule).then((resp) => resp.data);
   }
 }

frontend/src/app.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import "./app.css";
 import { TableComponent } from "./components/table/table.component";
 import { ToolbarComponent } from "./components/toolbar/toolbar.component";
-function App() {
+function App(): JSX.Element {
   return (
     <React.Fragment>
       <div className="header">

frontend/src/components/table/legend/legend-component.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-
-function LegendComponent() {
+function LegendComponent(): JSX.Element {
   // in future here will be added some more logic:
   // for example editing of colors for shifts
   return <React.Fragment></React.Fragment>;

frontend/src/components/table/modal/add-worker-modal.tsx

@@ -21,6 +21,10 @@ export interface WorkerInfo {
   time?: number;
 }
 
+interface ParseTimeModel {
+  isTimeFormatValid: boolean;
+  parsedTime?: number;
+}
 interface AddWorkerModalOptions {
   isOpened: boolean;
   setIsOpened: (status: boolean) => void;
@@ -36,7 +40,7 @@ export function AddWorkerModal({
   submit,
   workerType,
   workerInfo,
-}: AddWorkerModalOptions) {
+}: AddWorkerModalOptions): JSX.Element {
   const [{ name, nameError, time, timeError, actionName, isNewWorker }, setState] = useState(
     initialState
   );
@@ -56,33 +60,33 @@ export function AddWorkerModal({
     }));
   }, [workerInfo, workerType]);
 
-  function clearState() {
+  function clearState(): void {
     setState({ ...initialState });
   }
 
-  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
+  function onChange(e: React.ChangeEvent<HTMLInputElement>): void {
     const { name: controlName, value } = e.target;
     setState((prevState) => ({ ...prevState, [controlName]: value }));
   }
 
-  function parseTimeIfPossible(time) {
+  function parseTimeIfPossible(time: string): ParseTimeModel {
     if (new RegExp("([0].[0-9])|(1.0)|(1)").test(time)) {
       return { isTimeFormatValid: true, parsedTime: Number(time) };
     }
     if (new RegExp("[1-9]/[0-9]").test(time)) {
-      const timerArray = time.split("/");
+      const timerArray = time.split("/").map(parseInt);
       if (timerArray[0] <= timerArray[1]) {
         return { isTimeFormatValid: true, parsedTime: Number(timerArray[0] / timerArray[1]) };
       }
     }
     return { isTimeFormatValid: false };
   }
 
-  function validateName(name) {
+  function validateName(name: string): boolean {
     return name.length >= NAME_MIN_LENGTH;
   }
 
-  function handleSubmit() {
+  function handleSubmit(): void {
     const { isTimeFormatValid, parsedTime } = parseTimeIfPossible(time);
     const isNameValid = validateName(name);
 
@@ -99,7 +103,7 @@ export function AddWorkerModal({
     }
   }
 
-  function handleClose() {
+  function handleClose(): void {
     clearState();
     setIsOpened(false);
   }

frontend/src/components/table/schedule/schedule-parts/base-cell.component.tsx

@@ -14,18 +14,22 @@ export function BaseCellComponent({
   onContextMenu,
   onClick,
   onBlur,
-}: CellOptions) {
+}: CellOptions): JSX.Element {
   const inputRef = React.createRef<HTMLInputElement>();
 
-  function handleContextMenu(e: React.MouseEvent) {
+  function handleContextMenu(e: React.MouseEvent): void {
     e.preventDefault();
     onContextMenu && onContextMenu();
   }
 
   return (
     <td
       className={"cell"}
-      onClick={() => !isBlocked && onClick && onClick()}
+      onClick={(): void => {
+        if (!isBlocked && onClick) {
+          onClick();
+        }
+      }}
       onContextMenu={handleContextMenu}
       style={{
         color: style.textColor.toString(),
@@ -34,10 +38,10 @@ export function BaseCellComponent({
             ? ColorHelper.getHighlightColor().toString()
             : style.backgroundColor.toString(),
       }}
-      onKeyDown={(e) => {
+      onKeyDown={(e): void => {
         onKeyDown && onKeyDown(inputRef.current?.value || value, e);
       }}
-      onBlur={(e) => {
+      onBlur={(e): void => {
         onBlur && onBlur();
       }}
     >

frontend/src/components/table/schedule/schedule-parts/empty-cell.component.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export function EmptyRowComponent({ rowHeight = 20 }) {
+export function EmptyRowComponent({ rowHeight = 20 }): JSX.Element {
   return <tr style={{ height: `${rowHeight}px` }}></tr>;
 }

frontend/src/components/table/schedule/schedule-parts/schedule-row.component.tsx

@@ -39,7 +39,7 @@ export function ScheduleRowComponent({
   onRowKeyClick,
   onBlur,
   uuid,
-}: ScheduleRowOptions) {
+}: ScheduleRowOptions): JSX.Element {
   const scheduleLogic = useContext(ScheduleLogicContext);
   const [dataRowState, setDataRowState] = useState<DataRow>(dataRow);
   useEffect(() => {
@@ -57,12 +57,12 @@ export function ScheduleRowComponent({
   }, [selectionMode]);
   const verboseDates = scheduleLogic?.metadataProvider?.verboseDates;
 
-  function onContextMenu(cellIndex: number) {
+  function onContextMenu(cellIndex: number): void {
     if (scheduleLogic) {
       scheduleLogic.changeShiftFrozenState(index, cellIndex, setFrozenShifts);
     }
   }
-  function saveValue(newValue: string) {
+  function saveValue(newValue: string): void {
     if (sectionKey)
       scheduleLogic?.updateRow(
         sectionKey,
@@ -77,15 +77,15 @@ export function ScheduleRowComponent({
     setSelectedCells([]);
   }
 
-  function isFrozen(cellInd: number) {
+  function isFrozen(cellInd: number): boolean {
     return (
       verboseDates?.[cellInd]?.isFrozen ||
       !!frozenShifts.find((fS) => fS[0] === index && fS[1] === cellInd) ||
       false
     );
   }
 
-  function toggleSelection(cellIndex: number) {
+  function toggleSelection(cellIndex: number): void {
     if (selectedCells.includes(cellIndex)) {
       setSelectedCells(
         selectedCells.filter((selectedCellIndex) => cellIndex !== selectedCellIndex)
@@ -95,7 +95,7 @@ export function ScheduleRowComponent({
     }
   }
 
-  function handleKeyPress(cellIndex: number, cellValue: string, event: React.KeyboardEvent) {
+  function handleKeyPress(cellIndex: number, cellValue: string, event: React.KeyboardEvent): void {
     if (event.key === CellManagementKeys.Enter) {
       saveValue(cellValue);
     }
@@ -127,9 +127,11 @@ export function ScheduleRowComponent({
         value={dataRowState.rowKey || ""}
         isSelected={false}
         isBlocked={false}
-        onContextMenu={() => {}}
+        onContextMenu={(): void => {
+          console.log("Show context menu");
+        }}
         isPointerOn={false}
-        onClick={() => onRowKeyClick && onRowKeyClick()}
+        onClick={(): void => onRowKeyClick && onRowKeyClick()}
       />
       {dataRowState.rowData(false).map((cellData, cellIndex) => {
         return (
@@ -145,10 +147,10 @@ export function ScheduleRowComponent({
             )}
             isPointerOn={(showSelectedCells || false) && cellIndex === pointerPosition}
             isBlocked={isFrozen(cellIndex)}
-            onKeyDown={(cellValue, event) => handleKeyPress(cellIndex, cellValue, event)}
-            onContextMenu={() => onContextMenu(cellIndex)}
-            onClick={() => onClick && onClick(cellIndex)}
-            onBlur={() => onBlur && onBlur()}
+            onKeyDown={(cellValue, event): void => handleKeyPress(cellIndex, cellValue, event)}
+            onContextMenu={(): void => onContextMenu(cellIndex)}
+            onClick={(): void => onClick && onClick(cellIndex)}
+            onBlur={(): void => onBlur && onBlur()}
           />
         );
       })}

frontend/src/components/table/schedule/schedule-parts/shift-cell.component.tsx

@@ -7,10 +7,10 @@ function getShiftCode(value: string | number): ShiftCode {
   return typeof value === "number" ? value.toString() : ShiftCode[value] || ShiftCode.W;
 }
 
-export function ShiftCellComponent(options: CellOptions) {
+export function ShiftCellComponent(options: CellOptions): JSX.Element {
   const shiftValue = getShiftCode(options.value);
 
-  function _onKeyDown(inputValue: string, key: React.KeyboardEvent) {
+  function _onKeyDown(inputValue: string, key: React.KeyboardEvent): void {
     const { onKeyDown } = options;
     onKeyDown && onKeyDown(getShiftCode(inputValue), key);
   }