Merge branch 'main' of https://github.com/Rahuljagwani/concore-editor

Author: Rahuljagwani

package-lock.json

@@ -31,6 +31,7 @@
     "react-modal": "^3.13.1",
     "react-scripts": "4.0.3",
     "react-simple-code-editor": "^0.13.0",
+    "react-toastify": "^8.0.0",
     "react-tooltip": "^4.2.21",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.3",

package.json

@@ -1,4 +1,6 @@
 import React, { useEffect, useReducer } from 'react';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import './App.css';
 import ReactTooltip from 'react-tooltip';
 import GraphWorkspace from './GraphWorkspace';
@@ -47,6 +49,7 @@ const app = () => {
                 </div>
             </section>
             <ReactTooltip place="bottom" type="dark" effect="solid" />
+            <ToastContainer position="top-right" autoClose={5000} pauseOnHover={false} />
         </div>
     );
 };

src/App.jsx

@@ -39,7 +39,7 @@ const app = ({ superState, dispatcher }) => {
             fileRef.current.value = null;
             if (e.dataTransfer.files.length === 1
                 && e.dataTransfer.files[0].name.split('.').slice(-1)[0] === 'graphml') {
-                readFile(superState, dispatcher, { target: e.dataTransfer });
+                readFile(superState, dispatcher, e.dataTransfer.files[0]);
             }
         });
     }, []);

src/component/File-drag-drop.jsx

@@ -1,4 +1,5 @@
 import { saveAs } from 'file-saver';
+import { toast } from 'react-toastify';
 import localStorageManager from '../local-storage-manager';
 import graphmlBuilder from '../graphml/builder';
 import BendingDistanceWeight from '../calculations/bending-dist-weight';
@@ -125,9 +126,15 @@ class GraphLoadSave extends GraphUndoRedo {
             const fileName = prompt('Filename:');
             saveAs(blob, `${fileName || `${this.getName()}-concore`}.graphml`);
         }
+        toast.success('File saved Successfully');
     }
 
     async saveWithoutFileHandle() {
+        const { userAgent } = navigator;
+        if (userAgent.match(/firefox|fxios/i)) {
+            toast.info('Switch to Edge/Chrome!');
+            return;
+        }
         const str = graphmlBuilder(this.jsonifyGraph());
         const bytes = new TextEncoder().encode(str);
         const blob = new Blob([bytes], { type: 'application/json;charset=utf-8' });
@@ -149,8 +156,7 @@ class GraphLoadSave extends GraphUndoRedo {
         const stream = await handle.createWritable();
         await stream.write(blob);
         await stream.close();
-        // eslint-disable-next-line no-alert
-        alert('File saved Successfully');
+        toast.success('File saved Successfully');
     }
 
     saveToFolder() {

src/graph-builder/graph-core/5-load-save.js

@@ -141,8 +141,8 @@ const reducer = (state, action) => {
 
     case T.SET_FILE_HANDLE: {
         const newState = { ...state };
-        newState.graphs = newState.graphs.map((g) => (
-            newState.curGraphIndex === action.payload.curGraphIndex ? { ...g, fileHandle: action.payload.fileHandle }
+        newState.graphs = newState.graphs.map((g, index) => (
+            index === action.payload.curGraphIndex ? { ...g, fileHandle: action.payload.fileHandle }
                 : g
         ));
         return { ...newState };

src/reducer/reducer.js

@@ -1,3 +1,4 @@
+import { toast } from 'react-toastify';
 import { actionType as T } from '../reducer';
 
 const getGraphFun = (superState) => superState.curGraphInstance;
@@ -88,17 +89,14 @@ async function saveGraphMLFile(state) {
             const stream = await graph.fileHandle.createWritable();
             await stream.write(getGraphFun(state).saveToFolder());
             await stream.close();
-            // eslint-disable-next-line no-alert
-            alert('File saved Successfully');
-        } else if (graph.fileHandle === null) {
+            toast.success('File saved Successfully');
+        } else if (!graph.fileHandle) {
             getGraphFun(state).saveWithoutFileHandle();
         } else {
-            // eslint-disable-next-line no-alert
-            alert('Switch to Edge/Chrome!');
+            toast.info('Switch to Edge/Chrome!');
         }
     } else {
-        // eslint-disable-next-line no-alert
-        alert('Switch to Edge/Chrome!');
+        toast.info('Switch to Edge/Chrome!');
     }
 }
 

src/toolbarActions/toolbarFunctions.js

@@ -57,7 +57,7 @@ const toolbarList = (state, dispatcher) => [
         text: 'Save As',
         icon: FaSave,
         action: (s, d) => saveAction(s, d),
-        active: true,
+        active: state.curGraphInstance,
         visibility: true,
     },
     {