From 5a9c99925f1949444fc217acd98eb9c515a7f481 Mon Sep 17 00:00:00 2001
From: Sivert Kronen Hatteberg <sivert.hatteberg@usit.uio.no>
Date: Wed, 18 Jan 2023 14:35:54 +0100
Subject: [PATCH] Add a loading state to the useGuests hook.
Enable us to render a spinner while the hook loads
---
frontend/src/hooks/useGuests/index.tsx | 9 ++++++--
.../src/routes/sponsor/frontpage/index.tsx | 21 +++++++++++++------
frontend/src/routes/sponsor/index.tsx | 7 +++++--
3 files changed, 27 insertions(+), 10 deletions(-)
diff --git a/frontend/src/hooks/useGuests/index.tsx b/frontend/src/hooks/useGuests/index.tsx
index d69df315..23f5a54f 100644
--- a/frontend/src/hooks/useGuests/index.tsx
+++ b/frontend/src/hooks/useGuests/index.tsx
@@ -4,6 +4,7 @@ import { parseIdentity, parseRole, fetchJsonOpts } from 'utils'
const useGuests = () => {
const [guests, setGuests] = useState<Guest[]>([])
+ const [loading, setLoading] = useState<boolean>(true)
const getGuestsInfo = () =>
fetch('/api/ui/v1/guests/', fetchJsonOpts())
@@ -28,8 +29,12 @@ const useGuests = () => {
})
)
)
+ setLoading(false)
+ })
+ .catch(() => {
+ setGuests([])
+ setLoading(false)
})
- .catch(() => setGuests([]))
const reloadGuests = () => {
getGuestsInfo()
@@ -39,7 +44,7 @@ const useGuests = () => {
getGuestsInfo()
}, [])
- return { guests, reloadGuests }
+ return { guests, reloadGuests, loading }
}
export default useGuests
diff --git a/frontend/src/routes/sponsor/frontpage/index.tsx b/frontend/src/routes/sponsor/frontpage/index.tsx
index 5036a661..84bf384b 100644
--- a/frontend/src/routes/sponsor/frontpage/index.tsx
+++ b/frontend/src/routes/sponsor/frontpage/index.tsx
@@ -17,6 +17,7 @@ import {
import { styled } from '@mui/system'
import { useState } from 'react'
+import Loading from 'components/loading'
import Page from 'components/page'
import { differenceInDays, format, isBefore } from 'date-fns'
import { Guest, Role } from 'interfaces'
@@ -47,6 +48,7 @@ interface GuestTableProps {
interface FrontPageProps {
guests: Guest[]
+ loading: boolean
}
const StyledTableRow = styled(TableRow)({
@@ -401,15 +403,22 @@ const WaitingGuests = ({ persons }: GuestProps) => {
)
}
-function FrontPage({ guests }: FrontPageProps) {
+function FrontPage({ guests, loading }: FrontPageProps) {
return (
<Page pageWidth>
<SponsorGuestButtons yourGuestsActive />
- <InvitedGuests persons={guests} />
- <br />
- <WaitingGuests persons={guests} />
- <br />
- <ActiveGuests persons={guests} />
+
+ {loading ? (
+ <Loading />
+ ) : (
+ <>
+ <InvitedGuests persons={guests} />
+ <br />
+ <WaitingGuests persons={guests} />
+ <br />
+ <ActiveGuests persons={guests} />
+ </>
+ )}
</Page>
)
}
diff --git a/frontend/src/routes/sponsor/index.tsx b/frontend/src/routes/sponsor/index.tsx
index 989d7548..9e272f50 100644
--- a/frontend/src/routes/sponsor/index.tsx
+++ b/frontend/src/routes/sponsor/index.tsx
@@ -5,7 +5,7 @@ import useGuests from 'hooks/useGuests'
import GuestRoutes from './guest'
function Sponsor() {
- const { guests, reloadGuests } = useGuests()
+ const { guests, reloadGuests, loading } = useGuests()
return (
<Routes>
@@ -13,7 +13,10 @@ function Sponsor() {
path="guest/:pid/*"
element={<GuestRoutes reloadGuests={reloadGuests} />}
/>
- <Route path="" element={<FrontPage guests={guests} />} />
+ <Route
+ path=""
+ element={<FrontPage guests={guests} loading={loading} />}
+ />
</Routes>
)
}
--
GitLab