From 662876f48aeb4fa68e5ddda21ea38826622de29e Mon Sep 17 00:00:00 2001 From: Kevin Ram Date: Wed, 27 Sep 2023 16:02:28 -0400 Subject: [PATCH 1/7] added loading wheel, shoutouts page --- frontend/next-env.d.ts | 1 - .../Forms/ShoutoutsPage/ShoutoutForm.tsx | 9 ++++++--- .../Forms/ShoutoutsPage/ShoutoutsPage.tsx | 20 ++++++++++++++----- 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts index 9bc3dd46b..4f11a03dc 100644 --- a/frontend/next-env.d.ts +++ b/frontend/next-env.d.ts @@ -1,5 +1,4 @@ /// -/// /// // NOTE: This file should not be edited diff --git a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx index 13f83209c..d1f154c4d 100644 --- a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx +++ b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Form, TextArea, Checkbox } from 'semantic-ui-react'; +import { Form, TextArea, Checkbox, Loader } from 'semantic-ui-react'; import { useUserEmail } from '../../Common/UserProvider/UserProvider'; import { Emitters } from '../../../utils'; import ShoutoutsAPI from '../../../API/ShoutoutsAPI'; @@ -17,8 +17,10 @@ const ShoutoutForm: React.FC = ({ getGivenShoutouts }) => { const [receiver, setReceiver] = useState(''); const [message, setMessage] = useState(''); const [isAnon, setIsAnon] = useState(true); + const [isSubmitting, setIsSubmitting] = useState(false); const giveShoutout = () => { + setIsSubmitting(true); if (!receiver) { Emitters.generalError.emit({ headerMsg: 'No Member Selected', @@ -35,6 +37,7 @@ const ShoutoutForm: React.FC = ({ getGivenShoutouts }) => { uuid: '' }; ShoutoutsAPI.giveShoutout(shoutout).then((val) => { + setIsSubmitting(false); if (val.error) { Emitters.generalError.emit({ headerMsg: "Couldn't send shoutout!", @@ -83,8 +86,8 @@ const ShoutoutForm: React.FC = ({ getGivenShoutouts }) => { /> - - Send + + {isSubmitting ? : 'Send'} ); diff --git a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx index b980c661b..383bfcc9d 100644 --- a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx +++ b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx @@ -1,5 +1,6 @@ +/* eslint-disable no-nested-ternary */ import React, { useState, useEffect, useCallback } from 'react'; -import { Message } from 'semantic-ui-react'; +import { Message, Loader } from 'semantic-ui-react'; import { useUserEmail } from '../../Common/UserProvider/UserProvider'; import { Emitters } from '../../../utils'; import ShoutoutForm from './ShoutoutForm'; @@ -7,21 +8,28 @@ import ShoutoutList from './ShoutoutList'; import styles from './ShoutoutsPage.module.css'; import ShoutoutsAPI from '../../../API/ShoutoutsAPI'; + const ShoutoutsPage: React.FC = () => { const userEmail = useUserEmail(); const [givenShoutouts, setGivenShoutouts] = useState([]); - + const [isLoading, setIsLoading] = useState(true); + const getGivenShoutouts = useCallback(() => { + setIsLoading(true); ShoutoutsAPI.getShoutouts(userEmail, 'given') - .then((given) => setGivenShoutouts(given)) + .then((given) => { + setGivenShoutouts(given); + setIsLoading(false); + }) .catch((error) => { Emitters.generalError.emit({ headerMsg: `Couldn't get given shoutouts!`, contentMsg: `Error was: ${error}` }); + setIsLoading(false); }); }, [userEmail]); - + useEffect(() => { getGivenShoutouts(); }, [userEmail, getGivenShoutouts]); @@ -34,7 +42,9 @@ const ShoutoutsPage: React.FC = () => {

Given Shoutouts

