use svelte store and localstorage for ui state

This commit is contained in:
Nolan Lawson 2018-01-08 10:13:42 -08:00
parent 6d90d44abc
commit e7e17f3899
3 changed files with 58 additions and 25 deletions

31
routes/_utils/store.js Normal file
View file

@ -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 }

View file

@ -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
}

View file

@ -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,10 +54,18 @@
(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')
this.onReceivedOauthCode(params.get('code'))
}
})()
}
},
components: {
Layout
},
store: () => store,
methods: {
onReceivedOauthCode: async function(code) {
let instanceData = this.store.get('currentOauthInstance')
instanceData.code = code
let response = await (await getAccessTokenFromAuthCode(
instanceData.instanceName,
@ -65,27 +74,21 @@
instanceData.code
)).json()
instanceData = Object.assign(instanceData, response)
await db.set(`instance`, instanceData)
this.store.set({
'currentOauthInstance': instanceData,
'instanceNameInSearch': '',
})
this.store.save()
goto('/')
}
})()
}
},
components: {
Layout
},
data: () => ({
instanceName: ''
}),
methods: {
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
},