feat(CI): Add linting and formatting github 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/components/Navbar.tsx

@@ -15,7 +15,7 @@ const Navbar: React.FC<NavbarProps> = ({ toggleDarkMode, isDarkMode }) => {
 
   const handleLogout = () => {
     console.log('User logged out');
-    navigate('/'); 
+    navigate('/');
   };
 
   useEffect(() => {
@@ -37,7 +37,7 @@ const Navbar: React.FC<NavbarProps> = ({ toggleDarkMode, isDarkMode }) => {
   return (
     <nav className={isDarkMode ? 'dark-mode' : ''}>
       <Link to="/" className="logo" title="Home">
-      <img src={LOGO} alt="Wood Plank T" className="logo-image" />
+        <img src={LOGO} alt="Wood Plank T" className="logo-image" />
       </Link>
       <div className="nav-buttons">
         <Link to="/events-dashboard" className="nav-button">
@@ -61,8 +61,8 @@ const Navbar: React.FC<NavbarProps> = ({ toggleDarkMode, isDarkMode }) => {
             Profile
           </Link>
           <Link to="/login" className="dropdown-link">
-          Login
-        </Link>
+            Login
+          </Link>
           <div className="dropdown-link" onClick={handleLogout}>
             Logout
           </div>

client/src/components/charts/PieChart.tsx

@@ -20,8 +20,8 @@ const TestPieChart: React.FC = () => {
 
   useEffect(() => {
     const intervalId = setInterval(() => {
-      setData(prevData =>
-        prevData.map(point => ({
+      setData((prevData) =>
+        prevData.map((point) => ({
           ...point,
           value: Math.floor(Math.random() * 500),
         }))
@@ -54,4 +54,3 @@ const TestPieChart: React.FC = () => {
 };
 
 export default TestPieChart;
-

client/src/pages/Home.tsx

@@ -1,9 +1,16 @@
 import React, { lazy, useState } from 'react';
-import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd';
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  DropResult,
+} from '@hello-pangea/dnd';
 import { CardState } from '../types';
 
 const Card = lazy(() => import('../components/Card'));
-const UserActivityChart = lazy(() => import('../components/charts/UserActivity'));
+const UserActivityChart = lazy(
+  () => import('../components/charts/UserActivity')
+);
 const HeatMap = lazy(() => import('../components/charts/HeatMap'));
 const IpAccessCombined = lazy(() => import('../components/IpAccessCombined'));
 const EventTypeChart = lazy(() => import('../components/charts/EventType'));
@@ -14,9 +21,17 @@ const Home: React.FC<{ isDarkMode: boolean }> = ({ isDarkMode }) => {
   const [currentIp, setCurrentIp] = useState<string | undefined>();
 
   const [cards, setCards] = useState<CardState[]>([
-    { id: 'userActivity', title: 'User Activity', component: <UserActivityChart  /> },
+    {
+      id: 'userActivity',
+      title: 'User Activity',
+      component: <UserActivityChart />,
+    },
     { id: 'eventTypes', title: 'Event Types', component: <EventTypeChart /> },
-    { id: 'eventSources', title: 'Event Sources', component: <EventSourceChart /> },
+    {
+      id: 'eventSources',
+      title: 'Event Sources',
+      component: <EventSourceChart />,
+    },
     { id: 'heatMap', title: 'IP Address Heat Map', component: <HeatMap /> },
     {
       id: 'ipAccess',

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/Profile.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { ProfileProps } from "../types";
+import React from 'react';
+import { ProfileProps } from '../types';
 //import "../profile.css";
 
 interface User {
@@ -12,12 +12,12 @@ interface User {
 }
 
 const user: User = {
-  username: "BobTest",
-  displayName: "Bob Test",
-  email: "BobTest@gmail.com",
-  phone: "+1 (234) 567-890",
-  company: "Test Guys Inc.",
-  link: "https://aws.amazon.com",
+  username: 'BobTest',
+  displayName: 'Bob Test',
+  email: 'BobTest@gmail.com',
+  phone: '+1 (234) 567-890',
+  company: 'Test Guys Inc.',
+  link: 'https://aws.amazon.com',
 };
 
 const Profile: React.FC<ProfileProps> = ({ isDarkMode }) => {
@@ -26,9 +26,9 @@ const Profile: React.FC<ProfileProps> = ({ isDarkMode }) => {
       <div className="left-container">
         <div className="profile-settings">
           <div className="profile-picture">
-            <img 
-              src="https://m.media-amazon.com/images/I/51IdQIkjlBL._AC_UF894,1000_QL80_.jpg" 
-              alt="Profile" 
+            <img
+              src="https://m.media-amazon.com/images/I/51IdQIkjlBL._AC_UF894,1000_QL80_.jpg"
+              alt="Profile"
             />
           </div>
           <div className="profile-info">
@@ -68,7 +68,12 @@ const Profile: React.FC<ProfileProps> = ({ isDarkMode }) => {
         </div>
         <button className="submit-button">Submit</button>
         <button className="logout-button logout-button-styled">Logout</button>
-        <a className="aws-login-button submit-button" href={user.link} target="_blank" rel="noopener noreferrer">
+        <a
+          className="aws-login-button submit-button"
+          href={user.link}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           AWS Log-in Information
         </a>
       </div>
@@ -102,22 +107,42 @@ const Profile: React.FC<ProfileProps> = ({ isDarkMode }) => {
             <div className="input-container bordered">
               <label>Radio Options</label>
               <div>
-                <input type="radio" id="radio1" name="radioOption" value="radio1" />
+                <input
+                  type="radio"
+                  id="radio1"
+                  name="radioOption"
+                  value="radio1"
+                />
                 <label htmlFor="radio1">Radio 1</label>
               </div>
               <div>
-                <input type="radio" id="radio2" name="radioOption" value="radio2" />
+                <input
+                  type="radio"
+                  id="radio2"
+                  name="radioOption"
+                  value="radio2"
+                />
                 <label htmlFor="radio2">Radio 2</label>
               </div>
             </div>
             <div className="input-container bordered">
               <label htmlFor="checkboxOptions">Checkbox Options</label>
               <div>
-                <input type="checkbox" id="checkbox1" name="checkboxOptions" value="checkbox1" />
+                <input
+                  type="checkbox"
+                  id="checkbox1"
+                  name="checkboxOptions"
+                  value="checkbox1"
+                />
                 <label htmlFor="checkbox1">Checkbox 1</label>
               </div>
               <div>
-                <input type="checkbox" id="checkbox2" name="checkboxOptions" value="checkbox2" />
+                <input
+                  type="checkbox"
+                  id="checkbox2"
+                  name="checkboxOptions"
+                  value="checkbox2"
+                />
                 <label htmlFor="checkbox2">Checkbox 2</label>
               </div>
             </div>
@@ -127,7 +152,12 @@ const Profile: React.FC<ProfileProps> = ({ isDarkMode }) => {
             </div>
             <div className="input-container bordered">
               <label htmlFor="tagSelector">Tag Selector</label>
-              <input type="text" id="tagSelector" name="tagSelector" placeholder="Add tags..." />
+              <input
+                type="text"
+                id="tagSelector"
+                name="tagSelector"
+                placeholder="Add tags..."
+              />
             </div>
             <div className="input-container bordered">
               <label htmlFor="numberInput">Enter a Number</label>

client/src/pages/SignUp.tsx

@@ -65,7 +65,7 @@
     <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>
           <input
@@ -126,7 +126,9 @@
             required
           />
         </div>
-        <button className="signup-button" type="submit">Sign Up</button>
+        <button className="signup-button" type="submit">
+          Sign Up
+        </button>
       </form>
     </div>
   );