wip. mostly working now. working out a few kinks.

2 files changed, 93 insertions, 98 deletions

diff --git a/spring-front/src/App.js b/spring-front/src/App.js
index 50f1bf2..e965d51 100644
--- a/spring-front/src/App.js
+++ b/spring-front/src/App.js
@@ -1,108 +1,15 @@
-import React, { useState } from "react";
+import React from "react";
 import Editor from "./components/Editor.js";
 
 export default class App extends React.Component {
   constructor(props) {
     super(props);
-    this.genNewRandId = this.genNewRandId.bind(this);
-    this.handleLoad = this.handleLoad.bind(this);
-    this.handleSave = this.handleSave.bind(this);
-    this.handleDelete = this.handleDelete.bind(this);
-    this.docId = localStorage.getItem("docId");
-    if (this.docId === null) {
-      this.docId = this.genNewRandId();
-      localStorage.setItem("docId", this.docId);
-    }
-    console.log(this.docId);
-    this.markdownText = "tutti";
-    this.loaded = false;
-  }
-
-  genNewRandId() {
-    return Math.floor(Math.random() * (0x1 << 16));
-  }
-
-  // GET
-  handleLoad() {
-    fetch(`https://localhost:9080/api/v1/doc/${this.docId}`)
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`request failed with status ${response.status}`);
-        }
-        let res = response.json();
-        // this.markdownText = response.body;
-      })
-      .then((data) => {
-        console.log(data);
-        // this.markdownText = data.body;
-      });
-  }
-
-  // DELETE
-  handleDelete() {
-    fetch(`https://localhost:9080/api/v1/doc/${this.docId}`, {
-      method: "DELETE",
-      headers: {
-        Accept: "application/json",
-      },
-    }).then((response) => {
-      if (!response.ok) {
-        throw new Error(`request failed with status ${response.status}`);
-      }
-    });
-  }
-
-  // POST
-  async handleSave() {
-    let obj = {
-      id: this.docId,
-      name: `${this.docId}`,
-      lastModified: Math.floor(Date.now() / 1000),
-      body: this.markdownText,
-    };
-    let response = await fetch(
-      `https://localhost:9080/api/v1/doc/${this.docId}`,
-      {
-        method: "POST",
-        body: JSON.stringify(obj),
-        mode: "cors",
-        headers: {
-          Accept: "application/json",
-          "Content-Type": "application/json",
-        },
-      }
-    );
-
-    if (!response.ok) {
-      throw new Error(`request failed with status code ${response.status}`);
-    }
   }
 
   render() {
     return (
       <div>
-        <Editor markdownText={this.markdownText} loaded={this.loaded} />
-        <img
-          className="icon"
-          src="load.jpg"
-          width="20"
-          height="20"
-          onClick={this.handleLoad.bind(this)}
-        />
-        <img
-          className="icon"
-          src="trash3.png"
-          width="20"
-          height="20"
-          onClick={this.handleDelete.bind(this)}
-        />
-        <img
-          className="icon"
-          src="save.png"
-          width="20"
-          height="20"
-          onClick={this.handleSave.bind(this)}
-        />
+        <Editor />
       </div>
     );
   }
diff --git a/spring-front/src/components/Editor.js b/spring-front/src/components/Editor.js
index d82a3fb..d062e28 100644
--- a/spring-front/src/components/Editor.js
+++ b/spring-front/src/components/Editor.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import ReactDOM from "react-dom";
 import hljs from "highlight.js/lib/core";
 // const hljs = window.hljs;
@@ -42,9 +42,19 @@ export default class Editor extends React.Component {
     this.handleChange = this.handleChange.bind(this);
     this.parseMarkdown = this.parseMarkdown.bind(this);
     this.handleTitleClick = this.handleTitleClick.bind(this);
+    this.handleLoad = this.handleLoad.bind(this);
+    this.handleSave = this.handleSave.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
+    this.genNewRandId = this.genNewRandId.bind(this);
     this.state = { value: "", drawerActive: false };
     // this.hljs_worker = new Worker("../highlight_worker.js");
     // this.md_worker = new Worker("../parse_worker.js");
+    this.docId = localStorage.getItem("docId");
+    if (this.docId === null) {
+      this.docId = this.genNewRandId();
+      localStorage.setItem("docId", this.docId);
+    }
+    console.log(this.docId);
   }
 
   // TODO-use web worker instead
@@ -117,9 +127,66 @@ export default class Editor extends React.Component {
     this.setState((prevState) => ({ drawerActive: !prevState.drawerActive }));
   }
 
+  genNewRandId() {
+    return Math.floor(Math.random() * (0x1 << 16));
+  }
+
+  // DELETE
+  handleDelete() {
+    fetch(`https://localhost:9080/api/v1/doc/${this.docId}`, {
+      method: "DELETE",
+      headers: {
+        Accept: "application/json",
+      },
+    }).then((response) => {
+      if (!response.ok) {
+        throw new Error(`request failed with status ${response.status}`);
+      }
+    });
+  }
+
+  // GET
+  handleLoad(event) {
+    let res;
+    fetch(`https://localhost:9080/api/v1/doc/${this.docId}`).then(
+      (response) => {
+        if (!response.ok) {
+          throw new Error(`request failed with status ${response.status}`);
+        }
+        res = response.json().then((json) => {
+          this.setState({ value: json.body });
+        });
+      }
+    );
+  }
+
+  // POST & PUT
+  async handleSave() {
+    let obj = {
+      id: this.docId,
+      name: `${this.docId}`,
+      lastModified: Math.floor(Date.now() / 1000),
+      body: this.state.value,
+    };
+    let response = await fetch(
+      `https://localhost:9080/api/v1/doc/${this.docId}`,
+      {
+        method: "POST",
+        body: JSON.stringify(obj),
+        mode: "cors",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`request failed with status code ${response.status}`);
+    }
+  }
+
   render(props) {
-    // const { markdownText, drawerTitle, drawerChildren } = this.props;
-    // const drawerStyles = this.state.drawerActive ? "is-expanded" : "";
     return (
       <div>
         <div>
@@ -147,6 +214,27 @@ export default class Editor extends React.Component {
         <div className="split right">
           <div direction="rtl" id="markdown-placeholder"></div>
         </div>
+        <img
+          className="icon"
+          src="load.jpg"
+          width="20"
+          height="20"
+          onClick={this.handleLoad.bind(this)}
+        />
+        <img
+          className="icon"
+          src="trash3.png"
+          width="20"
+          height="20"
+          onClick={this.handleDelete.bind(this)}
+        />
+        <img
+          className="icon"
+          src="save.png"
+          width="20"
+          height="20"
+          onClick={this.handleSave.bind(this)}
+        />
       </div>
     );
   }