From 4cff05891ef9acff30c0f2fdf486c05164914ee7 Mon Sep 17 00:00:00 2001
From: Reinhard <reinharddp@gmail.com>
Date: Wed, 22 May 2024 17:24:18 +0200
Subject: [PATCH] course edit fix

---
 .../[locale]/components/EditCourseForm.tsx    | 38 +++++++++++++++++--
 frontend/locales/en/common.json               |  1 +
 frontend/locales/nl/common.json               |  1 +
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/frontend/app/[locale]/components/EditCourseForm.tsx b/frontend/app/[locale]/components/EditCourseForm.tsx
index 2ae88f82..44600b17 100644
--- a/frontend/app/[locale]/components/EditCourseForm.tsx
+++ b/frontend/app/[locale]/components/EditCourseForm.tsx
@@ -3,7 +3,7 @@ import React, {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {getCourse, getImage, postData, updateCourse} from "@lib/api";
 import Typography from "@mui/material/Typography";
-import {Box, Button, Input, LinearProgress, MenuItem, Select, TextField} from "@mui/material";
+import {Box, Button, Input, LinearProgress, MenuItem, Select, TextField, Dialog, DialogActions, DialogTitle} from "@mui/material";
 import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
 import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 import {DatePicker} from '@mui/x-date-pickers/DatePicker';
@@ -24,6 +24,8 @@ const EditCourseForm = ({courseId}: EditCourseFormProps) => {
     const [selectedImage, setSelectedImage] = useState<File | null>(null);
     const [selectedImageURL, setSelectedImageURL] = useState<string>("");
     const [loading, setLoading] = useState(true);
+    const [openConfirmation, setOpenConfirmation] = useState(false); // State for confirmation dialog
+
 
     useEffect(() => {
         const fetchCourseData = async () => {
@@ -57,6 +59,15 @@ const EditCourseForm = ({courseId}: EditCourseFormProps) => {
 
     const handleSubmit = async (event: any) => {
         event.preventDefault();
+        setOpenConfirmation(true); // Open confirmation dialog
+    };
+
+    const handleConfirmationClose = () => {
+        setOpenConfirmation(false);
+    };
+
+    const handleConfirmationYes = async () => {
+        setOpenConfirmation(false);
         const formData = new FormData();
         formData.append('name', name);
         formData.append('description', description);
@@ -66,13 +77,16 @@ const EditCourseForm = ({courseId}: EditCourseFormProps) => {
         fileReader.onload = async function () {
             const arrayBuffer = this.result;
             if (arrayBuffer !== null) {
-                formData.append('banner', new Blob([arrayBuffer], {type: 'image/png'}));
+                formData.append('banner', new Blob([arrayBuffer], { type: 'image/png' }));
+                await updateCourse(courseId, formData).then((response) => {
+                    window.location.href = `/course/${courseId}/`;
+                });
             }
-            await updateCourse(courseId, formData);
-            window.location.href = `/course/${courseId}/`;
         }
+        if (selectedImage) fileReader.readAsArrayBuffer(selectedImage);
     };
 
+
     const handleImageUpload = (event: any) => {
         const imageFile = event.target.files[0];
         setSelectedImage(imageFile);
@@ -253,6 +267,22 @@ const EditCourseForm = ({courseId}: EditCourseFormProps) => {
                     {t("cancel")}
                 </Button>
             </Box>
+            <Dialog
+                open={openConfirmation}
+                onClose={handleConfirmationClose}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle id="alert-dialog-title">{t("Are you sure you want to submit this course?")}</DialogTitle>
+                <DialogActions>
+                    <Button onClick={handleConfirmationClose} color="primary">
+                        {t("cancel")}
+                    </Button>
+                    <Button onClick={handleConfirmationYes} color="primary" autoFocus>
+                        {t("edit course")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
         </Box>
     );
 }
diff --git a/frontend/locales/en/common.json b/frontend/locales/en/common.json
index 35a765ca..1e6eaeb5 100644
--- a/frontend/locales/en/common.json
+++ b/frontend/locales/en/common.json
@@ -76,6 +76,7 @@
   "role": "Role",
   "save changes": "Save changes",
   "save course": "Save course",
+  "edit course": "Edit course",
   "save": "Save",
   "save_changes": "Save Changes",
   "score_required": "Score is required",
diff --git a/frontend/locales/nl/common.json b/frontend/locales/nl/common.json
index 49ddcfb1..2cd85aa3 100644
--- a/frontend/locales/nl/common.json
+++ b/frontend/locales/nl/common.json
@@ -76,6 +76,7 @@
   "role": "Rol",
   "save changes": "Wijzigingen opslaan",
   "save course": "Cursus opslaan",
+  "edit course": "Cursus bewerken",
   "save": "Opslaan",
   "save_changes": "Wijzigingen Opslaan",
   "score_required": "Score is verplicht",