Merge pull request #115 from parteekcoder/author_fix

pradeeban · web-flow · commit d3e0739dc57b · 2023-03-07T12:46:10.000-05:00
Author fix
diff --git a/src/GraphArea.jsx b/src/GraphArea.jsx
@@ -4,7 +4,7 @@ import MyGraph from './graph-builder';
 import { actionType as T } from './reducer';
 
 function Graph({
-    el, superState, dispatcher, graphID, serverID, graphML, projectName, graphContainerRef, active,
+    el, superState, dispatcher, graphID, serverID, graphML, projectName, graphContainerRef, active, authorName,
 }) {
     const [instance, setInstance] = useState(null);
     const ref = useRef();
@@ -18,7 +18,7 @@ function Graph({
 
     const initialiseNewGraph = () => {
         const myGraph = new MyGraph(
-            graphID, ref.current, dispatcher, superState, projectName, nodeValidator, edgeValidator,
+            graphID, ref.current, dispatcher, superState, projectName, nodeValidator, edgeValidator, authorName,
         );
         if (graphID) myGraph.loadGraphFromLocalStorage();
         if (serverID) {
diff --git a/src/GraphWorkspace.jsx b/src/GraphWorkspace.jsx
@@ -74,6 +74,7 @@ const GraphComp = (props) => {
                         projectName={el.projectName}
                         fileHandle={el.fileHandle}
                         fileName={el.fileName}
+                        authorName={el.authorName}
                     />
                 ))}
                 <ZoomComp dispatcher={dispatcher} superState={superState} />
diff --git a/src/component/modals/ProjectDetails.jsx b/src/component/modals/ProjectDetails.jsx
@@ -13,36 +13,33 @@ const ProjectDetails = ({ superState, dispatcher }) => {
     const { newGraphModal } = superState;
     const editDetailsModal = superState.editDetailsModal || (curGraph && !curGraph.projectName);
 
-    const setProjAuthorName = (a) => {
-        setAuthorName(a);
-        dispatcher({
-            type: T.SET_AUTHOR,
-            payload: a,
-        });
-    };
-
     useEffect(() => {
         if (superState.editDetailsModal && curGraph) {
             setProjectName(curGraph.projectName);
-        } else setProjectName('');
-    }, [superState.authorName, superState.editDetailsModal, curGraph]);
+            setAuthorName(curGraph.authorName);
+        } else {
+            setProjectName('');
+        }
+    }, [curGraph?.authorName, superState.editDetailsModal, curGraph]);
 
     useEffect(() => {
-        if (superState.authorName) setAuthorName(superState.authorName);
-        else {
+        if (curGraph?.authorName) {
+            setAuthorName(curGraph.authorName);
+        } else {
             const authorNameE = localStorageManager.getAuthorName();
-            setProjAuthorName(authorNameE);
+            setAuthorName(authorNameE);
         }
     }, []);
 
     const submit = (e) => {
         e.preventDefault();
-        if (newGraphModal) dispatcher({ type: T.ADD_GRAPH, payload: { projectName } });
+        if (newGraphModal) dispatcher({ type: T.ADD_GRAPH, payload: { projectName, authorName } });
         else if (editDetailsModal) {
             superState.curGraphInstance.setProjectName(projectName);
+            superState.curGraphInstance.setProjectAuthor(authorName);
             dispatcher({ type: T.SET_EDIT_DETAILS_MODAL, payload: false });
         }
-        setProjAuthorName(authorName);
+        localStorageManager.saveAllgs();
         localStorageManager.setAuthorName(authorName);
     };
 
diff --git a/src/graph-builder/graph-core/1-core.js b/src/graph-builder/graph-core/1-core.js
@@ -17,11 +17,13 @@ class CoreGraph {
 
     projectName;
 
+    authorName;
+
     cy;
 
     bendNode;
 
-    constructor(id, element, dispatcher, superState, projectName) {
+    constructor(id, element, dispatcher, superState, projectName, nodeValidator, edgeValidator, authorName) {
         if (dispatcher) this.dispatcher = dispatcher;
         if (superState) this.superState = superState;
         if (typeof cytoscape('core', 'edgehandles') !== 'function') {
@@ -37,6 +39,7 @@ class CoreGraph {
         this.cy = cytoscape({ ...cyOptions, container: element });
         this.id = id;
         this.projectName = projectName;
+        this.authorName = authorName;
         this.cy.emit('graph-modified');
         this.bendNode = this.cy.add(
             { group: 'nodes', data: { type: 'bend' }, classes: ['hidden'] },
@@ -83,12 +86,13 @@ class CoreGraph {
     }
 
     set({
-        cy, dispatcher, superState, projectName,
+        cy, dispatcher, superState, projectName, authorName,
     }) {
         if (dispatcher) this.dispatcher = dispatcher;
         if (superState) this.superState = superState;
         if (cy) this.cy = cy;
         if (projectName) this.projectName = projectName;
+        if (authorName) this.authorName = authorName;
     }
 
     setProjectName(projectName, shouldEmit = true) {
@@ -106,6 +110,21 @@ class CoreGraph {
         this.cy.emit('graph-modified');
     }
 
+    setProjectAuthor(authorName, shouldEmit = true) {
+        this.authorName = authorName;
+        if (shouldEmit) {
+            this.dispatcher({
+                type: T.SET_AUTHOR,
+                payload: {
+                    value: authorName,
+                    graphID: this.id,
+                    type: 'authorName',
+                },
+            });
+        }
+        this.cy.emit('graph-modified');
+    }
+
     setServerID(serverID, shouldEmit = true) {
         this.serverID = serverID;
         if (shouldEmit) {
diff --git a/src/graph-builder/graph-core/4-undo-redo.js b/src/graph-builder/graph-core/4-undo-redo.js
@@ -83,19 +83,17 @@ class GraphUndoRedo extends GraphComponent {
         return r;
     }
 
-    addAction(inverse, equivalent, tid, authorName = this.superState.authorName) {
+    addAction(inverse, equivalent, tid) {
         if (tid === 0) return;
         this.actionArr.splice(this.curActionIndex);
 
         const actionIdentity = GraphUndoRedo.sequencify(equivalent).toString()
             + GraphUndoRedo.sequencify(equivalent).toString()
-            + tid
-            + authorName;
+            + tid;
         this.actionArr.push({
             tid,
             inverse,
             equivalent,
-            authorName,
             hash: md5(
                 `${actionIdentity}|${this.actionArr.length ? this.actionArr.at(-1).hash : ''}`,
             ),
diff --git a/src/graph-builder/graph-core/5-load-save.js b/src/graph-builder/graph-core/5-load-save.js
@@ -60,6 +60,7 @@ class GraphLoadSave extends GraphUndoRedo {
             serverID: this.serverID,
             fileName: null,
             fileHandle: null,
+            authorName: this.authorName,
         };
         this.cy.nodes().forEach((node) => {
             if (this.shouldNodeBeSaved(node.id())) {
@@ -87,10 +88,9 @@ class GraphLoadSave extends GraphUndoRedo {
             }
         });
         graph.actionHistory = this.actionArr.map(({
-            tid, inverse, equivalent, authorName, hash,
+            tid, inverse, equivalent, hash,
         }) => ({
             tid,
-            authorName,
             inverse: GraphLoadSave.stringifyAction(inverse),
             equivalent: GraphLoadSave.stringifyAction(equivalent),
             hash,
@@ -176,12 +176,13 @@ class GraphLoadSave extends GraphUndoRedo {
             this.addEdge({ ...edge, sourceID: edge.source, targetID: edge.target }, 0);
         });
         content.actionHistory.forEach(({
-            inverse, equivalent, tid, authorName,
+            inverse, equivalent, tid,
         }) => {
-            this.addAction(GraphLoadSave.parseAction(inverse), GraphLoadSave.parseAction(equivalent), tid, authorName);
+            this.addAction(GraphLoadSave.parseAction(inverse), GraphLoadSave.parseAction(equivalent), tid);
         });
         this.setProjectName(content.projectName);
         this.setServerID(this.serverID || content.serverID);
+        this.setProjectAuthor(content.authorName);
     }
 
     saveLocalStorage() {
diff --git a/src/graph-builder/graphml/builder/graphML.js b/src/graph-builder/graphml/builder/graphML.js
@@ -1,5 +1,5 @@
 const graphML = ({
-  nodes, edges, id, projectName, actionHistory, serverID, fileHandle, fileName,
+  nodes, edges, id, projectName, authorName, actionHistory, serverID, fileHandle, fileName,
 }) => ({
   graphml: {
     $: {
@@ -33,6 +33,7 @@ const graphML = ({
           serverID,
           fileHandle,
           fileName,
+          authorName,
         },
         node: nodes,
         edge: edges,
diff --git a/src/graph-builder/graphml/builder/index.js b/src/graph-builder/graphml/builder/index.js
@@ -30,6 +30,7 @@ const builder = (G) => {
         serverID: G.serverID,
         fileHandle: G.fileHandle,
         fileName: G.fileName,
+        authorName: G.authorName,
     });
     const xml = new xml2js.Builder().buildObject(X);
     return xml;
diff --git a/src/graph-builder/graphml/parser/index.js b/src/graph-builder/graphml/parser/index.js
@@ -9,10 +9,12 @@ const parser = (graphMlCnt) => new Promise((resolve) => {
         const grahML = new PropFromArr(grahMLObj);
         const nodes = grahML.parseProps('graphml.graph.node', 1).map(parseNode);
         const edges = grahML.parseProps('graphml.graph.edge', 1).map(parseEdge);
-        const { id, projectName, serverID } = parseDetails(grahML);
+        const {
+            id, projectName, serverID, authorName,
+        } = parseDetails(grahML);
         const actionHistory = parseActionHistory(grahML);
         resolve({
-            id, projectName, edges, nodes, actionHistory, serverID,
+            id, projectName, edges, nodes, actionHistory, serverID, authorName,
         });
     });
 });
diff --git a/src/graph-builder/graphml/parser/parseProperties.js b/src/graph-builder/graphml/parser/parseProperties.js
@@ -46,9 +46,9 @@ const parseActionML = (({ actionName, parameters }) => ({ actionName: actionName
 
 const parseActionHistory = (grahML) => grahML.parseProps('graphml.graph.actionHistory', 1)
     .map(({
-        authorName, equivalent, inverse, tid,
+        equivalent, inverse, tid,
     }) => ({
-        authorName: authorName[0],
+
         equivalent: parseActionML(equivalent[0]),
         inverse: parseActionML(inverse[0]),
         tid: tid[0],
diff --git a/src/reducer/initialState.js b/src/reducer/initialState.js
@@ -21,7 +21,6 @@ const initialState = {
     graphs: [],
     curGraphIndex: 0,
     viewHistory: false,
-    authorName: '',
     isWorkflowOnServer: false,
     curGraphInstance: null,
     zoomLevel: 100,
@@ -32,7 +31,7 @@ const initialGraphState = {
     graphID: null,
     serverID: null,
     graphML: null,
-
+    authorName: '',
     component: null,
     instance: null,
     id: null,
diff --git a/src/reducer/reducer.js b/src/reducer/reducer.js
@@ -97,6 +97,7 @@ const reducer = (state, action) => {
                     graphML: action.payload.graphML,
                     fileHandle: action.payload.fileHandle || null,
                     fileName: action.payload.fileName,
+                    authorName: action.payload.authorName || '',
                 },
             ],
         };
@@ -153,7 +154,11 @@ const reducer = (state, action) => {
     }
 
     case T.SET_AUTHOR: {
-        return { ...state, authorName: action.payload };
+        const newState = { ...state };
+        newState.graphs = newState.graphs.map((g) => (
+            g.graphID === action.payload.graphID ? { ...g, [action.payload.type]: action.payload.value } : g
+        ));
+        return { ...newState };
     }
 
     case T.IS_WORKFLOW_ON_SERVER: {
diff --git a/src/toolbarActions/toolbarFunctions.js b/src/toolbarActions/toolbarFunctions.js
@@ -1,4 +1,5 @@
 import { toast } from 'react-toastify';
+import parser from '../graph-builder/graphml/parser';
 import { actionType as T } from '../reducer';
 
 const getGraphFun = (superState) => superState.curGraphInstance;
@@ -105,11 +106,13 @@ const readFile = async (state, setState, file, fileHandle) => {
         const projectName = file.name;
         if (file.name.split('.').pop() === 'graphml') {
             fr.onload = (x) => {
-                setState({
-                    type: T.ADD_GRAPH,
-                    payload: {
-                        projectName, graphML: x.target.result, fileHandle, fileName: file.name,
-                    },
+                parser(x.target.result).then(({ authorName }) => {
+                    setState({
+                        type: T.ADD_GRAPH,
+                        payload: {
+                            projectName, graphML: x.target.result, fileHandle, fileName: file.name, authorName,
+                        },
+                    });
                 });
             };
             if (fileHandle) fr.readAsText(await fileHandle.getFile());
