fix: change teacher dashboard tab design to standard tabs

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

frontend/src/components/teacher/dashboard/AssessmentsSection.tsx

@@ -1,24 +1,12 @@
 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 * as Routes from "../../../constants/Routes";
-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";
 
 import ViewAllLink from "./ViewAllLink";
@@ -60,40 +48,10 @@ const AssessmentsSection = () => {
       )}
       {!!data?.length && !error && !loading && (
         <>
-          <Tabs
-            onChange={(index) => setCurrentTab(TEST_SESSION_STATUSES[index])}
-          >
-            <TabList border="none" gap={8}>
-              {TEST_SESSION_STATUSES.map((status) => (
-                <Tab
-                  key={status}
-                  _focus={{ background: "none" }}
-                  border="none"
-                  color="blue.100"
-                  fontWeight="bold"
-                  px={0}
-                >
-                  {titleCase(status)}
-                </Tab>
-              ))}
-            </TabList>
-            <TabPanels>
-              {TEST_SESSION_STATUSES.map((status) => (
-                <TabPanel key={status} p={0}>
-                  {sortedData?.map((session) => (
-                    <TestSessionListItem
-                      key={session.testSessionId}
-                      session={session}
-                    />
-                  ))}
-                </TabPanel>
-              ))}
-            </TabPanels>
-          </Tabs>
+          <TestSessionTabs data={sortedData} setCurrentTab={setCurrentTab} />
           <ViewAllLink
             borderRadius="8px"
             h="50px"
-            mt={4}
             to={Routes.DISPLAY_ASSESSMENTS_PAGE}
           />
         </>

frontend/src/components/teacher/view-sessions/TestSessionListItem.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { useHistory } from "react-router-dom";
 import { HStack, Spacer, Tooltip } from "@chakra-ui/react";
 
-import type { TestSessionEditingData } from "../../../APIClients/types/TestSessionClientTypes";
 import * as Routes from "../../../constants/Routes";
 import type { TestSessionItemStats } from "../../../types/TestSessionTypes";
 import { TestSessionStatus } from "../../../types/TestSessionTypes";
@@ -11,14 +10,10 @@ import Copyable from "../../common/Copyable";
 import TestSessionListItemBody from "./TestSessionListItemBody";
 import TestSessionListItemPopover from "./TestSessionListItemPopover";
 import TestSessionListItemStatistics from "./TestSessionListItemStatistics";
+import type { FormattedAssessmentData } from "./useAssessmentDataQuery";
 
 export type TestSessionListItemProps = {
-  session: TestSessionEditingData & {
-    // Target date should be the start date of the session UNLESS
-    // the session is active, in which case it should be the end date
-    targetDate: Date;
-    accessCode: string;
-  };
+  session: FormattedAssessmentData;
   isReadOnly?: boolean;
   stats?: TestSessionItemStats;
   inClassroomPage?: boolean;
@@ -33,8 +28,14 @@ const TestSessionListItem = ({
   inClassroomPage = false,
 }: TestSessionListItemProps): React.ReactElement => {
   const history = useHistory();
-  const { testSessionId, classroomName, testName, status } = session;
-  const { targetDate, accessCode, ...testSessionEditingData } = session;
+  const {
+    testSessionId,
+    classroomName,
+    testName,
+    status,
+    targetDate,
+    accessCode,
+  } = session;
   const isPast = status === TestSessionStatus.PAST;
 
   const formattedAccessCode = `${accessCode.slice(
@@ -94,11 +95,7 @@ const TestSessionListItem = ({
               label="Access Code"
               value={accessCode}
             />
-            {!isReadOnly && (
-              <TestSessionListItemPopover
-                testSessionEditingData={testSessionEditingData}
-              />
-            )}
+            {!isReadOnly && <TestSessionListItemPopover session={session} />}
           </>
         )}
       </HStack>

frontend/src/components/teacher/view-sessions/TestSessionListItemPopover.tsx

@@ -5,20 +5,21 @@ import { Divider, useDisclosure, VStack } from "@chakra-ui/react";
 
 import { DELETE_TEST_SESSION } from "../../../APIClients/mutations/TestSessionMutations";
 import { GET_TEST_SESSIONS_BY_TEACHER_ID } from "../../../APIClients/queries/TestSessionQueries";
-import type { TestSessionEditingData } from "../../../APIClients/types/TestSessionClientTypes";
 import * as Routes from "../../../constants/Routes";
 import { TestSessionStatus } from "../../../types/TestSessionTypes";
 import { getQueryName } from "../../../utils/GeneralUtils";
 import DeleteAssessmentModal from "../../admin/assessment-status/EditStatusModals/DeleteAssessmentModal";
 import Popover from "../../common/popover/Popover";
 import PopoverButton from "../../common/popover/PopoverButton";
 
+import type { FormattedAssessmentData } from "./useAssessmentDataQuery";
+
 type TestSessionPopoverProps = {
-  testSessionEditingData: TestSessionEditingData;
+  session: FormattedAssessmentData;
 };
 
 const TestSessionListItemPopover = ({
-  testSessionEditingData,
+  session,
 }: TestSessionPopoverProps): ReactElement => {
   const {
     isOpen: isDeleteModalOpen,
@@ -29,19 +30,19 @@ const TestSessionListItemPopover = ({
   const history = useHistory();
 
   const [deleteTestSession] = useMutation(DELETE_TEST_SESSION, {
-    variables: { id: testSessionEditingData.testSessionId },
+    variables: { id: session.testSessionId },
     refetchQueries: [getQueryName(GET_TEST_SESSIONS_BY_TEACHER_ID)],
   });
 
   const onEditTestSession = () => {
-    history.push(Routes.DISTRIBUTE_ASSESSMENT_PAGE, testSessionEditingData);
+    history.push(Routes.DISTRIBUTE_ASSESSMENT_PAGE, session);
   };
 
   return (
     <Popover>
       <VStack divider={<Divider />} spacing={0}>
         <PopoverButton name="Edit" onClick={onEditTestSession} />
-        {testSessionEditingData.status === TestSessionStatus.UPCOMING && (
+        {session.status === TestSessionStatus.UPCOMING && (
           <PopoverButton name="Delete" onClick={openDeleteModal} />
         )}
       </VStack>

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={2}
+      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;

frontend/src/components/teacher/view-sessions/useAssessmentDataQuery.ts

@@ -4,9 +4,31 @@ 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;
+  // Target date is the start date of the session UNLESS the session is
+  // active, in which case it is the end 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 ?? {};