Separate modals into components

frontend/src/components/MainContent.js

@@ -6,12 +6,13 @@ import {
   Dot,
   useTheme,
   useToasts,
-  Modal,
-  Input,
 } from '@geist-ui/core';
 import { Code, Eye } from '@geist-ui/icons';
 import FileTree from './FileTree';
 import FileActions from './FileActions';
+import CreateFileModal from './modals/CreateFileModal';
+import DeleteFileModal from './modals/DeleteFileModal';
+import CommitMessageModal from './modals/CommitMessageModal';
 import ContentView from './ContentView';
 import { commitAndPush, saveFileContent, deleteFile } from '../services/api';
 import { isImageFile } from '../utils/fileHelpers';
@@ -34,6 +35,9 @@ const MainContent = ({
   const { setToast } = useToasts();
   const [newFileModalVisible, setNewFileModalVisible] = useState(false);
   const [newFileName, setNewFileName] = useState('');
+  const [deleteFileModalVisible, setDeleteFileModalVisible] = useState(false);
+  const [commitMessageModalVisible, setCommitMessageModalVisible] =
+    useState(false);
 
   useEffect(() => {
     if (isImageFile(selectedFile)) {
@@ -59,25 +63,6 @@ const MainContent = ({
     }
   };
 
-  const handleCommitAndPush = async () => {
-    try {
-      const message = prompt('Enter commit message:');
-      if (message) {
-        await commitAndPush(message);
-        setToast({
-          text: 'Changes committed and pushed successfully',
-          type: 'success',
-        });
-        await pullLatestChanges();
-      }
-    } catch (error) {
-      setToast({
-        text: 'Failed to commit and push changes: ' + error.message,
-        type: 'error',
-      });
-    }
-  };
-
   const handleCreateFile = () => {
     setNewFileModalVisible(true);
   };
@@ -100,12 +85,11 @@ const MainContent = ({
     setNewFileName('');
   };
 
-  const handleDeleteFile = async () => {
+  const handleDeleteFile = () => {
-    if (selectedFile) {
+    setDeleteFileModalVisible(true);
-      const confirmDelete = window.confirm(
+  };
-        `Are you sure you want to delete "${selectedFile}"?`
+
-      );
+  const confirmDeleteFile = async () => {
-      if (confirmDelete) {
     try {
       await deleteFile(selectedFile);
       setToast({ text: 'File deleted successfully', type: 'success' });
@@ -117,8 +101,28 @@ const MainContent = ({
         type: 'error',
       });
     }
+    setDeleteFileModalVisible(false);
+  };
+
+  const handleCommitAndPush = () => {
+    setCommitMessageModalVisible(true);
+  };
+
+  const confirmCommitAndPush = async (message) => {
+    try {
+      await commitAndPush(message);
+      setToast({
+        text: 'Changes committed and pushed successfully',
+        type: 'success',
+      });
+      await pullLatestChanges();
+    } catch (error) {
+      setToast({
+        text: 'Failed to commit and push changes: ' + error.message,
+        type: 'error',
+      });
     }
-    }
+    setCommitMessageModalVisible(false);
   };
 
   const renderBreadcrumbs = () => {
@@ -192,24 +196,24 @@ const MainContent = ({
           </div>
         </Grid>
       </Grid.Container>
-      <Modal
+      <CreateFileModal
         visible={newFileModalVisible}
         onClose={() => setNewFileModalVisible(false)}
-      >
+        onSubmit={handleNewFileSubmit}
-        <Modal.Title>Create New File</Modal.Title>
+        fileName={newFileName}
-        <Modal.Content>
+        setFileName={setNewFileName}
-          <Input
+      />
-            width="100%"
+      <DeleteFileModal
-            placeholder="Enter file name"
+        visible={deleteFileModalVisible}
-            value={newFileName}
+        onClose={() => setDeleteFileModalVisible(false)}
-            onChange={(e) => setNewFileName(e.target.value)}
+        onConfirm={confirmDeleteFile}
+        fileName={selectedFile}
+      />
+      <CommitMessageModal
+        visible={commitMessageModalVisible}
+        onClose={() => setCommitMessageModalVisible(false)}
+        onSubmit={confirmCommitAndPush}
       />
-        </Modal.Content>
-        <Modal.Action passive onClick={() => setNewFileModalVisible(false)}>
-          Cancel
-        </Modal.Action>
-        <Modal.Action onClick={handleNewFileSubmit}>Create</Modal.Action>
-      </Modal>
     </>
   );
 };

frontend/src/components/modals/CommitMessageModal.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Modal, Input } from '@geist-ui/core';
+
+const CommitMessageModal = ({ visible, onClose, onSubmit }) => {
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = () => {
+    onSubmit(message);
+    setMessage('');
+  };
+
+  return (
+    <Modal visible={visible} onClose={onClose}>
+      <Modal.Title>Enter Commit Message</Modal.Title>
+      <Modal.Content>
+        <Input
+          width="100%"
+          placeholder="Enter commit message"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+        />
+      </Modal.Content>
+      <Modal.Action passive onClick={onClose}>
+        Cancel
+      </Modal.Action>
+      <Modal.Action onClick={handleSubmit}>Commit</Modal.Action>
+    </Modal>
+  );
+};
+
+export default CommitMessageModal;

frontend/src/components/modals/CreateFileModal.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Modal, Input } from '@geist-ui/core';
+
+const CreateFileModal = ({
+  visible,
+  onClose,
+  onSubmit,
+  fileName,
+  setFileName,
+}) => {
+  return (
+    <Modal visible={visible} onClose={onClose}>
+      <Modal.Title>Create New File</Modal.Title>
+      <Modal.Content>
+        <Input
+          width="100%"
+          placeholder="Enter file name"
+          value={fileName}
+          onChange={(e) => setFileName(e.target.value)}
+        />
+      </Modal.Content>
+      <Modal.Action passive onClick={onClose}>
+        Cancel
+      </Modal.Action>
+      <Modal.Action onClick={onSubmit}>Create</Modal.Action>
+    </Modal>
+  );
+};
+
+export default CreateFileModal;

frontend/src/components/modals/DeleteFileModal.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Modal, Text } from '@geist-ui/core';
+
+const DeleteFileModal = ({ visible, onClose, onConfirm, fileName }) => {
+  return (
+    <Modal visible={visible} onClose={onClose}>
+      <Modal.Title>Delete File</Modal.Title>
+      <Modal.Content>
+        <Text>Are you sure you want to delete "{fileName}"?</Text>
+      </Modal.Content>
+      <Modal.Action passive onClick={onClose}>
+        Cancel
+      </Modal.Action>
+      <Modal.Action onClick={onConfirm}>Delete</Modal.Action>
+    </Modal>
+  );
+};
+
+export default DeleteFileModal;