eager load documentation data only if not already in store

wri · Nov 6, 2024 · 6e8f287 · 6e8f287
1 parent be83de4
commit 6e8f287
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 24 deletions.
diff --git a/components/operators-detail/layout.js b/components/operators-detail/layout.js
@@ -50,7 +50,7 @@ const COUNTRIES_FRENCH_FIX = {
 
 // shared getInitialProps for operator's detail pages
 export async function getInitialProps({ url, res, store, ...rest }) {
-  const { operatorsDetail } = store.getState();
+  let { operatorsDetail } = store.getState();
   const requests = [];
   const {id} = url.query;
   const tab = url.asPath.split('/').pop();
@@ -66,21 +66,24 @@ export async function getInitialProps({ url, res, store, ...rest }) {
     return { redirectTo: url.asPath.replace(`/${id}`, `/${operator.slug}`) }
   }
 
-  if (operatorsDetail.data.slug !== id) {
+  const operatorChanged = operatorsDetail.data.slug !== id;
+  if (operatorChanged) {
     await store.dispatch(getOperatorBySlug(id));
-    const operator = store.getState().operatorsDetail.data;
+  }
+  operatorsDetail = store.getState().operatorsDetail;
+  const operator = operatorsDetail.data;
+  if (operator && !isEmpty(operator)) {
+    if (operatorsDetail.documentation.operatorId !== operator.id && tab === 'documentation') {
+      requests.push(store.dispatch(getOperatorDocumentation(operator.id)));
+      requests.push(store.dispatch(getOperatorDocumentationCurrent(operator.id)));
+      requests.push(store.dispatch(getOperatorTimeline(operator.id)));
+    }
 
-    if (operator && !isEmpty(operator)) {
+    if (operatorsDetail.observations.operatorId !== operator.id && (tab === 'observations' || tab === 'overview')) {
       requests.push(store.dispatch(getOperatorObservations(operator.id)));
-
-      if (tab === 'documentation') {
-        requests.push(store.dispatch(getOperatorDocumentation(operator.id)));
-        requests.push(store.dispatch(getOperatorDocumentationCurrent(operator.id)));
-        requests.push(store.dispatch(getOperatorTimeline(operator.id)));
-      }
-    } else {
-      return { errorCode: 404 };
     }
+  } else {
+    return { errorCode: 404 };
   }
 
   await Promise.all(requests);
@@ -95,9 +98,12 @@ class OperatorsDetailLayout extends React.Component {
     const operator = operatorsDetail.data;
 
     // eager load documentation tab as high probabilty user will switch to it
-    this.props.getOperatorDocumentation(operator.id);
-    this.props.getOperatorDocumentationCurrent(operator.id);
-    this.props.getOperatorTimeline(operator.id);
+    // only if not loaded
+    if (operatorsDetail.documentation.data.length === 0) {
+      this.props.getOperatorDocumentation(operator.id);
+      this.props.getOperatorDocumentationCurrent(operator.id);
+      this.props.getOperatorTimeline(operator.id);
+    }
   }
 
   /**
@@ -106,6 +112,7 @@ class OperatorsDetailLayout extends React.Component {
    */
   getTabOptions() {
     const operatorsDetail = this.props.operatorsDetail.data;
+    const observationsCount = operatorsDetail.observations ? operatorsDetail.observations.filter(o => !o.hidden).length : 0;
 
     return TABS_OPERATORS_DETAIL.map((tab) => {
       let number;
@@ -115,7 +122,7 @@ class OperatorsDetailLayout extends React.Component {
           break;
         }
         case 'observations': {
-          number = this.props.operatorObservations.filter(o => !o.hidden).length;
+          number = observationsCount;
           break;
         }
 
@@ -218,7 +225,7 @@ export default injectIntl(
   connect(
     (state) => ({
       user: state.user,
-      operatorsDetail: state.operatorsDetail,
+      operatorsDetail: state.operatorsDetail
     }),
     {
       getOperator,

diff --git a/modules/operators-detail.js b/modules/operators-detail.js
@@ -44,9 +44,9 @@ const initialState = {
   error: false,
   observations: {
     data: [],
-    timestamp: null,
     loading: false,
     error: false,
+    timestamp: null
   },
   documentation: {
     data: [],
@@ -264,10 +264,12 @@ export function getOperatorBySlug(slug, loadFMUS = false) {
 
     const includes = [
       'country',
-      'fmus'
+      'fmus',
+      'observations'
     ];
     const fields = {
       'fields[countries]': 'name,id,iso',
+      'fields[observations]': 'id,hidden'
     }
     if (!loadFMUS) {
       fields['fields[fmus]'] = 'name,id';
@@ -343,7 +345,7 @@ export function getOperatorDocumentation(id) {
   return (dispatch, getState) => {
     const { user, language, operatorsDetail } = getState();
     const date = operatorsDetail.date;
-    const metadata = { timestamp: new Date() };
+    const metadata = { timestamp: new Date(), operatorId: id };
 
     dispatch({ type: GET_OPERATOR_DOCUMENTATION_LOADING, metadata });
 
@@ -400,8 +402,9 @@ export function getOperatorObservations(operatorId) {
     ];
 
     const timestamp = new Date();
+    const metadata = { timestamp, operatorId };
     // Waiting for fetch from server -> Dispatch loading
-    dispatch({ type: GET_OPERATOR_OBSERVATIONS_LOADING, metadata: { timestamp } });
+    dispatch({ type: GET_OPERATOR_OBSERVATIONS_LOADING, metadata });
 
     return API.get('observations', {
       locale: language,
@@ -416,15 +419,15 @@ export function getOperatorObservations(operatorId) {
         dispatch({
           type: GET_OPERATOR_OBSERVATIONS_SUCCESS,
           payload: dataParsed,
-          metadata: { timestamp }
+          metadata
         });
       })
       .catch((err) => {
         // Fetch from server ko -> Dispatch error
         dispatch({
           type: GET_OPERATOR_OBSERVATIONS_ERROR,
           payload: err.message,
-          metadata: { timestamp }
+          metadata
         });
       });
   };
@@ -433,7 +436,7 @@ export function getOperatorObservations(operatorId) {
 export function getOperatorDocumentationCurrent(id) {
   return (dispatch, getState) => {
     const { user, language } = getState();
-    const metadata = { timestamp: new Date() };
+    const metadata = { timestamp: new Date(), operatorId: id };
 
     dispatch({ type: GET_OPERATOR_CURRENT_DOCUMENTATION_LOADING, metadata });