Spinner (#214)

* add spinner WIP * spinner and no results found message * pr comments
uwblueprint · Dec 3, 2023 · 91140b7 · 91140b7
1 parent 0c19df7
commit 91140b7
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 63 deletions.
diff --git a/frontend/src/components/forms/EditLog.tsx b/frontend/src/components/forms/EditLog.tsx
@@ -375,7 +375,7 @@ const EditLog = ({
                       placeholder="Select Residents"
                       onChange={handleResidentsChange}
                       defaultValue={residentOptions.filter(
-                        (item) => logRecord.residents.includes(item.label),
+                        (item) => logRecord.residents && logRecord.residents.includes(item.label),
                       )}
                       styles={selectStyle}
                     />

diff --git a/frontend/src/components/pages/AdminControls/EmployeeDirectory.tsx b/frontend/src/components/pages/AdminControls/EmployeeDirectory.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, Flex, Spinner } from "@chakra-ui/react";
 
 import Pagination from "../../common/Pagination";
 import NavigationBar from "../../common/NavigationBar";
@@ -18,10 +18,13 @@ const EmployeeDirectoryPage = (): React.ReactElement => {
   const [pageNum, setPageNum] = useState<number>(1);
   const [userPageNum, setUserPageNum] = useState(pageNum);
 
+  const [tableLoaded, setTableLoaded] = useState(false)
+
   // Table reference
   const tableRef = useRef<HTMLDivElement>(null);
 
   const getUsers = async (pageNumber: number) => {
+    setTableLoaded(false)
     const data = await UserAPIClient.getUsers({ pageNumber, resultsPerPage });
 
     // Reset table scroll
@@ -35,6 +38,8 @@ const EmployeeDirectoryPage = (): React.ReactElement => {
     } else {
       setPageNum(pageNumber);
     }
+
+    setTableLoaded(true)
   };
 
   const countUsers = async () => {
@@ -71,23 +76,34 @@ const EmployeeDirectoryPage = (): React.ReactElement => {
           />
         </Flex>
 
-        <EmployeeDirectoryTable
-          users={users}
-          tableRef={tableRef}
-          userPageNum={userPageNum}
-          setUserPageNum={setUserPageNum}
-          getRecords={getUsers}
-          countUsers={countUsers}
-        />
-        <Pagination
-          numRecords={numUsers}
-          pageNum={pageNum}
-          userPageNum={userPageNum}
-          setUserPageNum={setUserPageNum}
-          resultsPerPage={resultsPerPage}
-          setResultsPerPage={setResultsPerPage}
-          getRecords={getUsers}
-        />
+        {!tableLoaded ? (
+          <Spinner
+            thickness="4px"
+            speed="0.65s"
+            emptyColor="gray.200"
+            size="xl"
+          />
+        ) : (
+          <Box>
+            <EmployeeDirectoryTable
+              users={users}
+              tableRef={tableRef}
+              userPageNum={userPageNum}
+              setUserPageNum={setUserPageNum}
+              getRecords={getUsers}
+              countUsers={countUsers}
+            />
+            <Pagination
+              numRecords={numUsers}
+              pageNum={pageNum}
+              userPageNum={userPageNum}
+              setUserPageNum={setUserPageNum}
+              resultsPerPage={resultsPerPage}
+              setResultsPerPage={setResultsPerPage}
+              getRecords={getUsers}
+            />
+          </Box>
+        )}
       </Box>
     </Box>
   );

diff --git a/frontend/src/components/pages/HomePage/HomePage.tsx b/frontend/src/components/pages/HomePage/HomePage.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Box, Flex, Spacer } from "@chakra-ui/react";
+import { Box, Flex, Spacer, Spinner, Text } from "@chakra-ui/react";
 
 import Pagination from "../../common/Pagination";
 import NavigationBar from "../../common/NavigationBar";
@@ -42,6 +42,9 @@ const HomePage = (): React.ReactElement => {
   const [pageNum, setPageNum] = useState<number>(1);
   const [userPageNum, setUserPageNum] = useState(pageNum);
 
+  // Table Loaded
+  const [tableLoaded, setTableLoaded] = useState(false)
+
   // Table reference
   const tableRef = useRef<HTMLDivElement>(null);
 
@@ -62,6 +65,8 @@ const HomePage = (): React.ReactElement => {
     const dateRange = [formatDate(startDate), formatDate(endDate)];
     const tagsValues = tags.map((tag) => tag.value);
 
+    setTableLoaded(false)
+
     const data = await LogRecordAPIClient.filterLogRecords({
       buildingId: buildingIds,
       employeeId: employeeIds,
@@ -85,6 +90,8 @@ const HomePage = (): React.ReactElement => {
     } else {
       setPageNum(pageNumber);
     }
+
+    setTableLoaded(true)
   };
 
   const countLogRecords = async () => {
@@ -182,23 +189,42 @@ const HomePage = (): React.ReactElement => {
           setFlagged={setFlagged}
         />
 
-        <LogRecordsTable
-          logRecords={logRecords}
-          tableRef={tableRef}
-          userPageNum={userPageNum}
-          getRecords={getLogRecords}
-          countRecords={countLogRecords}
-          setUserPageNum={setUserPageNum}
-        />
-        <Pagination
-          numRecords={numRecords}
-          pageNum={pageNum}
-          userPageNum={userPageNum}
-          setUserPageNum={setUserPageNum}
-          resultsPerPage={resultsPerPage}
-          setResultsPerPage={setResultsPerPage}
-          getRecords={getLogRecords}
-        />
+        {!tableLoaded ? (
+          <Spinner
+            thickness="4px"
+            speed="0.65s"
+            emptyColor="gray.200"
+            size="xl"
+          />
+        ) : (
+          <Box>
+            {numRecords === 0 ? (
+              <Text textAlign="center" paddingTop="5%">
+                No results found.
+              </Text>
+            ) : (
+              <Box>
+                <LogRecordsTable
+                  logRecords={logRecords}
+                  tableRef={tableRef}
+                  userPageNum={userPageNum}
+                  getRecords={getLogRecords}
+                  countRecords={countLogRecords}
+                  setUserPageNum={setUserPageNum}
+                />
+                <Pagination
+                  numRecords={numRecords}
+                  pageNum={pageNum}
+                  userPageNum={userPageNum}
+                  setUserPageNum={setUserPageNum}
+                  resultsPerPage={resultsPerPage}
+                  setResultsPerPage={setResultsPerPage}
+                  getRecords={getLogRecords}
+                />
+              </Box>
+            )}
+          </Box>
+        )}
       </Box>
     </Box>
   );

diff --git a/frontend/src/components/pages/HomePage/LogRecordsTable.tsx b/frontend/src/components/pages/HomePage/LogRecordsTable.tsx
@@ -130,11 +130,10 @@ const LogRecordsTable = ({
 
     const tagsData = await TagAPIClient.getTags();
     if (tagsData && tagsData.tags.length !== 0) {
-      const tagLabels: TagLabel[] = tagsData.tags
-        .map((tag) => ({
-          label: tag.name,
-          value: tag.tagId,
-        }));
+      const tagLabels: TagLabel[] = tagsData.tags.map((tag) => ({
+        label: tag.name,
+        value: tag.tagId,
+      }));
       setTagOptions(tagLabels);
     }
   };

diff --git a/frontend/src/components/pages/ResidentDirectory/ResidentDirectory.tsx b/frontend/src/components/pages/ResidentDirectory/ResidentDirectory.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import { Box, Flex, Spacer } from "@chakra-ui/react";
+import { Box, Flex, Spacer, Spinner, Text } from "@chakra-ui/react";
 import ResidentDirectoryTable from "./ResidentDirectoryTable";
 import NavigationBar from "../../common/NavigationBar";
 import { Resident } from "../../../types/ResidentTypes";
@@ -10,19 +10,21 @@ import Pagination from "../../common/Pagination";
 import CreateResident from "../../forms/CreateResident";
 
 const ResidentDirectory = (): React.ReactElement => {
-  const [buildingOptions, setBuildingOptions] = useState<BuildingLabel[]>([])
+  const [buildingOptions, setBuildingOptions] = useState<BuildingLabel[]>([]);
   const [residents, setResidents] = useState<Resident[]>([]);
   const [numResidents, setNumResidents] = useState<number>(0);
   const [resultsPerPage, setResultsPerPage] = useState<number>(25);
   const [pageNum, setPageNum] = useState<number>(1);
   const [userPageNum, setUserPageNum] = useState(pageNum);
 
+  const [tableLoaded, setTableLoaded] = useState(false)
+
   const tableRef = useRef<HTMLDivElement>(null);
 
   const getBuildingOptions = async () => {
     const data = await BuildingAPIClient.getBuildings();
 
-    if (data){
+    if (data) {
       const buildingLabels: BuildingLabel[] = data.buildings.map(
         (building) => ({ label: building.name!, value: building.id! }),
       );
@@ -31,6 +33,7 @@ const ResidentDirectory = (): React.ReactElement => {
   };
 
   const getResidents = async (pageNumber: number) => {
+    setTableLoaded(false)
     const data = await ResidentAPIClient.getResidents({
       returnAll: false,
       pageNumber,
@@ -48,6 +51,7 @@ const ResidentDirectory = (): React.ReactElement => {
     } else {
       setPageNum(pageNumber);
     }
+    setTableLoaded(true)
   };
 
   const countResidents = async () => {
@@ -85,24 +89,44 @@ const ResidentDirectory = (): React.ReactElement => {
             countResidents={countResidents}
           />
         </Flex>
-        <ResidentDirectoryTable 
-          buildingOptions={buildingOptions}
-          residents={residents} 
-          tableRef={tableRef}
-          userPageNum={userPageNum}
-          setUserPageNum={setUserPageNum}
-          getRecords={getResidents}
-          countResidents={countResidents}
-        />
-        <Pagination
-          numRecords={numResidents}
-          pageNum={pageNum}
-          userPageNum={userPageNum}
-          setUserPageNum={setUserPageNum}
-          resultsPerPage={resultsPerPage}
-          setResultsPerPage={setResultsPerPage}
-          getRecords={getResidents}
-        />
+
+        {!tableLoaded ? (
+          <Spinner
+            thickness="4px"
+            speed="0.65s"
+            emptyColor="gray.200"
+            size="xl"
+          />
+        ) : (
+          <Box>
+            {numResidents === 0 ? (
+              <Text textAlign="center" paddingTop="5%">
+                No results found.
+              </Text>
+            ) : (
+              <Box>
+                <ResidentDirectoryTable
+                  buildingOptions={buildingOptions}
+                  residents={residents}
+                  tableRef={tableRef}
+                  userPageNum={userPageNum}
+                  setUserPageNum={setUserPageNum}
+                  getRecords={getResidents}
+                  countResidents={countResidents}
+                />
+                <Pagination
+                  numRecords={numResidents}
+                  pageNum={pageNum}
+                  userPageNum={userPageNum}
+                  setUserPageNum={setUserPageNum}
+                  resultsPerPage={resultsPerPage}
+                  setResultsPerPage={setResultsPerPage}
+                  getRecords={getResidents}
+                />
+              </Box>
+            )}
+          </Box>
+        )}
       </Box>
     </Box>
   );

diff --git a/frontend/src/theme/common/spinnerStyles.tsx b/frontend/src/theme/common/spinnerStyles.tsx
@@ -0,0 +1,14 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme";
+
+// Spinner styling
+const Spinner: ComponentStyleConfig = {
+  baseStyle: {
+    color: "teal.400",
+    marginTop: "5%",
+  },
+  defaultProps: {
+    size: "xl",
+  },
+};
+
+export default Spinner;
diff --git a/frontend/src/theme/index.tsx b/frontend/src/theme/index.tsx
@@ -3,6 +3,7 @@ import { extendTheme } from "@chakra-ui/react";
 import colors from "./colors";
 import fontStyles from "./fontStyles";
 import Button from "./common/buttonStyles";
+import Spinner from "./common/spinnerStyles";
 import Table from "./common/tableStyles";
 import Text from "./common/textStyles";
 import { Input, Textarea } from "./forms/inputStyles";
@@ -23,6 +24,7 @@ const customTheme = extendTheme({
     FormLabel,
     Modal,
     Text,
+    Spinner,
   },
 });