spinner and no results found message

uwblueprint · Dec 2, 2023 · 38014ff · 38014ff
1 parent 8f551eb
commit 38014ff
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 78 deletions.
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";
@@ -13,7 +13,7 @@ import CreateEmployee from "../../forms/CreateEmployee";
 
 const EmployeeDirectoryPage = (): React.ReactElement => {
   const [users, setUsers] = useState<User[]>([]);
-  const [numUsers, setNumUsers] = useState<number>(0);
+  const [numUsers, setNumUsers] = useState<number>(-1);
   const [resultsPerPage, setResultsPerPage] = useState<number>(25);
   const [pageNum, setPageNum] = useState<number>(1);
   const [userPageNum, setUserPageNum] = useState(pageNum);
@@ -71,23 +71,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}
-        />
+        {numUsers < 0 ? (
+          <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";
@@ -37,7 +37,7 @@ const HomePage = (): React.ReactElement => {
 
   // Record/page state
   const [logRecords, setLogRecords] = useState<LogRecord[]>([]);
-  const [numRecords, setNumRecords] = useState<number>(0);
+  const [numRecords, setNumRecords] = useState<number>(-1);
   const [resultsPerPage, setResultsPerPage] = useState<number>(25);
   const [pageNum, setPageNum] = useState<number>(1);
   const [userPageNum, setUserPageNum] = useState(pageNum);
@@ -182,23 +182,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}
-        />
+        {numRecords < 0 ? (
+          <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
@@ -17,7 +17,6 @@ import {
   Alert,
   AlertDescription,
   AlertIcon,
-  Spinner,
 } from "@chakra-ui/react";
 import { VscKebabVertical } from "react-icons/vsc";
 
@@ -131,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);
     }
   };
@@ -169,14 +167,6 @@ const LogRecordsTable = ({
 
   return (
     <>
-      <Spinner />
-      <Spinner
-        thickness="4px"
-        speed="0.65s"
-        emptyColor="gray.200"
-        color="blue.500"
-        size="xl"
-      />
       <Box>
         <TableContainer
           marginTop="12px"

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,9 +10,9 @@ 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 [numResidents, setNumResidents] = useState<number>(-1);
   const [resultsPerPage, setResultsPerPage] = useState<number>(25);
   const [pageNum, setPageNum] = useState<number>(1);
   const [userPageNum, setUserPageNum] = useState(pageNum);
@@ -22,7 +22,7 @@ const ResidentDirectory = (): React.ReactElement => {
   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! }),
       );
@@ -85,24 +85,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}
-        />
+
+        {numResidents < 0 ? (
+          <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
@@ -4,10 +4,10 @@ import type { ComponentStyleConfig } from "@chakra-ui/theme";
 const Spinner: ComponentStyleConfig = {
   baseStyle: {
     color: "teal.400",
-    speed: "0.65s",
-    emptyColor: "teal.400",
+    marginTop: "5%",
+  },
+  defaultProps: {
     size: "xl",
-    thickness: "4px",
   },
 };
 

diff --git a/frontend/src/theme/index.tsx b/frontend/src/theme/index.tsx
@@ -3,7 +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 Spinner from "./common/spinnerStyles";
 import Table from "./common/tableStyles";
 import Text from "./common/textStyles";
 import { Input, Textarea } from "./forms/inputStyles";