fix: Updating assignment properties in settings, didn't invalidate assignments queries, fixed that. Added "await" to all query invalidations.

Author: mpetojevic

src/components/coursemanage/files/files.tsx

@@ -262,7 +262,7 @@ export const Files = (props: IFilesProps) => {
             commitMessage,
             selectedFiles
           );
-          queryClient.invalidateQueries({ queryKey: ['assignments', props.lecture.id] });
+          await queryClient.invalidateQueries({ queryKey: ['assignments'] });
           enqueueSnackbar('Successfully Pushed Assignment', {
             variant: 'success'
           });

src/components/coursemanage/grading/manual-grading.tsx

@@ -207,8 +207,8 @@ export const ManualGrading = () => {
         enqueueSnackbar('Generating feedback for submission!', {
           variant: 'success'
         });
-        queryClient.invalidateQueries({ queryKey: ['submissionsAssignmentStudent']});
-        reload();
+        await queryClient.invalidateQueries({ queryKey: ['submissionsAssignmentStudent']});
+        await reload();
       } catch (err) {
         console.error(err);
         enqueueSnackbar('Error Generating Feedback', {

src/components/coursemanage/grading/table-toolbar.tsx

@@ -116,14 +116,14 @@ export function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
           .then(response => {
             enqueueSnackbar(
               'Successfully matched ' +
-              response.syncable_users +
-              ' submissions with learning platform',
+                response.syncable_users +
+                ' submissions with learning platform',
               { variant: 'success' }
             );
             enqueueSnackbar(
               'Successfully synced latest submissions with feedback of ' +
-              response.synced_user +
-              ' users',
+                response.synced_user +
+                ' users',
               { variant: 'success' }
             );
           })
@@ -187,7 +187,9 @@ export function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
         enqueueSnackbar(`Generating feedback for ${numSelected} submissions!`, {
           variant: 'success'
         });
-        queryClient.invalidateQueries({ queryKey: ['submissionsAssignmentStudent']});
+        await queryClient.invalidateQueries({
+          queryKey: ['submissionsAssignmentStudent']
+        });
       } catch (err) {
         console.error(err);
         enqueueSnackbar('Error Generating Feedback', {
@@ -302,7 +304,8 @@ export function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
             </Tooltip>
             <Tooltip
               title={
-                checkAutogradeStatus() ? 'Generate feedback for all selected submissions'
+                checkAutogradeStatus()
+                  ? 'Generate feedback for all selected submissions'
                   : 'All selected submissions have to be automatically graded!'
               }
             >

src/components/coursemanage/lecture.tsx

@@ -18,16 +18,15 @@ import {
 import * as React from 'react';
 import { Assignment } from '../../model/assignment';
 import { Lecture } from '../../model/lecture';
-import { deleteAssignment, getAllAssignments } from '../../services/assignments.service';
+import {
+  deleteAssignment,
+  getAllAssignments
+} from '../../services/assignments.service';
 import { CreateDialog, EditLectureDialog } from '../util/dialog';
 import { getLecture, updateLecture } from '../../services/lectures.service';
 import { red, grey } from '@mui/material/colors';
 import { enqueueSnackbar } from 'notistack';
-import {
-  useNavigate,
-  useNavigation,
-  useRouteLoaderData
-} from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { ButtonTr, GraderTable } from '../util/table';
 import { DeadlineComponent } from '../util/deadline';
 import CloseIcon from '@mui/icons-material/Close';
@@ -163,10 +162,14 @@ export const LectureComponent = () => {
     enabled: !!lectureId
   });
 
-  const { data: assignments = [], isLoading: isLoadingAssignments, refetch: refetchAssignments } = useQuery<AssignmentDetail[]>({
+  const {
+    data: assignments = [],
+    isLoading: isLoadingAssignments,
+    refetch: refetchAssignments
+  } = useQuery<AssignmentDetail[]>({
     queryKey: ['assignments', lecture, lectureId],
     queryFn: () => getAllAssignments(lectureId),
-    enabled: !!lecture 
+    enabled: !!lecture
   });
 
   React.useEffect(() => {
@@ -175,12 +178,10 @@ export const LectureComponent = () => {
     }
   }, [assignments]);
 
-
   const [lectureState, setLecture] = React.useState(lecture);
   const [assignmentsState, setAssignments] = React.useState<Assignment[]>([]);
   const [isEditDialogOpen, setEditDialogOpen] = React.useState(false);
 
-
   if (isLoadingLecture || isLoadingAssignments) {
     return (
       <div>
@@ -195,19 +196,20 @@ export const LectureComponent = () => {
     setEditDialogOpen(true);
   };
 
-  
-  const handleUpdateLecture = (updatedLecture) => {
+  const handleUpdateLecture = updatedLecture => {
     updateLecture(updatedLecture).then(
-      async (response) => {
+      async response => {
         await updateMenus(true);
         setLecture(response);
         // Invalidate query key "lectures" and "completedLectures", so that we trigger refetch on lectures table and correct lecture name is shown in the table!
-        queryClient.invalidateQueries({ queryKey: ['lectures'] });
-        queryClient.invalidateQueries({ queryKey: ['completedLectures'] });  
+        await queryClient.invalidateQueries({ queryKey: ['lectures'] });
+        await queryClient.invalidateQueries({
+          queryKey: ['completedLectures']
+        });
       },
-      (error) => {
+      error => {
         enqueueSnackbar(error.message, {
-          variant: 'error',
+          variant: 'error'
         });
       }
     );
@@ -236,11 +238,7 @@ export const LectureComponent = () => {
         alignItems="center"
         sx={{ mt: 2, mb: 1 }}
       >
-        <Stack
-          direction="row"
-          alignItems="center"
-          sx={{ mr: 2}}
-          >
+        <Stack direction="row" alignItems="center" sx={{ mr: 2 }}>
           {lecture.code === lecture.name ? (
             <Alert severity="info">
               The name of the lecture is identical to the lecture code. You

src/components/coursemanage/overview/assignment-status.tsx

@@ -99,7 +99,7 @@ export const AssignmentStatus = (props: IAssignmentStatusProps) => {
     try {
       await updateStatusMutation.mutateAsync(status);
       await refetchAssignment();
-      queryClient.invalidateQueries({ queryKey: ['assignments', props.lecture.id] });
+      await queryClient.invalidateQueries({ queryKey: ['assignments'] });
       enqueueSnackbar(success, { variant: 'success' });
     } catch (err) {
       enqueueSnackbar(error, { variant: 'error' });

src/components/coursemanage/settings/settings.tsx

@@ -41,6 +41,7 @@ import { updateMenus } from '../../../menu';
 import { extractIdsFromBreadcrumbs } from '../../util/breadcrumbs';
 import { getLecture } from '../../../services/lectures.service';
 import { useQuery } from '@tanstack/react-query';
+import { queryClient } from '../../../widgets/assignmentmanage';
 
 const gradingBehaviourHelp = `Specifies the behaviour when a students submits an assignment.\n
 No Automatic Grading: No action is taken on submit.\n
@@ -70,14 +71,14 @@ export const SettingsComponent = () => {
 
   const { data: lecture } = useQuery<Lecture>({
     queryKey: ['lecture', lectureId],
-    queryFn: () => getLecture(lectureId), 
-    enabled: !!lectureId, 
+    queryFn: () => getLecture(lectureId),
+    enabled: !!lectureId
   });
 
   const { data: assignment } = useQuery<Assignment>({
     queryKey: ['assignment', assignmentId],
-    queryFn: () => getAssignment(lectureId, assignmentId), 
-    enabled: !!lecture && !!assignmentId, 
+    queryFn: () => getAssignment(lectureId, assignmentId),
+    enabled: !!lecture && !!assignmentId
   });
 
   const [checked, setChecked] = React.useState(assignment.due_date !== null);
@@ -146,7 +147,7 @@ export const SettingsComponent = () => {
         }
       }
     }
-    if (nErrors == 0) {
+    if (nErrors === 0) {
       // error object has to be empty, otherwise submit is blocked
       return {};
     }
@@ -173,6 +174,7 @@ export const SettingsComponent = () => {
       updateAssignment(lecture.id, updatedAssignment).then(
         async response => {
           await updateMenus(true);
+          await queryClient.invalidateQueries({ queryKey: ['assignments'] });
           enqueueSnackbar('Successfully Updated Assignment', {
             variant: 'success'
           });

src/components/util/dialog.tsx

@@ -282,6 +282,7 @@ export const CreateDialog = (props: ICreateDialogProps) => {
         async a => {
           await updateMenus(true);
           props.handleSubmit(a);
+          await queryClient.invalidateQueries({ queryKey: ['assignments'] });
         },
 
         error => {
@@ -290,7 +291,6 @@ export const CreateDialog = (props: ICreateDialogProps) => {
           });
         }
       );
-      queryClient.invalidateQueries({ queryKey: ['assignments', props.lecture.id] });
       setOpen(false);
     }
   });