localforage: add localforage, remember a fetched instance

app/soapbox/actions/instance.js

@@ -1,12 +1,41 @@
 import api from '../api';
 import { get } from 'lodash';
 import { parseVersion } from 'soapbox/utils/features';
+import { getAuthUserUrl } from 'soapbox/utils/auth';
+import localforage from 'localforage';
+
+export const INSTANCE_FETCH_SUCCESS    = 'INSTANCE_FETCH_SUCCESS';
+export const INSTANCE_REMEMBER_SUCCESS = 'INSTANCE_REMEMBER_SUCCESS';
+export const INSTANCE_FETCH_FAIL       = 'INSTANCE_FETCH_FAIL';
 
-export const INSTANCE_FETCH_SUCCESS = 'INSTANCE_FETCH_SUCCESS';
-export const INSTANCE_FETCH_FAIL    = 'INSTANCE_FETCH_FAIL';
 export const NODEINFO_FETCH_SUCCESS = 'NODEINFO_FETCH_SUCCESS';
 export const NODEINFO_FETCH_FAIL    = 'NODEINFO_FETCH_FAIL';
 
+const getMeUrl = state => {
+  const me = state.get('me');
+  return state.getIn(['accounts', me, 'url']);
+};
+
+// Figure out the appropriate instance to fetch depending on the state
+const getHost = state => {
+  const accountUrl = getMeUrl(state) || getAuthUserUrl(state);
+
+  try {
+    return new URL(accountUrl).host;
+  } catch {
+    return null;
+  }
+};
+
+export function rememberInstance(host) {
+  return (dispatch, getState) => {
+    return localforage.getItem(`instance:${host}`).then(instance => {
+      dispatch({ type: INSTANCE_REMEMBER_SUCCESS, instance });
+      return instance;
+    });
+  };
+}
+
 export function fetchInstance() {
   return (dispatch, getState) => {
     return api(getState).get('/api/v1/instance').then(response => {
@@ -21,6 +50,17 @@ export function fetchInstance() {
   };
 }
 
+// Tries to remember the instance from browser storage before fetching it
+export function loadInstance() {
+  return (dispatch, getState) => {
+    const host = getHost(getState());
+
+    return dispatch(rememberInstance(host)).then(instance => {
+      return dispatch(fetchInstance());
+    });
+  };
+}
+
 export function fetchNodeinfo() {
   return (dispatch, getState) => {
     api(getState).get('/nodeinfo/2.1.json').then(response => {

app/soapbox/containers/soapbox.js

@@ -16,7 +16,7 @@ import UI from '../features/ui';
 import { preload } from '../actions/preload';
 import { IntlProvider } from 'react-intl';
 import ErrorBoundary from '../components/error_boundary';
-import { fetchInstance } from 'soapbox/actions/instance';
+import { loadInstance } from 'soapbox/actions/instance';
 import { fetchSoapboxConfig } from 'soapbox/actions/soapbox';
 import { fetchMe } from 'soapbox/actions/me';
 import PublicLayout from 'soapbox/features/public_layout';
@@ -38,7 +38,7 @@ store.dispatch(preload());
 store.dispatch(fetchMe())
   .then(() => {
     // Postpone for authenticated fetch
-    store.dispatch(fetchInstance());
+    store.dispatch(loadInstance());
     store.dispatch(fetchSoapboxConfig());
   })
   .catch(() => {});

app/soapbox/main.js

@@ -10,6 +10,7 @@ import ReactDOM from 'react-dom';
 import * as OfflinePluginRuntime from '@lcdp/offline-plugin/runtime';
 import * as perf from './performance';
 import * as monitoring from './monitoring';
+import localforage from 'localforage';
 import ready from './ready';
 import { NODE_ENV } from 'soapbox/build_config';
 
@@ -19,6 +20,15 @@ function main() {
   // Sentry
   monitoring.start();
 
+  // localForage
+  // https://localforage.github.io/localForage/#settings-api-config
+  localforage.config({
+    name: 'soapbox',
+    description: 'Soapbox offline data store',
+    driver: localforage.INDEXEDDB,
+    storeName: 'keyvaluepairs',
+  });
+
   ready(() => {
     const mountNode = document.getElementById('soapbox');
 

app/soapbox/reducers/instance.js

@@ -1,4 +1,5 @@
 import {
+  INSTANCE_REMEMBER_SUCCESS,
   INSTANCE_FETCH_SUCCESS,
   INSTANCE_FETCH_FAIL,
   NODEINFO_FETCH_SUCCESS,
@@ -7,6 +8,7 @@ import { PLEROMA_PRELOAD_IMPORT } from 'soapbox/actions/preload';
 import { ADMIN_CONFIG_UPDATE_REQUEST, ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin';
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import { ConfigDB } from 'soapbox/utils/config_db';
+import localforage from 'localforage';
 
 const nodeinfoToInstance = nodeinfo => {
   // Match Pleroma's develop branch
@@ -37,9 +39,17 @@ const initialState = ImmutableMap({
   version: '0.0.0',
 });
 
+const importInstance = (state, instance) => {
+  return initialState.mergeDeep(instance);
+};
+
+const importNodeinfo = (state, nodeinfo) => {
+  return nodeinfoToInstance(nodeinfo).mergeDeep(state);
+};
+
 const preloadImport = (state, action, path) => {
-  const data = action.data[path];
-  return data ? initialState.mergeDeep(fromJS(data)) : state;
+  const instance = action.data[path];
+  return instance ? importInstance(state, fromJS(instance)) : state;
 };
 
 const getConfigValue = (instanceConfig, key) => {
@@ -80,16 +90,39 @@ const handleAuthFetch = state => {
   }).merge(state);
 };
 
+const getHost = instance => {
+  try {
+    return new URL(instance.uri).host;
+  } catch {
+    try {
+      return new URL(`https://${instance.uri}`).host;
+    } catch {
+      return null;
+    }
+  }
+};
+
+const persistInstance = instance => {
+  const host = getHost(instance);
+
+  if (host) {
+    localforage.setItem(`instance:${host}`, instance);
+  }
+};
+
 export default function instance(state = initialState, action) {
   switch(action.type) {
   case PLEROMA_PRELOAD_IMPORT:
     return preloadImport(state, action, '/api/v1/instance');
+  case INSTANCE_REMEMBER_SUCCESS:
+    return importInstance(state, fromJS(action.instance));
   case INSTANCE_FETCH_SUCCESS:
-    return initialState.mergeDeep(fromJS(action.instance));
+    persistInstance(action.instance);
+    return importInstance(state, fromJS(action.instance));
   case INSTANCE_FETCH_FAIL:
     return action.error.response.status === 401 ? handleAuthFetch(state) : state;
   case NODEINFO_FETCH_SUCCESS:
-    return nodeinfoToInstance(fromJS(action.nodeinfo)).mergeDeep(state);
+    return importNodeinfo(state, fromJS(action.nodeinfo));
   case ADMIN_CONFIG_UPDATE_REQUEST:
   case ADMIN_CONFIG_UPDATE_SUCCESS:
     return importConfigs(state, fromJS(action.configs));

package.json

@@ -99,6 +99,7 @@
     "jest-transform-stub": "^2.0.0",
     "jsdoc": "~3.6.7",
     "line-awesome": "^1.3.0",
+    "localforage": "^1.10.0",
     "lodash": "^4.7.11",
     "mark-loader": "^0.1.6",
     "marky": "^1.2.1",

yarn.lock

@@ -4840,6 +4840,11 @@ ignore@^5.1.4, ignore@^5.1.8:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
 immutable@^4.0.0-rc.14:
   version "4.0.0-rc.14"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.14.tgz#29ba96631ec10867d1348515ac4e6bdba462f071"
@@ -6048,6 +6053,13 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
 line-awesome@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/line-awesome/-/line-awesome-1.3.0.tgz#51d59fe311ed040d22d8e80d3aa0b9a4b57e6cd3"
@@ -6141,6 +6153,13 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
+localforage@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"