Revert GroupSelector props changes

This was preventing archived groups working correctly.
isaacphysics · Feb 11, 2025 · 653a82f · 653a82f
1 parent 15822c6
commit 653a82f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/src/app/components/elements/TeacherDashboard.tsx b/src/app/components/elements/TeacherDashboard.tsx
@@ -1,23 +1,33 @@
 import React, { ChangeEvent, useRef, useState } from 'react';
-import { selectors, useAppSelector, useGetMySetAssignmentsQuery, useGetSingleSetAssignmentQuery } from '../../state';
+import { selectors, useAppSelector, useGetGroupsQuery, useGetMySetAssignmentsQuery, useGetSingleSetAssignmentQuery } from '../../state';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { Button, Card, Col, Row } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import { above, isDefined, isLoggedIn, isTutorOrAbove, TAG_ID, tags, useDeviceSize } from '../../services';
 import { useAssignmentsCount } from '../navigation/NavigationBar';
 import { BookInfo, isaacBooks } from './modals/IsaacBooksModal';
-import { AssignmentDTO } from '../../../IsaacApiTypes';
+import { AssignmentDTO, RegisteredUserDTO } from '../../../IsaacApiTypes';
 import { GroupSelector } from '../pages/Groups';
 import { Subject } from '../../../IsaacAppTypes';
 import { StyledDropdown } from './inputs/DropdownInput';
 
 const GroupsPanel = () => {
+    const user = useAppSelector(selectors.user.orNull) as RegisteredUserDTO;
+    const [showArchived, setShowArchived] = useState(false);
+    const groupQuery = useGetGroupsQuery(showArchived);
+    const { currentData: groups, isLoading, isFetching } = groupQuery;
+    const otherGroups = useGetGroupsQuery(!showArchived);
+    const allGroups = [...(groups ?? []) , ...(otherGroups.currentData ?? [])];
+    const [selectedGroupId, setSelectedGroupId] = useState<number>();
+    const selectedGroup = (isLoading || isFetching) ? undefined : groups?.find(g => g.id === selectedGroupId);
     const groupNameInputRef = useRef<HTMLInputElement>(null);
+
     return <div className="dashboard-panel scrollable-panel">
         <Link to="/groups" className="plain-link">
             <h4>Manage my groups</h4>
         </Link>
-        <GroupSelector groupNameInputRef={groupNameInputRef} showCreateGroup={false} />
+        <GroupSelector allGroups={allGroups} groupNameInputRef={groupNameInputRef} setSelectedGroupId={setSelectedGroupId} showArchived={showArchived}
+            setShowArchived={setShowArchived} groups={groups} user={user} selectedGroup={selectedGroup} showCreateGroup={false} />
     </div>;
 };
 

diff --git a/src/app/components/pages/Groups.tsx b/src/app/components/pages/Groups.tsx
@@ -453,23 +453,20 @@ const MobileGroupCreatorComponent = ({className, createNewGroup, allGroups}: Gro
 };
 
 interface GroupSelectorProps {
+    user: RegisteredUserDTO;
+    groups?: AppGroup[];
+    allGroups: AppGroup[];
+    selectedGroup?: AppGroup;
+    setSelectedGroupId: React.Dispatch<React.SetStateAction<number | undefined>>;
+    showArchived: boolean;
+    setShowArchived: React.Dispatch<React.SetStateAction<boolean>>;
     groupNameInputRef: React.RefObject<HTMLInputElement>;
     createNewGroup?: (newGroupName: string) => Promise<boolean>;
     showCreateGroup?: boolean;
 }
 
-export const GroupSelector = ({groupNameInputRef, createNewGroup, showCreateGroup}: GroupSelectorProps) => {
+export const GroupSelector = ({user, groups, allGroups, selectedGroup, setSelectedGroupId, showArchived, setShowArchived, groupNameInputRef, createNewGroup, showCreateGroup}: GroupSelectorProps) => {
     const dispatch = useAppDispatch();
-    const user = useAppSelector(selectors.user.orNull) as RegisteredUserDTO;
-
-    const [showArchived, setShowArchived] = useState(false);
-    const groupQuery = useGetGroupsQuery(showArchived);
-    const { currentData: groups, isLoading, isFetching } = groupQuery;
-    const otherGroups = useGetGroupsQuery(!showArchived);
-    const allGroups = [...(groups ?? []) , ...(otherGroups.currentData ?? [])];
-
-    const [selectedGroupId, setSelectedGroupId] = useState<number>();
-    const selectedGroup = (isLoading || isFetching) ? undefined : groups?.find(g => g.id === selectedGroupId);
 
     // Clear the selected group when switching between tabs
     const switchTab = (archived: boolean) => {
@@ -649,7 +646,8 @@ const GroupsComponent = ({user, hashAnchor}: {user: RegisteredUserDTO, hashAncho
         <ShowLoadingQuery query={groupQuery} defaultErrorTitle={"Error fetching groups"}>
             <Row className="mb-5">
                 <Col lg={4}>
-                    <GroupSelector groupNameInputRef={groupNameInputRef} createNewGroup={createNewGroup} showCreateGroup={true}/>
+                    <GroupSelector user={user} groups={groups} allGroups={allGroups} selectedGroup={selectedGroup} setSelectedGroupId={setSelectedGroupId}
+                        showArchived={showArchived} setShowArchived={setShowArchived} groupNameInputRef={groupNameInputRef} createNewGroup={createNewGroup} showCreateGroup={true}/>
                 </Col>
                 <Col lg={8} className="d-none d-lg-block" data-testid={"group-editor"}>
                     <GroupEditor group={selectedGroup} allGroups={allGroups} groupNameInputRef={groupNameInputRef} user={user} createNewGroup={createNewGroup} />