@atlaskit/help 4.2.3 → 6.0.0

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

@@ -1,15 +1,15 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-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';
@@ -26,12 +26,176 @@ var _createCtx = createCtx(),
     CtxProvider = _createCtx2[1];
 
 export { useNavigationContext, CtxProvider };
-export var NavigationContextProvider = function NavigationContextProvider(_ref) {
-  var propsArticleId = _ref.articleId,
-      articleIdSetter = _ref.articleIdSetter,
-      propsHistory = _ref.history,
-      historySetter = _ref.historySetter,
-      children = _ref.children;
+
+var getNewHistoryItem = function getNewHistoryItem(id, type) {
+  var uid = Math.floor(Math.random() * Math.pow(10, 17));
+  var newHistoryItem = {
+    uid: uid,
+    id: id,
+    type: 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'
+ */
+
+
+var getSimpleHistory = function getSimpleHistory(history) {
+  return history.map(function (historyItem) {
+    var id = historyItem.id,
+        uid = historyItem.uid,
+        type = historyItem.type;
+    return {
+      id: id,
+      uid: uid,
+      state: REQUEST_STATE.reload,
+      type: type
+    };
+  });
+};
+/**
+ * Get the last article in the history
+ */
+
+
+var _getCurrentArticle2 = function getCurrentArticle(history) {
+  return history[history.length - 1];
+};
+/**
+ * Get an ArticleItem/WhatsNewArticleItem based on the last article in the history
+ */
+
+
+var getCurrentArticleItemSlim = function getCurrentArticleItemSlim(history) {
+  var _getCurrentArticle = _getCurrentArticle2(history),
+      article = _getCurrentArticle.article,
+      type = _getCurrentArticle.type;
+
+  if (article) {
+    if (type === ARTICLE_TYPE.HELP_ARTICLE) {
+      var _ref = article,
+          body = _ref.body,
+          relatedArticles = _ref.relatedArticles,
+          articleItemData = _objectWithoutProperties(_ref, ["body", "relatedArticles"]);
+
+      var currentArticleSlimData = articleItemData;
+      return currentArticleSlimData;
+    } else if (type === ARTICLE_TYPE.WHATS_NEW) {
+      var _ref2 = article,
+          description = _ref2.description,
+          whatsNewArticleItemData = _objectWithoutProperties(_ref2, ["description"]);
+
+      var currentWhatsNewArticleSlimData = whatsNewArticleItemData;
+      return currentWhatsNewArticleSlimData;
+    }
+  }
+};
+
+var getViewForArticleId = function getViewForArticleId(articleId) {
+  var 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;
+};
+
+var navigationReducer = function navigationReducer(_ref3, action) {
+  var currentArticleId = _ref3.articleId,
+      currentHistory = _ref3.history,
+      currentView = _ref3.view;
+  var newState = {
+    articleId: currentArticleId,
+    history: currentHistory,
+    view: currentView
+  };
+
+  if (action.type === 'newArticle' && action.payload) {
+    var newArticleId = action.payload;
+    newState = {
+      articleId: newArticleId,
+      history: [].concat(_toConsumableArray(currentHistory), [getNewHistoryItem(newArticleId.id, newArticleId.type)]),
+      view: getViewForArticleId(newArticleId)
+    };
+  } else if (action.type === 'updateHistoryItem' && action.payload) {
+    var HistoryItemUpdate = action.payload;
+    var index = currentHistory.findIndex(function (historyItemTemp) {
+      return historyItemTemp.uid === HistoryItemUpdate.uid;
+    });
+
+    if (index !== -1) {
+      var newHistory = _toConsumableArray(currentHistory);
+
+      newHistory[index] = _objectSpread({}, HistoryItemUpdate);
+      newState = {
+        articleId: currentArticleId,
+        history: newHistory,
+        view: getViewForArticleId(currentArticleId)
+      };
+    }
+  } else if (action.type === 'removeLastHistoryItem') {
+    var _newHistory = currentHistory.length > 0 ? _toConsumableArray(currentHistory) : [];
+
+    if (_newHistory.length > 0) {
+      _newHistory.splice(-1);
+    }
+
+    newState = {
+      articleId: currentArticleId,
+      history: _newHistory,
+      view: getViewForArticleId(currentArticleId)
+    };
+  } else if (action.type === 'removeAllHistoryItems') {
+    var defaultHistory = [];
+    newState = {
+      articleId: currentArticleId,
+      history: defaultHistory,
+      view: VIEW.DEFAULT_CONTENT
+    };
+  } else if (action.type === 'updateArticleId' && action.payload) {
+    var _newArticleId = action.payload;
+    newState = {
+      articleId: _newArticleId,
+      history: currentHistory,
+      view: getViewForArticleId(_newArticleId)
+    };
+  } else if (action.type === 'updateView' && action.payload) {
+    var newView = action.payload;
+    newState = {
+      articleId: currentArticleId,
+      history: currentHistory,
+      view: newView
+    };
+  }
+
+  return newState;
+};
+
+export var NavigationContextProvider = function NavigationContextProvider(_ref4) {
+  var _ref4$articleId = _ref4.articleId,
+      propsArticleId = _ref4$articleId === void 0 ? {
+    id: '',
+    type: ARTICLE_TYPE.HELP_ARTICLE
+  } : _ref4$articleId,
+      articleIdSetter = _ref4.articleIdSetter,
+      _ref4$history = _ref4.history,
+      propsHistory = _ref4$history === void 0 ? [] : _ref4$history,
+      historySetter = _ref4.historySetter,
+      children = _ref4.children;
 
   var _useHelpArticleContex = useHelpArticleContext(),
       onGetHelpArticle = _useHelpArticleContex.onGetHelpArticle;
@@ -45,567 +209,324 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref)
 
   var _useSearchContext = useSearchContext(),
       onSearch = _useSearchContext.onSearch,
-      isSearchResultVisible = _useSearchContext.isSearchResultVisible;
+      isSearchResultVisible = _useSearchContext.isSearchResultVisible,
+      searchValue = _useSearchContext.searchValue;
 
   var _useHeaderContext = useHeaderContext(),
       onCloseButtonClick = _useHeaderContext.onCloseButtonClick;
 
-  var _useState = useState(VIEW.DEFAULT_CONTENT),
-      _useState2 = _slicedToArray(_useState, 2),
-      view = _useState2[0],
-      setView = _useState2[1];
-
-  var articleId = useMemo(function () {
-    if ((propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.id) === undefined && (propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.type) === undefined) {
-      return undefined;
-    }
-
-    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]);
-
-  var _useState3 = useState(propsHistory ? propsHistory : []),
-      _useState4 = _slicedToArray(_useState3, 2),
-      history = _useState4[0],
-      setHistory = _useState4[1];
-
-  var tempHistory = useRef(propsHistory ? propsHistory : []);
-  var clearHistory = useCallback(function () {
-    if (tempHistory.current.length > 0) {
-      if (!articleIdSetter) {
-        return;
-      } // Clear History
-
-
-      tempHistory.current = [];
-      setHistory(tempHistory.current); // Clear host history using the historySetter
-
-      historySetter && historySetter(tempHistory.current); // Set article ID to ''
-
-      articleIdSetter({
-        id: '',
-        type: ARTICLE_TYPE.HELP_ARTICLE
-      });
-    }
-  }, [articleIdSetter, historySetter]);
-  var isDefaultContentDefined = useCallback(function () {
+  var _useReducer = useReducer(navigationReducer, {
+    articleId: propsArticleId,
+    history: propsHistory,
+    view: VIEW.DEFAULT_CONTENT
+  }),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      _useReducer2$ = _useReducer2[0],
+      currentArticleId = _useReducer2$.articleId,
+      currentHistory = _useReducer2$.history,
+      currentView = _useReducer2$.view,
+      dispatchNavigationAction = _useReducer2[1];
+
+  var isOverlayVisible = useMemo(function () {
+    return currentView === VIEW.ARTICLE || currentView === VIEW.SEARCH || currentView === VIEW.WHATS_NEW || currentView === VIEW.WHATS_NEW_ARTICLE;
+  }, [currentView]);
+  var isDefaultContentDefined = useMemo(function () {
     return homeContent !== undefined || homeOptions !== undefined;
   }, [homeContent, homeOptions]);
-
-  var getNewHistoryItem = function getNewHistoryItem(id, type) {
-    var uid = Math.floor(Math.random() * Math.pow(10, 17));
-    var newHistoryItem = {
-      uid: uid,
-      id: id,
-      type: 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'
-   */
-
-
-  var getSimpleHistory = useCallback(function (fullHistory) {
-    var copyHistory = fullHistory.map(function (tempHistoryItem) {
-      var id = tempHistoryItem.id,
-          uid = tempHistoryItem.uid,
-          type = tempHistoryItem.type;
-      return {
-        id: id,
-        uid: uid,
-        state: REQUEST_STATE.reload,
-        type: type
-      };
-    });
-    return copyHistory;
-  }, []);
-  var updateView = useCallback(function () {
-    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);
-      }
+  var canNavigateBack = useMemo(function () {
+    /**
+     * - 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;
     }
-  }, [articleId, isSearchResultVisible]);
-  var updateHistoryItem = useCallback(function (historyItem, update) {
-    var index = tempHistory.current.findIndex(function (historyItemTemp) {
-      return historyItemTemp.uid === historyItem.uid;
-    });
+    /**
+     * if an overlay is visible return true to display the back buton
+     */
 
-    if (index !== -1) {
-      var newHistory = _toConsumableArray(tempHistory.current);
 
-      newHistory[index] = _objectSpread(_objectSpread({}, historyItem), update);
-      tempHistory.current = newHistory;
-      setHistory(tempHistory.current);
-      var simpleHistory = getSimpleHistory(tempHistory.current);
-      historySetter && historySetter(simpleHistory);
-    }
-  }, [getSimpleHistory, historySetter]);
-  var reloadHelpArticle = useCallback( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(historyItem) {
-      var reloadingHelpArticleHistoryItem, article;
+    return isOverlayVisible;
+  }, [currentHistory.length, isDefaultContentDefined, isOverlayVisible, currentView]);
+  var fetchArticleData = useCallback( /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(historyItem) {
+      var article;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              reloadingHelpArticleHistoryItem = historyItem;
-
-              if (!onGetHelpArticle) {
-                _context.next = 20;
-                break;
-              }
+              _context.prev = 0;
+              _context.t0 = historyItem.type;
+              _context.next = _context.t0 === ARTICLE_TYPE.HELP_ARTICLE ? 4 : _context.t0 === ARTICLE_TYPE.WHATS_NEW ? 10 : 18;
+              break;
 
-              if (!(historyItem.type !== ARTICLE_TYPE.HELP_ARTICLE)) {
+            case 4:
+              if (onGetHelpArticle) {
                 _context.next = 6;
                 break;
               }
 
-              reloadingHelpArticleHistoryItem = _objectSpread(_objectSpread({}, reloadingHelpArticleHistoryItem), {}, {
-                state: REQUEST_STATE.error
-              });
-              _context.next = 18;
-              break;
+              throw new Error('onGetHelpArticle prop not defined');
 
             case 6:
-              reloadingHelpArticleHistoryItem.state = REQUEST_STATE.loading;
-              updateHistoryItem(reloadingHelpArticleHistoryItem);
-              _context.prev = 8;
-              _context.next = 11;
+              _context.next = 8;
               return onGetHelpArticle({
-                id: reloadingHelpArticleHistoryItem.id,
-                type: reloadingHelpArticleHistoryItem.type
+                id: historyItem.id,
+                type: historyItem.type
               });
 
-            case 11:
+            case 8:
               article = _context.sent;
-              reloadingHelpArticleHistoryItem = _objectSpread(_objectSpread({}, reloadingHelpArticleHistoryItem), {}, {
-                state: REQUEST_STATE.done,
-                article: article
-              });
-              _context.next = 18;
-              break;
-
-            case 15:
-              _context.prev = 15;
-              _context.t0 = _context["catch"](8);
-              reloadingHelpArticleHistoryItem = _objectSpread(_objectSpread({}, reloadingHelpArticleHistoryItem), {}, {
-                state: REQUEST_STATE.error
-              });
-
-            case 18:
-              _context.next = 21;
-              break;
+              return _context.abrupt("break", 20);
 
-            case 20:
-              reloadingHelpArticleHistoryItem = _objectSpread(_objectSpread({}, reloadingHelpArticleHistoryItem), {}, {
-                state: REQUEST_STATE.error
-              });
-
-            case 21:
-              updateHistoryItem(reloadingHelpArticleHistoryItem);
-
-            case 22:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[8, 15]]);
-    }));
-
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), [onGetHelpArticle, updateHistoryItem]);
-  var reloadWhatsNewArticle = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(historyItem) {
-      var reloadingWhatsNewArticleHistoryItem, article;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              reloadingWhatsNewArticleHistoryItem = historyItem;
-
-              if (!onGetWhatsNewArticle) {
-                _context2.next = 20;
+            case 10:
+              if (onGetWhatsNewArticle) {
+                _context.next = 12;
                 break;
               }
 
-              if (!(historyItem.type !== ARTICLE_TYPE.WHATS_NEW)) {
-                _context2.next = 6;
+              throw new Error('onGetWhatsNewArticle prop not defined');
+
+            case 12:
+              if (!(historyItem.id === '')) {
+                _context.next = 14;
                 break;
               }
 
-              // if the historyItem isn't a "What's new article", display the error message
-              reloadingWhatsNewArticleHistoryItem = _objectSpread(_objectSpread({}, reloadingWhatsNewArticleHistoryItem), {}, {
-                state: REQUEST_STATE.error
-              });
-              _context2.next = 18;
-              break;
+              return _context.abrupt("break", 20);
 
-            case 6:
-              reloadingWhatsNewArticleHistoryItem.state = REQUEST_STATE.loading;
-              updateHistoryItem(reloadingWhatsNewArticleHistoryItem);
-              _context2.prev = 8;
-              _context2.next = 11;
+            case 14:
+              _context.next = 16;
               return onGetWhatsNewArticle({
-                id: reloadingWhatsNewArticleHistoryItem.id,
-                type: reloadingWhatsNewArticleHistoryItem.type
-              });
-
-            case 11:
-              article = _context2.sent;
-              reloadingWhatsNewArticleHistoryItem = _objectSpread(_objectSpread({}, reloadingWhatsNewArticleHistoryItem), {}, {
-                state: REQUEST_STATE.done,
-                article: article
+                id: historyItem.id,
+                type: historyItem.type
               });
-              _context2.next = 18;
-              break;
 
-            case 15:
-              _context2.prev = 15;
-              _context2.t0 = _context2["catch"](8);
-              reloadingWhatsNewArticleHistoryItem = _objectSpread(_objectSpread({}, reloadingWhatsNewArticleHistoryItem), {}, {
-                state: REQUEST_STATE.error
-              });
+            case 16:
+              article = _context.sent;
+              return _context.abrupt("break", 20);
 
             case 18:
-              _context2.next = 21;
-              break;
+              throw new Error('onGetHelpArticle prop not defined');
 
             case 20:
-              reloadingWhatsNewArticleHistoryItem = _objectSpread(_objectSpread({}, reloadingWhatsNewArticleHistoryItem), {}, {
+              return _context.abrupt("return", _objectSpread(_objectSpread(_objectSpread({}, historyItem), article && {
+                article: article
+              }), {}, {
+                state: REQUEST_STATE.done
+              }));
+
+            case 23:
+              _context.prev = 23;
+              _context.t1 = _context["catch"](0);
+              return _context.abrupt("return", _objectSpread(_objectSpread({}, historyItem), {}, {
                 state: REQUEST_STATE.error
-              });
-
-            case 21:
-              updateHistoryItem(reloadingWhatsNewArticleHistoryItem);
+              }));
 
-            case 22:
+            case 26:
             case "end":
-              return _context2.stop();
+              return _context.stop();
           }
         }
-      }, _callee2, null, [[8, 15]]);
+      }, _callee, null, [[0, 23]]);
     }));
 
