Merge pull request #123 from parteekcoder/flash_msg

Flash msg

Author: pradeeban

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

@@ -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

@@ -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');
+            toast.success('File saved Successfully');
         } else if (graph.fileHandle === null) {
             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!');
     }
 }