refactor store

routes/_actions/timeline.js

@@ -1,4 +1,4 @@
-import { store } from '../_utils/store'
+import { store } from '../_store/store'
 import { database } from '../_utils/database/database'
 import { getTimeline } from '../_utils/mastodon/timelines'
 import { toast } from '../_utils/toast'

routes/_components/Layout.html

@@ -17,7 +17,7 @@
 <script>
 	import Nav from './Nav.html';
 	import VirtualListContainer from './virtualList/VirtualListContainer.html'
-  import { store } from '../_utils/store'
+  import { store } from '../_store/store'
 
 	export default {
 	  oncreate() {

routes/_components/status/Status.html

@@ -297,7 +297,7 @@
   import { mark, stop } from '../../_utils/marks'
   import IntlRelativeFormat from 'intl-relativeformat'
   import { replaceAll } from '../../_utils/replaceAll'
-  import { store } from '../../_utils/store'
+  import { store } from '../../_store/store'
 
   const relativeFormat = new IntlRelativeFormat('en-US');
 

routes/_components/timeline/LazyTimeline.html

@@ -35,7 +35,7 @@
   import LoadingSpinner from '../LoadingSpinner.html'
   // TODO: the transition seems to occasionally cause an error in Svelte, transition_run is undefined
   //import { fade } from 'svelte-transitions'
-  import { store } from '../../_utils/store'
+  import { store } from '../../_store/store'
 
   export default {
     oncreate() {

routes/_components/timeline/Timeline.html

@@ -16,7 +16,7 @@
   }
 </style>
 <script>
-  import { store } from '../../_utils/store'
+  import { store } from '../../_store/store'
   import StatusListItem from './StatusListItem.html'
   import LoadingFooter from './LoadingFooter.html'
   import VirtualList from '../virtualList/VirtualList.html'

routes/_store/LocalStorageStore.js

@@ -0,0 +1,40 @@
+import { Store } from 'svelte/store'
+
+const LS = process.browser && localStorage
+
+export class LocalStorageStore extends Store {
+  constructor(state, keysToWatch) {
+    super(state)
+    if (!process.browser) {
+      return
+    }
+    this._keysToWatch = keysToWatch
+    this._keysToSave = {}
+    let newState = {}
+    for (let i = 0, len = LS.length; i < len; i++) {
+      let key = LS.key(i)
+      if (key.startsWith('store_')) {
+        let item = LS.getItem(key)
+        newState[key.substring(6)] = item === 'undefined' ? undefined : JSON.parse(item)
+      }
+    }
+    this.set(newState)
+    this.onchange((state, changed) => {
+      Object.keys(changed).forEach(change => {
+        if (this._keysToWatch.has(change)) {
+          this._keysToSave[change] = true
+        }
+      })
+    })
+  }
+
+  save() {
+    if (!process.browser) {
+      return
+    }
+    Object.keys(this._keysToSave).forEach(key => {
+      LS.setItem(`store_${key}`, JSON.stringify(this.get(key)))
+    })
+    this._keysToSave = {}
+  }
+}

routes/_store/computations.js

@@ -0,0 +1,7 @@
+import { instanceComputations } from './instanceComputations'
+import { timelineComputations } from './timelineComputations'
+
+export function computations(store) {
+  instanceComputations(store)
+  timelineComputations(store)
+}

routes/_store/instanceComputations.js

@@ -0,0 +1,49 @@
+export function instanceComputations(store) {
+  store.compute(
+    'isUserLoggedIn',
+    ['currentInstance', 'loggedInInstances'],
+    (currentInstance, loggedInInstances) => !!(currentInstance && Object.keys(loggedInInstances).includes(currentInstance))
+  )
+
+  store.compute(
+    'loggedInInstancesAsList',
+    ['currentInstance', 'loggedInInstances', 'loggedInInstancesInOrder'],
+    (currentInstance, loggedInInstances, loggedInInstancesInOrder) => {
+      return loggedInInstancesInOrder.map(instanceName => {
+        return Object.assign({
+          current: currentInstance === instanceName,
+          name: instanceName
+        }, loggedInInstances[instanceName])
+      })
+    }
+  )
+
+  store.compute(
+    'currentInstanceData',
+    ['currentInstance', 'loggedInInstances'],
+    (currentInstance, loggedInInstances) => {
+      return Object.assign({
+        name: currentInstance
+      }, loggedInInstances[currentInstance])
+    })
+
+  store.compute(
+    'accessToken',
+    ['currentInstanceData'],
+    (currentInstanceData) => currentInstanceData.access_token
+  )
+
+  store.compute(
+    'currentTheme',
+    ['currentInstance', 'instanceThemes'],
+    (currentInstance, instanceThemes) => {
+      return instanceThemes[currentInstance] || 'default'
+    }
+  )
+
+  store.compute(
+    'currentVerifyCredentials',
+    ['currentInstance', 'verifyCredentials'],
+    (currentInstance, verifyCredentials) => verifyCredentials && verifyCredentials[currentInstance]
+  )
+}

routes/_store/mixins.js

@@ -0,0 +1,19 @@
+function timelineMixins(Store) {
+  Store.prototype.setForTimeline = function (instanceName, timelineName, obj) {
+    let timelines = this.get('timelines') || {}
+    let timelineData = timelines[instanceName] || {}
+    timelineData[timelineName] = Object.assign(timelineData[timelineName] || {}, obj)
+    timelines[instanceName] = timelineData
+    this.set({timelines: timelines})
+  }
+
+  Store.prototype.getForTimeline = function (instanceName, timelineName, key) {
+    let timelines = this.get('timelines') || {}
+    let timelineData = timelines[instanceName] || {}
+    return (timelineData[timelineName] || {})[key]
+  }
+}
+
+export function mixins(Store) {
+  timelineMixins(Store)
+}

routes/_store/obsevers.js

@@ -1,6 +1,6 @@
 import { updateVerifyCredentialsForInstance } from '../settings/instances/_actions/[instanceName]'
 
-export function storeObservers(store) {
+export function observers(store) {
   store.observe('currentInstance', (currentInstance) => {
     updateVerifyCredentialsForInstance(currentInstance)
   })

routes/_store/store.js

@@ -0,0 +1,38 @@
+import { observers } from './obsevers'
+import { computations } from './computations'
+import { mixins } from './mixins'
+import { LocalStorageStore } from './LocalStorageStore'
+
+const KEYS_TO_STORE_IN_LOCAL_STORAGE = new Set([
+  "currentInstance",
+  "currentRegisteredInstance",
+  "currentRegisteredInstanceName",
+  "instanceNameInSearch",
+  "instanceThemes",
+  "loggedInInstances",
+  "loggedInInstancesInOrder"
+])
+
+class PinaforeStore extends LocalStorageStore {
+  constructor(state) {
+    super(state, KEYS_TO_STORE_IN_LOCAL_STORAGE)
+  }
+}
+
+const store = new PinaforeStore({
+  instanceNameInSearch: '',
+  currentInstance: null,
+  loggedInInstances: {},
+  loggedInInstancesInOrder: [],
+  instanceThemes: {}
+})
+
+mixins(PinaforeStore)
+computations(store)
+observers(store)
+
+if (process.browser && process.env.NODE_ENV !== 'production') {
+  window.store = store // for debugging
+}
+
+export { store }

routes/_store/timelineComputations.js

@@ -0,0 +1,11 @@
+export function timelineComputations(store) {
+  store.compute('currentTimelineData', ['currentInstance', 'currentTimeline', 'timelines'],
+    (currentInstance, currentTimeline, timelines) => {
+      return ((timelines && timelines[currentInstance]) || {})[currentTimeline] || {}
+    })
+
+  store.compute('statusIds', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.statusIds || [])
+  store.compute('runningUpdate', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.runningUpdate)
+  store.compute('initialized', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.initialized)
+  store.compute('lastStatusId', ['statusIds'], (statusIds) => statusIds.length && statusIds[statusIds.length - 1])
+}

routes/_utils/binary.js

@@ -1,27 +0,0 @@
-// from blob-util
-function blobToBinaryString(blob) {
-  return new Promise(function (resolve, reject) {
-    var reader = new FileReader();
-    var hasBinaryString = typeof reader.readAsBinaryString === 'function';
-    reader.onloadend = function (e) {
-      var result = e.target.result || '';
-      if (hasBinaryString) {
-        return resolve(result);
-      }
-      resolve(arrayBufferToBinaryString(result));
-    };
-    reader.onerror = reject;
-    if (hasBinaryString) {
-      reader.readAsBinaryString(blob);
-    } else {
-      reader.readAsArrayBuffer(blob);
-    }
-  });
-}
-
-export function blobToBase64(blob) {
-  return blobToBinaryString(blob).then(function (binary) {
-    // web-safe variant
-    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-  });
-}

routes/_utils/store.js

@@ -1,138 +0,0 @@
-import { Store } from 'svelte/store.js'
-import { storeObservers } from './storeObservers'
-
-const LOCAL_STORAGE_KEYS = new Set([
-  "currentInstance",
-  "currentRegisteredInstance",
-  "currentRegisteredInstanceName",
-  "instanceNameInSearch",
-  "instanceThemes",
-  "loggedInInstances",
-  "loggedInInstancesInOrder"
-])
-
-const LS = process.browser && localStorage
-class PinaforeStore extends Store {
-
-  constructor(state) {
-    super(state)
-    if (process.browser) {
-      this.keysToStore = {}
-      let newState = {}
-      for (let i = 0, len = LS.length; i < len; i++) {
-        let key = LS.key(i)
-        if (key.startsWith('store_')) {
-          let item = LS.getItem(key)
-          newState[key.substring(6)] = item === 'undefined' ? undefined : JSON.parse(item)
-        }
-      }
-      this.set(newState)
-      this.onchange((state, changed) => {
-        Object.keys(changed).forEach(change => {
-          if (LOCAL_STORAGE_KEYS.has(change)) {
-            this.keysToStore[change] = true
-          }
-        })
-      })
-    }
-  }
-
-  save() {
-    if (process.browser) {
-      Object.keys(this.keysToStore).forEach(key => {
-        LS.setItem(`store_${key}`, JSON.stringify(this.get(key)))
-      })
-      this.keysToStore = {}
-    }
-  }
-
-  setForTimeline(instanceName, timelineName, obj) {
-    let timelines = this.get('timelines') || {}
-    let timelineData = timelines[instanceName] || {}
-    timelineData[timelineName] = Object.assign(timelineData[timelineName] || {}, obj)
-    timelines[instanceName] = timelineData
-    this.set({timelines: timelines})
-  }
-
-  getForTimeline(instanceName, timelineName, key) {
-    let timelines = this.get('timelines') || {}
-    let timelineData = timelines[instanceName] || {}
-    return (timelineData[timelineName] || {})[key]
-  }
-}
-
-const store = new PinaforeStore({
-  instanceNameInSearch: '',
-  currentRegisteredInstance: null,
-  currentRegisteredInstanceName: '',
-  currentInstance: null,
-  loggedInInstances: {},
-  loggedInInstancesInOrder: [],
-  instanceThemes: {}
-})
-
-store.compute(
-  'isUserLoggedIn',
-  ['currentInstance', 'loggedInInstances'],
-  (currentInstance, loggedInInstances) => !!(currentInstance && Object.keys(loggedInInstances).includes(currentInstance))
-)
-
-store.compute(
-  'loggedInInstancesAsList',
-  ['currentInstance', 'loggedInInstances', 'loggedInInstancesInOrder'],
-  (currentInstance, loggedInInstances, loggedInInstancesInOrder) => {
-    return loggedInInstancesInOrder.map(instanceName => {
-      return Object.assign({
-        current: currentInstance === instanceName,
-        name: instanceName
-      }, loggedInInstances[instanceName])
-    })
-  }
-)
-
-store.compute(
-  'currentInstanceData',
-  ['currentInstance', 'loggedInInstances'],
-  (currentInstance, loggedInInstances) => {
-    return Object.assign({
-      name: currentInstance
-    }, loggedInInstances[currentInstance])
-})
-
-store.compute(
-  'accessToken',
-  ['currentInstanceData'],
-  (currentInstanceData) => currentInstanceData.access_token
-)
-
-store.compute(
-  'currentTheme',
-  ['currentInstance', 'instanceThemes'],
-  (currentInstance, instanceThemes) => {
-    return instanceThemes[currentInstance] || 'default'
-  }
-)
-
-store.compute(
-  'currentVerifyCredentials',
-  ['currentInstance', 'verifyCredentials'],
-  (currentInstance, verifyCredentials) => verifyCredentials && verifyCredentials[currentInstance]
-)
-
-store.compute('currentTimelineData', ['currentInstance', 'currentTimeline', 'timelines'],
-  (currentInstance, currentTimeline, timelines) => {
-  return ((timelines && timelines[currentInstance]) || {})[currentTimeline] || {}
-})
-
-store.compute('statusIds',     ['currentTimelineData'], (currentTimelineData) => currentTimelineData.statusIds || [])
-store.compute('runningUpdate', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.runningUpdate)
-store.compute('initialized',   ['currentTimelineData'], (currentTimelineData) => currentTimelineData.initialized)
-store.compute('lastStatusId',  ['statusIds'], (statusIds) => statusIds.length && statusIds[statusIds.length - 1])
-
-storeObservers(store)
-
-if (process.browser && process.env.NODE_ENV !== 'production') {
-  window.store = store // for debugging
-}
-
-export { store }

routes/accounts/[accountId].html

@@ -32,7 +32,7 @@
   import Layout from '../_components/Layout.html'
   import LazyTimeline from '../_components/timeline/LazyTimeline.html'
   import FreeTextLayout from '../_components/FreeTextLayout.html'
-  import { store } from '../_utils/store.js'
+  import { store } from '../_store/store.js'
   import HiddenFromSSR from '../_components/HiddenFromSSR'
   import DynamicPageBanner from '../_components/DynamicPageBanner.html'
   import { updateProfileAndRelationship } from './_actions/[accountId]'

routes/accounts/_actions/[accountId].js

@@ -1,6 +1,6 @@
 import { getAccount, getRelationship } from '../../_utils/mastodon/user'
 import { database } from '../../_utils/database/database'
-import { store } from '../../_utils/store'
+import { store } from '../../_store/store'
 
 async function updateAccount(accountId, instanceName, accessToken) {
   let localPromise = database.getAccount(instanceName, accountId)

routes/federated.html

@@ -20,7 +20,7 @@
   import Layout from './_components/Layout.html'
   import LazyTimeline from './_components/timeline/LazyTimeline.html'
   import FreeTextLayout from './_components/FreeTextLayout.html'
-  import { store } from './_utils/store.js'
+  import { store } from './_store/store.js'
   import HiddenFromSSR from './_components/HiddenFromSSR'
 
   export default {

routes/index.html

@@ -15,7 +15,7 @@
   import Layout from './_components/Layout.html'
   import NotLoggedInHome from './_components/NotLoggedInHome.html'
   import LazyTimeline from './_components/timeline/LazyTimeline.html'
-  import { store } from './_utils/store.js'
+  import { store } from './_store/store.js'
 
 	export default {
 		store: () => store,

routes/local.html

@@ -20,7 +20,7 @@
   import Layout from './_components/Layout.html'
   import LazyTimeline from './_components/timeline/LazyTimeline.html'
   import FreeTextLayout from './_components/FreeTextLayout.html'
-  import { store } from './_utils/store.js'
+  import { store } from './_store/store.js'
   import HiddenFromSSR from './_components/HiddenFromSSR'
 
   export default {

routes/settings/instances/[instanceName].html

@@ -94,7 +94,7 @@
   }
 </style>
 <script>
-  import { store } from '../../_utils/store'
+  import { store } from '../../_store/store'
   import Layout from '../../_components/Layout.html'
   import SettingsLayout from '../_components/SettingsLayout.html'
   import {

routes/settings/instances/_actions/[instanceName].js

@@ -1,5 +1,5 @@
 import { getVerifyCredentials } from '../../../_utils/mastodon/user'
-import { store } from '../../../_utils/store'
+import { store } from '../../../_store/store'
 import { switchToTheme } from '../../../_utils/themeEngine'
 import { toast } from '../../../_utils/toast'
 import { database } from '../../../_utils/database/database'

routes/settings/instances/_actions/add.js

@@ -3,7 +3,7 @@ import { getInstanceInfo } from '../../../_utils/mastodon/instance'
 import { goto } from 'sapper/runtime.js'
 import { switchToTheme } from '../../../_utils/themeEngine'
 import { database } from '../../../_utils/database/database'
-import { store } from '../../../_utils/store'
+import { store } from '../../../_store/store'
 import { updateVerifyCredentialsForInstance } from './[instanceName]'
 
 const REDIRECT_URI = (typeof location !== 'undefined' ?

routes/settings/instances/add.html

@@ -70,7 +70,7 @@
 <script>
   import Layout from '../../_components/Layout.html';
   import SettingsLayout from '../_components/SettingsLayout.html'
-  import { store } from '../../_utils/store'
+  import { store } from '../../_store/store'
   import LoadingMask from '../../_components/LoadingMask'
   import { logInToInstance, handleOauthCode } from './_actions/add'
 

routes/settings/instances/index.html

@@ -25,7 +25,7 @@
   </SettingsLayout>
 </Layout>
 <script>
-  import { store } from '../../_utils/store'
+  import { store } from '../../_store/store'
   import Layout from '../../_components/Layout.html'
   import SettingsLayout from '../_components/SettingsLayout.html'
   import SettingsList from '../_components/SettingsList.html'

routes/tags/[tagName].html

@@ -26,7 +26,7 @@
   import Layout from '../_components/Layout.html'
   import LazyTimeline from '../_components/timeline/LazyTimeline.html'
   import FreeTextLayout from '../_components/FreeTextLayout.html'
-  import { store } from '../_utils/store.js'
+  import { store } from '../_store/store.js'
   import HiddenFromSSR from '../_components/HiddenFromSSR'
   import DynamicPageBanner from '../_components/DynamicPageBanner.html'