@atlaskit/help 4.2.3 → 6.0.0

package/dist/es2019/components/contexts/navigationContext.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React, { useReducer, useEffect, useCallback, useMemo } from 'react';
 import { REQUEST_STATE } from '../../model/Requests';
 import { ARTICLE_TYPE } from '../../model/Help';
 import { createCtx } from '../../util/hooks/ctx';
@@ -9,10 +9,178 @@ import { useHomeContext } from './homeContext';
 import { useSearchContext } from './searchContext';
 import { useHeaderContext } from './headerContext';
 export const [useNavigationContext, CtxProvider] = createCtx();
+
+const getNewHistoryItem = (id, type) => {
+  let uid = Math.floor(Math.random() * Math.pow(10, 17));
+  const newHistoryItem = {
+    uid,
+    id,
+    type,
+    state: REQUEST_STATE.loading
+  };
+  return newHistoryItem;
+};
+/**
+ * Get a simplified version of the history. The items in this array should
+ * have only the ID, UID and state === 'reload'
+ */
+
+
+const getSimpleHistory = history => history.map(historyItem => {
+  const {
+    id,
+    uid,
+    type
+  } = historyItem;
+  return {
+    id,
+    uid,
+    state: REQUEST_STATE.reload,
+    type
+  };
+});
+/**
+ * Get the last article in the history
+ */
+
+
+const getCurrentArticle = history => history[history.length - 1];
+/**
+ * Get an ArticleItem/WhatsNewArticleItem based on the last article in the history
+ */
+
+
+const getCurrentArticleItemSlim = history => {
+  const {
+    article,
+    type
+  } = getCurrentArticle(history);
+
+  if (article) {
+    if (type === ARTICLE_TYPE.HELP_ARTICLE) {
+      const {
+        body,
+        relatedArticles,
+        ...articleItemData
+      } = article;
+      const currentArticleSlimData = articleItemData;
+      return currentArticleSlimData;
+    } else if (type === ARTICLE_TYPE.WHATS_NEW) {
+      const {
+        description,
+        ...whatsNewArticleItemData
+      } = article;
+      const currentWhatsNewArticleSlimData = whatsNewArticleItemData;
+      return currentWhatsNewArticleSlimData;
+    }
+  }
+};
+
+const getViewForArticleId = articleId => {
+  let view = VIEW.DEFAULT_CONTENT;
+
+  if (articleId.type === ARTICLE_TYPE.HELP_ARTICLE) {
+    if (articleId.id) {
+      view = VIEW.ARTICLE;
+    } else {
+      view = VIEW.DEFAULT_CONTENT;
+    }
+  } else if (articleId.type === ARTICLE_TYPE.WHATS_NEW) {
+    if (articleId.id) {
+      view = VIEW.WHATS_NEW_ARTICLE;
+    } else {
+      view = VIEW.WHATS_NEW;
+    }
+  }
+
+  return view;
+};
+
+const navigationReducer = ({
+  articleId: currentArticleId,
+  history: currentHistory,
+  view: currentView
+}, action) => {
+  let newState = {
+    articleId: currentArticleId,
+    history: currentHistory,
+    view: currentView
+  };
+
+  if (action.type === 'newArticle' && action.payload) {
+    const {
+      payload: newArticleId
+    } = action;
+    newState = {
+      articleId: newArticleId,
+      history: [...currentHistory, getNewHistoryItem(newArticleId.id, newArticleId.type)],
+      view: getViewForArticleId(newArticleId)
+    };
+  } else if (action.type === 'updateHistoryItem' && action.payload) {
+    const {
+      payload: HistoryItemUpdate
+    } = action;
+    const index = currentHistory.findIndex(historyItemTemp => historyItemTemp.uid === HistoryItemUpdate.uid);
+
+    if (index !== -1) {
+      const newHistory = [...currentHistory];
+      newHistory[index] = { ...HistoryItemUpdate
+      };
+      newState = {
+        articleId: currentArticleId,
+        history: newHistory,
+        view: getViewForArticleId(currentArticleId)
+      };
+    }
+  } else if (action.type === 'removeLastHistoryItem') {
+    const newHistory = currentHistory.length > 0 ? [...currentHistory] : [];
+
+    if (newHistory.length > 0) {
+      newHistory.splice(-1);
+    }
+
+    newState = {
+      articleId: currentArticleId,
+      history: newHistory,
+      view: getViewForArticleId(currentArticleId)
+    };
+  } else if (action.type === 'removeAllHistoryItems') {
+    const defaultHistory = [];
+    newState = {
+      articleId: currentArticleId,
+      history: defaultHistory,
+      view: VIEW.DEFAULT_CONTENT
+    };
+  } else if (action.type === 'updateArticleId' && action.payload) {
+    const {
+      payload: newArticleId
+    } = action;
+    newState = {
+      articleId: newArticleId,
+      history: currentHistory,
+      view: getViewForArticleId(newArticleId)
+    };
+  } else if (action.type === 'updateView' && action.payload) {
+    const {
+      payload: newView
+    } = action;
+    newState = {
+      articleId: currentArticleId,
+      history: currentHistory,
+      view: newView
+    };
+  }
+
+  return newState;
+};
+
 export const NavigationContextProvider = ({
-  articleId: propsArticleId,
+  articleId: propsArticleId = {
+    id: '',
+    type: ARTICLE_TYPE.HELP_ARTICLE
+  },
   articleIdSetter,
-  history: propsHistory,
+  history: propsHistory = [],
   historySetter,
   children
 }) => {
@@ -28,403 +196,224 @@ export const NavigationContextProvider = ({
   } = useHomeContext();
   const {
     onSearch,
-    isSearchResultVisible
+    isSearchResultVisible,
+    searchValue
   } = useSearchContext();
   const {
     onCloseButtonClick
   } = useHeaderContext();
-  const [view, setView] = useState(VIEW.DEFAULT_CONTENT);
-  const articleId = useMemo(() => {
-    if ((propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.id) === undefined && (propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.type) === undefined) {
-      return undefined;
+  const [{
+    articleId: currentArticleId,
+    history: currentHistory,
+    view: currentView
+  }, dispatchNavigationAction] = useReducer(navigationReducer, {
+    articleId: propsArticleId,
+    history: propsHistory,
+    view: VIEW.DEFAULT_CONTENT
+  });
+  const isOverlayVisible = useMemo(() => {
+    return currentView === VIEW.ARTICLE || currentView === VIEW.SEARCH || currentView === VIEW.WHATS_NEW || currentView === VIEW.WHATS_NEW_ARTICLE;
+  }, [currentView]);
+  const isDefaultContentDefined = useMemo(() => {
+    return homeContent !== undefined || homeOptions !== undefined;
+  }, [homeContent, homeOptions]);
+  const canNavigateBack = useMemo(() => {
+    /**
+     * - If default content isn't defined and the history only has one article,
+     * we should not display the back button
+     * - If the prop.article.setArticleId is not defined, we should also hide the back
+     * button because we are not able to navigate though the history without it
+     */
+    if (currentHistory.length === 1 && !isDefaultContentDefined || currentView === VIEW.WHATS_NEW && !isDefaultContentDefined) {
+      return false;
     }
+    /**
+     * if an overlay is visible return true to display the back buton
+     */
 
-    return {
-      id: propsArticleId.id ? propsArticleId.id : '',
-      type: propsArticleId.type ? propsArticleId.type : ARTICLE_TYPE.HELP_ARTICLE
-    };
-  }, [propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.id, propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.type]);
-  const [history, setHistory] = useState(propsHistory ? propsHistory : []);
-  const tempHistory = useRef(propsHistory ? propsHistory : []);
-  const clearHistory = useCallback(() => {
-    if (tempHistory.current.length > 0) {
-      if (!articleIdSetter) {
-        return;
-      } // Clear History
 
+    return isOverlayVisible;
+  }, [currentHistory.length, isDefaultContentDefined, isOverlayVisible, currentView]);
+  const fetchArticleData = useCallback(async historyItem => {
+    try {
+      let article;
 
-      tempHistory.current = [];
-      setHistory(tempHistory.current); // Clear host history using the historySetter
+      switch (historyItem.type) {
+        case ARTICLE_TYPE.HELP_ARTICLE:
+          if (!onGetHelpArticle) {
+            throw new Error('onGetHelpArticle prop not defined');
+          }
 
-      historySetter && historySetter(tempHistory.current); // Set article ID to ''
+          article = await onGetHelpArticle({
+            id: historyItem.id,
+            type: historyItem.type
+          });
+          break;
 
-      articleIdSetter({
-        id: '',
-        type: ARTICLE_TYPE.HELP_ARTICLE
-      });
-    }
-  }, [articleIdSetter, historySetter]);
-  const isDefaultContentDefined = useCallback(() => {
-    return homeContent !== undefined || homeOptions !== undefined;
-  }, [homeContent, homeOptions]);
+        case ARTICLE_TYPE.WHATS_NEW:
+          if (!onGetWhatsNewArticle) {
+            throw new Error('onGetWhatsNewArticle prop not defined');
+          }
 
-  const getNewHistoryItem = (id, type) => {
-    let uid = Math.floor(Math.random() * Math.pow(10, 17));
-    const newHistoryItem = {
-      uid,
-      id,
-      type,
-      state: REQUEST_STATE.loading
-    };
-    return newHistoryItem;
-  };
-  /**
-   * Get a simplified version of the history. The items in the history have only
-   * the ID, UID and state === 'reload'
-   */
+          if (historyItem.id === '') {
+            break;
+          }
 
+          article = await onGetWhatsNewArticle({
+            id: historyItem.id,
+            type: historyItem.type
+          });
+          break;
 
-  const getSimpleHistory = useCallback(fullHistory => {
-    const copyHistory = fullHistory.map(tempHistoryItem => {
-      const {
-        id,
-        uid,
-        type
-      } = tempHistoryItem;
-      return {
-        id,
-        uid,
-        state: REQUEST_STATE.reload,
-        type
-      };
-    });
-    return copyHistory;
-  }, []);
-  const updateView = useCallback(() => {
-    if (isSearchResultVisible) {
-      setView(VIEW.SEARCH);
-    } else if ((articleId === null || articleId === void 0 ? void 0 : articleId.type) === ARTICLE_TYPE.HELP_ARTICLE) {
-      if (articleId.id) {
-        setView(VIEW.ARTICLE);
-      } else {
-        setView(VIEW.DEFAULT_CONTENT);
-      }
-    } else if ((articleId === null || articleId === void 0 ? void 0 : articleId.type) === ARTICLE_TYPE.WHATS_NEW) {
-      if (articleId.id) {
-        setView(VIEW.WHATS_NEW_ARTICLE);
-      } else {
-        setView(VIEW.WHATS_NEW);
+        default:
+          throw new Error('onGetHelpArticle prop not defined');
+          break;
       }
-    }
-  }, [articleId, isSearchResultVisible]);
-  const updateHistoryItem = useCallback((historyItem, update) => {
-    const index = tempHistory.current.findIndex(historyItemTemp => historyItemTemp.uid === historyItem.uid);
 
-    if (index !== -1) {
-      const newHistory = [...tempHistory.current];
-      newHistory[index] = { ...historyItem,
-        ...update
+      return { ...historyItem,
+        ...(article && {
+          article
+        }),
+        state: REQUEST_STATE.done
       };
-      tempHistory.current = newHistory;
-      setHistory(tempHistory.current);
-      const simpleHistory = getSimpleHistory(tempHistory.current);
-      historySetter && historySetter(simpleHistory);
-    }
-  }, [getSimpleHistory, historySetter]);
-  const reloadHelpArticle = useCallback(async historyItem => {
-    let reloadingHelpArticleHistoryItem = historyItem;
-
-    if (onGetHelpArticle) {
-      // if the historyItem isn't a "Help article", display the error message
-      if (historyItem.type !== ARTICLE_TYPE.HELP_ARTICLE) {
-        reloadingHelpArticleHistoryItem = { ...reloadingHelpArticleHistoryItem,
-          state: REQUEST_STATE.error
-        };
-      } else {
-        reloadingHelpArticleHistoryItem.state = REQUEST_STATE.loading;
-        updateHistoryItem(reloadingHelpArticleHistoryItem);
-
-        try {
-          const article = await onGetHelpArticle({
-            id: reloadingHelpArticleHistoryItem.id,
-            type: reloadingHelpArticleHistoryItem.type
-          });
-          reloadingHelpArticleHistoryItem = { ...reloadingHelpArticleHistoryItem,
-            state: REQUEST_STATE.done,
-            article
-          };
-        } catch (error) {
-          reloadingHelpArticleHistoryItem = { ...reloadingHelpArticleHistoryItem,
-            state: REQUEST_STATE.error
-          };
-        }
-      }
-    } else {
-      reloadingHelpArticleHistoryItem = { ...reloadingHelpArticleHistoryItem,
+    } catch (error) {
+      return { ...historyItem,
         state: REQUEST_STATE.error
       };
     }
+  }, [onGetHelpArticle, onGetWhatsNewArticle]);
+  const reloadArticle = useCallback(async historyItem => {
+    let historyItemToReload = { ...historyItem
+    };
 
-    updateHistoryItem(reloadingHelpArticleHistoryItem);
-  }, [onGetHelpArticle, updateHistoryItem]);
-  const reloadWhatsNewArticle = useCallback(async historyItem => {
-    let reloadingWhatsNewArticleHistoryItem = historyItem;
-
-    if (onGetWhatsNewArticle) {
-      if (historyItem.type !== ARTICLE_TYPE.WHATS_NEW) {
-        // if the historyItem isn't a "What's new article", display the error message
-        reloadingWhatsNewArticleHistoryItem = { ...reloadingWhatsNewArticleHistoryItem,
-          state: REQUEST_STATE.error
-        };
-      } else {
-        reloadingWhatsNewArticleHistoryItem.state = REQUEST_STATE.loading;
-        updateHistoryItem(reloadingWhatsNewArticleHistoryItem);
-
-        try {
-          const article = await onGetWhatsNewArticle({
-            id: reloadingWhatsNewArticleHistoryItem.id,
-            type: reloadingWhatsNewArticleHistoryItem.type
-          });
-          reloadingWhatsNewArticleHistoryItem = { ...reloadingWhatsNewArticleHistoryItem,
-            state: REQUEST_STATE.done,
-            article
-          };
-        } catch (error) {
-          reloadingWhatsNewArticleHistoryItem = { ...reloadingWhatsNewArticleHistoryItem,
-            state: REQUEST_STATE.error
-          };
-        }
-      }
+    if (historyItem.type === ARTICLE_TYPE.HELP_ARTICLE || historyItem.type === ARTICLE_TYPE.WHATS_NEW) {
+      historyItemToReload.state = REQUEST_STATE.loading;
     } else {
-      reloadingWhatsNewArticleHistoryItem = { ...reloadingWhatsNewArticleHistoryItem,
-        state: REQUEST_STATE.error
-      };
+      historyItemToReload.state = REQUEST_STATE.error;
     }
 
-    updateHistoryItem(reloadingWhatsNewArticleHistoryItem);
-  }, [onGetWhatsNewArticle, updateHistoryItem]);
-  const fetchArticleData = useCallback(async historyItem => {
-    if (historyItem.type === ARTICLE_TYPE.HELP_ARTICLE) {
-      if (onGetHelpArticle) {
-        try {
-          const article = await onGetHelpArticle({
-            id: historyItem.id,
-            type: historyItem.type
-          });
-          updateHistoryItem(historyItem, {
-            state: REQUEST_STATE.done,
-            article
-          });
-        } catch (error) {
-          updateHistoryItem(historyItem, {
-            state: REQUEST_STATE.error
-          });
-        }
-      } else {
-        updateHistoryItem(historyItem, {
-          state: REQUEST_STATE.error
-        });
-      }
-    } else if (historyItem.type === ARTICLE_TYPE.WHATS_NEW) {
-      if (onGetWhatsNewArticle) {
-        try {
-          const article = await onGetWhatsNewArticle({
-            id: historyItem.id,
-            type: historyItem.type
-          });
-          updateHistoryItem(historyItem, {
-            state: REQUEST_STATE.done,
-            article
-          });
-        } catch (error) {
-          updateHistoryItem(historyItem, {
-            state: REQUEST_STATE.error
-          });
-        }
-      } else {
-        updateHistoryItem(historyItem, {
-          state: REQUEST_STATE.error
-        });
-      }
-    }
-  }, [onGetHelpArticle, onGetWhatsNewArticle, updateHistoryItem]);
-  const getCurrentArticle = useCallback(() => {
-    const currentArticleItem = tempHistory.current[tempHistory.current.length - 1];
-    return currentArticleItem;
+    dispatchNavigationAction({
+      type: 'updateHistoryItem',
+      payload: historyItemToReload
+    });
   }, []);
-  const getCurrentArticleItemData = useCallback(() => {
-    const {
-      article,
-      type
-    } = getCurrentArticle();
-
-    if (article) {
-      if (type === ARTICLE_TYPE.HELP_ARTICLE) {
-        const {
-          body,
-          relatedArticles,
-          ...articleItemData
-        } = article;
-        const currentArticleSlimData = articleItemData;
-        return currentArticleSlimData;
-      } else if (type === ARTICLE_TYPE.WHATS_NEW) {
-        const {
-          description,
-          ...whatsNewArticleItemData
-        } = article;
-        const currentWhatsNewArticleSlimData = whatsNewArticleItemData;
-        return currentWhatsNewArticleSlimData;
-      }
-    }
-  }, [getCurrentArticle]);
-  const isOverlayVisible = useCallback(() => {
-    return view === VIEW.ARTICLE || view === VIEW.SEARCH || view === VIEW.WHATS_NEW || view === VIEW.WHATS_NEW_ARTICLE;
-  }, [view]);
-  const canNavigateBack = useCallback(() => {
-    /**
-     * - If default content isn't defined and the history only has one article,
-     * we should not display the back button
-     * - If the prop.article.setArticleId is not defined, we should also hide the back
-     * button because we are not able to navigate though the history without it
-     */
-    if (tempHistory.current.length === 1 && !isDefaultContentDefined() || view === VIEW.WHATS_NEW && !isDefaultContentDefined()) {
-      return false;
-    }
-    /**
-     * if an overlay is visible return true to display the back buton
-     */
-
-
-    return isOverlayVisible();
-  }, [isDefaultContentDefined, isOverlayVisible, view]);
   const navigateBack = useCallback(async () => {
-    if (!articleIdSetter) {
-      return;
-    }
     /**
      * If the user is in the search screen, just clean the search. That will make the search results
      * overlay disapear and show the last element in the history or (if is defined) the default content
      * */
-
-
-    if (view === VIEW.SEARCH && onSearch) {
-      onSearch('');
-      return;
+    if (currentView === VIEW.SEARCH && onSearch) {
+      if (searchValue !== '') {
+        onSearch('');
+        return;
+      } else {
+        dispatchNavigationAction({
+          type: 'updateView',
+          payload: currentArticleId.type
+        });
+        return;
+      }
     } //  if the history is not empty and ...
 
 
-    if (tempHistory.current.length > 0) {
+    if (currentHistory.length > 0) {
       // the history has more than one article, navigate back through the history
-      if (tempHistory.current.length > 1) {
+      if (currentHistory.length > 1) {
         // Remove last element
-        const newHistoryValue = [...tempHistory.current.slice(0, -1)]; // update tempHistory and history
-
-        tempHistory.current = newHistoryValue;
-        setHistory(tempHistory.current); // Update host history using the historySetter
-
-        historySetter && historySetter(tempHistory.current); // If the state of the current article (last article in the history)
-        // is 'reload', fetch the article
-
-        const lastHistoryItem = getCurrentArticle();
-
-        if (lastHistoryItem.state === REQUEST_STATE.reload) {
-          // fetch article data for the new history Item
-          fetchArticleData(lastHistoryItem);
-        }
-        /**
-         * If the state of the current article (last article in the history)
-         * is NOT 'reload', it means the article is already loaded, is loading or
-         * it had an error (which is handled and we display an error messages with
-         * a "try again" button). So we just need to set the host article ID === to the
-         * current article ID using the "articleIdSetter" prop function
-         */
-
-
-        if (lastHistoryItem) {
-          articleIdSetter({
-            id: lastHistoryItem.id,
-            type: lastHistoryItem.type
-          });
-        }
-      } else if (tempHistory.current.length === 1) {
+        dispatchNavigationAction({
+          type: 'removeLastHistoryItem'
+        });
+      } else if (currentHistory.length === 1) {
         // but if the history only has one item, clear the history
-        clearHistory();
+        dispatchNavigationAction({
+          type: 'removeAllHistoryItems'
+        });
       }
     }
-  }, [articleIdSetter, clearHistory, fetchArticleData, getCurrentArticle, historySetter, onSearch, view]);
+  }, [currentView, onSearch, currentHistory.length, searchValue, currentArticleId.type]);
   const onClose = useCallback((event, analyticsEvent) => {
     if (onCloseButtonClick) {
-      clearHistory();
+      dispatchNavigationAction({
+        type: 'removeAllHistoryItems'
+      });
       onCloseButtonClick(event, analyticsEvent);
     }
-  }, [clearHistory, onCloseButtonClick]);
+  }, [onCloseButtonClick]);
   useEffect(() => {
-    if (!articleIdSetter) {
-      return;
+    if (isSearchResultVisible) {
+      dispatchNavigationAction({
+        type: 'updateView',
+        payload: VIEW.SEARCH
+      });
     }
+  }, [isSearchResultVisible]);
+  useEffect(() => {
+    const simpleHistory = getSimpleHistory(currentHistory);
+    historySetter && historySetter(simpleHistory);
+  }, [historySetter, currentHistory]);
+  useEffect(() => {
     /**
-     * If the article type is HELP_ARTICLE and the ID is defined we add a new historyItem
-     *
-     * If the article type is WHATS_NEW it doesn't matter if the the articleId.id is defined or not, we want
-     * to add it to the history
-     */
-
-
-    if ((articleId === null || articleId === void 0 ? void 0 : articleId.type) === ARTICLE_TYPE.HELP_ARTICLE && articleId !== null && articleId !== void 0 && articleId.id || (articleId === null || articleId === void 0 ? void 0 : articleId.type) === ARTICLE_TYPE.WHATS_NEW) {
-      // get the last History Item
-      const lastHistoryItem = getCurrentArticle(); // If the last history item articleId isn't different to the current articleId don't do anything
-
-      if (lastHistoryItem && lastHistoryItem.id === articleId.id) {
-        return;
-      } // Create a new History Item
-
-
-      const newHistoryItem = getNewHistoryItem(articleId.id, articleId.type); // add add it to the tempHistory variable
-
-      tempHistory.current = [...tempHistory.current, { ...newHistoryItem
-      }];
-      updateHistoryItem(newHistoryItem); // fetch article data for the new history Item
-
-      fetchArticleData(newHistoryItem);
+     * If the propsArticleId.id (host articleId) is different from currentArticleId.id (internal articleId)
+     * it means the host updated propsArticleId and we need to use this new value to load a new article.
+     * */
+    if ((propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.id) !== currentArticleId.id || (propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.type) !== currentArticleId.type) {
+      dispatchNavigationAction({
+        type: 'newArticle',
+        payload: propsArticleId
+      });
     } else {
-      // articleId is undefined only during the first execution of this effect
-      if (articleId === undefined) {
-        const lastHistoryItem = getCurrentArticle();
-
-        if (lastHistoryItem) {
-          articleIdSetter({
+      /**
+       * If the propsArticleId.id (host articleId) is equal to currentArticleId.id (internal articleId)
+       * and the id from the last history item is different from currentArticleId.id, it means the history
+       * changed and we need to update the host articleId (propsArticleId) using 'articleIdSetter' and the local
+       * history using the dispatchNavigationAction reducer
+       * */
+      const lastHistoryItem = currentHistory.length > 0 ? getCurrentArticle(currentHistory) : getNewHistoryItem('', ARTICLE_TYPE.HELP_ARTICLE);
+
+      if (articleIdSetter && lastHistoryItem && (currentArticleId.id !== lastHistoryItem.id || currentArticleId.type !== lastHistoryItem.type)) {
+        dispatchNavigationAction({
+          type: 'updateArticleId',
+          payload: {
             id: lastHistoryItem.id,
             type: lastHistoryItem.type
-          }); // fetch article data for the new history Item
-
-          fetchArticleData(lastHistoryItem);
-        }
-      } else {
-        // If article ID is empty clear the history
-        if (!getCurrentArticle()) {
-          clearHistory();
-        }
+          }
+        });
+        articleIdSetter({
+          id: lastHistoryItem.id,
+          type: lastHistoryItem.type
+        });
       }
     }
-  }, [articleId, articleIdSetter, clearHistory, fetchArticleData, getCurrentArticle, updateHistoryItem]);
-  /**
-   * VIEW effect
-   * Set the view value based on the values of articleId
-   */
-
+  }, [currentArticleId, propsArticleId, currentHistory, articleIdSetter]);
   useEffect(() => {
-    updateView();
-  }, [articleId, updateView]);
+    const requestNewArticle = async historyItem => {
+      const historyItemUpdate = await fetchArticleData(historyItem);
+      dispatchNavigationAction({
+        type: 'updateHistoryItem',
+        payload: historyItemUpdate
+      });
+    };
+    /**
+     * If the last history item state is "loading" or "reload", we need to request the article (fetch article from API)
+     */
+
+
+    const lastHistoryItem = getCurrentArticle(currentHistory);
+
+    if ((lastHistoryItem === null || lastHistoryItem === void 0 ? void 0 : lastHistoryItem.state) === REQUEST_STATE.loading || (lastHistoryItem === null || lastHistoryItem === void 0 ? void 0 : lastHistoryItem.state) === REQUEST_STATE.reload) {
+      requestNewArticle(lastHistoryItem);
+    }
+  }, [currentArticleId, currentHistory, fetchArticleData]);
   return /*#__PURE__*/React.createElement(CtxProvider, {
     value: {
-      view,
-      articleId,
+      view: currentView,
+      articleId: currentArticleId,
       setArticleId: articleIdSetter,
-      history,
-      getCurrentArticle,
-      getCurrentArticleItemData,
-      reloadHelpArticle: onGetHelpArticle && reloadHelpArticle,
-      reloadWhatsNewArticle: onGetWhatsNewArticle && reloadWhatsNewArticle,
+      history: currentHistory,
+      getCurrentArticle: () => getCurrentArticle(currentHistory),
+      getCurrentArticleItemData: () => getCurrentArticleItemSlim(currentHistory),
+      reloadHelpArticle: onGetHelpArticle && reloadArticle,
+      reloadWhatsNewArticle: onGetWhatsNewArticle && reloadArticle,
       canNavigateBack,
       navigateBack,
       isOverlayVisible,