Feat: Use react query for fetching files into the FilesList

Ref: #27

src/components/assignment/assignment.tsx

@@ -48,6 +48,9 @@ import { openBrowser } from '../coursemanage/overview/util';
 import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser';
 import { Scope, UserPermissions } from '../../services/permission.service';
 import { GradeBook } from '../../services/gradebook';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
 
 const calculateActiveStep = (submissions: Submission[]) => {
   const hasFeedback = submissions.reduce(
@@ -285,6 +288,7 @@ export const AssignmentComponent = () => {
   };
 
   return (
+    <QueryClientProvider client={queryClient}>
     <Box sx={{ flex: 1, overflow: 'auto' }}>
       <Box>
         <Box sx={{ mt: 6 }}>
@@ -433,5 +437,6 @@ export const AssignmentComponent = () => {
         />
       </Box>
     </Box>
+    </QueryClientProvider>
   );
 };

src/components/coursemanage/files/file-view.tsx

@@ -5,6 +5,9 @@ import { useRouteLoaderData } from 'react-router-dom';
 import { Lecture } from '../../../model/lecture';
 import { Assignment } from '../../../model/assignment';
 import { Submission } from '../../../model/submission';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
 
 export const FileView = () => {
   const { lecture, assignments, users } = useRouteLoaderData('lecture') as {
@@ -26,10 +29,12 @@ export const FileView = () => {
   };
 
   return (
+    <QueryClientProvider client={queryClient}>
     <Files
       lecture={lecture}
       assignment={assignmentState}
       onAssignmentChange={onAssignmentChange}
     />
+    </QueryClientProvider>
   );
 };

src/components/coursemanage/grading/create-submission.tsx

@@ -33,10 +33,7 @@ import {
 } from '../../../services/submissions.service';
 import { enqueueSnackbar } from 'notistack';
 import { GraderLoadingButton } from '../../util/loading-button';
-import { QueryClient, QueryClientProvider, useMutation } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-
-const queryClient = new QueryClient();
+import { useMutation } from '@tanstack/react-query';
 
 export const CreateSubmission = () => {
   const { assignment, rows, setRows } = useOutletContext() as {
@@ -102,12 +99,6 @@ export const CreateSubmission = () => {
     createSubmissionMutation.mutate();
   };
 
-  const [reloadFilesToggle, setReloadFiles] = React.useState(false);
-
-  const reloadFiles = () => {
-    setReloadFiles(!reloadFilesToggle);
-  };
-
   return (
     <Box sx={{ overflow: 'auto' }}>
       <Stack direction={'column'} sx={{ flex: '1 1 100%' }}>
@@ -147,21 +138,11 @@ export const CreateSubmission = () => {
             />
           )}
         />
-        <Stack
-          direction={'row'}
-          justifyContent={'flex-start'}
-          alignItems={'center'}
-          spacing={2}
-          sx={{ ml: 2 }}
-        >
-          <Typography>Submission Files</Typography>
-          <Tooltip title="Reload Files">
-            <IconButton aria-label="reload" onClick={() => reloadFiles()}>
-              <ReplayIcon />
-            </IconButton>
-          </Tooltip>
-        </Stack>
-
+       <Typography
+        sx={{ ml: 2 }}
+       >
+        Submission Files
+        </Typography>
         <FilesList path={path} sx={{ m: 2 }} />
         <Stack direction={'row'} sx={{ ml: 2 }} spacing={2}>
           <GraderLoadingButton

src/components/coursemanage/grading/grading.tsx

@@ -623,7 +623,7 @@ export const GradingComponent = () => {
         }}
       />
     </Stack>
-    <ReactQueryDevtools initialIsOpen={false} />
+    {/*<ReactQueryDevtools initialIsOpen={false} />*/}
     </QueryClientProvider>
   );
 };

src/components/util/file-list.tsx

@@ -27,6 +27,7 @@ import FileItem from './file-item';
 import FolderItem from './folder-item';
 import { Assignment } from '../../model/assignment';
 import { Lecture } from '../../model/lecture';
+import { useQuery } from '@tanstack/react-query';
 
 interface IFileListProps {
   path: string;
@@ -38,10 +39,16 @@ interface IFileListProps {
 }
 
 export const FilesList = (props: IFileListProps) => {
-  const [files, setFiles] = React.useState([]);
+  const { data: files = [], refetch } = useQuery({
+    queryKey: ['files', props.path], 
+    queryFn: () => getFiles(props.path),
+    // Disable automatic refetching, since we want to subscribe directyly on property changes.
+    refetchOnMount: false,
+    refetchInterval: false, 
+  });
 
   React.useEffect(() => {
-    getFiles(props.path).then(files => setFiles(files));
+    refetch(); 
   }, [props]);
 
   const inContained = (file: string) => {
@@ -51,6 +58,8 @@ export const FilesList = (props: IFileListProps) => {
     return true;
   };
 
+
+
   const generateItems = (files: File[]) => {
     const filePaths = files.flatMap(file =>
       extractRelativePathsAssignment(file)