feat(CI): Add linting and formatting workflow

.github/workflows/lint.yml

@@ -0,0 +1,47 @@
+# .github/workflows/lint-format.yml
+
+name: Lint and Format
+
+# Run this workflow on pull requests targeting 'main' or 'dev' branches
+on:
+  pull_request:
+    branches:
+      - main
+      - dev
+
+jobs:
+  lint-and-format:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Step 1: Check out the code
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      # Step 2: Set up Node.js (specify the Node version if required)
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20' # Adjust the version if necessary
+
+      # Step 3: Install dependencies
+      - name: Install dependencies
+        run: npm install
+
+      # Step 4: Run ESLint to check for linting issues
+      - name: Run ESLint
+        run: npm run lint -- --fix # Make sure you have a lint script in package.json
+
+      - name: List Changes
+        run: git status --porcelain
+
+      # Step 6: Check for changes after formatting
+      - name: Check for formatting changes
+        run: |
+          if [[ `git status --porcelain` ]]; then
+            echo "There are formatting changes."
+            echo "Please commit the changes locally or configure auto-formatting in Prettier."
+            exit 1
+          else
+            echo "No formatting changes needed."
+          fi

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "es5"
+}

client/src/pages/Login.tsx

@@ -52,45 +52,45 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className='login-container'>
+    <div className="login-container">
       <h2>Login</h2>
-      {error && <div className='error-message'>{error}</div>}
-      <form onSubmit={handleLogin}>
-        <div className='form-group'>
-          <label htmlFor='username'>Username:</label>
+      {error && <div className="error-message">{error}</div>}
+      <form onSubmit={(event) => void handleLogin(event)}>
+        <div className="form-group">
+          <label htmlFor="username">Username:</label>
           <input
-            type='text'
-            id='username'
+            type="text"
+            id="username"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
           />
         </div>
-        <div className='form-group'>
-          <label htmlFor='email'>Email:</label>
+        <div className="form-group">
+          <label htmlFor="email">Email:</label>
           <input
-            type='email'
-            id='email'
+            type="email"
+            id="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
           />
         </div>
-        <div className='form-group'>
-          <label htmlFor='password'>Password:</label>
+        <div className="form-group">
+          <label htmlFor="password">Password:</label>
           <input
-            type='password'
-            id='password'
+            type="password"
+            id="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
           />
         </div>
-        <button className='login-button' type='submit'>
+        <button className="login-button" type="submit">
           Login
         </button>
       </form>
-      <div className='signup-link'>
+      <div className="signup-link">
         <p>
-          Don&apos;t have an account? <Link to='/signup'>Sign up here</Link>
+          Don&apos;t have an account? <Link to="/signup">Sign up here</Link>
         </p>
       </div>
     </div>

client/src/pages/SignUp.tsx

@@ -1,6 +1,6 @@
+// import { deepStrictEqual } from 'assert';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-//import '../index.scss'; //TODO: do we need to import this here and main.tsx
 
 const SignUp: React.FC = () => {
   const [username, setUsername] = useState('');
@@ -62,71 +62,73 @@ const SignUp: React.FC = () => {
   };
 
   return (
-    <div className='signup-container'>
+    <div className="signup-container">
       <h2>Sign Up</h2>
-      {error && <div className='error-message'>{error}</div>}
-      <form onSubmit={handleSignUp}>
-        <div className='form-group'>
-          <label htmlFor='username'>Username:</label>
+      {error && <div className="error-message">{error}</div>}
+      <form onSubmit={(event) => void handleSignUp(event)}>
+        <div className="form-group">
+          <label htmlFor="username">Username:</label>
           <input
-            type='text'
-            id='username'
+            type="text"
+            id="username"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
             required
           />
         </div>
-        <div className='form-group'>
-          <label htmlFor='displayName'>Display Name:</label>
+        <div className="form-group">
+          <label htmlFor="displayName">Display Name:</label>
           <input
-            type='text'
-            id='displayName'
+            type="text"
+            id="displayName"
             value={displayName}
             onChange={(e) => setDisplayName(e.target.value)}
             required
           />
         </div>
-        <div className='form-group'>
-          <label htmlFor='work_email'>Work Email:</label>
+        <div className="form-group">
+          <label htmlFor="work_email">Work Email:</label>
           <input
-            type='email'
-            id='work_email'
+            type="email"
+            id="work_email"
             value={work_email}
             onChange={(e) => setWorkEmail(e.target.value)}
             required
           />
         </div>
-        <div className='form-group'>
-          <label htmlFor='workPhone'>Work Phone:</label>
+        <div className="form-group">
+          <label htmlFor="workPhone">Work Phone:</label>
           <input
-            type='text'
-            id='workPhone'
+            type="text"
+            id="workPhone"
             value={workPhone}
             onChange={(e) => setWorkPhone(e.target.value)}
             required
           />
         </div>
-        <div className='form-group'>
-          <label htmlFor='password'>Password:</label>
+        <div className="form-group">
+          <label htmlFor="password">Password:</label>
           <input
-            type='password'
-            id='password'
+            type="password"
+            id="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
           />
         </div>
-        <div className='form-group'>
-          <label htmlFor='confirmPassword'>Confirm Password:</label>
+        <div className="form-group">
+          <label htmlFor="confirmPassword">Confirm Password:</label>
           <input
-            type='password'
-            id='confirmPassword'
+            type="password"
+            id="confirmPassword"
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.target.value)}
             required
           />
         </div>
-        <button className="signup-button" type="submit">Sign Up</button>
+        <button className="signup-button" type="submit">
+          Sign Up
+        </button>
       </form>
     </div>
   );