Cache claims in indexedDB (via LocalForage)

ui/js/store.js

@@ -1,22 +1,28 @@
-const redux = require('redux');
+import { createLogger } from "redux-logger";
-const thunk = require('redux-thunk').default;
+import appReducer from "reducers/app";
+import availabilityReducer from "reducers/availability";
+import claimsReducer from "reducers/claims";
+import contentReducer from "reducers/content";
+import costInfoReducer from "reducers/cost_info";
+import fileInfoReducer from "reducers/file_info";
+import rewardsReducer from "reducers/rewards";
+import searchReducer from "reducers/search";
+import settingsReducer from "reducers/settings";
+import userReducer from "reducers/user";
+import walletReducer from "reducers/wallet";
+import { persistStore, autoRehydrate } from "redux-persist";
+import createCompressor from "redux-persist-transform-compress";
+import createFilter from "redux-persist-transform-filter";
+import { REHYDRATE } from "redux-persist/constants";
+import createActionBuffer from "redux-action-buffer";
+
+const localForage = require("localforage");
+const redux = require("redux");
+const thunk = require("redux-thunk").default;
 const env = ENV;
 
-import { createLogger } from 'redux-logger';
-import appReducer from 'reducers/app';
-import availabilityReducer from 'reducers/availability';
-import claimsReducer from 'reducers/claims';
-import contentReducer from 'reducers/content';
-import costInfoReducer from 'reducers/cost_info';
-import fileInfoReducer from 'reducers/file_info';
-import rewardsReducer from 'reducers/rewards';
-import searchReducer from 'reducers/search';
-import settingsReducer from 'reducers/settings';
-import walletReducer from 'reducers/wallet';
-import userReducer from 'reducers/user';
-
 function isFunction(object) {
-	return typeof object === 'function';
+  return typeof object === "function";
 }
 
 function isNotFunction(object) {
@@ -25,7 +31,7 @@ function isNotFunction(object) {
 
 function createBulkThunkMiddleware() {
   return ({ dispatch, getState }) => next => action => {
-		if (action.type === 'BATCH_ACTIONS') {
+    if (action.type === "BATCH_ACTIONS") {
       action.actions
         .filter(isFunction)
         .map(actionFn => actionFn(dispatch, getState));
@@ -37,7 +43,7 @@ function createBulkThunkMiddleware() {
 function enableBatching(reducer) {
   return function batchingReducer(state, action) {
     switch (action.type) {
-			case 'BATCH_ACTIONS':
+      case "BATCH_ACTIONS":
         return action.actions
           .filter(isNotFunction)
           .reduce(batchingReducer, state);
@@ -64,17 +70,36 @@ const reducers = redux.combineReducers({
 const bulkThunk = createBulkThunkMiddleware();
 const middleware = [thunk, bulkThunk];
 
-if (env === 'development') {
+if (env === "development") {
   const logger = createLogger({
-		collapsed: true
+    collapsed: true,
   });
   middleware.push(logger);
 }
 
+middleware.push(createActionBuffer(REHYDRATE));
+
 const createStoreWithMiddleware = redux.compose(
+  autoRehydrate(),
   redux.applyMiddleware(...middleware)
 )(redux.createStore);
 
 const reduxStore = createStoreWithMiddleware(enableBatching(reducers));
+const compressor = createCompressor();
+const saveClaimsFilter = createFilter("claims", [
+  "byId",
+  "claimsByUri",
+  "myClaims",
+]);
+
+const persistOptions = {
+  whitelist: ["claims"],
+  // Order is important. Needs to be compressed last or other transforms can't
+  // read the data
+  transforms: [saveClaimsFilter, compressor],
+  debounce: 1000,
+  storage: localForage,
+};
+persistStore(reduxStore, persistOptions);
 
 export default reduxStore;

ui/package.json

@@ -26,6 +26,7 @@
     "babel-preset-react": "^6.11.1",
     "from2": "^2.3.0",
     "jshashes": "^1.0.6",
+    "localforage": "^1.5.0",
     "node-sass": "^3.8.0",
     "rc-progress": "^2.0.6",
     "react": "^15.4.0",
@@ -33,7 +34,11 @@
     "react-modal": "^1.5.2",
     "react-redux": "^5.0.3",
     "redux": "^3.6.0",
+    "redux-action-buffer": "^1.1.0",
     "redux-logger": "^3.0.1",
+    "redux-persist": "^4.8.0",
+    "redux-persist-transform-compress": "^4.2.0",
+    "redux-persist-transform-filter": "0.0.10",
     "redux-thunk": "^2.2.0",
     "render-media": "^2.10.0",
     "reselect": "^3.0.0",

ui/webpack.config.js

@@ -32,6 +32,19 @@ module.exports = {
         loaders: ["eslint"],
         // define an include so we check just the files we need
         include: PATHS.app
+      }
+    ],
+    noParse: /node_modules\/localforage\/dist\/localforage.js/,
+    loaders: [
+      { test: /\.css$/, loader: "style!css" },
+      {
+        test: /\.jsx?$/,
+        loader: 'babel',
+        exclude: /node_modules/,
+        query: {
+          cacheDirectory: true,
+          presets:[ 'es2015', 'react', 'stage-2' ]
+        }
       },
       {
         test: /\.css$/,

ui/webpack.dev.config.js

@@ -40,6 +40,19 @@ module.exports = {
         loaders: ["eslint"],
         // define an include so we check just the files we need
         include: PATHS.app
+      }
+    ],
+    noParse: /node_modules\/localforage\/dist\/localforage.js/,
+    loaders: [
+      { test: /\.css$/, loader: "style!css" },
+      {
+        test: /\.jsx?$/,
+        loader: 'babel',
+        exclude: /node_modules/,
+        query: {
+          cacheDirectory: true,
+          presets:[ 'es2015', 'react', 'stage-2' ]
+        }
       },
       {
         test: /\.css$/,