Loader Added

Author: Rahuljagwani

package-lock.json

@@ -32,6 +32,7 @@
     "react-modal": "^3.13.1",
     "react-scripts": "4.0.3",
     "react-simple-code-editor": "^0.13.0",
+    "react-spinners": "^0.13.8",
     "react-toastify": "^8.0.0",
     "react-tooltip": "^4.2.21",
     "web-vitals": "^0.2.4",

package.json

@@ -16,6 +16,7 @@ import LocalFileBrowser from './component/fileBrowser';
 import FileEditModal from './component/modals/FileEdit';
 import MarkDown from './component/modals/markDown';
 import OptionsModal from './component/modals/OptionsModal';
+import Loader from './component/modals/Loader';
 
 const app = () => {
     const [superState, dispatcher] = useReducer(reducer, initialState);
@@ -37,6 +38,7 @@ const app = () => {
             <HistoryModal superState={superState} dispatcher={dispatcher} />
             <FileEditModal superState={superState} dispatcher={dispatcher} />
             <OptionsModal superState={superState} dispatcher={dispatcher} />
+            <Loader superState={superState} />
             <GraphCompDetails
                 closeModal={() => dispatcher({ type: T.Model_Close })}
                 superState={superState}

src/App.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import BeatLoader from 'react-spinners/BeatLoader';
+import ParentModal from './ParentModal';
+
+const Loader = ({ superState }) => (
+    <ParentModal ModelOpen={superState.loader} title="Wait........">
+        <BeatLoader color="#36d7b7" />
+    </ParentModal>
+);
+
+export default Loader;

src/component/modals/Loader.jsx

@@ -68,71 +68,85 @@ class GraphServer extends GraphLoadSave {
 
     build() {
         // TODO
+        this.dispatcher({ type: T.SET_LOADER, payload: true });
         Axios.post(`http://127.0.0.1:5000/build/${this.superState.uploadedDirName}?fetch=${this.superState.graphs[this.superState.curGraphIndex].fileName.split('.')[0]}&unlock=${this.superState.unlockCheck}&docker=${this.superState.dockerCheck}&maxtime=${this.superState.maxTime}&params=${this.superState.params}`)
             .then((res) => { // eslint-disable-next-line
                 toast.success(res.data['message'])
+                this.dispatcher({ type: T.SET_LOADER, payload: false });
             }).catch((err) => { // eslint-disable-next-line
-                toast.success(err);
+                toast.error(err.message);
+                this.dispatcher({ type: T.SET_LOADER, payload: false });
             });
         if (this.serverID);
     }
 
     debug() {
         // TODO
+        this.dispatcher({ type: T.SET_LOADER, payload: true });
         Axios.post(`http://127.0.0.1:5000/debug/${this.superState.graphs[this.superState.curGraphIndex].fileName.split('.')[0]}`)
             .then((res) => { // eslint-disable-next-line
                 toast.success(res.data['message'])
+                this.dispatcher({ type: T.SET_LOADER, payload: false });
             }).catch((err) => { // eslint-disable-next-line
-                toast.success(err);
+                toast.error(err.message);
+                this.dispatcher({ type: T.SET_LOADER, payload: false });
             });
         if (this.serverID);
     }
 
     run() {
         // TODO
+        this.dispatcher({ type: T.SET_LOADER, payload: true });
         Axios.post(`http://127.0.0.1:5000/run/${this.superState.graphs[this.superState.curGraphIndex].fileName.split('.')[0]}`)
             .then((res) => { // eslint-disable-next-line
                 toast.success(res.data['message'])
+                this.dispatcher({ type: T.SET_LOADER, payload: false });
             }).catch((err) => { // eslint-disable-next-line
-                toast.success(err);
+                toast.error(err.message);
+                this.dispatcher({ type: T.SET_LOADER, payload: false });
             });
         if (this.serverID);
     }
 
     clear() {
         // TODO
+        this.dispatcher({ type: T.SET_LOADER, payload: true });
         Axios.post(`http://127.0.0.1:5000/clear/${this.superState.graphs[this.superState.curGraphIndex].fileName.split('.')[0]}
         ?unlock=${this.superState.unlockCheck}&maxtime=${this.superState.maxTime}&params=${this.superState.params}`)
             .then((res) => { // eslint-disable-next-line
                 toast.success(res.data['message']);
-                // console.log(this.superState.dockerCheck);
-                // console.log(this.superState.unlockCheck);
-                // console.log(this.superState.maxTime);
-                // console.log(this.superState.params);
+                this.dispatcher({ type: T.SET_LOADER, payload: false });
             }).catch((err) => { // eslint-disable-next-line
-                toast.success(err);
+                toast.error(err.message);
+                this.dispatcher({ type: T.SET_LOADER, payload: false });
             });
         if (this.serverID);
     }
 
     stop() {
         // TODO
+        this.dispatcher({ type: T.SET_LOADER, payload: true });
         Axios.post(`http://127.0.0.1:5000/stop/${this.superState.graphs[this.superState.curGraphIndex].fileName.split('.')[0]}`)
             .then((res) => { // eslint-disable-next-line
                 toast.success(res.data['message'])
+                this.dispatcher({ type: T.SET_LOADER, payload: false });
             }).catch((err) => { // eslint-disable-next-line
-                toast.success(err);
+                toast.error(err.message);
+                this.dispatcher({ type: T.SET_LOADER, payload: false });
             });
         if (this.serverID);
     }
 
     destroy() {
         // TODO
+        this.dispatcher({ type: T.SET_LOADER, payload: true });
         Axios.delete(`http://127.0.0.1:5000/destroy/${this.superState.graphs[this.superState.curGraphIndex].fileName.split('.')[0]}`)
             .then((res) => { // eslint-disable-next-line
                 toast.success(res.data['message'])
+                this.dispatcher({ type: T.SET_LOADER, payload: false });
             }).catch((err) => { // eslint-disable-next-line
-                toast.success(err);
+                toast.error(err.message);
+                this.dispatcher({ type: T.SET_LOADER, payload: false });
             });
         if (this.serverID);
     }

src/graph-builder/graph-core/6-server.js

@@ -39,6 +39,7 @@ const actionType = {
     SET_FILE_STATE: 'SET_FILE_STATE',
     SET_INPUT_FILE: 'SET_INPUT_FILE',
     SET_OPTIONS: 'SET_OPTIONS',
+    SET_LOADER: 'SET_LOADER',
 };
 
 export default zealit(actionType);

src/reducer/actionType.js

@@ -33,6 +33,7 @@ const initialState = {
     maxTime: '',
     dockerCheck: false,
     unlockCheck: false,
+    loader: false,
 };
 
 const initialGraphState = {

src/reducer/initialState.js

@@ -181,6 +181,10 @@ const reducer = (state, action) => {
         return { ...state, viewHistory: action.payload };
     }
 
+    case T.SET_LOADER: {
+        return { ...state, loader: action.payload };
+    }
+
     case T.SET_AUTHOR: {
         const newState = { ...state };
         newState.graphs = newState.graphs.map((g) => (