Feat: Use React Query to fetch GitLogs in files

Ref: #27

src/components/coursemanage/files/files.tsx

@@ -42,8 +42,6 @@ import { openBrowser, openTerminal } from '../overview/util';
 import { PageConfig } from '@jupyterlab/coreutils';
 import PublishRoundedIcon from '@mui/icons-material/PublishRounded';
 import {
-  IGitLogObject,
-  getGitLog,
   getRemoteStatus,
   lectureBasePath
 } from '../../../services/file.service';
@@ -73,14 +71,7 @@ export const Files = (props: IFilesProps) => {
   const [assignment, setAssignment] = React.useState(props.assignment);
   const [lecture, setLecture] = React.useState(props.lecture);
   const [selectedDir, setSelectedDir] = React.useState('source');
-  const [gitLogs, setGitLog] = React.useState([] as IGitLogObject[]);
-  const [assignmentState, setAssignmentState] = React.useState(assignment);
 
-  const updateGitLog = () => {
-    getGitLog(lecture, assignment, RepoType.SOURCE, 10).then(logs =>
-      setGitLog(logs)
-    );
-  };
   const updateRemoteStatus = async () => {
     const status = await getRemoteStatus(
       props.lecture,
@@ -92,9 +83,7 @@ export const Files = (props: IFilesProps) => {
       status as 'up_to_date' | 'pull_needed' | 'push_needed' | 'divergent'
     );
   };
-  React.useEffect(() => {
-    updateGitLog();
-  }, [assignmentState]);
+
 
   openBrowser(
     `${lectureBasePath}${lecture.code}/${selectedDir}/${assignment.id}`
@@ -409,7 +398,7 @@ export const Files = (props: IFilesProps) => {
             Add new
           </Button>
         </Tooltip>
-        <GitLogModal gitLogs={gitLogs} />
+        <GitLogModal lecture={lecture} assignment={assignment}/>
         <Tooltip title={'Show in File-Browser'}>
           <IconButton
             sx={{ mt: -1, pt: 0, pb: 0 }}

src/components/coursemanage/files/git-log.tsx

@@ -21,12 +21,19 @@ import {
 } from '@mui/material';
 
 import * as React from 'react';
-import { IGitLogObject } from '../../../services/file.service';
+import { IGitLogObject, getGitLog } from '../../../services/file.service';
 import { utcToLocalFormat } from '../../../services/datetime.service';
 import GitHubIcon from '@mui/icons-material/GitHub';
+import { RepoType } from '../../util/repo-type';
+import { QueryClient, useMutation, useQuery } from '@tanstack/react-query';
+import { Lecture } from '../../../model/lecture';
+import { Assignment } from '../../../model/assignment';
+
+const queryClient = new QueryClient();
 
 interface IGitLogProps {
-  gitLogs: IGitLogObject[];
+  lecture: Lecture,
+  assignment: Assignment
 }
 
 const style = {
@@ -58,15 +65,20 @@ const getTimelineItem = (logItem: IGitLogObject) => {
 };
 
 export const GitLogModal = (props: IGitLogProps) => {
-  const [gitLogs, setGitLogs] = React.useState(props.gitLogs);
-  React.useEffect(() => {
-    setGitLogs(props.gitLogs);
-  }, [props.gitLogs]);
 
+  const { data: gitLogs = [] as IGitLogObject[], refetch: refetchGitLogs } = useQuery({
+    queryKey: ['gitLogs', props.lecture, props.assignment],
+    queryFn: () => getGitLog(props.lecture, props.assignment, RepoType.SOURCE, 10)
+  });
+
+
   const [open, setOpen] = React.useState(false);
-  const handleOpen = () => {
+
+  const handleOpen = async () => {
     setOpen(true);
+    await refetchGitLogs();
   };
+
   const handleClose = () => {
     setOpen(false);
   };