DevPortfolioDao Documentation

README.md

@@ -51,8 +51,12 @@ All the common types used by the packages are defined [here](./common-types/inde
 - **Jason Mun** - PM
 - **Andrew Chen** - TPM
 - **Hope Zheng** - Designer
+- **Vicky Wang** - Designer
+- **Vannessa Wong** - Designer
 - **Oscar Wang** - Developer
 - **Alyssa Zhang** - Developer
+- **Patricia Huang** - Developer
+- **Kevin Ram** - Developer
 
 ### Spring 2023
 

frontend/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

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<ShoutoutFormProps> = ({ 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<ShoutoutFormProps> = ({ 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<ShoutoutFormProps> = ({ getGivenShoutouts }) => {
         />
       </div>
 
-      <Form.Button floated="right" onClick={giveShoutout}>
-        Send
+      <Form.Button floated="right" onClick={giveShoutout} disabled={isSubmitting}>
+        {isSubmitting ? <Loader active inline size='small' /> : 'Send'} 
       </Form.Button>
     </Form>
   );

frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx

@@ -1,27 +1,35 @@
+/* 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';
 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<Shoutout[]>([]);
-
+  const [isLoading, setIsLoading] = useState<boolean>(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 = () => {
 
       <div className={styles.shoutoutListContainer}>
         <h2>Given Shoutouts</h2>
-        {givenShoutouts.length > 0 ? (
+        {isLoading ? ( 
+          <Loader active inline='centered' />
+        ) : givenShoutouts.length > 0 ? (
           <ShoutoutList
             shoutouts={givenShoutouts.sort((a, b) => a.timestamp - b.timestamp)}
             setGivenShoutouts={setGivenShoutouts}