Refactor Create dialogs

INTO-CPS-Association · Oct 28, 2024 · e4d9dc6 · e4d9dc6
1 parent 8289011
commit e4d9dc6
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 72 deletions.
diff --git a/client/src/preview/route/digitaltwins/create/ChangeFileNameDialog.tsx b/client/src/preview/route/digitaltwins/create/ChangeFileNameDialog.tsx
@@ -9,14 +9,14 @@ import {
 } from '@mui/material';
 import { renameFile } from 'preview/store/file.slice';
 import { useDispatch } from 'react-redux';
-import { useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 interface ChangeFileNameDialogProps {
   open: boolean;
   onClose: () => void;
   fileName: string;
-  setFileName: (name: string) => void;
-  setFileType: (type: string) => void;
+  setFileName: Dispatch<SetStateAction<string>>;
+  setFileType: Dispatch<SetStateAction<string>>;
 }
 
 const ChangeFileNameDialog: React.FC<ChangeFileNameDialogProps> = ({

diff --git a/client/src/preview/route/digitaltwins/create/ConfirmDeleteDialog.tsx b/client/src/preview/route/digitaltwins/create/ConfirmDeleteDialog.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { Dialog, DialogActions, DialogContent, Button } from '@mui/material';
 import { removeAllCreationFiles, addNewFile } from 'preview/store/file.slice';
 import { useDispatch, useSelector } from 'react-redux';
@@ -7,10 +8,10 @@ import { RootState } from 'store/store';
 interface ConfirmDeleteDialogProps {
   open: boolean;
   onClose: () => void;
-  setFileName: (name: string) => void;
-  setFileContent: (content: string) => void;
-  setFileType: (type: string) => void;
-  setNewDigitalTwinName: (name: string) => void;
+  setFileName: Dispatch<SetStateAction<string>>;
+  setFileContent: Dispatch<SetStateAction<string>>;
+  setFileType: Dispatch<SetStateAction<string>>;
+  setNewDigitalTwinName: Dispatch<SetStateAction<string>>;
 }
 
 const ConfirmDeleteDialog: React.FC<ConfirmDeleteDialogProps> = ({
@@ -25,8 +26,6 @@ const ConfirmDeleteDialog: React.FC<ConfirmDeleteDialogProps> = ({
 
   const files = useSelector((state: RootState) => state.files);
 
-  console.log(files);
-
   const handleConfirmCancel = () => {
     setFileName('');
     setFileContent('');

diff --git a/client/src/preview/route/digitaltwins/create/CreateDTDialog.tsx b/client/src/preview/route/digitaltwins/create/CreateDTDialog.tsx
@@ -1,16 +1,7 @@
 import * as React from 'react';
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  Typography,
-  Button,
-} from '@mui/material';
-import {
-  addNewFile,
-  FileState,
-  removeAllCreationFiles,
-} from 'preview/store/file.slice';
+import { Dispatch, SetStateAction } from 'react';
+import { Dialog, DialogActions, DialogContent, Typography, Button } from '@mui/material';
+import { addNewFile, FileState, removeAllCreationFiles } from 'preview/store/file.slice';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from 'store/store';
 import GitlabInstance from 'preview/util/gitlab';
@@ -23,13 +14,13 @@ interface CreateDTDialogProps {
   open: boolean;
   onClose: () => void;
   newDigitalTwinName: string;
-  setNewDigitalTwinName: (name: string) => void;
+  setNewDigitalTwinName: Dispatch<SetStateAction<string>>;
   errorMessage: string;
-  setErrorMessage: (message: string) => void;
-  setFileName: (name: string) => void;
-  setFileContent: (content: string) => void;
-  setFileType: (type: string) => void;
-  setOpenInputDialog: (open: boolean) => void;
+  setErrorMessage: Dispatch<SetStateAction<string>>;
+  setFileName: Dispatch<SetStateAction<string>>;
+  setFileContent: Dispatch<SetStateAction<string>>;
+  setFileType: Dispatch<SetStateAction<string>>;
+  setOpenCreateDTDialog: Dispatch<SetStateAction<boolean>>;
 }
 
 const defaultFiles = [
@@ -38,7 +29,7 @@ const defaultFiles = [
   { name: '.gitlab-ci.yml', type: 'config' },
 ];
 
-const InputDialog: React.FC<CreateDTDialogProps> = ({
+const CreateDTDialog: React.FC<CreateDTDialogProps> = ({
   open,
   onClose,
   newDigitalTwinName,
@@ -48,56 +39,63 @@ const InputDialog: React.FC<CreateDTDialogProps> = ({
   setFileName,
   setFileContent,
   setFileType,
-  setOpenInputDialog,
+  setOpenCreateDTDialog,
 }) => {
   const files: FileState[] = useSelector((state: RootState) => state.files);
   const dispatch = useDispatch();
 
   const handleInputDialogClose = () => {
-    setOpenInputDialog(false);
+    setOpenCreateDTDialog(false);
   };
 
-  const handleInputDialogConfirm = async () => {
-    const emptyNewFiles = files
+  const checkEmptyNewFiles = (): boolean => {
+    const emptyFiles = files
       .filter((file) => file.isNew && file.content === '')
       .map((file) => file.name);
 
-    if (emptyNewFiles.length > 0) {
+    if (emptyFiles.length > 0) {
       setErrorMessage(
-        `The following files have empty content: ${emptyNewFiles.join(', ')}. Edit them in order to create the new digital twin.`,
+        `The following files have empty content: ${emptyFiles.join(', ')}. Edit them in order to create the new digital twin.`
       );
-      return;
+      return true;
     }
+    return false;
+  };
 
+  const initializeDigitalTwin = async () => {
     const gitlabInstance = new GitlabInstance(
       sessionStorage.getItem('username') || '',
       getAuthority(),
-      sessionStorage.getItem('access_token') || '',
+      sessionStorage.getItem('access_token') || ''
     );
     await gitlabInstance.init();
-    const digitalTwin = new DigitalTwin(newDigitalTwinName, gitlabInstance);
+    return new DigitalTwin(newDigitalTwinName, gitlabInstance);
+  };
+
+  const addMissingDefaultFiles = () => {
+    defaultFiles.forEach((file) => {
+      const fileExists = files.some((existingFile) => existingFile.name === file.name);
+      if (!fileExists) {
+        dispatch(addNewFile(file));
+      }
+    });
+  };
+
+  const handleInputDialogConfirm = async () => {
+    if (checkEmptyNewFiles()) return;
+
+    const digitalTwin = await initializeDigitalTwin();
     const result = await digitalTwin.createDT(files);
+
     if (result.startsWith('Error')) {
       dispatch(showSnackbar({ message: result, severity: 'error' }));
     } else {
-      dispatch(
-        showSnackbar({
-          message: `Digital twin ${newDigitalTwinName} created successfully`,
-          severity: 'success',
-        }),
-      );
+      dispatch(showSnackbar({ message: `Digital twin ${newDigitalTwinName} created successfully`, severity: 'success' }));
       dispatch(setDigitalTwin({ assetName: newDigitalTwinName, digitalTwin }));
       dispatch(removeAllCreationFiles());
-
-      defaultFiles.forEach((file) => {
-        const fileExists = files.some(
-          (existingFile) => existingFile.name === file.name,
-        );
-        if (!fileExists) {
-          dispatch(addNewFile(file));
-        }
-      });
+      addMissingDefaultFiles();
     }
+
     handleInputDialogClose();
     setFileName('');
     setFileContent('');
@@ -109,8 +107,7 @@ const InputDialog: React.FC<CreateDTDialogProps> = ({
     <Dialog open={open} onClose={onClose}>
       <DialogContent>
         <Typography>
-          Are you sure you want to create the{' '}
-          <strong>{newDigitalTwinName}</strong> digital twin?
+          Are you sure you want to create the <strong>{newDigitalTwinName}</strong> digital twin?
         </Typography>
         <Typography style={{ color: 'red' }}>{errorMessage}</Typography>
       </DialogContent>
@@ -122,4 +119,4 @@ const InputDialog: React.FC<CreateDTDialogProps> = ({
   );
 };
 
-export default InputDialog;
+export default CreateDTDialog;
diff --git a/client/src/preview/route/digitaltwins/create/CreateDialogs.tsx b/client/src/preview/route/digitaltwins/create/CreateDialogs.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import ChangeFileNameDialog from './ChangeFileNameDialog';
 import DeleteFileDialog from './DeleteFileDialog';
 import ConfirmDeleteDialog from './ConfirmDeleteDialog';
@@ -8,19 +9,19 @@ interface CreateDialogsProps {
   openChangeFileNameDialog: boolean;
   onCloseChangeFileNameDialog: () => void;
   fileName: string;
-  setFileName: (name: string) => void;
-  setFileContent: (content: string) => void;
-  setFileType: (type: string) => void;
+  setFileName: Dispatch<SetStateAction<string>>;
+  setFileContent: Dispatch<SetStateAction<string>>;
+  setFileType: Dispatch<SetStateAction<string>>;
   openDeleteFileDialog: boolean;
   onCloseDeleteFileDialog: () => void;
   openConfirmDeleteDialog: boolean;
-  setOpenConfirmDeleteDialog: (open: boolean) => void;
-  openInputDialog: boolean;
-  setOpenInputDialog: (open: boolean) => void;
+  setOpenConfirmDeleteDialog: Dispatch<SetStateAction<boolean>>;
+  openCreateDTDialog: boolean;
+  setOpenCreateDTDialog: Dispatch<SetStateAction<boolean>>;
   newDigitalTwinName: string;
-  setNewDigitalTwinName: (name: string) => void;
+  setNewDigitalTwinName: Dispatch<SetStateAction<string>>;
   errorMessage: string;
-  setErrorMessage: (message: string) => void;
+  setErrorMessage: Dispatch<SetStateAction<string>>;
 }
 
 const CreateDialogs: React.FC<CreateDialogsProps> = (props) => (
@@ -42,16 +43,16 @@ const CreateDialogs: React.FC<CreateDialogsProps> = (props) => (
     />
 
     <CreateDTDialog
-      open={props.openInputDialog}
-      onClose={() => props.setOpenInputDialog(false)}
+      open={props.openCreateDTDialog}
+      onClose={() => props.setOpenCreateDTDialog(false)}
       newDigitalTwinName={props.newDigitalTwinName}
       setNewDigitalTwinName={props.setNewDigitalTwinName}
       errorMessage={props.errorMessage}
       setErrorMessage={props.setErrorMessage}
       setFileName={props.setFileName}
       setFileContent={props.setFileContent}
       setFileType={props.setFileType}
-      setOpenInputDialog={props.setOpenInputDialog}
+      setOpenCreateDTDialog={props.setOpenCreateDTDialog}
     />
 
     <ConfirmDeleteDialog

diff --git a/client/src/preview/route/digitaltwins/create/CreatePage.tsx b/client/src/preview/route/digitaltwins/create/CreatePage.tsx
@@ -104,7 +104,7 @@ function CreatePage({
     useState(false);
   const [openDeleteFileDialog, setOpenDeleteFileDialog] = useState(false);
   const [openConfirmDeleteDialog, setOpenConfirmDeleteDialog] = useState(false);
-  const [openInputDialog, setOpenInputDialog] = useState(false);
+  const [openCreateDTDialog, setOpenCreateDTDialog] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
 
   const confirmCancel = () => {
@@ -113,7 +113,7 @@ function CreatePage({
 
   const confirmSave = () => {
     setErrorMessage('');
-    setOpenInputDialog(true);
+    setOpenCreateDTDialog(true);
   };
 
   return (
@@ -167,8 +167,8 @@ function CreatePage({
         onCloseDeleteFileDialog={() => setOpenDeleteFileDialog(false)}
         openConfirmDeleteDialog={openConfirmDeleteDialog}
         setOpenConfirmDeleteDialog={setOpenConfirmDeleteDialog}
-        openInputDialog={openInputDialog}
-        setOpenInputDialog={setOpenInputDialog}
+        openCreateDTDialog={openCreateDTDialog}
+        setOpenCreateDTDialog={setOpenCreateDTDialog}
         newDigitalTwinName={newDigitalTwinName}
         setNewDigitalTwinName={setNewDigitalTwinName}
         errorMessage={errorMessage}

diff --git a/client/src/preview/route/digitaltwins/create/DeleteFileDialog.tsx b/client/src/preview/route/digitaltwins/create/DeleteFileDialog.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { Dialog, DialogActions, DialogContent, Button } from '@mui/material';
 import { deleteFile } from 'preview/store/file.slice';
 import { useDispatch } from 'react-redux';
@@ -7,8 +8,8 @@ interface DeleteFileDialogProps {
   open: boolean;
   onClose: () => void;
   fileName: string;
-  setFileName: (name: string) => void;
-  setFileContent: (content: string) => void;
+  setFileName: Dispatch<SetStateAction<string>>;
+  setFileContent: Dispatch<SetStateAction<string>>;
 }
 
 const DeleteFileDialog: React.FC<DeleteFileDialogProps> = ({