-    return function (_x2) {
-      return _ref3.apply(this, arguments);
+    return function (_x) {
+      return _ref5.apply(this, arguments);
     };
-  }(), [onGetWhatsNewArticle, updateHistoryItem]);
-  var fetchArticleData = useCallback( /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(historyItem) {
-      var article, _article;
-
-      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+  }(), [onGetHelpArticle, onGetWhatsNewArticle]);
+  var reloadArticle = useCallback( /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(historyItem) {
+      var historyItemToReload;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
-              if (!(historyItem.type === ARTICLE_TYPE.HELP_ARTICLE)) {
-                _context3.next = 17;
-                break;
-              }
+              historyItemToReload = _objectSpread({}, historyItem);
 
-              if (!onGetHelpArticle) {
-                _context3.next = 14;
-                break;
+              if (historyItem.type === ARTICLE_TYPE.HELP_ARTICLE || historyItem.type === ARTICLE_TYPE.WHATS_NEW) {
+                historyItemToReload.state = REQUEST_STATE.loading;
+              } else {
+                historyItemToReload.state = REQUEST_STATE.error;
               }
 
-              _context3.prev = 2;
-              _context3.next = 5;
-              return onGetHelpArticle({
-                id: historyItem.id,
-                type: historyItem.type
+              dispatchNavigationAction({
+                type: 'updateHistoryItem',
+                payload: historyItemToReload
               });
 
-            case 5:
-              article = _context3.sent;
-              updateHistoryItem(historyItem, {
-                state: REQUEST_STATE.done,
-                article: article
-              });
-              _context3.next = 12;
-              break;
-
-            case 9:
-              _context3.prev = 9;
-              _context3.t0 = _context3["catch"](2);
-              updateHistoryItem(historyItem, {
-                state: REQUEST_STATE.error
-              });
-
-            case 12:
-              _context3.next = 15;
-              break;
-
-            case 14:
-              updateHistoryItem(historyItem, {
-                state: REQUEST_STATE.error
-              });
-
-            case 15:
-              _context3.next = 32;
-              break;
-
-            case 17:
-              if (!(historyItem.type === ARTICLE_TYPE.WHATS_NEW)) {
-                _context3.next = 32;
-                break;
-              }
-
-              if (!onGetWhatsNewArticle) {
-                _context3.next = 31;
-                break;
-              }
-
-              _context3.prev = 19;
-              _context3.next = 22;
-              return onGetWhatsNewArticle({
-                id: historyItem.id,
-                type: historyItem.type
-              });
-
-            case 22:
-              _article = _context3.sent;
-              updateHistoryItem(historyItem, {
-                state: REQUEST_STATE.done,
-                article: _article
-              });
-              _context3.next = 29;
-              break;
-
-            case 26:
-              _context3.prev = 26;
-              _context3.t1 = _context3["catch"](19);
-              updateHistoryItem(historyItem, {
-                state: REQUEST_STATE.error
-              });
-
-            case 29:
-              _context3.next = 32;
-              break;
-
-            case 31:
-              updateHistoryItem(historyItem, {
-                state: REQUEST_STATE.error
-              });
-
-            case 32:
+            case 3:
             case "end":
-              return _context3.stop();
+              return _context2.stop();
           }
         }
-      }, _callee3, null, [[2, 9], [19, 26]]);
+      }, _callee2);
     }));
 
