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 all 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
52 changes: 34 additions & 18 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 @@ -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
Expand All @@ -35,6 +38,8 @@ const EmployeeDirectoryPage = (): React.ReactElement => {
} else {
setPageNum(pageNumber);
}

setTableLoaded(true)
};

const countUsers = async () => {
Expand Down Expand Up @@ -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"
/>
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

) : (
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
62 changes: 44 additions & 18 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 @@ -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);

Expand All @@ -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,
Expand All @@ -85,6 +90,8 @@ const HomePage = (): React.ReactElement => {
} else {
setPageNum(pageNumber);
}

setTableLoaded(true)
};

const countLogRecords = async () => {
Expand Down Expand Up @@ -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>
);
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
66 changes: 45 additions & 21 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,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! }),
);
Expand All @@ -31,6 +33,7 @@ const ResidentDirectory = (): React.ReactElement => {
};

const getResidents = async (pageNumber: number) => {
setTableLoaded(false)
const data = await ResidentAPIClient.getResidents({
returnAll: false,
pageNumber,
Expand All @@ -48,6 +51,7 @@ const ResidentDirectory = (): React.ReactElement => {
} else {
setPageNum(pageNumber);
}
setTableLoaded(true)
};

const countResidents = async () => {
Expand Down Expand Up @@ -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>
);
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