From 81af558c81a882468e23494def7018e54f24a883 Mon Sep 17 00:00:00 2001
From: Kohei Watanabe <kou029w@gmail.com>
Date: Tue, 8 Mar 2022 14:41:59 +0900
Subject: [PATCH] update vue app

---
 docs/create-vue-app.md |  2 +-
 frontend/src/App.vue   | 26 +++++++++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/docs/create-vue-app.md b/docs/create-vue-app.md
index 43f5f7f..cfbf970 100644
--- a/docs/create-vue-app.md
+++ b/docs/create-vue-app.md
@@ -16,7 +16,7 @@
 
 ```js
 // src/App.vue
-{{#include ../frontend/src/App.vue:8:9}}
+{{#include ../frontend/src/App.vue:14:15}}
 ```
 
 このエンドポイントURLを自分の作成したプロジェクトのものに書き換えると完成です。
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e3b233a..7a40c56 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -5,18 +5,38 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import axios from "axios";
 import debounce from "lodash.debounce";
 
+const id =
+  window.localStorage.getItem("id") ??
+  String(window.crypto.getRandomValues(new Uint16Array(1))[0]);
+
+window.localStorage.setItem("id", id);
+
 // ここに作成したREST APIエンドポイントを指定します。`memo-demo` の部分にHasura Cloudプロジェクト名を指定します。
-const endpoint = "https://memo-demo.hasura.app/api/rest/page/1";
+const endpoint = `https://memo-demo.hasura.app/api/rest/page/${id}`;
 
 export default {
   components: { QuillEditor },
   setup() {
     const editor = ref();
     onMounted(async () => {
+      console.log("endpoint", endpoint);
       const res = await axios.get(endpoint);
-      const content = res.data.page?.content;
-      editor.value.setContents(content);
+      const content = res.data.page?.content ?? {
+        ops: [
+          { insert: "メモ帳\n", attributes: { header: 1 } },
+          { insert: "こんにちは!\n" },
+          { insert: "これは「Hasuraで作るREST API」のデモ用Webアプリです。\n" },
+          {
+            insert:
+              "ここに入力した内容は自動的にHasuraに送信されデータベースに保存されます。\n",
+            attributes: {
+              link: endpoint,
+            },
+          },
+        ],
+      };
       console.log("content", content);
+      editor.value.setContents(content);
     });
     const update = debounce(async (content) => {
       await axios.put(endpoint, { content });