-    return function (_x3) {
-      return _ref4.apply(this, arguments);
+    return function (_x2) {
+      return _ref6.apply(this, arguments);
     };
-  }(), [onGetHelpArticle, onGetWhatsNewArticle, updateHistoryItem]);
-  var getCurrentArticle = useCallback(function () {
-    var currentArticleItem = tempHistory.current[tempHistory.current.length - 1];
-    return currentArticleItem;
-  }, []);
-  var getCurrentArticleItemData = useCallback(function () {
-    var _getCurrentArticle = getCurrentArticle(),
-        article = _getCurrentArticle.article,
-        type = _getCurrentArticle.type;
-
-    if (article) {
-      if (type === ARTICLE_TYPE.HELP_ARTICLE) {
-        var _ref5 = article,
-            body = _ref5.body,
-            relatedArticles = _ref5.relatedArticles,
-            articleItemData = _objectWithoutProperties(_ref5, ["body", "relatedArticles"]);
-
-        var currentArticleSlimData = articleItemData;
-        return currentArticleSlimData;
-      } else if (type === ARTICLE_TYPE.WHATS_NEW) {
-        var _ref6 = article,
-            description = _ref6.description,
-            whatsNewArticleItemData = _objectWithoutProperties(_ref6, ["description"]);
-
-        var currentWhatsNewArticleSlimData = whatsNewArticleItemData;
-        return currentWhatsNewArticleSlimData;
-      }
-    }
-  }, [getCurrentArticle]);
-  var isOverlayVisible = useCallback(function () {
-    return view === VIEW.ARTICLE || view === VIEW.SEARCH || view === VIEW.WHATS_NEW || view === VIEW.WHATS_NEW_ARTICLE;
-  }, [view]);
-  var canNavigateBack = useCallback(function () {
-    /**
-     * - 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]);
-  var navigateBack = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-    var newHistoryValue, lastHistoryItem;
-    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+  }(), []);
+  var navigateBack = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
       while (1) {
-        switch (_context4.prev = _context4.next) {
+        switch (_context3.prev = _context3.next) {
           case 0:
-            if (articleIdSetter) {
-              _context4.next = 2;
+            if (!(currentView === VIEW.SEARCH && onSearch)) {
+              _context3.next = 8;
               break;
             }
 
-            return _context4.abrupt("return");
-
-          case 2:
-            if (!(view === VIEW.SEARCH && onSearch)) {
-              _context4.next = 5;
+            if (!(searchValue !== '')) {
+              _context3.next = 6;
               break;
             }
 
             onSearch('');
-            return _context4.abrupt("return");
+            return _context3.abrupt("return");
 
-          case 5:
+          case 6:
+            dispatchNavigationAction({
+              type: 'updateView',
+              payload: currentArticleId.type
+            });
+            return _context3.abrupt("return");
+
+          case 8:
             //  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
-                newHistoryValue = _toConsumableArray(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
-
-                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'
+                });
               }
             }
 
-          case 6:
+          case 9:
           case "end":
-            return _context4.stop();
+            return _context3.stop();
         }
       }
-    }, _callee4);
-  })), [articleIdSetter, clearHistory, fetchArticleData, getCurrentArticle, historySetter, onSearch, view]);
+    }, _callee3);
+  })), [currentView, onSearch, currentHistory.length, searchValue, currentArticleId.type]);
   var onClose = useCallback(function (event, analyticsEvent) {
     if (onCloseButtonClick) {
-      clearHistory();
+      dispatchNavigationAction({
+        type: 'removeAllHistoryItems'
+      });
       onCloseButtonClick(event, analyticsEvent);
     }
-  }, [clearHistory, onCloseButtonClick]);
+  }, [onCloseButtonClick]);
   useEffect(function () {
-    if (!articleIdSetter) {
-      return;
+    if (isSearchResultVisible) {
+      dispatchNavigationAction({
+        type: 'updateView',
+        payload: VIEW.SEARCH
+      });
     }
+  }, [isSearchResultVisible]);
+  useEffect(function () {
+    var simpleHistory = getSimpleHistory(currentHistory);
+    historySetter && historySetter(simpleHistory);
+  }, [historySetter, currentHistory]);
+  useEffect(function () {
     /**
-     * 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
-      var 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
-
-
-      var newHistoryItem = getNewHistoryItem(articleId.id, articleId.type); // add add it to the tempHistory variable
+     * 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 {
+      /**
+       * 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
+       * */
+      var lastHistoryItem = currentHistory.length > 0 ? _getCurrentArticle2(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
+          }
+        });
+        articleIdSetter({
+          id: lastHistoryItem.id,
+          type: lastHistoryItem.type
+        });
+      }
+    }
+  }, [currentArticleId, propsArticleId, currentHistory, articleIdSetter]);
+  useEffect(function () {
+    var requestNewArticle = /*#__PURE__*/function () {
+      var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(historyItem) {
+        var historyItemUpdate;
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                _context4.next = 2;
+                return fetchArticleData(historyItem);
+
+              case 2:
+                historyItemUpdate = _context4.sent;
+                dispatchNavigationAction({
+                  type: 'updateHistoryItem',
+                  payload: historyItemUpdate
+                });
+
+              case 4:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
 
-      tempHistory.current = [].concat(_toConsumableArray(tempHistory.current), [_objectSpread({}, newHistoryItem)]);
-      updateHistoryItem(newHistoryItem); // fetch article data for the new history Item
+      return function requestNewArticle(_x3) {
+        return _ref8.apply(this, arguments);
+      };
+    }();
+    /**
+     * If the last history item state is "loading" or "reload", we need to request the article (fetch article from API)
+     */
 
-      fetchArticleData(newHistoryItem);
-    } else {
-      // articleId is undefined only during the first execution of this effect
-      if (articleId === undefined) {
-        var _lastHistoryItem = getCurrentArticle();
 
-        if (_lastHistoryItem) {
-          articleIdSetter({
-            id: _lastHistoryItem.id,
-            type: _lastHistoryItem.type
-          }); // fetch article data for the new history Item
+    var lastHistoryItem = _getCurrentArticle2(currentHistory);
 
-          fetchArticleData(_lastHistoryItem);
-        }
-      } else {
-        // If article ID is empty clear the history
-        if (!getCurrentArticle()) {
-          clearHistory();
-        }
-      }
+    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);
     }
-  }, [articleId, articleIdSetter, clearHistory, fetchArticleData, getCurrentArticle, updateHistoryItem]);
-  /**
-   * VIEW effect
-   * Set the view value based on the values of articleId
-   */
-
-  useEffect(function () {
-    updateView();
-  }, [articleId, updateView]);
+  }, [currentArticleId, currentHistory, fetchArticleData]);
   return /*#__PURE__*/React.createElement(CtxProvider, {
     value: {
-      view: view,
-      articleId: articleId,
+      view: currentView,
+      articleId: currentArticleId,
       setArticleId: articleIdSetter,
-      history: history,
-      getCurrentArticle: getCurrentArticle,
-      getCurrentArticleItemData: getCurrentArticleItemData,
-      reloadHelpArticle: onGetHelpArticle && reloadHelpArticle,
-      reloadWhatsNewArticle: onGetWhatsNewArticle && reloadWhatsNewArticle,
+      history: currentHistory,
+      getCurrentArticle: function getCurrentArticle() {
+        return _getCurrentArticle2(currentHistory);
+      },
+      getCurrentArticleItemData: function getCurrentArticleItemData() {
+        return getCurrentArticleItemSlim(currentHistory);
+      },
+      reloadHelpArticle: onGetHelpArticle && reloadArticle,
+      reloadWhatsNewArticle: onGetWhatsNewArticle && reloadArticle,
       canNavigateBack: canNavigateBack,
       navigateBack: navigateBack,
       isOverlayVisible: isOverlayVisible,