Show group names on judge live view (#310)

* Fix issue where deliberation check is wrong

* Create group info store

* Minor UI spacing tweaks to live judge page

* Fixed issue with state not reloading

Author: MichaelZhao21

client/src/components/judge/ProjectDisplay.tsx

@@ -3,6 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import Paragraph from '../Paragraph';
 import { getRequest } from '../../api';
 import { errorAlert } from '../../util';
+import { useGroupInfoStore } from '../../store';
 
 interface ProjectDisplayProps {
     /* Project ID to display */
@@ -17,6 +18,8 @@ interface ProjectDisplayProps {
 
 const ProjectDisplay = (props: ProjectDisplayProps) => {
     const [project, setProject] = useState<Project | null>(null);
+    const groupsEnabled = useGroupInfoStore((state) => state.enabled);
+    const groupNames = useGroupInfoStore((state) => state.names);
 
     useEffect(() => {
         async function fetchData() {
@@ -41,12 +44,17 @@ const ProjectDisplay = (props: ProjectDisplayProps) => {
 
     return (
         <div className={twMerge('px-2', props.className)}>
-            <h1 className="text-3xl mb-1 font-bold">
+            <h1 className="text-3xl mb-0 font-bold">
                 <a href={project.url} target="_blank" rel="noopener noreferrer">
                     {project.name}
                 </a>
             </h1>
-            <h2 className="text-xl mb-1">Table {project.location}</h2>
+            <h2 className="text-xl mb-2">
+                Table {project.location}
+                {groupsEnabled && (
+                    <span className="ml-4 text-lighter">[{groupNames[project.group]}]</span>
+                )}
+            </h2>
             <Paragraph className="text-light" text={project.description} />
         </div>
     );

client/src/pages/Expo.tsx

@@ -6,6 +6,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import Dropdown from '../components/Dropdown';
 import Button from '../components/Button';
 import { Helmet } from 'react-helmet';
+import { useGroupInfoStore } from '../store';
 
 const Expo = () => {
     const { track: trackParam } = useParams();
@@ -14,7 +15,7 @@ const Expo = () => {
     const [nameSort, setNameSort] = useState(false);
     const [track, setTrack] = useState('');
     const [challenges, setChallenges] = useState<string[]>([]);
-    const [groupInfo, setGroupInfo] = useState<GroupInfo>({ enabled: false, names: [] });
+    const groupInfo = useGroupInfoStore();
     const [searchParams, _] = useSearchParams();
     const navigate = useNavigate();
 
@@ -36,13 +37,7 @@ const Expo = () => {
                 return;
             }
 
-            const groupRes = await getRequest<GroupInfo>('/group-info', '');
-            if (groupRes.status !== 200) {
-                errorAlert(groupRes);
-                return;
-            }
-            const gi = groupRes.data as GroupInfo;
-            setGroupInfo({ enabled: gi.enabled && gi.names.length > 0, names: gi.names });
+            await groupInfo.fetchGroupInfo();
 
             setChallenges(['', ...(res.data as string[])]);
         }

client/src/pages/admin/settings.tsx

@@ -102,10 +102,10 @@ const AdminSettings = () => {
     const navigate = useNavigate();
 
     async function getOptions() {
-        await fetchOptions();
+        const newOptions = await fetchOptions() ?? options;
 
         // Calculate judging timer MM:SS
-        const timer = options.judging_timer;
+        const timer = newOptions.judging_timer;
         if (timer) {
             const minutes = Math.floor(timer / 60);
             const seconds = timer % 60;
@@ -114,24 +114,24 @@ const AdminSettings = () => {
         }
 
         // Set min views
-        setMinViews(options.min_views);
+        setMinViews(newOptions.min_views);
 
         // Set sync clock
-        setSyncClock(options.clock_sync);
+        setSyncClock(newOptions.clock_sync);
 
         // Set group options
-        setMultiGroup(options.multi_group);
-        setNumGroups(options.num_groups);
-        setGroupSizes(options.group_sizes.join(', '));
-        setSwitchingMode(options.switching_mode);
-        setAutoSwitchProp(options.auto_switch_prop);
-        setJudgeTracks(options.judge_tracks);
-        setTracks(options.tracks.join(', '));
-        setTrackViews(options.track_views.join(', '));
-        setGroupNames(options.group_names.join(', '));
-        setIgnoreTracks(options.ignore_tracks.join(', '));
-        setBlockReqs(options.block_reqs);
-        setMaxReqPerMin(options.max_req_per_min);
+        setMultiGroup(newOptions.multi_group);
+        setNumGroups(newOptions.num_groups);
+        setGroupSizes(newOptions.group_sizes.join(', '));
+        setSwitchingMode(newOptions.switching_mode);
+        setAutoSwitchProp(newOptions.auto_switch_prop);
+        setJudgeTracks(newOptions.judge_tracks);
+        setTracks(newOptions.tracks.join(', '));
+        setTrackViews(newOptions.track_views.join(', '));
+        setGroupNames(newOptions.group_names.join(', '));
+        setIgnoreTracks(newOptions.ignore_tracks.join(', '));
+        setBlockReqs(newOptions.block_reqs);
+        setMaxReqPerMin(newOptions.max_req_per_min);
 
         // Get active clock status
         await fetchClock();

client/src/pages/judge/live.tsx

@@ -18,6 +18,7 @@ import alarm from '../../assets/alarm.mp3';
 import data from '../../data.json';
 import TextInput from '../../components/TextInput';
 import { Helmet } from 'react-helmet';
+import { useGroupInfoStore } from '../../store';
 
 const infoPages = ['paused', 'hidden', 'no-projects', 'done', 'doneTrack'];
 const infoData = [
@@ -32,6 +33,7 @@ const audio = new Audio(alarm);
 
 const JudgeLive = () => {
     const navigate = useNavigate();
+    const fetchGroupInfo = useGroupInfoStore((state) => state.fetchGroupInfo);
     const [verified, setVerified] = useState(false);
     const [judge, setJudge] = useState<Judge | null>(null);
     const [finishPopup, setFinishPopup] = useState<boolean>(false);
@@ -100,7 +102,7 @@ const JudgeLive = () => {
         }
 
         // Check to see if deliberation has started
-        const deliberationRes = await getRequest<OkResponse>('/admin/deliberation', '');
+        const deliberationRes = await getRequest<OkResponse>('/judge/deliberation', 'judge');
         if (deliberationRes.status !== 200) {
             errorAlert(deliberationRes);
             return;
@@ -134,6 +136,9 @@ const JudgeLive = () => {
             return;
         }
 
+        // Fetch group info
+        await fetchGroupInfo();
+
         // If the judge has a current project, use that
         if (theJudge.current) {
             setJudge(theJudge);

client/src/store.tsx

@@ -121,7 +121,7 @@ const useClockStore = create<ClockStore>()((set) => ({
 interface OptionsStore {
     options: Options;
     selectedTrack: string;
-    fetchOptions: () => Promise<void>;
+    fetchOptions: () => Promise<Options | null>;
     setSelectedTrack: (track: string) => void;
 }
 
@@ -149,7 +149,7 @@ const useOptionsStore = create<OptionsStore>((set) => ({
         group_names: [],
         ignore_tracks: [],
         block_reqs: false,
-        max_req_per_min: 0
+        max_req_per_min: 0,
     },
 
     selectedTrack: '',
@@ -158,9 +158,11 @@ const useOptionsStore = create<OptionsStore>((set) => ({
         const optionsRes = await getRequest<Options>('/admin/options', 'admin');
         if (optionsRes.status !== 200) {
             errorAlert(optionsRes);
-            return;
+            return null;
         }
-        set({ options: optionsRes.data as Options });
+        const data = optionsRes.data as Options;
+        set({ options: data });
+        return data;
     },
 
     setSelectedTrack: async (track: string) => {
@@ -193,12 +195,12 @@ const useFlagsStore = create<FlagsStore>((set) => ({
 }));
 
 interface AdminTableStore {
-    projects: Project[],
-    judges: Judge[],
-    selected: boolean[],
-    setProjects: (projects: Project[]) => void,
-    setJudges: (judges: Judge[]) => void,
-    setSelected: (selected: boolean[]) => void,
+    projects: Project[];
+    judges: Judge[];
+    selected: boolean[];
+    setProjects: (projects: Project[]) => void;
+    setJudges: (judges: Judge[]) => void;
+    setSelected: (selected: boolean[]) => void;
 }
 
 const useAdminTableStore = create<AdminTableStore>((set) => ({
@@ -219,4 +221,33 @@ const useAdminTableStore = create<AdminTableStore>((set) => ({
     },
 }));
 
-export { useAdminStore, useClockStore, useOptionsStore, useFlagsStore, useAdminTableStore };
+interface GroupInfoStore {
+    names: string[];
+    enabled: boolean;
+    fetchGroupInfo: () => Promise<void>;
+}
+
+const useGroupInfoStore = create<GroupInfoStore>((set) => ({
+    names: [],
+    enabled: false,
+
+    fetchGroupInfo: async () => {
+        const groupRes = await getRequest<GroupInfo>('/group-info', '');
+        if (groupRes.status !== 200) {
+            errorAlert(groupRes);
+            return;
+        }
+        const groupInfo = groupRes.data as GroupInfo;
+        console.log(groupInfo)
+        set({ names: groupInfo.names, enabled: groupInfo.enabled && groupInfo.names.length > 0 });
+    },
+}));
+
+export {
+    useAdminStore,
+    useClockStore,
+    useOptionsStore,
+    useFlagsStore,
+    useAdminTableStore,
+    useGroupInfoStore,
+};