- {givenShoutouts.length > 0 ? ( + {isLoading ? ( + + ) : givenShoutouts.length > 0 ? ( a.timestamp - b.timestamp)} setGivenShoutouts={setGivenShoutouts} From 54003e86cf7c653dcec3ef94266364a473c89586 Mon Sep 17 00:00:00 2001 From: Kevin Ram Date: Wed, 27 Sep 2023 21:53:23 -0400 Subject: [PATCH 2/7] undo next-env.d.ts edit --- frontend/next-env.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts index 4f11a03dc..9bc3dd46b 100644 --- a/frontend/next-env.d.ts +++ b/frontend/next-env.d.ts @@ -1,4 +1,5 @@ /// +/// /// // NOTE: This file should not be edited From cb2d6feb5ac39dc44e6df54ef5899857dccf1398 Mon Sep 17 00:00:00 2001 From: Kevin Ram Date: Wed, 27 Sep 2023 23:29:06 -0400 Subject: [PATCH 3/7] format: prettier --- .../src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx | 2 +- .../src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx index d1f154c4d..3d398c230 100644 --- a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx +++ b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx @@ -87,7 +87,7 @@ const ShoutoutForm: React.FC = ({ getGivenShoutouts }) => {
- {isSubmitting ? : 'Send'} + {isSubmitting ? : 'Send'} ); diff --git a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx index 383bfcc9d..635f6fe36 100644 --- a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx +++ b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx @@ -8,12 +8,11 @@ import ShoutoutList from './ShoutoutList'; import styles from './ShoutoutsPage.module.css'; import ShoutoutsAPI from '../../../API/ShoutoutsAPI'; - const ShoutoutsPage: React.FC = () => { const userEmail = useUserEmail(); const [givenShoutouts, setGivenShoutouts] = useState([]); const [isLoading, setIsLoading] = useState(true); - + const getGivenShoutouts = useCallback(() => { setIsLoading(true); ShoutoutsAPI.getShoutouts(userEmail, 'given') @@ -29,7 +28,7 @@ const ShoutoutsPage: React.FC = () => { setIsLoading(false); }); }, [userEmail]); - + useEffect(() => { getGivenShoutouts(); }, [userEmail, getGivenShoutouts]); @@ -42,8 +41,8 @@ const ShoutoutsPage: React.FC = () => {

Given Shoutouts

- {isLoading ? ( - + {isLoading ? ( + ) : givenShoutouts.length > 0 ? ( a.timestamp - b.timestamp)} From f3a2164f12626f0c7cc1e5149f64f9e1fb634cdc Mon Sep 17 00:00:00 2001 From: Kevin Ram Date: Thu, 28 Sep 2023 01:42:08 -0400 Subject: [PATCH 4/7] add loading wheel, (admin) shoutouts --- .../Admin/AdminShoutouts/AdminShoutouts.tsx | 63 ++++++++++++------- 1 file changed, 39 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx b/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx index c5b688a50..ebcec3e69 100644 --- a/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx +++ b/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useCallback } from 'react'; -import { Button, Form, Item, Card, Modal, Header, SemanticCOLORS, Image } from 'semantic-ui-react'; +import { Button, Form, Item, Card, Modal, Header, SemanticCOLORS, Image, Loader } from 'semantic-ui-react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import { Emitters } from '../../../utils'; @@ -13,21 +13,27 @@ const AdminShoutouts: React.FC = () => { const [earlyDate, setEarlyDate] = useState(new Date(Date.now() - 86400000 * 13.5)); const [lastDate, setLastDate] = useState(new Date()); const [hide, setHide] = useState(false); + const [loading, setLoading] = useState(false); + type ViewMode = 'ALL' | 'PRESENT' | 'HIDDEN'; const [view, setView] = useState('ALL'); const updateShoutouts = useCallback(() => { + setLoading(true); if (lastDate < earlyDate) { Emitters.generalError.emit({ headerMsg: 'Invalid Date Range', contentMsg: 'Please make sure the latest shoutout date is after the earliest shoutout date.' }); + setLoading(false); + return; } if (allShoutouts.length === 0) { ShoutoutsAPI.getAllShoutouts().then((shoutouts) => { setAllShoutouts(shoutouts); - }); + setLoading(false); + }).catch(() => setLoading(false)); } else { const filteredShoutouts = allShoutouts .filter((shoutout) => { @@ -35,12 +41,15 @@ const AdminShoutouts: React.FC = () => { return shoutoutDate >= earlyDate && shoutoutDate <= lastDate; }) .sort((a, b) => a.timestamp - b.timestamp); + if (view === 'PRESENT') setDisplayShoutouts(filteredShoutouts.filter((shoutout) => !shoutout.hidden)); else if (view === 'HIDDEN') setDisplayShoutouts(filteredShoutouts.filter((shoutout) => shoutout.hidden)); else setDisplayShoutouts(filteredShoutouts); + setHide(false); + setLoading(false); } }, [allShoutouts, earlyDate, lastDate, view]); @@ -212,29 +221,35 @@ const AdminShoutouts: React.FC = () => { return (
-
-

Filter shoutouts:

- - - - - - shoutout.hidden)} - buttonText={'HIDDEN'} - /> - !shoutout.hidden)} - buttonText={'PRESENT'} - /> - - -
-
- - + {loading ? ( + + ) : ( +
+
+

Filter shoutouts:

+ + + + + + shoutout.hidden)} + buttonText={'HIDDEN'} + /> + !shoutout.hidden)} + buttonText={'PRESENT'} + /> + + +
+
+ + +
-
+ )} +
); }; From a48d182007511f912d3b7ec90795f7a8178803ef Mon Sep 17 00:00:00 2001 From: Kevin Ram Date: Thu, 28 Sep 2023 01:43:40 -0400 Subject: [PATCH 5/7] format: prettier --- .../Admin/AdminShoutouts/AdminShoutouts.tsx | 79 +++++++++++-------- 1 file changed, 45 insertions(+), 34 deletions(-) diff --git a/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx b/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx index ebcec3e69..5706916dd 100644 --- a/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx +++ b/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx @@ -1,5 +1,15 @@ import React, { useState, useEffect, useCallback } from 'react'; -import { Button, Form, Item, Card, Modal, Header, SemanticCOLORS, Image, Loader } from 'semantic-ui-react'; +import { + Button, + Form, + Item, + Card, + Modal, + Header, + SemanticCOLORS, + Image, + Loader +} from 'semantic-ui-react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import { Emitters } from '../../../utils'; @@ -15,7 +25,6 @@ const AdminShoutouts: React.FC = () => { const [hide, setHide] = useState(false); const [loading, setLoading] = useState(false); - type ViewMode = 'ALL' | 'PRESENT' | 'HIDDEN'; const [view, setView] = useState('ALL'); @@ -27,13 +36,15 @@ const AdminShoutouts: React.FC = () => { contentMsg: 'Please make sure the latest shoutout date is after the earliest shoutout date.' }); setLoading(false); - return; + return; } if (allShoutouts.length === 0) { - ShoutoutsAPI.getAllShoutouts().then((shoutouts) => { - setAllShoutouts(shoutouts); - setLoading(false); - }).catch(() => setLoading(false)); + ShoutoutsAPI.getAllShoutouts() + .then((shoutouts) => { + setAllShoutouts(shoutouts); + setLoading(false); + }) + .catch(() => setLoading(false)); } else { const filteredShoutouts = allShoutouts .filter((shoutout) => { @@ -41,13 +52,13 @@ const AdminShoutouts: React.FC = () => { return shoutoutDate >= earlyDate && shoutoutDate <= lastDate; }) .sort((a, b) => a.timestamp - b.timestamp); - + if (view === 'PRESENT') setDisplayShoutouts(filteredShoutouts.filter((shoutout) => !shoutout.hidden)); else if (view === 'HIDDEN') setDisplayShoutouts(filteredShoutouts.filter((shoutout) => shoutout.hidden)); else setDisplayShoutouts(filteredShoutouts); - + setHide(false); setLoading(false); } @@ -222,34 +233,34 @@ const AdminShoutouts: React.FC = () => { return (
{loading ? ( - + ) : ( -
-
-

Filter shoutouts:

- - - - - - shoutout.hidden)} - buttonText={'HIDDEN'} - /> - !shoutout.hidden)} - buttonText={'PRESENT'} - /> - - -
-
- - +
+
+

