aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--spring-front/src/App.js97
-rw-r--r--spring-front/src/components/Editor.js94
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>
);
}