missed some files

frontend/jest.config.js

@@ -0,0 +1,9 @@
+const nextJest = require("next/jest");
+const createJestConfig = nextJest({
+  dir: "./",
+});
+const customJestConfig = {
+  moduleDirectories: ["node_modules", "<rootDir>/"],
+  testEnvironment: "jest-environment-jsdom",
+};
+module.exports = createJestConfig(customJestConfig);

frontend/src/components/ParticipantsList.tsx

@@ -0,0 +1,57 @@
+import { DataGrid } from '@mui/x-data-grid';
+import Box from '@mui/material/Box';
+import {AppBar, Toolbar } from "@mui/material";
+import useParticipants from "../hooks/useParticipants";
+import type {NextPage} from 'next';
+import SignUpForm from "../components/signUpForm";
+import {Typography} from "@material-ui/core";
+
+const ParticipantsList = () => {
+    const { participants, isLoading } = useParticipants();
+
+    const columns = [
+        {
+            field: 'id',
+            headerName: 'ID',
+            width: 90
+        },
+        {
+            field: 'first_name',
+            headerName: 'First Name',
+            width: 300,
+            editable: true,
+        },
+        {
+            field: 'last_name',
+            headerName: 'Last Name',
+            width: 300,
+            editable: true,
+        },
+    ]
+
+    return (
+        <div>
+                <Box sx={{textAlign:'left', height: 400, width: '100%'}}>
+                    <Typography variant={'h6'}> Participants </Typography>
+                   <div style={{ height: 250, width: '100%' }}>
+                    <DataGrid
+                        rows={participants}
+                        columns={columns}
+                        initialState={{
+                            pagination: {
+                                paginationModel: {
+                                    pageSize: 5,
+                                },
+                            },
+                        }}
+                        pageSizeOptions={[5]}
+                        checkboxSelection
+                        disableRowSelectionOnClick
+                    />
+                   </div>
+                </Box>
+        </div>
+    );
+}
+
+export default ParticipantsList;

frontend/src/hooks/useParticipants.test.tsx

@@ -0,0 +1,69 @@
+import {waitFor, render, screen, act} from "@testing-library/react";
+import {AxiosInstance} from "axios";
+import useParticipants from "./useParticipants";
+import React from "react";
+import {useHttpClient} from "./useHttpClient";
+
+jest.mock("./useHttpClient")
+
+const mockedUseHttpClient = jest.mocked(useHttpClient, true)
+const TestParticipantsComponent = () => {
+  const {participants, isLoading} = useParticipants()
+  return (
+    <>{
+        isLoading ?
+          <></> :
+          <div>
+            {
+              participants.map((p) => {
+                return (
+                  <>
+                    <li>First Name: {p.first_name}</li>
+                    <li>Last Name: {p.last_name}</li>
+                    <li>ID: {p.id}</li>
+                  </>
+              )
+              })
+            }
+          </div>
+      }
+    </>
+  )
+}
+
+describe('useParticipants', () => {
+  const mockHttpClient = {
+    get: jest.fn(),
+    post: jest.fn()
+  }
+  beforeEach(async () => {
+    const expectedParticipantsResponse = {
+      data: [
+        {
+          "id":1,
+          "first_name":"clayton",
+          "last_name":"johnson",
+          "birthdate":"2016-04-16",
+        }
+      ]
+    }
+    mockedUseHttpClient.mockReturnValue(((mockHttpClient as unknown) as AxiosInstance))
+    mockHttpClient.get.mockReturnValue(Promise.resolve(expectedParticipantsResponse))
+    mockHttpClient.post.mockReturnValue(expectedParticipantsResponse)
+  });
+
+  it('should return renderable participant data', async () => {
+    act(() => {
+      render (
+        <TestParticipantsComponent/>
+      )
+    })
+
+    expect(mockHttpClient.get.mock.calls[0][0]).toEqual(`/participants`)
+    await waitFor(() => {
+      expect(mockHttpClient.get).toHaveBeenCalledWith('/participants')
+      expect(screen.getByText(/clayton/)).not.toBeNull()
+      expect(screen.getByText(/1/)).not.toBeNull()
+    })
+  });
+});