Filter shoutouts:

+ + + + + + shoutout.hidden)} + buttonText={'HIDDEN'} + /> + !shoutout.hidden)} + buttonText={'PRESENT'} + /> + + +
+
+ + +
-
)} -
+
); }; From d0aaeb921e6cdef53a3be296d85257821fe6e2ee Mon Sep 17 00:00:00 2001 From: Kevin Ram Date: Thu, 28 Sep 2023 17:37:53 -0400 Subject: [PATCH 6/7] minor fix, admin-side --- .../Admin/AdminShoutouts/AdminShoutouts.tsx | 80 ++++++++----------- 1 file changed, 32 insertions(+), 48 deletions(-) diff --git a/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx b/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx index 5706916dd..48f7b1fec 100644 --- a/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx +++ b/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx @@ -1,15 +1,5 @@ import React, { useState, useEffect, useCallback } from 'react'; -import { - Button, - Form, - Item, - Card, - Modal, - Header, - SemanticCOLORS, - Image, - Loader -} from 'semantic-ui-react'; +import { Button, Form, Item, Card, Modal, Header, SemanticCOLORS, Image, Loader } from 'semantic-ui-react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import { Emitters } from '../../../utils'; @@ -23,7 +13,7 @@ const AdminShoutouts: React.FC = () => { const [earlyDate, setEarlyDate] = useState(new Date(Date.now() - 86400000 * 13.5)); const [lastDate, setLastDate] = useState(new Date()); const [hide, setHide] = useState(false); - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(true); type ViewMode = 'ALL' | 'PRESENT' | 'HIDDEN'; const [view, setView] = useState('ALL'); @@ -35,16 +25,12 @@ const AdminShoutouts: React.FC = () => { headerMsg: 'Invalid Date Range', contentMsg: 'Please make sure the latest shoutout date is after the earliest shoutout date.' }); - setLoading(false); - return; } if (allShoutouts.length === 0) { - ShoutoutsAPI.getAllShoutouts() - .then((shoutouts) => { - setAllShoutouts(shoutouts); - setLoading(false); - }) - .catch(() => setLoading(false)); + ShoutoutsAPI.getAllShoutouts().then((shoutouts) => { + setAllShoutouts(shoutouts); + setLoading(false); + }); } else { const filteredShoutouts = allShoutouts .filter((shoutout) => { @@ -52,13 +38,11 @@ const AdminShoutouts: React.FC = () => { return shoutoutDate >= earlyDate && shoutoutDate <= lastDate; }) .sort((a, b) => a.timestamp - b.timestamp); - if (view === 'PRESENT') setDisplayShoutouts(filteredShoutouts.filter((shoutout) => !shoutout.hidden)); else if (view === 'HIDDEN') setDisplayShoutouts(filteredShoutouts.filter((shoutout) => shoutout.hidden)); else setDisplayShoutouts(filteredShoutouts); - setHide(false); setLoading(false); } @@ -232,34 +216,34 @@ const AdminShoutouts: React.FC = () => { return (
- {loading ? ( - - ) : ( -
-
-

Filter shoutouts:

- - - - - - shoutout.hidden)} - buttonText={'HIDDEN'} - /> - !shoutout.hidden)} - buttonText={'PRESENT'} - /> - - -
-
+
+

