Coffee Chat: Remove Live Checking and Update Chats After Running Auto…

…checker (#732) ### Summary  On the admin side, the color of each chat was being fetched live, which caused some lagging. The chats were also not being updated automatically after clicking "Re-run autochecker."
cornell-dti · Nov 26, 2024 · acbb3ca · acbb3ca
1 parent 5586699
commit acbb3ca
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 48 deletions.
diff --git a/frontend/src/API/CoffeeChatAPI.ts b/frontend/src/API/CoffeeChatAPI.ts
@@ -45,7 +45,7 @@ export default class CoffeeChatAPI {
     return res.board as string[][];
   }
 
-  public static async runAutoChecker(uuid: string): Promise<DevPortfolio> {
+  public static async runAutoChecker(uuid: string): Promise<CoffeeChat> {
     return APIWrapper.put(`${backendURL}/coffee-chat/autocheck/${uuid}/`, {}).then(
       (res) => res.data.coffeeChat
     );

diff --git a/frontend/src/components/Admin/CoffeeChats/CoffeeChatDetails.tsx b/frontend/src/components/Admin/CoffeeChats/CoffeeChatDetails.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Card, Message, Button, Loader, Dropdown } from 'semantic-ui-react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -19,31 +19,17 @@ type CoffeeChatDisplayProps = {
 };
 
 const CoffeeChatCard: React.FC<CoffeeChatCardProps> = ({ status, chat }) => {
-  const [memberMeetsCategory, setMemberMeetsCategory] =
-    useState<MemberMeetsCategoryStatus>('no data');
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-
   const categoryToBackgroundColor = () => {
-    if (memberMeetsCategory === 'pass') {
+    if (chat.memberMeetsCategory === 'pass') {
       return '#c3ffb7';
     }
-    if (memberMeetsCategory === 'fail') {
+    if (chat.memberMeetsCategory === 'fail') {
       return '#ffcaca';
     }
     return 'white';
   };
 
-  useEffect(() => {
-    CoffeeChatAPI.checkMemberMeetsCategory(chat.otherMember, chat.submitter, chat.category).then(
-      (result) => {
-        setMemberMeetsCategory(result.status);
-        setIsLoading(false);
-      }
-    );
-  }, [chat]);
-  return isLoading ? (
-    <Loader active />
-  ) : (
+  return (
     <Card
       className={styles.memberCard}
       style={{
@@ -58,7 +44,7 @@ const CoffeeChatCard: React.FC<CoffeeChatCardProps> = ({ status, chat }) => {
           Coffee Chat with {chat.otherMember.firstName} {chat.otherMember.lastName}{' '}
           {!chat.isNonIDOLMember ? `(${chat.otherMember.netid})` : ''}
         </Card.Meta>
-        {memberMeetsCategory === 'fail' && chat.errorMessage && (
+        {chat.memberMeetsCategory === 'fail' && chat.errorMessage && (
           <div className={styles.warning}>{chat.errorMessage}</div>
         )}
         <a href={chat.slackLink} target="_blank" rel="noopener noreferrer">
@@ -103,34 +89,7 @@ const CoffeeChatDetails: React.FC = () => {
   const [isLoading, setLoading] = useState(true);
   const [status, setStatus] = useState<Status | string>();
   const [coffeeChats, setCoffeeChats] = useState<CoffeeChat[]>([]);
-
-  const categoryToChats = useMemo(() => {
-    const map = new Map<string, CoffeeChat[]>([['default', []]]);
-
-    coffeeChats.forEach((chat) => {
-      if (!map.has(chat.category)) {
-        map.set(chat.category, []);
-      }
-      map.get(chat.category)!.push(chat);
-    });
-
-    return map;
-  }, [coffeeChats]);
-
-  const runAutoCheckerForCategory = async (category: string) => {
-    setLoading(true);
-
-    const coffeeChats = categoryToChats.get(category);
-    if (coffeeChats) {
-      await Promise.all(
-        coffeeChats.map(async (chat) => {
-          CoffeeChatAPI.runAutoChecker(chat.uuid);
-        })
-      );
-    }
-
-    setLoading(false);
-  };
+  const [categoryToChats, setCategoryToChats] = useState<Map<string, CoffeeChat[]>>(new Map());
 
   useEffect(() => {
     const cb = () => {
@@ -151,6 +110,48 @@ const CoffeeChatDetails: React.FC = () => {
     }
   }, [isLoading, category]);
 
+  useEffect(() => {
+    const map = new Map<string, CoffeeChat[]>([['default', []]]);
+    coffeeChats.forEach((chat) => {
+      if (!map.has(chat.category)) {
+        map.set(chat.category, []);
+      }
+      map.get(chat.category)!.push(chat);
+    });
+
+    setCategoryToChats(map);
+  }, [coffeeChats]);
+
+  const runAutoCheckerForCategory = async (category: string) => {
+    setLoading(true);
+
+    const coffeeChatsForCategory = categoryToChats.get(category) || [];
+
+    const updatedChatsByUuid = await Promise.all(
+      coffeeChatsForCategory.map(async (chat) => {
+        try {
+          return await CoffeeChatAPI.runAutoChecker(chat.uuid);
+        } catch (error) {
+          return chat;
+        }
+      })
+    );
+
+    setCoffeeChats((prevChats) =>
+      prevChats.map(
+        (chat) => updatedChatsByUuid.find((updatedChat) => updatedChat.uuid === chat.uuid) || chat
+      )
+    );
+
+    setCategoryToChats((prevMap) => {
+      const newMap = new Map(prevMap);
+      newMap.set(category, updatedChatsByUuid);
+      return newMap;
+    });
+
+    setLoading(false);
+  };
+
   if (isLoading) return <Loader active />;
 
   return (