From af7a1037bc646599f34b30d64e6cf643a6af8b65 Mon Sep 17 00:00:00 2001
From: Viliam Geffert <60324080+vgeffer@users.noreply.github.com>
Date: Sat, 23 Nov 2024 14:10:07 +0100
Subject: [PATCH] 428 points (#463)

* Prevented refresh when uploading solutions

* Removed debug prints
---
 .../ProblemAdministration.tsx                 | 285 +++++++++++-------
 src/utils/useNavigationTrap.ts                |   2 +-
 2 files changed, 171 insertions(+), 116 deletions(-)

diff --git a/src/components/ProblemAdministration/ProblemAdministration.tsx b/src/components/ProblemAdministration/ProblemAdministration.tsx
index 638e54a0..60a5ba77 100644
--- a/src/components/ProblemAdministration/ProblemAdministration.tsx
+++ b/src/components/ProblemAdministration/ProblemAdministration.tsx
@@ -9,9 +9,11 @@ import {DropzoneOptions, useDropzone} from 'react-dropzone'
 import {ProblemWithSolutions, SemesterWithProblems, SolutionAdministration} from '@/types/api/competition'
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
 import {useHasPermissions} from '@/utils/useHasPermissions'
+import {useNavigationTrap} from '@/utils/useNavigationTrap'
 
 import {Button} from '../Clickable/Button'
 import {Link} from '../Clickable/Link'
+import {Dialog} from '../Dialog/Dialog'
 import {FileDropZone} from '../FileDropZone/FileDropZone'
 import {FileUploader} from '../FileUploader/FileUploader'
 import {Latex} from '../Latex/Latex'
@@ -25,6 +27,16 @@ export const ProblemAdministration: FC = () => {
 
   const problemId = params && params[0]
 
+  const [isDirty, setIsDirty] = useState(false)
+
+  const [exitDialogOpen, setExitDialogOpen] = useState(false)
+  const {continueNavigation} = useNavigationTrap({
+    shouldBlockNavigation: isDirty,
+    onNavigate: () => {
+      setExitDialogOpen(true)
+    },
+  })
+
   const {
     data: problemData,
     refetch: refetchProblem,
@@ -80,6 +92,23 @@ export const ProblemAdministration: FC = () => {
     // nie je to ale "deep copy" - data[index] je tiez referencia na povodny objekt, treba ho skopirovat
     data[index] = {...data[index], score: newScore}
     setSolutions(data)
+    setIsDirty(true)
+  }
+
+  const updateSolution = (index: number) => {
+    // array v javascripte je objekt s referenciou, pre skopirovanie odpojene od originalneho objektu treba vytvorit novy array
+    const data = [...(solutions ?? [])]
+    // nie je to ale "deep copy" - data[index] je tiez referencia na povodny objekt, treba ho skopirovat
+    data[index] = {...data[index], solution: 'uploaded'}
+    setSolutions(data)
+  }
+
+  const updateCorrectedSolution = (index: number) => {
+    // array v javascripte je objekt s referenciou, pre skopirovanie odpojene od originalneho objektu treba vytvorit novy array
+    const data = [...(solutions ?? [])]
+    // nie je to ale "deep copy" - data[index] je tiez referencia na povodny objekt, treba ho skopirovat
+    data[index] = {...data[index], corrected_solution: 'uploaded'}
+    setSolutions(data)
   }
 
   const {mutate: uploadZipFile, error: uploadZipFileError} = useMutation({
@@ -124,129 +153,155 @@ export const ProblemAdministration: FC = () => {
   if (problemId === undefined || !problem)
     return <Typography>Nevalidné číslo úlohy (problemId) v URL alebo ju proste nevieme fetchnúť z BE.</Typography>
 
-  const handleSavePoints = () => uploadPoints(problemId)
+  const handleSavePoints = () => {
+    setIsDirty(false)
+    uploadPoints(problemId)
+  }
 
   return (
-    <Stack gap={2}>
-      <Stack direction="row" justifyContent="space-between">
-        <Typography variant="h2">Opravovanie {problem.order}. úlohy</Typography>
-
-        <Link variant="button2" href={`/strom/admin/opravovanie/${semesterUrl}`}>
-          Späť na semester
-        </Link>
-      </Stack>
+    <>
+      <Dialog
+        open={exitDialogOpen}
+        title="Neuložené zmeny"
+        contentText="Máš neuložené zmeny. Naozaj chceš opustiť stránku?"
+        actions={
+          <>
+            <Button variant="button2" onClick={continueNavigation}>
+              Opustiť stránku
+            </Button>
+            <Button
+              variant="button2"
+              onClick={() => {
+                setExitDialogOpen(false)
+              }}
+            >
+              Zostať na stránke
+            </Button>
+          </>
+        }
+      />
+      <Stack gap={2}>
+        <Stack direction="row" justifyContent="space-between">
+          <Typography variant="h2">Opravovanie {problem.order}. úlohy</Typography>
 
-      <Latex>{problem.text ?? 'Načítavam...'}</Latex>
-
-      <div className={styles.row}>
-        <Typography variant="body1" component="div">
-          Vzorové riešenie:
-        </Typography>
-        {problem.solution_pdf ? (
-          <a href={problem.solution_pdf} target="_blank" rel="noreferrer" className={styles.icon}>
-            <FormatAlignJustify />
-          </a>
-        ) : (
-          <div className={styles.iconDisabled}>
-            <FormatAlignJustify />
-          </div>
-        )}
-        <FileUploader
-          uploadLink={`/api/competition/problem/${problemId}/upload-model-solution`}
-          refetch={refetchProblem}
-        />
-      </div>
+          <Link variant="button2" href={`/strom/admin/opravovanie/${semesterUrl}`}>
+            Späť na semester
+          </Link>
+        </Stack>
 
-      <Stack alignItems="end">
-        <Link variant="button2" href={`/api/competition/problem/${problemId}/download-solutions`}>
-          Stiahnuť riešenia
-        </Link>
-      </Stack>
+        <Latex>{problem.text ?? 'Načítavam...'}</Latex>
 
-      <FileDropZone
-        getRootProps={getRootProps}
-        getInputProps={getInputProps}
-        text="Vlož opravené riešenia vo formáte zip"
-      />
-      {uploadZipFileError && (
-        <>
-          <Typography>Chyby pri nahrávaní ZIPka:</Typography>
-          <Typography sx={{whiteSpace: 'pre-line'}}>{uploadZipFileErrors}</Typography>
-        </>
-      )}
-
-      <form>
-        <div className={styles.table}>
-          <div className={styles.tableHeader}>
-            <div>Riešiteľ</div>
-            <div className={styles.centerCell}>Body</div>
-            <div className={styles.centerCell}>Riešenie</div>
-            <div className={styles.centerCell}>Opravené</div>
-          </div>
-          {solutions?.map((solution, index) => (
-            <div key={solution.id} className={styles.tableRow}>
-              <div>
-                {solution.semester_registration?.profile.first_name} {solution.semester_registration?.profile.last_name}
-              </div>
-              <div className={styles.centerCell}>
-                <input
-                  type="text"
-                  pattern="[0-9]"
-                  value={solution.score ?? ''}
-                  onChange={(event) => updatePoints(index, event.target.value)}
-                  className={styles.input}
-                />
-              </div>
-              <div className={styles.centerCell}>
-                {solution.solution ? (
-                  <a
-                    href={`/api/competition/solution/${solution.id}/file-solution`}
-                    target="_blank"
-                    rel="noreferrer"
-                    className={styles.icon}
-                  >
-                    <FormatAlignJustify />
-                  </a>
-                ) : (
-                  <div className={styles.iconDisabled}>
-                    <FormatAlignJustify />
-                  </div>
-                )}
-                <FileUploader
-                  uploadLink={`/api/competition/solution/${solution.id}/upload-solution-file`}
-                  refetch={refetchProblem}
-                />
-              </div>
-              <div className={styles.centerCell}>
-                {solution.corrected_solution ? (
-                  <a
-                    href={`/api/competition/solution/${solution.id}/file-corrected`}
-                    target="_blank"
-                    rel="noreferrer"
-                    className={styles.icon}
-                  >
-                    <Grading />
-                  </a>
-                ) : (
-                  <div className={styles.iconDisabled}>
-                    <Grading />
-                  </div>
-                )}
-                <FileUploader
-                  uploadLink={`/api/competition/solution/${solution.id}/upload-corrected-solution-file`}
-                  refetch={refetchProblem}
-                />
-              </div>
+        <div className={styles.row}>
+          <Typography variant="body1" component="div">
+            Vzorové riešenie:
+          </Typography>
+          {problem.solution_pdf ? (
+            <a href={problem.solution_pdf} target="_blank" rel="noreferrer" className={styles.icon}>
+              <FormatAlignJustify />
+            </a>
+          ) : (
+            <div className={styles.iconDisabled}>
+              <FormatAlignJustify />
             </div>
-          ))}
+          )}
+          <FileUploader
+            uploadLink={`/api/competition/problem/${problemId}/upload-model-solution`}
+            refetch={refetchProblem}
+          />
         </div>
 
-        <Stack alignItems="end" mt={1.5}>
-          <Button variant="button2" onClick={handleSavePoints}>
-            Uložiť body
-          </Button>
+        <Stack alignItems="end">
+          <Link variant="button2" href={`/api/competition/problem/${problemId}/download-solutions`}>
+            Stiahnuť riešenia
+          </Link>
         </Stack>
-      </form>
-    </Stack>
+
+        <FileDropZone
+          getRootProps={getRootProps}
+          getInputProps={getInputProps}
+          text="Vlož opravené riešenia vo formáte zip"
+        />
+        {uploadZipFileError && (
+          <>
+            <Typography>Chyby pri nahrávaní ZIPka:</Typography>
+            <Typography sx={{whiteSpace: 'pre-line'}}>{uploadZipFileErrors}</Typography>
+          </>
+        )}
+
+        <form>
+          <div className={styles.table}>
+            <div className={styles.tableHeader}>
+              <div>Riešiteľ</div>
+              <div className={styles.centerCell}>Body</div>
+              <div className={styles.centerCell}>Riešenie</div>
+              <div className={styles.centerCell}>Opravené</div>
+            </div>
+            {solutions?.map((solution, index) => (
+              <div key={solution.id} className={styles.tableRow}>
+                <div>
+                  {solution.semester_registration?.profile.first_name}{' '}
+                  {solution.semester_registration?.profile.last_name}
+                </div>
+                <div className={styles.centerCell}>
+                  <input
+                    type="text"
+                    pattern="[0-9]"
+                    value={solution.score ?? ''}
+                    onChange={(event) => updatePoints(index, event.target.value)}
+                    className={styles.input}
+                  />
+                </div>
+                <div className={styles.centerCell}>
+                  {solution.solution ? (
+                    <a
+                      href={`/api/competition/solution/${solution.id}/file-solution`}
+                      target="_blank"
+                      rel="noreferrer"
+                      className={styles.icon}
+                    >
+                      <FormatAlignJustify />
+                    </a>
+                  ) : (
+                    <div className={styles.iconDisabled}>
+                      <FormatAlignJustify />
+                    </div>
+                  )}
+                  <FileUploader
+                    uploadLink={`/api/competition/solution/${solution.id}/upload-solution-file`}
+                    refetch={() => updateSolution(index)}
+                  />
+                </div>
+                <div className={styles.centerCell}>
+                  {solution.corrected_solution ? (
+                    <a
+                      href={`/api/competition/solution/${solution.id}/file-corrected`}
+                      target="_blank"
+                      rel="noreferrer"
+                      className={styles.icon}
+                    >
+                      <Grading />
+                    </a>
+                  ) : (
+                    <div className={styles.iconDisabled}>
+                      <Grading />
+                    </div>
+                  )}
+                  <FileUploader
+                    uploadLink={`/api/competition/solution/${solution.id}/upload-corrected-solution-file`}
+                    refetch={() => updateCorrectedSolution(index)}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <Stack alignItems="end" mt={1.5}>
+            <Button variant="button2" onClick={handleSavePoints}>
+              Uložiť body
+            </Button>
+          </Stack>
+        </form>
+      </Stack>
+    </>
   )
 }
diff --git a/src/utils/useNavigationTrap.ts b/src/utils/useNavigationTrap.ts
index 0cc1a5ce..8268c5e5 100644
--- a/src/utils/useNavigationTrap.ts
+++ b/src/utils/useNavigationTrap.ts
@@ -31,7 +31,7 @@ export const useNavigationTrap = ({shouldBlockNavigation, onNavigate}: Navigatio
     }
 
     const pageExit = (e: BeforeUnloadEvent) => {
-      e.preventDefault()
+      if (shouldBlockNavigation) e.preventDefault()
     }
 
     router.events.on('routeChangeStart', pageNavigate)