Filter shoutouts:

+ + + + + + shoutout.hidden)} + buttonText={'HIDDEN'} + /> + !shoutout.hidden)} + buttonText={'PRESENT'} + /> + + +
+
+ {loading ? ( + + ) : ( + <> -
-
- )} + + )} +
); }; From de9c3dccc58ba067b52b6c88f079ddc6ed6728e1 Mon Sep 17 00:00:00 2001 From: Kevin Ram Date: Sat, 30 Sep 2023 01:07:27 -0400 Subject: [PATCH 7/7] format: prettier --- .../Admin/AdminShoutouts/AdminShoutouts.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx b/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx index 48f7b1fec..1225b6825 100644 --- a/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx +++ b/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx @@ -1,5 +1,15 @@ import React, { useState, useEffect, useCallback } from 'react'; -import { Button, Form, Item, Card, Modal, Header, SemanticCOLORS, Image, Loader } from 'semantic-ui-react'; +import { + Button, + Form, + Item, + Card, + Modal, + Header, + SemanticCOLORS, + Image, + Loader +} from 'semantic-ui-react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import { Emitters } from '../../../utils'; @@ -13,7 +23,7 @@ const AdminShoutouts: React.FC = () => { const [earlyDate, setEarlyDate] = useState(new Date(Date.now() - 86400000 * 13.5)); const [lastDate, setLastDate] = useState(new Date()); const [hide, setHide] = useState(false); - const [loading, setLoading] = useState(true); + const [loading, setLoading] = useState(false); type ViewMode = 'ALL' | 'PRESENT' | 'HIDDEN'; const [view, setView] = useState('ALL'); @@ -236,7 +246,7 @@ const AdminShoutouts: React.FC = () => {
{loading ? ( - + ) : ( <>