Added create file option

Author: Aviral09

src/component/modals/FileEdit.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Editor from 'react-simple-code-editor';
 import { highlight, languages } from 'prismjs/components/prism-core';
+import { saveAs } from 'file-saver';
 import Modal from './ParentModal';
 import './file-edit.css';
 import 'prismjs/components/prism-clike';
@@ -11,6 +12,14 @@ import { actionType as T } from '../../reducer';
 const FileEditModal = ({ superState, dispatcher }) => {
     const [codeStuff, setCodeStuff] = useState('');
     const [fileName, setFileName] = useState('');
+    const [dirButton, setDirButton] = useState(false);
+
+    useEffect(() => {
+        if (navigator.userAgent.indexOf('Edg') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
+            setDirButton(true);
+        }
+    }, []);
+
     const close = () => dispatcher({ type: T.EDIT_TEXTFILE, payload: { show: false } });
     // TODO - Save file
     async function submit() {
@@ -25,6 +34,23 @@ const FileEditModal = ({ superState, dispatcher }) => {
         dispatcher({ type: T.EDIT_TEXTFILE, payload: { show: false } });
     }
 
+    async function saveAsSubmit() {
+        const handle = await window.showSaveFilePicker();
+        const stream = await handle.createWritable();
+        await stream.write(codeStuff);
+        await stream.close();
+        // dispatcher({ type: T.EDIT_TEXTFILE, payload: { show: false } });
+    }
+
+    async function saveSubmit() {
+        // eslint-disable-next-line no-alert
+        const newFileName = prompt('Filename:');
+        const bytes = new TextEncoder().encode(codeStuff);
+        const blob = new Blob([bytes], { type: 'application/json;charset=utf-8' });
+        saveAs(blob, newFileName);
+        // dispatcher({ type: T.EDIT_TEXTFILE, payload: { show: false } });
+    }
+
     useEffect(() => {
         if (superState.fileObj) {
             setFileName(superState.fileObj.name);
@@ -44,7 +70,16 @@ const FileEditModal = ({ superState, dispatcher }) => {
         >
             <div className="File Edit Container">
                 <div className="footer">
-                    <button type="submit" className="btn btn-primary" onClick={submit}>Save</button>
+                    {fileName
+                        && (
+                            <button type="submit" className="btn btn-primary" onClick={submit}>Save</button>
+                        )}
+                    {dirButton && (
+                        <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>
+                    )}
                 </div>
                 <div
                     style={{

src/toolbarActions/toolbarFunctions.js

@@ -123,6 +123,13 @@ const readTextFile = (state, setState, file, fileHandle) => {
     }
 };
 
+const createFile = (state, setState) => {
+    setState({
+        type: T.EDIT_TEXTFILE,
+        payload: { show: true },
+    });
+};
+
 const newProject = (state, setState) => {
     setState({ type: T.NEW_GRAPH });
 };
@@ -167,7 +174,7 @@ const toggleServer = (state, dispatcher) => {
 
 export {
     createNode, editElement, deleteElem, downloadImg, saveAction, saveGraphMLFile,
-    readFile, readTextFile, newProject, clearAll, editDetails, undo, redo,
+    createFile, readFile, readTextFile, newProject, clearAll, editDetails, undo, redo,
     openShareModal, openSettingModal, viewHistory,
     toggleServer,
 };

src/toolbarActions/toolbarList.js

@@ -11,7 +11,7 @@ import {
 
 import {
     createNode, editElement, deleteElem, downloadImg, saveAction, saveGraphMLFile,
-    readFile, clearAll, undo, redo, openShareModal, viewHistory,
+    createFile, readFile, clearAll, undo, redo, openShareModal, viewHistory,
     toggleServer,
     // openSettingModal,
 } from './toolbarFunctions';
@@ -27,6 +27,14 @@ const toolbarList = (state, dispatcher) => [
         hotkey: 'Ctrl+G',
     },
     { type: 'vsep' },
+    {
+        type: 'action',
+        text: 'Create',
+        icon: FaFileImport,
+        action: createFile,
+        active: true,
+        visibility: true,
+    },
     {
         type: 'file-upload',
         text: 'Open',