fix(access-type): Perf fix, access action dispatch ⭐

src/components/access-type.js

@@ -1,5 +1,5 @@
-import React, {PureComponent} from 'react';
-import {connect} from 'react-redux';
+import React, {Component} from 'react';
+import {connect, batch} from 'react-redux';
 import get from "lodash/get";
 import {
     ACCESS_BEING_LOADED,
@@ -11,7 +11,8 @@ import {
 import PropTypes from "prop-types";
 import {awaitHelper} from "../utils";
 
-class AccessTypeBase extends PureComponent {
+
+class AccessTypeBase extends Component {
 
     componentDidMount() {
         this.initAccessType();
@@ -70,9 +71,7 @@ class AccessTypeBase extends PureComponent {
                 error: 'subscriptions fetch failed'
             };
         }
-        const {'subscription_groups': subscriptionGroups = []} = subscriptions;
-        this.props.subscriptionGroupLoaded(subscriptionGroups);
-        return subscriptionGroups;
+        return subscriptions["subscription_groups"] || [];
     };
 
     getPaymentOptions= async () => {
@@ -85,15 +84,23 @@ class AccessTypeBase extends PureComponent {
                 error: 'payment options fetch failed'
             };
         }
-        this.props.paymentOptionsLoaded(paymentOptions);
         return paymentOptions;
     };
 
     runSequentialCalls = async () => {
         const user = await this.setUser(this.props.email, this.props.phone);
         if(user) {
-            this.getSubscription();
-            this.getPaymentOptions();
+            try{
+                Promise.all([this.getSubscription(), this.getPaymentOptions()]).then(([subscriptionGroups, paymentOptions]) => {
+                    batch(() => {
+                        this.props.subscriptionGroupLoaded(subscriptionGroups);
+                        this.props.paymentOptionsLoaded(paymentOptions);
+                    })
+                })
+            }catch (e) {
+                console.log(`Subscription / payments failed`);
+            }
+
         }
     };
 
@@ -146,8 +153,6 @@ class AccessTypeBase extends PureComponent {
 
         const meteredBody = {
             method: "POST",
-            cache: "no-cache",
-            "Cache-Control": "private,no-cache,no-store",
             headers: {
                 "Content-Type": "text/plain"
             },
@@ -165,13 +170,6 @@ class AccessTypeBase extends PureComponent {
 
         this.props.accessIsLoading(true);
 
-
-        const accessObject = {
-            id: assetId,
-            type: 'story',
-            attributes: {}
-        };
-
         const meteringParam = this.props.disableMetering === true ? '?disable-meter=true' : '';
         const { error, data: accessData }  = await awaitHelper((await global.fetch(`/api/access/v1/stories/${assetId}/access${meteringParam}`)).json());
 
@@ -193,16 +191,17 @@ class AccessTypeBase extends PureComponent {
     };
 
     render() {
-        const {children} = this.props;
-        console.log(`RENDERING AT`);
-        return children({
-            initAccessType: this.initAccessType,
-            initRazorPayPayment: this.initRazorPayPayment,
-            checkAccess: this.checkAccess,
-            getSubscriptionForUser: this.getSubscriptionForUser,
-            accessUpdated: this.props.accessUpdated,
-            accessIsLoading: this.props.accessIsLoading
-        });
+      const {children} = this.props;
+
+      return children({
+        initAccessType: this.initAccessType,
+        initRazorPayPayment: this.initRazorPayPayment,
+        checkAccess: this.checkAccess,
+        getSubscriptionForUser: this.getSubscriptionForUser,
+        accessUpdated: this.props.accessUpdated,
+        accessIsLoading: this.props.accessIsLoading
+      });
+
     }
 }
 

src/store/reducers.js

@@ -1,3 +1,4 @@
+import get from "lodash/get";
 import {
   BREAKING_NEWS_UPDATED,
   CLIENT_SIDE_RENDERED,
@@ -11,6 +12,7 @@ import {
   SUBSCRIPTION_GROUP_UPDATED,
   PAYMENT_OPTIONS_UPDATED, ACCESS_BEING_LOADED, ACCESS_UPDATED, METER_UPDATED
 } from './actions';
+import {computeAccess} from "../utils";
 
 function setToTrueOnEvent() {
   const events = Array.from(arguments);
@@ -86,7 +88,7 @@ function accessLoadingReducer(state = true, action) {
 
 function accessReducer(state = {}, action) {
   switch (action.type) {
-    case ACCESS_UPDATED: return Object.assign({}, state, action.access);
+    case ACCESS_UPDATED: return computeAccess(state, action);
     default: return state;
   }
 }

src/utils.js

@@ -1,4 +1,6 @@
 // FIXME: TEST THIS
+import get from "lodash/get";
+
 export function removeDuplicateStories(existingStories, newStories, keyFn = story => story.id) {
   const existingStoryIds = existingStories.map(keyFn);
   return newStories.filter(story => !existingStoryIds.includes(keyFn(story)));
@@ -45,4 +47,18 @@ export const getQliticsSchema = (story = {}, card = {}, element = {}) => {
     'story-element-id': element.id,
     'story-element-type': element.subtype || element.type
   });
+};
+
+
+export const computeAccess = (previousState, currentState) => {
+  const currentAccess = get(currentState, ["access"], {});
+  const currentStoryId = get(Object.keys(currentAccess), [0], "");
+  if(currentStoryId in previousState){
+    const storyAccess = previousState[currentStoryId];
+    if(storyAccess.granted !== currentAccess[currentStoryId].granted || storyAccess.grantReason !== currentAccess[currentStoryId].grantReason){
+      return {...previousState, ...currentAccess};
+    }
+    return previousState;
+  }
+  return {...previousState, ...currentAccess};
 };