Add linting

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1 @@
+yarn run format && yarn run lint

.prettierignore

@@ -0,0 +1 @@
+node_modules

.prettierrc

@@ -0,0 +1 @@
+{}

client/src/index.jsx

@@ -6,12 +6,12 @@ import { BrowserRouter } from 'react-router-dom';
 import { SnackbarProvider } from './context/snackbarContext';
 
 ReactDOM.render(
-    <BrowserRouter>
-        <SnackbarProvider>
-            <App />
-        </SnackbarProvider>
-    </BrowserRouter>, 
-    document.getElementById('root')
+  <BrowserRouter>
+    <SnackbarProvider>
+      <App />
+    </SnackbarProvider>
+  </BrowserRouter>,
+  document.getElementById('root'),
 );
 
 // If you want your app to work offline and load faster, you can change

client/src/pages/Home.jsx

@@ -9,21 +9,21 @@ import '../sass/Home.scss';
 const h1sx = {
   fontFamily: 'aliseoregular',
   fontWeight: 'bold',
-  fontSize: {xs: "5.3rem"},
+  fontSize: { xs: '5.3rem' },
   marginBottom: `0rem`,
-}
+};
 
 const h2sx = {
   ...h1sx,
-  fontSize: {xs: '2.8rem'},
+  fontSize: { xs: '2.8rem' },
   marginTop: '-0.9rem',
-  lineHeight: '2.7rem'
-}
+  lineHeight: '2.7rem',
+};
 
 const h4sx = {
   ...h1sx,
-  fontSize: {xs: '1.8rem'},
-}
+  fontSize: { xs: '1.8rem' },
+};
 
 const Home = () => {
   const [events, setEvents] = useState(null);
@@ -62,68 +62,73 @@ const Home = () => {
   }
 
   return (
-      <Box className="home">
-        <Box className="home-headers">
-          <Typography variant='h1' sx={h1sx}>VRMS</Typography>
-          <Typography variant='h2' sx={h2sx}>Volunteer Relationship Management System</Typography>
-        </Box>
+    <Box className="home">
+      <Box className="home-headers">
+        <Typography variant="h1" sx={h1sx}>
+          VRMS
+        </Typography>
+        <Typography variant="h2" sx={h2sx}>
+          Volunteer Relationship Management System
+        </Typography>
+      </Box>
 
-        {events && events.length > 0 ? (
-          <Box className="meeting-select-container">
-            <form
-              className="form-select-meeting"
-              autoComplete="off"
-              onSubmit={(e) => e.preventDefault()}
-            >
-              <Box className="form-row">
-                <Box className="form-input-select">
-                  <label htmlFor={'meeting-checkin'}>
-                    Select a meeting to check-in:
-                  </label>
-                  <Box className="radio-buttons">
-                    <select
-                      name={'meeting-checkin'}
-                      className="select-meeting-dropdown"
-                      onChange={handleEventChange}
-                      required
-                      defaultValue="--SELECT ONE--"
-                    >
-                      <option value="--SELECT ONE--" disabled hidden>
-                        --SELECT ONE--
-                      </option>
-                      {events.map((event) => {
-                        return (
-                          <option key={event._id || 0} value={event._id}>
-                            {event?.project?.name + ' - ' + event.name}
-                          </option>
-                        );
-                      })}
-                    </select>
-                  </Box>
+      {events && events.length > 0 ? (
+        <Box className="meeting-select-container">
+          <form
+            className="form-select-meeting"
+            autoComplete="off"
+            onSubmit={(e) => e.preventDefault()}
+          >
+            <Box className="form-row">
+              <Box className="form-input-select">
+                <label htmlFor={'meeting-checkin'}>
+                  Select a meeting to check-in:
+                </label>
+                <Box className="radio-buttons">
+                  <select
+                    name={'meeting-checkin'}
+                    className="select-meeting-dropdown"
+                    onChange={handleEventChange}
+                    required
+                    defaultValue="--SELECT ONE--"
+                  >
+                    <option value="--SELECT ONE--" disabled hidden>
+                      --SELECT ONE--
+                    </option>
+                    {events.map((event) => {
+                      return (
+                        <option key={event._id || 0} value={event._id}>
+                          {event?.project?.name + ' - ' + event.name}
+                        </option>
+                      );
+                    })}
+                  </select>
                 </Box>
               </Box>
-            </form>
-          </Box>
-        ):(
-
+            </Box>
+          </form>
+        </Box>
+      ) : (
         <Box className="home-buttons">
           {/* If no events with checkInReady: true */}
           {/* If no meetings available*/}
-          <Typography variant='h4' sx={h4sx}>No meetings available</Typography>
+          <Typography variant="h4" sx={h4sx}>
+            No meetings available
+          </Typography>
           <CreateNewProfileButton />
         </Box>
-        )}  
-          {/* If any events with checkInReady: true */}
-          {events.length > 0 && (
-            <Box className="home-buttons">
-              <CheckInButtons
-                disabled={selectedEvent === ''}
-                event={selectedEvent}
-                events={events}
-              />
-            </Box>  
-          )}
-      </Box>
+      )}
+      {/* If any events with checkInReady: true */}
+      {events.length > 0 && (
+        <Box className="home-buttons">
+          <CheckInButtons
+            disabled={selectedEvent === ''}
+            event={selectedEvent}
+            events={events}
+          />
+        </Box>
+      )}
+    </Box>
   );
 };
 

