Merge pull request #2893 from asauber/remove-auto-refetching

Remove automatic refetching logic and state invalidation from action creator generators

Author: asauber

src/api/ad-hoc/linodes.js

@@ -48,9 +48,7 @@ export function rebuildLinode(id, config = null) {
     return async (dispatch) => {
       // Add this manually so StatusDropdown will start polling.
       dispatch(actions.one({ status: 'rebuilding' }, id));
-      await dispatch(actions.disks.invalidate([id], false));
       await dispatch(actions.disks.many(makeNormalResponse(rsp, 'disks'), id));
-      await dispatch(actions.configs.invalidate([id], false));
       await dispatch(actions.configs.many(makeNormalResponse(rsp, 'configs'), id));
     };
   }

src/api/external.js

@@ -1,6 +1,6 @@
 import { fetch } from './fetch';
 import {
-  ONE, MANY, DELETE, POST, PUT, generateDefaultStateFull, isPlural,
+  ONE, MANY, DELETE, POST, PUT,
 } from './internal';
 
 
@@ -10,60 +10,6 @@ export function fullyLoadedObject(object) {
   return object && !!Object.keys(object).filter(key => !key.startsWith('_')).length;
 }
 
-/*
- * This function applies the ids to the config to try to find
- * the particular object we are talking about.
- *
- * Examples:
- *   getStateOfSpecificResource(require('~/api/generic/linodes').config.generic,
- *                              store.api, ['1234'])
- *   returns store.api.linodes.linodes['1234']._generic.generic
- *
- *   getStateOfSpecificResource(require('~/api/generic/linodes').config.generic,
- *                              store.api, ['1234', '1'])
- *   returns store.api.linodes.linodes['1234']._generic.generic['1']
- */
-export function getStateOfSpecificResource(config, state, ids) {
-  const path = [];
-  let root = config;
-  const match = (sub, parent) => {
-    if (parent.subresources[sub] === root) {
-      path.push(sub);
-    }
-  };
-  while (root.parent) {
-    const parent = root.parent;
-    Object.keys(parent.subresources).forEach(s => match(s, parent));
-    root = parent;
-  }
-  let refined = state.api[root.name];
-  const _ids = [...ids];
-  let current = root;
-  let name = null;
-
-  while (current !== config) {
-    name = path.pop();
-    if (isPlural(current)) {
-      refined = refined[current.name][_ids.shift()][name];
-    } else {
-      // Not totally sure how things would work with a plural inside a singular
-      refined = refined[current.name][name];
-    }
-    current = current.subresources[name];
-  }
-
-  if (_ids.length) {
-    // Should only be a plural one anyway, but just in case.
-    const objects = refined[current.name];
-    if (!isPlural(current)) {
-      return objects;
-    }
-
-    return objects[_ids[_ids.length - 1]];
-  }
-  return refined;
-}
-
 /*
  * Apply a filter to all returned objects so only selected fields (or none)
  * will be updated.
@@ -109,119 +55,46 @@ function genThunkOne(config, actions) {
  * The results are returned.
  */
 function genThunkPage(config, actions) {
-  function fetchPage(page = 0, ids = [], resourceFilter, storeInState = true,
-    fetchBeganAt, headers) {
-    return async (dispatch, getState) => {
+  function fetchPage(page = 0, ids = [], resourceFilter, headers) {
+    return async (dispatch) => {
       const endpoint = `${config.endpoint(...ids, '')}?page=${page + 1}`;
-
       const resources = await dispatch(fetch.get(endpoint, undefined, headers));
       resources[config.name] = resources.data || [];
-
-      const now = fetchBeganAt || new Date();
-
-      // The filterResources function must acknowledge that it may not be getting
-      // the most up-to-date results.
       const filteredResources = filterResources(config, resources, resourceFilter);
-
-      // Refetch any existing results that have been updated since fetchBeganAt.
-      const fetchOne = genThunkOne(config, actions);
-      const objects = await Promise.all(filteredResources[config.name].map(async (resource) => {
-        const existingResourceState = getStateOfSpecificResource(
-          config, getState(), [...ids, resource.id]);
-        if (existingResourceState) {
-          const hasActualState = fullyLoadedObject(existingResourceState);
-
-          const updatedAt = hasActualState && existingResourceState.__updatedAt || fetchBeganAt;
-          if (updatedAt > now) {
-            try {
-              return await dispatch(fetchOne([...ids, resource.id]));
-            } catch (e) {
-              // There's some case where fetching will 404 because there's some item in internal
-              // state that is not returned from the API (or was because the API is returning
-              // deleted items?). Catch that and don't blow up; log for good measure.
-              // eslint-disable-next-line
-              console.trace(e);
-              return Promise.resolve();
-            }
-          }
-        }
-        return resource;
-      }));
-
-      const updatedResources = {
-        ...filteredResources,
-        [config.name]: objects,
-      };
-
-      if (storeInState) {
-        await dispatch(actions.many(updatedResources, ...ids));
-      }
-
-      return updatedResources;
+      await dispatch(actions.many(filteredResources, ...ids));
+      return filteredResources;
     };
   }
 
   return fetchPage;
 }
 
 /*
- * This function fetches all pages. If the final page indicates the total results
- * were not fetched, it restarts the process. If it is fixing partial invalidation,
- * it waits to invalidate and store the new data into the store until all the
- * pages have been fetched.
+ * This function fetches all pages, stores them in Redux and returns the result
  */
 function genThunkAll(config, actions, fetchPage) {
   function fetchAll(ids = [], resourceFilter, options) {
-    return async (dispatch, getState) => {
-      let state = getStateOfSpecificResource(config, getState(), ids) ||
-        generateDefaultStateFull(config);
-
-      const fetchBeganAt = new Date();
-
+    return async (dispatch) => {
       // Grab first page so we know how many there are.
-      const storeInState = !state.invalid; // Store the fetched results later
       const resource = await dispatch(
-        fetchPage(0, ids, resourceFilter, storeInState, fetchBeganAt, options));
+        fetchPage(0, ids, resourceFilter, options));
       const resources = [resource];
-      state = getStateOfSpecificResource(config, getState(), ids);
 
-      // Grab all pages we know about. If state.invalid, don't save the result
-      // in the redux store until we've got all the results.
+      // Grab all pages we know about and store them in Redux.
       const requests = [];
       for (let i = 1; i < resources[0].pages; i += 1) {
-        requests.push(fetchPage(i, ids, resourceFilter, !state.invalid, fetchBeganAt, options));
+        requests.push(fetchPage(i, ids, resourceFilter, options));
       }
 
+      // Gather all the results for for return to the caller
       const allPages = await Promise.all(requests.map(r => dispatch(r)));
       allPages.forEach(function (response) {
         resources.push(response);
       });
-
-      // If the number of total results returned by the last page is different
-      // than the total number of results we have, restart.
-      const numFetchedResources = resources.map(
-        resource => resource[config.name].length
-      ).reduce((a, b) => a + b);
-      const numExpectedResources = resources[resources.length - 1].results;
-      if (numFetchedResources !== numExpectedResources) {
-        return await dispatch(fetchAll(ids, resourceFilter));
-      }
-
-      // Waits until all things have been fetched so we don't have UI flashes
-      // while we wait for requests to be made and the results saved in the redux store.
-      if (state.invalid) {
-        dispatch(actions.invalidate());
-
-        await Promise.all(resources.map(page =>
-          dispatch(actions.many(page, ...ids))));
-      }
-
-      // The resulting object will look like this, return it so anyone can use it immediately.
       const res = {
         ...resources[resources.length - 1],
         [config.name]: resources.reduce((a, b) => [...a, ...b[config.name]], []),
       };
-
       return res;
     };
   }

src/api/internal.js

@@ -80,8 +80,6 @@ export function genActions(config) {
       actions[fns[feature]] = actionGenerators[feature](config);
     }
   });
-  actions.invalidate = (ids = [], partial = false) =>
-    ({ type: `GEN@${fullyQualified(config)}/INVALIDATE`, ids, partial });
   if (config.subresources) {
     Object.keys(config.subresources).forEach((key) => {
       const subresource = config.subresources[key];
@@ -192,29 +190,6 @@ export class ReducerGenerator {
     };
   }
 
-  static invalidate(config, state, action) {
-    let newState = { ...state };
-    if (action.partial) {
-      // Keep data but mark as invalid to be overwritten
-      // when new data is available by thunks.all.
-      if (action.ids.length) {
-        // action.ids should only ever be just 1 id
-        newState[config.name][action.ids[0]].invalid = true;
-      } else {
-        newState.invalid = true;
-      }
-    } else {
-      if (action.ids.length) {
-        // action.ids should only ever be just 1 id
-        delete newState[config.name][action.ids[0]];
-      } else {
-        newState = generateDefaultStateFull(config);
-      }
-    }
-
-    return { ...newState, __updatedAt: new Date() };
-  }
-
   static subresource(config, state, action) {
     let path = action.type.substr(action.type.indexOf('@') + 1);
     path = path.substr(0, path.indexOf('/'));
@@ -266,8 +241,6 @@ export class ReducerGenerator {
         return ReducerGenerator.many(config, state, action);
       case `GEN@${fullyQualified(config)}/DELETE`:
         return ReducerGenerator.del(config, state, action);
-      case `GEN@${fullyQualified(config)}/INVALIDATE`:
-        return ReducerGenerator.invalidate(config, state, action);
       // eslint-disable-next-line no-case-declarations
       default:
         if (action.type && action.type.split('/')[0].indexOf(subTypeMatch) === 0) {

src/components/PollingWrapper.js

@@ -104,7 +104,7 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
   dispatch,
   fetchEventsPage(headers = null) {
-    return dispatch(api.events.page(0, [], null, true, null, headers));
+    return dispatch(api.events.page(0, [], null, headers));
   },
 });
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PollingWrapper));

src/components/notifications/index.js

@@ -123,7 +123,7 @@ class Notifications extends Component {
 
   fetchEventsPage(headers = null) {
     const { dispatch } = this.props;
-    return dispatch(api.events.page(0, [], null, true, null, headers));
+    return dispatch(api.events.page(0, [], null, headers));
   }
 
   render() {
@@ -188,7 +188,7 @@ const mapDispatchToProps = (dispatch) => ({
     }
   },
   fetchEventsPage(headers = null) {
-    return dispatch(api.events.page(0, [], null, true, null, headers));
+    return dispatch(api.events.page(0, [], null, headers));
   },
 });