From fd72d07084772f22f1a8d95a3136056c91edbc2e Mon Sep 17 00:00:00 2001
From: r-takaic <r-takaic@ist.osaka-u.ac.jp>
Date: Mon, 14 Mar 2022 15:33:06 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=AA=E3=83=AD=E3=83=BC=E3=83=89=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=E3=82=82=E6=9B=B8=E3=81=84=E3=81=9F=E3=82=B3=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E3=81=8C=E6=B6=88=E3=81=88=E3=81=AA=E3=81=84=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=97=E3=81=9F=20#13?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

編集されたコードは localStorage に保存しておくことで実現した．
単にリロードされたときなどには localStorage に保存しておいたやつを読み込む．
ヘッダーをクリックすると localStorage に保存しておいたコードを消すことでデフォルトコードに戻せるようにしておいた．
---
 frontend/pages/index.tsx       | 46 ++++++++++++++++++++++++++++------
 frontend/utils/LocalStorage.ts | 16 ++++++++++++
 2 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 frontend/utils/LocalStorage.ts

diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index f07f61b..9cf294e 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -16,6 +16,7 @@ import FL from "@/components/FL";
 import KGenProg from "@/components/KGenProg";
 import useForceUpdate from "@/hooks/useForceUpdate";
 import styles from "@/styles/Home.module.css";
+import * as LocalStorage from "@/utils/LocalStorage";
 
 const HoverableGitHubIcon = styled(GitHubIcon)({
   "&:hover": {
@@ -33,14 +34,16 @@ const Home: NextPage = () => {
   const [ctrl, setCtrl] = useState<"repair" | "fl" | "test" | null>(null);
   const forceUpdate = useForceUpdate();
 
+  const setText = useCallback((text: string, editor: Ace.Editor) => {
+    editor.insert(text);
+    editor.gotoLine(1, 0, false);
+    editor.getSession().getUndoManager().reset();
+  }, []);
+
   const loadDefaultSrc = useCallback((uri: RequestInfo, editor: Ace.Editor) => {
     void fetch(uri)
       .then((resp) => resp.text())
-      .then((text) => {
-        editor.insert(text);
-        editor.gotoLine(1, 0, false);
-        editor.getSession().getUndoManager().reset();
-      });
+      .then((text) => setText(text, editor));
   }, []);
 
   const onSuccess = useCallback(() => {
@@ -87,7 +90,14 @@ const Home: NextPage = () => {
       </Head>
 
       <header id={styles.logo}>
-        <a className={styles.title} href="./">
+        <a
+          className={styles.title}
+          href="./"
+          onClick={() => {
+            LocalStorage.removeItem(LocalStorage.KEY.SRC);
+            LocalStorage.removeItem(LocalStorage.KEY.TEST);
+          }}
+        >
           {/* <img className={styles.logoImg} src="/logo.png" /> */}
           <h1>FL online demo</h1>
         </a>
@@ -140,7 +150,17 @@ const Home: NextPage = () => {
             headerText="Source"
             onLoad={(editor) => {
               setSrcEditor(editor);
-              loadDefaultSrc("default-src.java", editor);
+
+              const cache = LocalStorage.getItem(LocalStorage.KEY.SRC);
+              if (cache === null) {
+                loadDefaultSrc("default-src.java", editor);
+              } else {
+                setText(cache, editor);
+              }
+            }}
+            onChange={(value) => {
+              LocalStorage.setItem(LocalStorage.KEY.SRC, value);
+              console.log(value);
             }}
             name="src"
           />
@@ -148,7 +168,17 @@ const Home: NextPage = () => {
             headerText="Test"
             onLoad={(editor) => {
               setTestEditor(editor);
-              loadDefaultSrc("default-test.java", editor);
+
+              const cache = LocalStorage.getItem(LocalStorage.KEY.TEST);
+              if (cache === null) {
+                loadDefaultSrc("default-test.java", editor);
+              } else {
+                setText(cache, editor);
+              }
+            }}
+            onChange={(value) => {
+              LocalStorage.setItem(LocalStorage.KEY.TEST, value);
+              console.log(value);
             }}
             name="test"
           />
diff --git a/frontend/utils/LocalStorage.ts b/frontend/utils/LocalStorage.ts
new file mode 100644
index 0000000..ef13fe6
--- /dev/null
+++ b/frontend/utils/LocalStorage.ts
@@ -0,0 +1,16 @@
+const KEY = {
+  SRC: "src",
+  TEST: "test",
+} as const;
+
+type Key = typeof KEY[keyof typeof KEY];
+
+const getItem = (key: Key) => localStorage.getItem(key);
+
+const removeItem = (key: Key) => localStorage.removeItem(key);
+
+const setItem = (key: Key, value: string) => localStorage.setItem(key, value);
+
+const clear = () => localStorage.clear();
+
+export { KEY, getItem, removeItem, setItem, clear };