Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spinner #214

Merged
merged 6 commits into from
Dec 3, 2023
Merged

Spinner #214

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e65cc1a
add spinner WIP
phamkelly17 Nov 30, 2023
f75caba
Merge branch 'main' into kelly/spinner
phamkelly17 Nov 30, 2023
8f551eb
Merge branch 'main' into kelly/spinner
phamkelly17 Nov 30, 2023
38014ff
spinner and no results found message
phamkelly17 Dec 2, 2023
529ef90
pr comments
phamkelly17 Dec 3, 2023
c8b135f
Merge branch 'main' into kelly/spinner
phamkelly17 Dec 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/forms/EditLog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there some sort of error that appears that required this to be changed? residents should never be null

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i don't recall changing this file in this PR, but yeah there is some error that requires this to be changed. i believe owen made a pr for it

)}
styles={selectStyle}
/>
Expand Down
49 changes: 30 additions & 19 deletions frontend/src/components/pages/AdminControls/EmployeeDirectory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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);
Expand Down Expand Up @@ -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"
/>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there is no way to put these props in the default props section in the SpinnerStyles.tsx file. it just won't work. trust me, me and gpt have tried

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

skill issue

Copy link
Contributor

@kevin-pierce kevin-pierce Dec 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So as Connor mentioned, the best way to implement this is usually using a state variable that simply keeps track of the loading state as a boolean ; we then would conditionally render the spinner only if "loading" is taking place.

Here's a working snippet

// Initially set to false ; this way by DEFAULT we display the spinner
const [loadedUsers, setLoadedUsers] = useState(false)

// At the "onMount" useEffect (the one w no dependencies), we'd want to set the loaded users state to true
// The only reason I don't want to set it in the other useEffect as well is because from what I understand, we don't want to display the spinner for every batched fetch of users
  useEffect(() => {
    countUsers();
    setLoadedUsers(true)
  }, []);

// Then below in the JSX:
{!loadedUsers ? <Spinnner> : <other stuff>}

) : (
connor-bechthold marked this conversation as resolved.
Show resolved Hide resolved
<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>
);
Expand Down
57 changes: 38 additions & 19 deletions frontend/src/components/pages/HomePage/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
);
Expand Down
9 changes: 4 additions & 5 deletions frontend/src/components/pages/HomePage/LogRecordsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
};
Expand Down
64 changes: 42 additions & 22 deletions frontend/src/components/pages/ResidentDirectory/ResidentDirectory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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);
Expand All @@ -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! }),
);
Expand Down Expand Up @@ -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>
);
Expand Down
14 changes: 14 additions & 0 deletions frontend/src/theme/common/spinnerStyles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 2 additions & 0 deletions frontend/src/theme/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -23,6 +24,7 @@ const customTheme = extendTheme({
FormLabel,
Modal,
Text,
Spinner,
},
});

Expand Down
Loading