From 91140b725bc09a7d134e2abd57ac6faeb15d40ca Mon Sep 17 00:00:00 2001 From: phamkelly17 <86501308+phamkelly17@users.noreply.github.com> Date: Sun, 3 Dec 2023 16:36:08 -0500 Subject: [PATCH] Spinner (#214) * add spinner WIP * spinner and no results found message * pr comments --- frontend/src/components/forms/EditLog.tsx | 2 +- .../pages/AdminControls/EmployeeDirectory.tsx | 52 ++++++++++----- .../components/pages/HomePage/HomePage.tsx | 62 ++++++++++++----- .../pages/HomePage/LogRecordsTable.tsx | 9 ++- .../ResidentDirectory/ResidentDirectory.tsx | 66 +++++++++++++------ frontend/src/theme/common/spinnerStyles.tsx | 14 ++++ frontend/src/theme/index.tsx | 2 + 7 files changed, 144 insertions(+), 63 deletions(-) create mode 100644 frontend/src/theme/common/spinnerStyles.tsx diff --git a/frontend/src/components/forms/EditLog.tsx b/frontend/src/components/forms/EditLog.tsx index c51416be..a32b83b1 100644 --- 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 index be09840a..92c622a5 100644 --- 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(1); const [userPageNum, setUserPageNum] = useState(pageNum); + const [tableLoaded, setTableLoaded] = useState(false) + // Table reference const tableRef = useRef(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 => { /> - - + {!tableLoaded ? ( + + ) : ( + + + + + )} ); diff --git a/frontend/src/components/pages/HomePage/HomePage.tsx b/frontend/src/components/pages/HomePage/HomePage.tsx index 77def219..50a101d4 100644 --- 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(1); const [userPageNum, setUserPageNum] = useState(pageNum); + // Table Loaded + const [tableLoaded, setTableLoaded] = useState(false) + // Table reference const tableRef = useRef(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} /> - - + {!tableLoaded ? ( + + ) : ( + + {numRecords === 0 ? ( + + No results found. + + ) : ( + + + + + )} + + )} ); diff --git a/frontend/src/components/pages/HomePage/LogRecordsTable.tsx b/frontend/src/components/pages/HomePage/LogRecordsTable.tsx index 9aa4c864..6fc80934 100644 --- 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 index df93c68c..88c3f607 100644 --- 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([]) + const [buildingOptions, setBuildingOptions] = useState([]); const [residents, setResidents] = useState([]); const [numResidents, setNumResidents] = useState(0); const [resultsPerPage, setResultsPerPage] = useState(25); const [pageNum, setPageNum] = useState(1); const [userPageNum, setUserPageNum] = useState(pageNum); + const [tableLoaded, setTableLoaded] = useState(false) + const tableRef = useRef(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} /> - - + + {!tableLoaded ? ( + + ) : ( + + {numResidents === 0 ? ( + + No results found. + + ) : ( + + + + + )} + + )} ); diff --git a/frontend/src/theme/common/spinnerStyles.tsx b/frontend/src/theme/common/spinnerStyles.tsx new file mode 100644 index 00000000..5ba5be4d --- /dev/null +++ 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 index c394cf8e..882ef624 100644 --- 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, }, });