From e7e17f3899e140d14b08f725eb5a73965ada50c3 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 8 Jan 2018 10:13:42 -0800
Subject: [PATCH] use svelte store and localstorage for ui state

---
 routes/_utils/store.js            | 31 +++++++++++++++++++++
 routes/index.html                 |  7 +++--
 routes/settings/add-instance.html | 45 ++++++++++++++++---------------
 3 files changed, 58 insertions(+), 25 deletions(-)
 create mode 100644 routes/_utils/store.js

diff --git a/routes/_utils/store.js b/routes/_utils/store.js
new file mode 100644
index 00000000..7381a5d6
--- /dev/null
+++ b/routes/_utils/store.js
@@ -0,0 +1,31 @@
+import { Store } from 'svelte/store.js'
+
+const key = 'ui-store'
+
+class LocalStorageStore extends Store {
+  constructor(state) {
+    super(state)
+    if (process.browser) {
+      let cached = localStorage.getItem(key)
+      if (cached) {
+        this.set(JSON.parse(cached))
+      }
+    }
+  }
+
+  save() {
+    if (process.browser) {
+      localStorage.setItem(key, JSON.stringify(this._state))
+    }
+  }
+}
+
+const store = new LocalStorageStore({
+  instanceNameInSearch: ''
+})
+
+if (process.browser) {
+  window.store = store
+}
+
+export { store }
\ No newline at end of file
diff --git a/routes/index.html b/routes/index.html
index dfa4e454..7367ebb6 100644
--- a/routes/index.html
+++ b/routes/index.html
@@ -16,24 +16,23 @@
 
 <script>
 	import Layout from './_components/Layout.html'
-	import { databasePromise } from './_utils/database'
+  import { store } from './_utils/store'
   import { getHomeTimeline } from './_utils/mastodon'
 
 	export default {
 	  oncreate: function () {
       if (process.browser) {
         (async () => {
-          let db = await databasePromise
-          let instanceData = await db.get('instance')
+          let instanceData = this.store.get('currentOauthInstance')
           if (!instanceData) {
             return
           }
           let response = await (await getHomeTimeline(instanceData.instanceName, instanceData.access_token)).json()
           console.log(response)
-
         })()
       }
     },
+		store: () => store,
 		components: {
 			Layout
 		}
diff --git a/routes/settings/add-instance.html b/routes/settings/add-instance.html
index b7241bef..f1848c34 100644
--- a/routes/settings/add-instance.html
+++ b/routes/settings/add-instance.html
@@ -9,7 +9,7 @@
 
   <form on:submit='handleSubmit(event)'>
     <label for="instanceInput">Instance name:</label>
-    <input type="text" id="instanceInput" bind:value='instanceName' placeholder=''>
+    <input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
     <button class="primary" type="submit" id="submitButton">Add instance</button>
   </form>
 
@@ -45,6 +45,7 @@
   import Layout from '../_components/Layout.html';
   import { registerApplication, generateAuthLink, getAccessTokenFromAuthCode } from '../_utils/mastodon'
   import { databasePromise } from '../_utils/database'
+  import { store } from '../_utils/store'
   import { goto } from 'sapper/runtime.js'
 
   export default {
@@ -53,20 +54,7 @@
         (async () => {
           let params = new URLSearchParams(location.search)
           if (params.has('code')) {
-            let db = await databasePromise
-            let instanceData = await db.get('instance')
-            this.set({instanceName: instanceData.instanceName})
-            let code = params.get('code')
-            instanceData.code = code
-            let response = await (await getAccessTokenFromAuthCode(
-              instanceData.instanceName,
-              instanceData.client_id,
-              instanceData.client_secret,
-              instanceData.code
-            )).json()
-            instanceData = Object.assign(instanceData, response)
-            await db.set(`instance`, instanceData)
-            goto('/')
+            this.onReceivedOauthCode(params.get('code'))
           }
         })()
       }
@@ -74,18 +62,33 @@
     components: {
       Layout
     },
-    data: () => ({
-      instanceName: ''
-    }),
+    store: () => store,
     methods: {
+      onReceivedOauthCode: async function(code) {
+        let instanceData = this.store.get('currentOauthInstance')
+        instanceData.code = code
+        let response = await (await getAccessTokenFromAuthCode(
+          instanceData.instanceName,
+          instanceData.client_id,
+          instanceData.client_secret,
+          instanceData.code
+        )).json()
+        instanceData = Object.assign(instanceData, response)
+        this.store.set({
+          'currentOauthInstance': instanceData,
+          'instanceNameInSearch': '',
+        })
+        this.store.save()
+        goto('/')
+      },
       handleSubmit: async function(event) {
         event.preventDefault()
-        let instanceName = this.get('instanceName')
+        let instanceName = this.store.get('instanceNameInSearch')
         instanceName = instanceName.replace(/^https?:\/\//, '').replace('/$', '')
         let data = await (await registerApplication(instanceName)).json()
-        let db = await databasePromise
         data.instanceName = instanceName
-        await db.set(`instance`, data)
+        this.store.set({'currentOauthInstance': data})
+        this.store.save()
         let oauthUrl = generateAuthLink(instanceName, data.client_id)
         document.location.href = oauthUrl
       },