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));