Prompt Issue Fixed #218

Author: saksham-gera

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import Editor from '@monaco-editor/react';
 import { saveAs } from 'file-saver';
 import Modal from './ParentModal';
+import ReactModal from 'react-modal';
 import './file-edit.css';
 import { actionType as T } from '../../reducer';
 
@@ -10,6 +11,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) {
@@ -51,11 +54,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(() => {
@@ -120,10 +131,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>
     );
 };