Merge pull request #222 from saksham-gera/prompt_issue

Prompt issue fixed

Author: pradeeban

package-lock.json

@@ -30,7 +30,7 @@
     "react-icons": "^4.2.0",
     "react-keyed-file-browser": "^1.14.0",
     "react-markdown": "^8.0.7",
-    "react-modal": "^3.13.1",
+    "react-modal": "^3.16.3",
     "react-scripts": "4.0.3",
     "react-simple-code-editor": "^0.13.0",
     "react-spinners": "^0.13.8",

package.json

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Editor from '@monaco-editor/react';
 import { saveAs } from 'file-saver';
+import ReactModal from 'react-modal';
 import Modal from './ParentModal';
 import { toast } from 'react-toastify';
 import './file-edit.css';
@@ -11,6 +12,8 @@ const FileEditModal = ({ superState, dispatcher }) => {
     const [fileName, setFileName] = useState('');
     const [dirButton, setDirButton] = useState(false);
     const [language, setLanguage] = useState('plaintext');
+    const [newFileName, setNewFileName] = useState('');
+    const [showFilenameModal, setShowFilenameModal] = useState(false);
 
     useEffect(() => {
         if (navigator.userAgent.indexOf('Edg') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
@@ -52,11 +55,19 @@ const FileEditModal = ({ superState, dispatcher }) => {
         dispatcher({ type: T.SET_FILE_STATE, payload: fS });
     }
 
-    async function saveSubmit() {
-        const newFileName = prompt('Filename:');
+    function handleSaveAsClick() {
+        setShowFilenameModal(true);
+    }
+
+    function confirmSaveAs() {
+        if (newFileName.trim() === '') {
+            toast.error('Filename cannot be empty!');
+            return;
+        }
         const bytes = new TextEncoder().encode(codeStuff);
         const blob = new Blob([bytes], { type: 'application/json;charset=utf-8' });
         saveAs(blob, newFileName);
+        setShowFilenameModal(false);
     }
 
     useEffect(() => {
@@ -121,10 +132,37 @@ const FileEditModal = ({ superState, dispatcher }) => {
                         <button type="submit" className="btn btn-primary" onClick={saveAsSubmit}>Save As</button>
                     )}
                     {!dirButton && (
-                        <button type="submit" className="btn btn-primary" onClick={saveSubmit}>Save As</button>
+                        <button type="submit" className="btn btn-primary" onClick={handleSaveAsClick}>Save As</button>
                     )}
                 </div>
             </div>
+            {/* Filename Input Modal */}
+            <ReactModal
+                isOpen={showFilenameModal}
+                onRequestClose={() => setShowFilenameModal(false)}
+                className="modal-content"
+                overlayClassName="modal-overlay"
+                ariaHideApp={false}
+            >
+                <h2>Enter Filename</h2>
+                <input
+                    type="text"
+                    value={newFileName}
+                    onChange={(e) => setNewFileName(e.target.value)}
+                    className="modal-input"
+                    placeholder="Filename"
+                />
+                <div className="modal-actions">
+                    <button type="button" onClick={confirmSaveAs} className="btn btn-primary">Save</button>
+                    <button
+                        type="button"
+                        onClick={() => setShowFilenameModal(false)}
+                        className="btn btn-secondary"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </ReactModal>
         </Modal>
     );
 };