persist in local storage if not connected

front/views/Editor.tsx

@@ -27,6 +27,9 @@ const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
 }
 
+const GUEST_MODE_CONTENT_STORAGE_KEY = "guest_mode_content"
+const GUEST_MODE_TITLE_STORAGE_KEY = "guest_mode_title"
+
 export interface EditorViewProps {
     tactic: Tactic
     onContentChange: (tactic: TacticContent) => Promise<SaveState>
@@ -52,11 +55,22 @@ export default function Editor({
 }) {
     const isInGuestMode = id == -1
 
+    const storage_content = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY)
+    const editorContent =
+        isInGuestMode && storage_content != null ? storage_content : content
+
+    const storage_name = localStorage.getItem(GUEST_MODE_TITLE_STORAGE_KEY)
+    const editorName = isInGuestMode && storage_name != null ? storage_name : name
+
     return (
         <EditorView
-            tactic={{ name, id, content: JSON.parse(content) }}
+            tactic={{ name: editorName, id, content: JSON.parse(editorContent) }}
             onContentChange={async (content: TacticContent) => {
                 if (isInGuestMode) {
+                    localStorage.setItem(
+                        GUEST_MODE_CONTENT_STORAGE_KEY,
+                        JSON.stringify(content),
+                    )
                     return SaveStates.Guest
                 }
                 return fetchAPI(`tactic/${id}/save`, { content }).then((r) =>
@@ -65,6 +79,7 @@ export default function Editor({
             }}
             onNameChange={async (name: string) => {
                 if (isInGuestMode) {
+                    localStorage.setItem(GUEST_MODE_TITLE_STORAGE_KEY, name)
                     return true //simulate that the name has been changed
                 }
                 return fetchAPI(`tactic/${id}/edit/name`, { name }).then(