From 039a882a2b8162e2fbf19e037eb336ef10be0288 Mon Sep 17 00:00:00 2001
From: Julian Dominguez-Schatz <julian.dominguezschatz@gmail.com>
Date: Fri, 29 Sep 2023 19:11:59 -0400
Subject: [PATCH] Add empty state for individual classrooms page tabs (#596)

Co-authored-by: carissa-tang <69697180+carissa-tang@users.noreply.github.com>
---
 .../EmptyArchivedClassroomsMessage.tsx        | 21 ++++
 .../info/messages/EmptyClassroomsMessage.tsx  |  2 +-
 .../pages/teacher/ClassroomsPage.tsx          | 97 ++++++++++---------
 3 files changed, 74 insertions(+), 46 deletions(-)
 create mode 100644 frontend/src/components/common/info/messages/EmptyArchivedClassroomsMessage.tsx

diff --git a/frontend/src/components/common/info/messages/EmptyArchivedClassroomsMessage.tsx b/frontend/src/components/common/info/messages/EmptyArchivedClassroomsMessage.tsx
new file mode 100644
index 000000000..2ce2dda4d
--- /dev/null
+++ b/frontend/src/components/common/info/messages/EmptyArchivedClassroomsMessage.tsx
@@ -0,0 +1,21 @@
+import React, { type ReactElement } from "react";
+import { Center, useStyleConfig } from "@chakra-ui/react";
+
+import DisplayAssessmentsIllustration from "../../../../assets/illustrations/display-assessments.svg";
+import MessageContainer from "../MessageContainer";
+
+const EmptyArchivedClassroomsMessage = (): ReactElement => {
+  const styles = useStyleConfig("Center", { variant: "emptyMessage" });
+  return (
+    <Center __css={styles} mt={8}>
+      <MessageContainer
+        image={DisplayAssessmentsIllustration}
+        paragraphs={["Use the archive option on a classroom to view it here"]}
+        subtitle="You currently have no archived classroooms."
+        textColor="blue.300"
+      />
+    </Center>
+  );
+};
+
+export default EmptyArchivedClassroomsMessage;
diff --git a/frontend/src/components/common/info/messages/EmptyClassroomsMessage.tsx b/frontend/src/components/common/info/messages/EmptyClassroomsMessage.tsx
index 9bdb87794..9fa2dd6fe 100644
--- a/frontend/src/components/common/info/messages/EmptyClassroomsMessage.tsx
+++ b/frontend/src/components/common/info/messages/EmptyClassroomsMessage.tsx
@@ -14,7 +14,7 @@ const EmptyClassroomsMessage = ({
 }: EmptyClassroomsStateProps): React.ReactElement => {
   const styles = useStyleConfig("Center", { variant: "emptyMessage" });
   return (
-    <Center __css={styles}>
+    <Center __css={styles} mt={8}>
       <MessageContainer
         buttonIcon={<PlusOutlineIcon />}
         buttonText="Create a classroom"
diff --git a/frontend/src/components/pages/teacher/ClassroomsPage.tsx b/frontend/src/components/pages/teacher/ClassroomsPage.tsx
index f26eaaaee..45d396ad6 100644
--- a/frontend/src/components/pages/teacher/ClassroomsPage.tsx
+++ b/frontend/src/components/pages/teacher/ClassroomsPage.tsx
@@ -21,6 +21,7 @@ import {
   TABS_CLASSROOM,
 } from "../../../types/ClassroomTypes";
 import HeaderWithButton from "../../common/HeaderWithButton";
+import EmptyArchivedClassroomsMessage from "../../common/info/messages/EmptyArchivedClassroomsMessage";
 import EmptyClassroomsMessage from "../../common/info/messages/EmptyClassroomsMessage";
 import QueryStateHandler from "../../common/QueryStateHandler";
 import Pagination from "../../common/table/Pagination";
@@ -100,57 +101,63 @@ const ClassroomsPage = (): ReactElement => {
             <TabPanels>
               {TABS_CLASSROOM.map((tab) => (
                 <TabPanel key={tab} padding="0">
-                  <Flex alignItems="left" flexWrap="wrap">
-                    {paginatedData?.map(
-                      ({
-                        id,
-                        activeAssessments,
-                        assessmentCount,
-                        gradeLevel,
-                        isActive,
-                        className,
-                        startDate,
-                        studentCount,
-                      }) => (
-                        <Flex key={id} paddingRight="4" paddingTop="4">
-                          <ClassroomCard
-                            key={id}
-                            activeAssessments={activeAssessments}
-                            assessmentCount={assessmentCount}
-                            grade={gradeLevel}
-                            id={id}
-                            isActive={isActive}
-                            name={className}
-                            startDate={startDate}
-                            studentCount={studentCount}
+                  {paginatedData?.length ? (
+                    <>
+                      <Flex alignItems="left" flexWrap="wrap">
+                        {paginatedData?.map(
+                          ({
+                            id,
+                            activeAssessments,
+                            assessmentCount,
+                            gradeLevel,
+                            isActive,
+                            className,
+                            startDate,
+                            studentCount,
+                          }) => (
+                            <Flex key={id} paddingRight="4" paddingTop="4">
+                              <ClassroomCard
+                                key={id}
+                                activeAssessments={activeAssessments}
+                                assessmentCount={assessmentCount}
+                                grade={gradeLevel}
+                                id={id}
+                                isActive={isActive}
+                                name={className}
+                                startDate={startDate}
+                                studentCount={studentCount}
+                              />
+                            </Flex>
+                          ),
+                        )}
+                      </Flex>
+                      <VStack
+                        alignItems="center"
+                        paddingBottom="6"
+                        paddingTop="6"
+                        spacing="6"
+                        width="100%"
+                      >
+                        {totalPages > 1 && (
+                          <Pagination
+                            currentPage={currentPage}
+                            onPageChange={setCurrentPage}
+                            pagesCount={totalPages}
                           />
-                        </Flex>
-                      ),
-                    )}
-                  </Flex>
-                  <VStack
-                    alignItems="center"
-                    paddingBottom="6"
-                    paddingTop="6"
-                    spacing="6"
-                    width="100%"
-                  >
-                    {totalPages > 1 && (
-                      <Pagination
-                        currentPage={currentPage}
-                        onPageChange={setCurrentPage}
-                        pagesCount={totalPages}
-                      />
-                    )}
-                  </VStack>
+                        )}
+                      </VStack>
+                    </>
+                  ) : tabIndex === 0 ? (
+                    <EmptyClassroomsMessage onClick={handleAddClassroom} />
+                  ) : (
+                    <EmptyArchivedClassroomsMessage />
+                  )}
                 </TabPanel>
               ))}
             </TabPanels>
           </Tabs>
         ) : (
-          <Box mt={8}>
-            <EmptyClassroomsMessage onClick={handleAddClassroom} />
-          </Box>
+          <EmptyClassroomsMessage onClick={handleAddClassroom} />
         )}
       </QueryStateHandler>
     </FormProvider>