From 420fc21fea9c05bd339455b5a3a870d1c9b085eb Mon Sep 17 00:00:00 2001
From: Abhas Bhattacharya <abhasbhattacharya2@gmail.com>
Date: Mon, 9 Apr 2018 10:48:59 +0530
Subject: [PATCH] Add localstorage save and load

---
 .../CreateEditorApp/CreateEditorApp.tsx       | 21 +++++++++++++++++++
 .../DraggableNode/DraggableNode.css           |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/Components/CreateEditorApp/CreateEditorApp.tsx b/src/Components/CreateEditorApp/CreateEditorApp.tsx
index 7b0b104..2b02cfb 100644
--- a/src/Components/CreateEditorApp/CreateEditorApp.tsx
+++ b/src/Components/CreateEditorApp/CreateEditorApp.tsx
@@ -17,6 +17,8 @@ interface CreateEditorAppState {
 }
 
 export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
+  localStorageKey: 'appData';
+
   constructor(props: {}) {
     super(props);
 
@@ -32,6 +34,7 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
   }
 
   componentDidMount() {
+    this.loadFromLocalStorage();
     this.fetchImages();
   }
 
@@ -54,6 +57,24 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
 
   }
 
+  componentDidUpdate() {
+    this.saveToLocalStorage();
+  }
+
+  saveToLocalStorage() {
+    const stateJSON = JSON.stringify(this.state);
+    localStorage.setItem(this.localStorageKey, stateJSON);
+  }
+
+  loadFromLocalStorage() {
+    const stateJSON = localStorage.getItem(this.localStorageKey);
+
+    if (stateJSON) {
+      const stateObject = JSON.parse(stateJSON);
+      this.setState(stateObject);
+    }
+  }
+
   addOrUpdateTextNode(nodeId: string, textNode: CanvasTextNode): void {
     this.setState((prevState) => {
       const newState = deppCloneNaive(prevState as CreateEditorAppState);
diff --git a/src/Components/DraggableNode/DraggableNode.css b/src/Components/DraggableNode/DraggableNode.css
index 2aeb07a..a705f3b 100644
--- a/src/Components/DraggableNode/DraggableNode.css
+++ b/src/Components/DraggableNode/DraggableNode.css
@@ -7,7 +7,7 @@
     top: 0;
 
     padding: 0.25em;
-    border: 1px solid black;
+    border: 1px solid transparent;
 }
 
 .draggable-node.selected {