author fix

Author: parteekcoder

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) {

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} />

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'] },

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

@@ -59,6 +59,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())) {
@@ -86,10 +87,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,
@@ -185,6 +185,7 @@ class GraphLoadSave extends GraphUndoRedo {
 
     setGraphML(graphML) {
         graphMLParser(graphML).then((graphObject) => {
+            console.log(graphObject);
             localStorageManager.save(this.id, graphObject);
             this.loadGraphFromLocalStorage();
         });

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,

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;

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,
         });
     });
 });

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],

src/reducer/reducer.js

@@ -97,7 +97,7 @@ const reducer = (state, action) => {
                     graphML: action.payload.graphML,
                     fileHandle: action.payload.fileHandle || null,
                     fileName: action.payload.fileName,
-                    authorName: action.payload.authorName,
+                    authorName: action.payload.authorName || '',
                 },
             ],
         };

src/toolbarActions/toolbarFunctions.js

@@ -1,3 +1,5 @@
+import parser from '../graph-builder/graphml/parser';
+import { parseDetails } from '../graph-builder/graphml/parser/parseProperties';
 import { actionType as T } from '../reducer';
 
 const getGraphFun = (superState) => superState.curGraphInstance;
@@ -108,11 +110,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());