PR feedback: extract common component

uwblueprint · Sep 17, 2023 · ec54dbf · ec54dbf
1 parent de5b88a
commit ec54dbf
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 71 deletions.
diff --git a/frontend/src/components/pages/teacher/DisplayAssessmentsPage.tsx b/frontend/src/components/pages/teacher/DisplayAssessmentsPage.tsx
@@ -1,26 +1,15 @@
 import React, { useMemo } from "react";
-import {
-  Box,
-  Center,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  VStack,
-} from "@chakra-ui/react";
+import { Box, Center, VStack } from "@chakra-ui/react";
 
 import * as Routes from "../../../constants/Routes";
 import { TestSessionStatus } from "../../../types/TestSessionTypes";
-import { TEST_SESSION_STATUSES } from "../../../types/TestSessionTypes";
-import { titleCase } from "../../../utils/GeneralUtils";
 import HeaderWithButton from "../../common/HeaderWithButton";
 import ErrorState from "../../common/info/ErrorState";
 import LoadingState from "../../common/info/LoadingState";
 import EmptySessionsMessage from "../../common/info/messages/EmptySessionsMessage";
 import Pagination from "../../common/table/Pagination";
 import usePaginatedData from "../../common/table/usePaginatedData";
-import TestSessionListItem from "../../teacher/view-sessions/TestSessionListItem";
+import TestSessionTabs from "../../teacher/view-sessions/TestSessionTabs";
 import useAssessmentDataQuery from "../../teacher/view-sessions/useAssessmentDataQuery";
 
 const DisplayAssessmentsPage = (): React.ReactElement => {
@@ -68,28 +57,7 @@ const DisplayAssessmentsPage = (): React.ReactElement => {
       )}
       {!!data?.length && !loading && !error && (
         <>
-          <Tabs
-            mt={3}
-            onChange={(index) => setCurrentTab(TEST_SESSION_STATUSES[index])}
-          >
-            <TabList>
-              {TEST_SESSION_STATUSES.map((status) => (
-                <Tab key={status}>{titleCase(status)}</Tab>
-              ))}
-            </TabList>
-            <TabPanels>
-              {TEST_SESSION_STATUSES.map((status) => (
-                <TabPanel key={status} pl={0} pr={0}>
-                  {paginatedData?.map((session) => (
-                    <TestSessionListItem
-                      key={session.testSessionId}
-                      session={session}
-                    />
-                  ))}
-                </TabPanel>
-              ))}
-            </TabPanels>
-          </Tabs>
+          <TestSessionTabs data={paginatedData} setCurrentTab={setCurrentTab} />
           {totalPages > 1 && (
             <Center>
               <Pagination

diff --git a/frontend/src/components/pages/teacher/TeacherDashboardPage.tsx b/frontend/src/components/pages/teacher/TeacherDashboardPage.tsx
@@ -20,7 +20,7 @@ const SECTION_CONFIG = [
     title: "Assessments",
     viewAllRoute: Routes.DISPLAY_ASSESSMENTS_PAGE,
     bodyComponent: <AssessmentsSection />,
-    headerGap: 2,
+    headerGap: 0,
   },
 ];
 

diff --git a/frontend/src/components/teacher/dashboard/AssessmentsSection.tsx b/frontend/src/components/teacher/dashboard/AssessmentsSection.tsx
@@ -1,23 +1,11 @@
 import React, { useMemo, useState } from "react";
-import {
-  Box,
-  Center,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from "@chakra-ui/react";
+import { Box, Center } from "@chakra-ui/react";
 
-import {
-  TEST_SESSION_STATUSES,
-  TestSessionStatus,
-} from "../../../types/TestSessionTypes";
-import { titleCase } from "../../../utils/GeneralUtils";
+import { TestSessionStatus } from "../../../types/TestSessionTypes";
 import ErrorState from "../../common/info/ErrorState";
 import LoadingState from "../../common/info/LoadingState";
 import EmptySessionsMessage from "../../common/info/messages/EmptySessionsMessage";
-import TestSessionListItem from "../view-sessions/TestSessionListItem";
+import TestSessionTabs from "../view-sessions/TestSessionTabs";
 import useAssessmentDataQuery from "../view-sessions/useAssessmentDataQuery";
 
 const QUERY_DATA_LIMIT_PER_STATUS = 6;
@@ -56,25 +44,7 @@ const AssessmentsSection = () => {
         </Box>
       )}
       {!!data?.length && !error && !loading && (
-        <Tabs onChange={(index) => setCurrentTab(TEST_SESSION_STATUSES[index])}>
-          <TabList>
-            {TEST_SESSION_STATUSES.map((status) => (
-              <Tab key={status}>{titleCase(status)}</Tab>
-            ))}
-          </TabList>
-          <TabPanels>
-            {TEST_SESSION_STATUSES.map((status) => (
-              <TabPanel key={status} px={0}>
-                {sortedData?.map((session) => (
-                  <TestSessionListItem
-                    key={session.testSessionId}
-                    session={session}
-                  />
-                ))}
-              </TabPanel>
-            ))}
-          </TabPanels>
-        </Tabs>
+        <TestSessionTabs data={sortedData} setCurrentTab={setCurrentTab} />
       )}
       {!data?.length && !loading && !error && (
         <Box mt={8}>

diff --git a/frontend/src/components/teacher/view-sessions/TestSessionTabs.tsx b/frontend/src/components/teacher/view-sessions/TestSessionTabs.tsx
@@ -0,0 +1,47 @@
+import type { ReactElement } from "react";
+import React from "react";
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+
+import type { TestSessionStatus } from "../../../types/TestSessionTypes";
+import { TEST_SESSION_STATUSES } from "../../../types/TestSessionTypes";
+import { titleCase } from "../../../utils/GeneralUtils";
+
+import TestSessionListItem from "./TestSessionListItem";
+import type { FormattedAssessmentData } from "./useAssessmentDataQuery";
+
+type TestSessionTabsProps = {
+  data?: FormattedAssessmentData;
+  setCurrentTab: (status: TestSessionStatus) => void;
+};
+
+const TestSessionTabs = ({
+  data,
+  setCurrentTab,
+}: TestSessionTabsProps): ReactElement => {
+  return (
+    <Tabs
+      mt={3}
+      onChange={(index) => setCurrentTab(TEST_SESSION_STATUSES[index])}
+    >
+      <TabList>
+        {TEST_SESSION_STATUSES.map((status) => (
+          <Tab key={status}>{titleCase(status)}</Tab>
+        ))}
+      </TabList>
+      <TabPanels>
+        {TEST_SESSION_STATUSES.map((status) => (
+          <TabPanel key={status} pl={0} pr={0}>
+            {data?.map((session) => (
+              <TestSessionListItem
+                key={session.testSessionId}
+                session={session}
+              />
+            ))}
+          </TabPanel>
+        ))}
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export default TestSessionTabs;
diff --git a/frontend/src/components/teacher/view-sessions/useAssessmentDataQuery.ts b/frontend/src/components/teacher/view-sessions/useAssessmentDataQuery.ts
@@ -4,9 +4,29 @@ import { useQuery } from "@apollo/client";
 import { GET_TEST_SESSIONS_BY_TEACHER_ID } from "../../../APIClients/queries/TestSessionQueries";
 import type { TestSessionOverviewData } from "../../../APIClients/types/TestSessionClientTypes";
 import AuthContext from "../../../contexts/AuthContext";
+import type { TestSessionStatus } from "../../../types/TestSessionTypes";
 import { getSessionTargetDate } from "../../../utils/TestSessionUtils";
 
-const useAssessmentDataQuery = (limit?: number) => {
+export type FormattedAssessmentData = {
+  testSessionId: string;
+  testId: string;
+  testName: string;
+  classroomId: string;
+  classroomName: string;
+  startDate: Date;
+  endDate: Date;
+  targetDate: Date;
+  status: TestSessionStatus;
+  accessCode: string;
+}[];
+
+type AssessmentDataQueryResult = {
+  loading: boolean;
+  error?: Error;
+  data?: FormattedAssessmentData;
+};
+
+const useAssessmentDataQuery = (limit?: number): AssessmentDataQueryResult => {
   const { authenticatedUser } = useContext(AuthContext);
   const { id: teacherId } = authenticatedUser ?? {};