lots of file management updates

Author: chrisvander

package.json

@@ -19,7 +19,8 @@
     "react-notifications": "^1.6.0",
     "react-scripts": "3.4.1",
     "react-sizeme": "^2.6.12",
-    "react-svg": "^11.0.18"
+    "react-svg": "^11.0.18",
+    "react-transition-group": "1.x"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -3,6 +3,8 @@ import './App.scss';
 import Canvas from './canvas/Canvas';
 import IntroWindow from './intro/IntroWindow';
 
+var localStorage = window.localStorage;
+
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -11,46 +13,101 @@ class App extends React.Component {
     this.setupProof = this.setupProof.bind(this);
     this.openCanvas = this.openCanvas.bind(this);
     this.saveProof = this.saveProof.bind(this);
+    this.getRecents = this.getRecents.bind(this);
     this.introWindow = React.createRef();
-    // this.state = {
-    //   initialCSS: 'initial',
-    //   canvasOpen: false,
-    //   popupOpen: false,
-    //   proof: {
-    //     premises: [],
-    //     conclusion: '',
-    //     steps: []
-    //   }
-    // };
     this.state = {
       initialCSS: 'initial',
-      canvasOpen: true,
+      canvasOpen: false,
       popupOpen: false,
-      proof: {premises: ["({Q})(({P}){Q})"], conclusion: "{Q}", steps:[] }
+      filename: '',
+      proof: {
+        premises: [],
+        conclusion: '',
+        steps: []
+      },
+      recentDocs: this.getRecents()
     };
+    
+    console.log(this.state.recentDocs)
+    // this.state = {
+    //   initialCSS: 'initial',
+    //   canvasOpen: true,
+    //   popupOpen: false,
+    //   proof: {premises: ["({Q})(({P}){Q})"], conclusion: "{Q}", steps:[] }
+    // };
+
+    this.menuItems = [
+      { 
+        title: 'Exit', 
+        func: () => {
+          this.setState({ 
+            initialCSS: 'initial',
+            canvasOpen: false,
+            popupOpen: false,
+            filename: '',
+            proof: {
+              premises: [],
+              conclusion: '',
+              steps: []
+            },
+            recentDocs: this.getRecents()
+          }) 
+        }
+      },
+      'separator',
+      { 
+        title: 'Export',
+        func: () => {
+          const element = document.createElement("a");
+          const file = new Blob([JSON.stringify(this.state.proof)], {type: 'text/plain'});
+          element.href = URL.createObjectURL(file);
+          element.download = this.state.filename + ".egprf";
+          document.body.appendChild(element);
+          element.click();
+        } 
+      }
+    ]
   }
 
-  saveProof(proof) {
-    this.setState({ proof: proof });
+  getRecents() {
+    let recents = localStorage.getItem('recentDocs');
+    recents = recents ? JSON.parse(recents) : {}
+    let keys = Object.keys(recents)
+    for (let i in keys) {
+      recents[keys[i]].open = () => {
+        this.setState({ 
+          filename: keys[i],
+          proof: recents[keys[i]] 
+        });
+        this.openCanvas();
+      }
+    }
+    return recents;
+  }
+
+  saveProof(filename) {
+    let { recentDocs } = this.state;
+    recentDocs[filename] = this.state.proof;
+    return (proof) => {
+      recentDocs[filename] = proof;
+      localStorage.setItem('recentDocs', JSON.stringify(recentDocs));
+    }
   }
 
-  setupProof(premises, conclusion, steps) {
+  setupProof(filename, proof) {
     this.setState({ 
-      proof: { 
-        premises: premises,
-        conclusion: conclusion,
-        steps: steps
-      },
-      initialCSS: 'initial whiteBG'
+      filename: filename,
+      proof: proof
     });
-    this.introWindow.current.animateAway();
-    setTimeout(this.openCanvas, 1000);
+    this.openCanvas();
   }
 
   openCanvas() {
-    this.setState({ 
+    this.setState({ initialCSS: 'initial whiteBG' });
+    this.introWindow.current.animateAway();
+    setTimeout(() => this.setState({ 
       canvasOpen: true
-    });
+    }), 1000);
   }
 
   createNewProof() {
@@ -62,7 +119,8 @@ class App extends React.Component {
       return (
         <div className="App">
           <Canvas 
-            saveProof={this.saveProof} 
+            menuItems={this.menuItems}
+            saveProof={this.saveProof(this.state.filename)} 
             proof={this.state.proof} />
         </div>
       );
@@ -71,6 +129,7 @@ class App extends React.Component {
       <div className={this.state.initialCSS}>
         <IntroWindow 
           ref={this.introWindow} 
+          recentDocs={this.state.recentDocs}
           setupFunc={this.setupProof}/>
       </div>
     );