Merge pull request #42 from Aviral09/dev

pradeeban · web-flow · commit 1a46bdb618ee · 2022-10-18T10:03:03.000-04:00
Create files and save files features
diff --git a/src/component/Header.jsx b/src/component/Header.jsx
@@ -47,11 +47,12 @@ const Header = ({ superState, dispatcher }) => {
             <section className="toolbar">
                 {
                     actions.map(({
-                        text, active, action, icon, type, hotkey,
+                        text, active, visibility, action, icon, type, hotkey,
                     }, i) => {
                         const props = {
                             text,
                             active,
+                            visibility,
                             tabIndex: i + 1,
                             key: text,
                             action: (e) => action(superState, dispatcher, e),
diff --git a/src/component/HeaderComps.jsx b/src/component/HeaderComps.jsx
@@ -3,13 +3,13 @@ import Switch from 'rc-switch';
 import { Menu, MenuItem, MenuButton } from '@szhsin/react-menu';
 
 function DropDown({
-    Icon, text, action, active, tabIndex, hotkey,
+    Icon, text, action, active, visibility, tabIndex, hotkey,
 }) {
     return (
         <Menu menuButton={(
             <MenuButton>
                 <ActionButton {...{
-                    Icon, text, action, active, tabIndex, hotkey,
+                    Icon, text, action, active, visibility, tabIndex, hotkey,
                 }}
                 />
             </MenuButton>
@@ -21,10 +21,10 @@ function DropDown({
 }
 
 const FileUploader = ({
-    Icon, text, active, tabIndex, hotkey, superState,
+    Icon, text, active, visibility, tabIndex, hotkey, superState,
 }) => (
     <ActionButton {...{
-        Icon, text, active, tabIndex, action: () => superState.fileRef.current.click(), hotkey,
+        Icon, text, active, visibility, tabIndex, action: () => superState.fileRef.current.click(), hotkey,
     }}
     />
 );
@@ -51,7 +51,7 @@ const Switcher = ({
 );
 
 const ActionButton = ({
-    Icon, text, action, active, tabIndex, hotkey,
+    Icon, text, action, active, visibility, tabIndex, hotkey,
 }) => (
     <div
         role="button"
@@ -61,6 +61,7 @@ const ActionButton = ({
         onClick={() => (active && action())}
         onKeyDown={(ev) => active && ev.key === ' ' && action()}
         data-tip={hotkey ? hotkey.split(',')[0] : ''}
+        style={{ display: `${visibility ? '' : 'none'}` }}
     >
         <div className="icon"><Icon size="20" /></div>
         <div style={{ fontSize: 14 }}>{text}</div>
diff --git a/src/component/fileBrowser.jsx b/src/component/fileBrowser.jsx
@@ -85,6 +85,25 @@ const LocalFileBrowser = ({ superState, dispatcher }) => {
         setFileState(state);
     };
 
+    const newFeatureFile = async () => {
+        const pickerOpts = {
+            types: [
+                {
+                    description: 'Graphml',
+                    accept: {
+                        'text/graphml': ['.graphml'],
+                    },
+                },
+            ],
+            excludeAcceptAllOption: true,
+            multiple: false,
+        };
+
+        const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
+        const fileObj = await fileHandle.getFile();
+        readFile(superState, dispatcher, fileObj, fileHandle);
+    };
+
     return (
         <div>
             {!dirButton && (
@@ -96,7 +115,6 @@ const LocalFileBrowser = ({ superState, dispatcher }) => {
                     <input
                         type="file"
                         accept=".py, .m, .c, .cpp, .v, .sh"
-                        ref={fileRef}
                         id="fileButton"
                         style={{ display: 'none' }}
                         onClick={(e) => { e.target.value = null; }}
@@ -126,11 +144,41 @@ const LocalFileBrowser = ({ superState, dispatcher }) => {
                     className="inputButton"
                     disabled={!dirButton}
                     onClick={newFeature}
-                    ref={fileRef}
                 >
                     Upload Directory
                 </button>
             )}
+            {!dirButton
+                && (
+                    <input
+                        type="file"
+                        ref={fileRef}
+                        onClick={(e) => { e.target.value = null; }}
+                        style={{ display: 'none' }}
+                        accept=".graphml"
+                        onChange={(e) => readFile(superState, dispatcher, e.target.files[0])}
+                    />
+                )}
+            {dirButton
+                && (
+                    <button
+                        type="button"
+                        ref={fileRef}
+                        className="inputButton"
+                        disabled={!dirButton}
+                        style={{ display: 'none' }}
+                        onClick={newFeatureFile}
+                        label="File Upload"
+                    />
+                    // <input
+                    //     type="file"
+                    //     ref={fileRef}
+                    //     onClick={(e) => { e.target.value = null; }}
+                    //     style={{ display: 'none' }}
+                    //     accept=".graphml"
+                    //     onChange={(e) => readFile(superState, dispatcher, e.target.files[0])}
+                    // />
+                )}
             <h4>
                 Folder Name :
                 {' '}
diff --git a/src/component/modals/FileEdit.jsx b/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={{
diff --git a/src/component/modals/NodeDetails.jsx b/src/component/modals/NodeDetails.jsx
@@ -13,6 +13,8 @@ const NodeDetails = ({
     const [widthSet] = useState(false);
     const [labelName, setLabelName] = useState('');
     const [labelFile, setLabelFile] = useState('');
+    const indexOfFile = [];
+    indexOfFile.push(0);
 
     const setStyle = (prop) => {
         setData({ ...data, style: { ...data.style, ...prop } });
@@ -117,14 +119,17 @@ const NodeDetails = ({
                             {
                                 localStorageManager.getFileList()
                                     // eslint-disable-next-line max-len, prefer-arrow-callback
-                                    ? JSON.parse(localStorageManager.getFileList()).map(function fn(item, index) {
+                                    ? JSON.parse(localStorageManager.getFileList()).map(function fn(item) {
                                         const acceptedTypes = ['.v', '.c', '.cpp', '.py', '.m', '.sh'];
                                         const list = [];
+                                        let index;
                                         // eslint-disable-next-line max-len
                                         if ((acceptedTypes.some((substring) => item.key.toString().includes(substring)))) {
                                             list.push(item.key.toString());
+                                            indexOfFile.push(indexOfFile[indexOfFile.length - 1] + 1);
+                                            index = indexOfFile[indexOfFile.length - 1] + 1;
                                         }
-                                        // eslint-disable-next-line jsx-a11y/control-has-associated-label, react/no-array-index-key
+                                        // eslint-disable-next-line jsx-a11y/control-has-associated-label
                                         return <option value={list} key={index} />;
                                     })
                                     : ''
diff --git a/src/graph-builder/graph-core/5-load-save.js b/src/graph-builder/graph-core/5-load-save.js
@@ -100,18 +100,35 @@ class GraphLoadSave extends GraphUndoRedo {
         return `${this.projectName}`;
     }
 
-    saveToDisk(fileName) {
+    async saveToDisk() {
         const str = graphmlBuilder(this.jsonifyGraph());
         const bytes = new TextEncoder().encode(str);
         const blob = new Blob([bytes], { type: 'application/json;charset=utf-8' });
-        saveAs(blob, `${fileName || `${this.getName()}-concore`}.graphml`);
+        if (navigator.userAgent.indexOf('Edg') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
+            const options = {
+                types: [
+                    {
+                        description: 'GraphMl Files',
+                        accept: {
+                            'text/graphml': ['.graphml'],
+                        },
+                    },
+                ],
+            };
+            const handle = await window.showSaveFilePicker(options);
+            const stream = await handle.createWritable();
+            await stream.write(blob);
+            await stream.close();
+        } else {
+            // eslint-disable-next-line no-alert
+            const fileName = prompt('Filename:');
+            saveAs(blob, `${fileName || `${this.getName()}-concore`}.graphml`);
+        }
     }
 
     saveToFolder() {
         const str = graphmlBuilder(this.jsonifyGraph());
-        const bytes = new TextEncoder().encode(str);
-        const blob = new Blob([bytes], { type: 'application/json;charset=utf-8' });
-        return blob;
+        return str;
     }
 
     getGraphML() {
diff --git a/src/toolbarActions/toolbarFunctions.js b/src/toolbarActions/toolbarFunctions.js
@@ -75,8 +75,8 @@ const downloadImg = (state, setState, format) => {
     getGraphFun(state).downloadImg(format);
 };
 
-const saveAction = (state, d, fileName) => {
-    getGraphFun(state).saveToDisk(fileName);
+const saveAction = (state) => {
+    getGraphFun(state).saveToDisk();
 };
 
 async function saveGraphMLFile(state) {
@@ -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,
 };
diff --git a/src/toolbarActions/toolbarList.js b/src/toolbarActions/toolbarList.js
