chore: add prettier to front-end

- add prettier;
- format code using prettier;
- change github workflow and pre-commit to run prettier

Closes #74

.github/workflows/ci.yaml

@@ -69,7 +69,7 @@ jobs:
           node-version-file: './dashboard/.nvmrc'
 
       - name: Run eslint
-        run: pnpm lint
+        run: pnpm lint-staged
         working-directory: ./dashboard
 
   build-front:

dashboard/.eslintrc.cjs

@@ -9,6 +9,7 @@ module.exports = {
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:storybook/recommended",
+    "plugin:prettier/recommended",
   ],
   ignorePatterns: [".eslintrc.cjs", "*.config.js", "/src/components/ui/*"],
   parser: "@typescript-eslint/parser",

dashboard/.husky/pre-commit

@@ -1,3 +1,3 @@
 #!/usr/bin/env sh
-cd dashboard && pnpm lint
+cd dashboard && pnpm lint-staged
 pnpm pycommit

dashboard/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 80,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}

dashboard/package.json

@@ -8,7 +8,8 @@
     "build": "tsc -b && vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lint": "eslint --cache --max-warnings=0 --ext .ts,.tsx,.js,.jsx src --fix",
+    "lint-staged": "eslint --max-warnings=0 --ext .ts,.tsx,.js,.jsx src",
+    "lint": "pnpm run lint-staged --fix",
     "preview": "vite preview",
     "prepare": "cd .. && husky dashboard/.husky",
     "pycommit": "cd .. && cd backend && sh pre-commit",
@@ -56,15 +57,18 @@
     "@typescript-eslint/parser": "^7.13.1",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
     "postcss": "^8.4.38",
+    "prettier": "3.3.2",
     "storybook": "^8.1.10",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2"
   }
-}
+}

dashboard/src/App.tsx

@@ -1,17 +1,17 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import "./App.css";
-import Dashboard from "./components/Dashboard/Dashboard";
+import './App.css';
+import Dashboard from './components/Dashboard/Dashboard';
 
 const queryClient = new QueryClient();
 
 function App(): JSX.Element {
   return (
-      <QueryClientProvider client={queryClient}>
+    <QueryClientProvider client={queryClient}>
       <div className="w-screen h-screen">
         <Dashboard />
       </div>
-      </QueryClientProvider>
+    </QueryClientProvider>
   );
 }
 

dashboard/src/api/Tree.tsx

@@ -1,15 +1,15 @@
-import { useQuery, UseQueryResult} from "@tanstack/react-query";
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 
-import type { Tree } from "../types/tree/Tree";
+import type { Tree } from '../types/tree/Tree';
 
-const fetchTreeCheckoutData = async(): Promise<Tree[]> => {
-    const res = await fetch('/api/tree');
-    if (!res.ok) {
-        throw new Error('Request to /api/tree response was not ok');
-    }
-    return res.json();
-}
+const fetchTreeCheckoutData = async (): Promise<Tree[]> => {
+  const res = await fetch('/api/tree');
+  if (!res.ok) {
+    throw new Error('Request to /api/tree response was not ok');
+  }
+  return res.json();
+};
 
 export const useTreeTable = (): UseQueryResult => {
-    return useQuery({ queryKey: ['treeData'], queryFn: fetchTreeCheckoutData });
-}
+  return useQuery({ queryKey: ['treeData'], queryFn: fetchTreeCheckoutData });
+};

dashboard/src/components/Dashboard/Dashboard.tsx

@@ -1,25 +1,28 @@
-import { ChangeEvent, useCallback, useState } from "react";
+import { ChangeEvent, useCallback, useState } from 'react';
 
-import SideMenu from "../SideMenu/SideMenu";
-import TopBar from "../TopBar/TopBar";
-import TreeListingPage from "../TreeListingPage/TreeListingPage";
-import { useDebounce } from "../../hooks/useDebounce";
+import SideMenu from '../SideMenu/SideMenu';
+import TopBar from '../TopBar/TopBar';
+import TreeListingPage from '../TreeListingPage/TreeListingPage';
+import { useDebounce } from '../../hooks/useDebounce';
 
-const Dashboard = () : JSX.Element => {
+const Dashboard = (): JSX.Element => {
   const [inputSearchText, setInputSearchText] = useState('');
   const debouncedInput = useDebounce(inputSearchText, DEBOUNCE_INTERVAL);
 
-  const onInputSearchTextChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setInputSearchText(e.target.value);
-  }, []);
+  const onInputSearchTextChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setInputSearchText(e.target.value);
+    },
+    [],
+  );
 
   return (
     <div className="w-full h-full">
       <div className="flex flex-row w-full justify-between">
         <SideMenu />
-        <TopBar onChangeInputText={onInputSearchTextChange}/>
+        <TopBar onChangeInputText={onInputSearchTextChange} />
         <div className="w-full px-16 pt-24 bg-lightGray">
-          <TreeListingPage inputFilter={debouncedInput}/>
+          <TreeListingPage inputFilter={debouncedInput} />
         </div>
       </div>
     </div>