fix: upgrade deps and modernize

.devcontainer/devcontainer.json

@@ -2,48 +2,48 @@
 // https://github.com/microsoft/vscode-dev-containers/blob/main/containers/javascript-node-postgres/.devcontainer/devcontainer.json
 
 {
-	"name": "Node.js & PostgreSQL",
-	"dockerComposeFile": "docker-compose.yml",
-	"service": "app",
-	"workspaceFolder": "/workspace",
-	"features": {
-		"ghcr.io/devcontainers/features/common-utils:2": {
-			"installZsh": "true",
-			"username": "node",
-			"upgradePackages": "true"
-		},
-		"ghcr.io/devcontainers/features/node:1": {
-			"version": "none"
-		},
-		"ghcr.io/devcontainers/features/git:1": {
-            "version": "latest",
-            "ppa": "false"
-        }
-	},
+  "name": "Node.js & PostgreSQL",
+  "dockerComposeFile": "docker-compose.yml",
+  "service": "app",
+  "workspaceFolder": "/workspace",
+  "features": {
+    "ghcr.io/devcontainers/features/common-utils:2": {
+      "installZsh": "true",
+      "username": "node",
+      "upgradePackages": "true"
+    },
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": "none"
+    },
+    "ghcr.io/devcontainers/features/git:1": {
+      "version": "latest",
+      "ppa": "false"
+    }
+  },
 
-	// Configure tool-specific properties.
-	"customizations": {
-		// Configure properties specific to VS Code.
-		"vscode": {
-			// Add the IDs of extensions you want installed when the container is created.
-			"extensions": [
-				"dbaeumer.vscode-eslint",
-				"esbenp.prettier-vscode",
-				"ms-vsliveshare.vsliveshare"
-			]
-		}
-	},
+  // Configure tool-specific properties.
+  "customizations": {
+    // Configure properties specific to VS Code.
+    "vscode": {
+      // Add the IDs of extensions you want installed when the container is created.
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "ms-vsliveshare.vsliveshare"
+      ]
+    }
+  },
 
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// This can be used to network with other containers or with the host.
-	"forwardPorts": [3001, 3002, 5432, 5555],
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // This can be used to network with other containers or with the host.
+  "forwardPorts": [3001, 3002, 5432, 5555],
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "yarn install",
+  // Use 'postCreateCommand' to run commands after the container is created.
+  // "postCreateCommand": "yarn install",
 
-	// Set `remoteUser` to `root` to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-	"remoteUser": "node",
+  // Set `remoteUser` to `root` to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node",
 
-	"postCreateCommand": "./.devcontainer/postCreateCommand.sh",
-	"postAttachCommand": "./codespace-instructions.sh"
+  "postCreateCommand": "./.devcontainer/postCreateCommand.sh",
+  "postAttachCommand": "./codespace-instructions.sh"
 }

.github/workflows/ci.yml

@@ -9,16 +9,16 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.14.2]
+        node-version: [24]
 
     steps:
       - name: Checkout
-        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
 
       - name: Setup node
-        uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
         with:
-          node-version: 16.13.x
+          node-version: ${{ matrix.node-version }}
           cache: npm
 
       - name: Install modules
@@ -27,5 +27,8 @@ jobs:
       - name: Run lint
         run: npm run lint:code
 
+      - name: Run build
+        run: npm run build
+
       - name: Run tests
         run: npm run test

.gitignore

@@ -140,4 +140,7 @@ yarn-error.log*
 .vscode
 
 # Generated challenge map (built at runtime)
-data/challengeMap.json
+data/challengeMap.json
+
+# Docker local overrides
+docker-compose.override.yml

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx lint-staged

.nvmrc

@@ -0,0 +1 @@
+24

README.md

@@ -115,7 +115,7 @@ For FCC Proper integration, install the application locally and use Auth0 for au
 
 **Important:** Auth0 callback URLs must exactly match your application URL including the port number. After changing ports, you must update your Auth0 application settings.
 