client/src/utils/endpoints.js

@@ -1,4 +1,4 @@
-import { REACT_APP_CUSTOM_REQUEST_HEADER } from "../utils/globalSettings";
+import { REACT_APP_CUSTOM_REQUEST_HEADER } from '../utils/globalSettings';
 
 export const HEADERS = {
   'Content-Type': 'application/json',

client/src/utils/globalSettings.js

@@ -1 +1 @@
-export const REACT_APP_CUSTOM_REQUEST_HEADER="nAb3kY-S%qE#4!d";
+export const REACT_APP_CUSTOM_REQUEST_HEADER = 'nAb3kY-S%qE#4!d';

eslint.config.mjs

@@ -0,0 +1,34 @@
+import js from "@eslint/js";
+import globals from "globals";
+import prettier from "eslint-config-prettier";
+import reactPlugin from "eslint-plugin-react";
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  js.configs.recommended,
+  {
+    ...reactPlugin.configs.flat.recommended,
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
+  reactPlugin.configs.flat["jsx-runtime"],
+  {
+    files: ["**/*.js", "**/*.jsx"],
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.node },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    rules: {
+      "react/no-unescaped-entities": "off",
+      "react/prop-types": "off",
+    },
+  },
+  prettier,
+];

package.json

@@ -5,6 +5,8 @@
   "scripts": {
     "start": "concurrently \"cd backend && npm run start\" \"cd client && npm run start\"",
     "mvp": "concurrently \"cd backend && npm run start\" \"cd client-mvp-04 && npm run start\"",
+    "format": "prettier --write \"client/**/*.{js,jsx,css}\" \"backend/**/*.{js,jsx,css}\"",
+    "lint": "eslint",
     "dev:api": "cd backend && npm run dev",
     "dev:client": "cd client && npm run start",
     "dev": "dotenv -e backend/.env -e client/.env concurrently \"npm run dev:api\" \"npm run dev:client\"",
@@ -14,7 +16,8 @@
     "test:backend": "cd backend && npm run test",
     "test:client": "cd client && npm run test",
     "test:client-mvp": "cd client-mvp-04 && npm run test",
-    "test:all": "cross-env NODE_ENV=test npm run test:client && npm run test:client-mvp && npm run test:backend && npm run test:cy"
+    "test:all": "cross-env NODE_ENV=test npm run test:client && npm run test:client-mvp && npm run test:backend && npm run test:cy",
+    "prepare": "husky && husky install"
   },
   "dependencies": {
     "@mui/icons-material": "^5.14.19",
@@ -27,6 +30,17 @@
   },
   "devDependencies": {
     "cypress": "^5.0.0",
+    "eslint": "9.9.1",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-react": "^7.37.3",
+    "globals": "15.9.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.3.0",
+    "prettier": "3.4.2",
     "start-server-and-test": "^1.11.3"
+  },
+  "lint-staged": {
+    "*.js": "eslint --cache --fix",
+    "*.{js,jsx,css}": "prettier --write"
   }
 }