-**Note: If you have FCC Proper and FCC Classroom set up locally and want to use the same Auth0 application for both, follow [this guide](https://youtu.be/38OwBwQEQz4).** 
+**Note: If you have FCC Proper and FCC Classroom set up locally and want to use the same Auth0 application for both, follow [this guide](https://youtu.be/38OwBwQEQz4).**
 
 ##### Creating an Auth0 Application
 

__tests__/components/__snapshots__/modal.test.jsx.snap

@@ -2,11 +2,6 @@
 
 exports[`Modal Component renders header correctly 1`] = `
 <div>
-  <div>
-    <div
-      className="Toastify"
-    />
-  </div>
   <div>
     <div
       className="Toastify"
@@ -27,11 +22,6 @@ exports[`Modal Component renders header correctly 1`] = `
 
 exports[`Modal Component renders whole form after header clicked 1`] = `
 <div>
-  <div>
-    <div
-      className="Toastify"
-    />
-  </div>
   <div>
     <div
       className="Toastify"

__tests__/components/adminTable.test.jsx

@@ -2,50 +2,48 @@ import AdminTable from '../../components/adminTable';
 import React from 'react';
 import renderer from 'react-test-renderer';
 const sampleColumns = [
-    {
-      name: 'Name',
-      selector: row => row.name
-    },
-    {
-      name: 'Email',
-      selector: row => row.userEmail
-    },
-    {
-      name: 'Role',
-      selector: row => row.role
-    },
-    {
-      name: 'Actions',
-      selector: row => row.adminActions
-    }
-  ];
-const sampleUsers=[
-    {
-        id: 1,
-        name: "Hamzat Victor",
-        email: "oluwaborihamzat@gmail.com",
-        role: "ADMIN"
-    },
-    {
-        id: 2,
-        name: "Alade Christopher",
-        email: "aladechristoph@gmail.com",
-        role: "TEACHER"
-    },
-    {
-        id: 3,
-        name: "Ayomide onifade",
-        email: "Jangulabi@gmail.com",
-        role: "TEACHER"
-    },
-]
+  {
+    name: 'Name',
+    selector: row => row.name
+  },
+  {
+    name: 'Email',
+    selector: row => row.userEmail
+  },
+  {
+    name: 'Role',
+    selector: row => row.role
+  },
+  {
+    name: 'Actions',
+    selector: row => row.adminActions
+  }
+];
+const sampleUsers = [
+  {
+    id: 1,
+    name: 'Hamzat Victor',
+    email: 'oluwaborihamzat@gmail.com',
+    role: 'ADMIN'
+  },
+  {
+    id: 2,
+    name: 'Alade Christopher',
+    email: 'aladechristoph@gmail.com',
+    role: 'TEACHER'
+  },
+  {
+    id: 3,
+    name: 'Ayomide onifade',
+    email: 'Jangulabi@gmail.com',
+    role: 'TEACHER'
+  }
+];
 
 describe('AdminTable', () => {
   it('displays 3 rows of data with expected column names: name, email, role, action', () => {
     const tree = renderer
-      .create(
-          <AdminTable  data={sampleUsers} columns={sampleColumns}/>
-      )
+      .create(<AdminTable data={sampleUsers} columns={sampleColumns} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });

__tests__/components/authButton.test.jsx

@@ -13,7 +13,7 @@ jest.mock('next-auth/react', () => {
 });
 
 describe('Auth Button', () => {
-  it('shows Sign out when session exists', () => {
+  (it('shows Sign out when session exists', () => {
     useSession.mockImplementation(() => {
       return { data: { user: 'test@google.com' }, status: 'authenticated' };
     });
@@ -26,5 +26,5 @@ describe('Auth Button', () => {
       });
       render(<AuthButton></AuthButton>);
       expect(screen.getByText('Sign in')).toBeVisible();
-    });
+    }));
 });

__tests__/components/classInviteTable.test.jsx

@@ -7,6 +7,16 @@ import {
   userId
 } from '../../testing_data/testing-data';
 
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({
+    push: jest.fn(),
+    reload: jest.fn(),
+    query: {},
+    pathname: '/',
+    asPath: '/'
+  }))
+}));
+
 const sampleCurrentClassrooms = [
   {
     classroomName: 'how to build a website',

__tests__/components/dashtable_v2.test.jsx

@@ -35,4 +35,4 @@ describe('GlobalDashboardTable', () => {
     expect(getTimeSpy).toHaveBeenCalled();
     expect(container).toMatchSnapshot();
   });
-});
+});

__tests__/components/layout.test.jsx

@@ -2,7 +2,6 @@ import Layout from '../../components/layout';
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-
 describe('Layout', () => {
   it('displays expected children', () => {
     const tree = renderer

__tests__/components/modal.test.jsx

@@ -1,6 +1,6 @@
 import Modal from '../../components/modal';
 import React from 'react';
-import renderer, {act} from 'react-test-renderer';
+import renderer, { act } from 'react-test-renderer';
 
 const sampleData = [
   {
@@ -30,25 +30,27 @@ const sampleData = [
   }
 ];
 
-const sampleUser = "Ayomide";
-const className = 'flex cursor-pointer justify-center p-4 m-6 rounded-md hover:bg-fcc-primary-yellow shadedow-lg border-solid border-color: inherit; border-2 pl-4 pr-4 bg-[#feac32] text-black'
+const sampleUser = 'Ayomide';
+const className =
+  'flex cursor-pointer justify-center p-4 m-6 rounded-md hover:bg-fcc-primary-yellow shadedow-lg border-solid border-color: inherit; border-2 pl-4 pr-4 bg-[#feac32] text-black';
 
 describe('Modal Component', () => {
   it('renders header correctly', () => {
-    const tree = renderer.create(<Modal userId= {sampleUser} certificationNames= {sampleData} />).toJSON();
+    const tree = renderer
+      .create(<Modal userId={sampleUser} certificationNames={sampleData} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
-  it('renders whole form after header clicked', ()=> {
-    const testRenderer = renderer.create(<Modal userId= {sampleUser} certificationNames= {sampleData} />);
+  it('renders whole form after header clicked', () => {
+    const testRenderer = renderer.create(
+      <Modal userId={sampleUser} certificationNames={sampleData} />
+    );
     const testInstance = testRenderer.root;
-    const header = testInstance.findByProps({className})
+    const header = testInstance.findByProps({ className });
     act(() => {
       header.props.onClick();
     });
     const tree = testRenderer.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
-
-
-