@griddo/ax 11.6.7 → 11.6.8-rc.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.6.7",
+  "version": "11.6.8-rc.3",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -223,5 +223,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "87d62b8b155f1806993928f385909e944af81cfe"
+  "gitHead": "237257d2d0b4bb259aa8c9895e637a7f4953befb"
 }

package/src/components/Fields/FormContainer/FormModal/index.tsx

@@ -1,10 +1,9 @@
 import React, { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { FormContent, GetFormsParams, IModal, IQueryValue, IRootState, ISite } from "@ax/types";
+import { FormContent, GetFormsParams, IModal, IQueryValue, IRootState } from "@ax/types";
 import {
   Button,
-  CategoryFilter,
   EmptyState,
   ErrorToast,
   FilterTagsBar,
@@ -20,8 +19,21 @@ import { formsActions } from "@ax/containers/Forms";
 import * as S from "./style";
 
 const FormModal = (props: IFormModal): JSX.Element => {
-  const { isOpen, toggleModal, site, forms, currentSiteInfo, getForms, selectedForm, setSelectedForm, selectForm } =
-    props;
+  const {
+    isOpen,
+    toggleModal,
+    site,
+    forms,
+    categories,
+    getForms,
+    selectedForm,
+    setSelectedForm,
+    selectForm,
+    filters,
+    filterValues,
+    resetFilterQuery,
+    filterItems,
+  } = props;
 
   const tabs: string[] = [];
   if (site) {
@@ -29,26 +41,27 @@ const FormModal = (props: IFormModal): JSX.Element => {
   }
 
   const formCategories = getSchemaFormCategories();
-  const isGlobal = !currentSiteInfo;
+  const isGlobal = !site;
 
   const filterLabels = formCategories.reduce((a, v) => ({ ...a, [v.value]: v.label }), {});
-  const initialState = formCategories.reduce((a, v) => ({ ...a, [v.value]: [{ value: "all", label: "All" }] }), {});
 
   const [selectedTab, setSelectedTab] = useState(site ? "Site" : "Global");
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [filterValues, setFilterValues] = useState<Record<string, IQueryValue[]>>(initialState);
 
-  const siteID = currentSiteInfo && selectedTab !== "Global" ? currentSiteInfo.id : null;
+  const siteID = site && selectedTab !== "Global" ? site : null;
   const isFiltering = searchQuery.length > 0 || Object.values(filterValues).length;
 
   const getParams = useCallback(() => {
-    const categories = Object.values(filterValues).reduce((acc: (number | string)[], current: IQueryValue[]) => {
+    const userCategories = Object.values(filterValues).reduce((acc: (number | string)[], current: IQueryValue[]) => {
       const values = current.filter((val) => val.value !== "all").map((val) => val.value);
       return [...acc, ...values];
     }, []);
 
-    const typeFilter = categories.length ? `&type=${categories.join(",")}` : "";
+    const hasSchemaCategories = !!categories && categories.length > 0;
+    const filterCategories = hasSchemaCategories ? [...categories, ...userCategories] : userCategories;
+
+    const typeFilter = filterCategories.length ? `&type=${filterCategories.join(",")}` : "";
 
     const params: GetFormsParams = {
       page: 1,
@@ -58,7 +71,7 @@ const FormModal = (props: IFormModal): JSX.Element => {
     };
 
     return params;
-  }, [searchQuery, filterValues]);
+  }, [searchQuery, filterValues, categories]);
 
   useEffect(() => {
     const handleGetForms = async () => {
@@ -85,29 +98,6 @@ const FormModal = (props: IFormModal): JSX.Element => {
     }
   };
 
-  const filterItems = (filterPointer: string, filtersSelected: IQueryValue[]) =>
-    setFilterValues((state) => ({ ...state, [filterPointer]: filtersSelected }));
-
-  const resetFilterQuery = () => setFilterValues(initialState);
-
-  const Filters = () => (
-    <S.Filters>
-      {formCategories.map((formCategory, i: number) => (
-        <S.FilterWrapper key={formCategory.value}>
-          <CategoryFilter
-            filterItems={filterItems}
-            value={filterValues[formCategory.value]}
-            formCategory={formCategory}
-            siteID={siteID}
-            pointer={formCategory.value}
-            autoWidth={true}
-            menuPosition={i === formCategories.length - 1 && !isGlobal ? "right" : "left"}
-          />
-        </S.FilterWrapper>
-      ))}
-    </S.Filters>
-  );
-
   const emptySearchStateProps = {
     icon: "search",
     title: "Oh! No Results Found",
@@ -125,11 +115,11 @@ const FormModal = (props: IFormModal): JSX.Element => {
                   <Tabs tabs={tabs} active={selectedTab} setSelectedTab={handleSelectedTab} noMargins />
                 </S.TabsWrapper>
               )}
-              <Filters />
+              {filters}
             </S.ModalTabs>
           )}
           <S.SearchWrapper>
-            {isGlobal && <Filters />}
+            {isGlobal && filters}
             <S.Search full={!isGlobal}>
               <SearchField
                 onChange={setSearchQuery}
@@ -190,15 +180,18 @@ interface IFormModal extends IModal {
   site: number | null;
   forms: FormContent[];
   selectedForm: FormContent | null;
-  currentSiteInfo: ISite | null;
   getForms(siteID: number | null, params?: GetFormsParams, loading?: boolean): Promise<void>;
   setSelectedForm: Dispatch<SetStateAction<FormContent | null>>;
   selectForm(): void;
+  categories?: string[];
+  filters: JSX.Element;
+  filterValues: Record<string, IQueryValue[]>;
+  resetFilterQuery(): void;
+  filterItems(filterPointer: string, filtersSelected: IQueryValue[]): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   forms: state.forms.forms,
-  currentSiteInfo: state.sites.currentSiteInfo,
 });
 
 const mapDispatchToProps = {

package/src/components/Fields/FormContainer/index.tsx

@@ -1,22 +1,29 @@
 import React, { useState } from "react";
 import { useModal, usePermission } from "@ax/hooks";
-import { trimText } from "@ax/helpers";
-import { ActionMenu, HiddenField, Icon } from "@ax/components";
-import { FormContent, ISite } from "@ax/types";
+import { getSchemaFormCategories, trimText } from "@ax/helpers";
+import { ActionMenu, CategoryFilter, HiddenField, Icon } from "@ax/components";
+import { FormContent, IQueryValue, ISite } from "@ax/types";
 
 import FormModal from "./FormModal";
 
 import * as S from "./style";
 
 const FormContainer = (props: IFormContainerProps): JSX.Element => {
-  const { value, onChange, goTo, title, disabled, editorID, className, site } = props;
+  const { value, onChange, goTo, title, disabled, editorID, className, site, formCategories } = props;
 
   const { title: formTitle } = value || { title: "" };
 
   const isEmpty = !value;
+  const isGlobal = !site;
+  const schemaFormCategories = getSchemaFormCategories();
 
   const { isOpen, toggleModal } = useModal();
   const [selectedForm, setSelectedForm] = useState<FormContent | null>(value || null);
+  const initialState = schemaFormCategories.reduce(
+    (a, v) => ({ ...a, [v.value]: [{ value: "all", label: "All" }] }),
+    {}
+  );
+  const [filterValues, setFilterValues] = useState<Record<string, IQueryValue[]>>(initialState);
 
   const addFormPermission = site ? "forms.addFormsToPage" : "global.forms.addFormsToPage";
   const overwriteFormPermission = site ? "forms.overwriteDataForms" : "global.forms.overwriteDataForms";
@@ -46,6 +53,31 @@ const FormContainer = (props: IFormContainerProps): JSX.Element => {
       ]
     : [];
 
+  const filterItems = (filterPointer: string, filtersSelected: IQueryValue[]) =>
+    setFilterValues((state) => ({ ...state, [filterPointer]: filtersSelected }));
+
+  const resetFilterQuery = () => setFilterValues(initialState);
+
+  const filters = (
+    <S.Filters>
+      {schemaFormCategories.map((formCategory, i: number) => (
+        <S.FilterWrapper key={formCategory.value}>
+          <CategoryFilter
+            filterItems={filterItems}
+            value={filterValues[formCategory.value]}
+            formCategory={formCategory}
+            siteID={site?.id || null}
+            pointer={formCategory.value}
+            autoWidth={true}
+            menuPosition={i === schemaFormCategories.length - 1 && !isGlobal ? "right" : "left"}
+            hideValues={formCategories}
+            hideOnLoading={true}
+          />
+        </S.FilterWrapper>
+      ))}
+    </S.Filters>
+  );
+
   return (
     <>
       {isEmpty ? (
@@ -76,6 +108,11 @@ const FormContainer = (props: IFormContainerProps): JSX.Element => {
           selectedForm={selectedForm}
           setSelectedForm={setSelectedForm}
           selectForm={handleSelectForm}
+          categories={formCategories}
+          filters={filters}
+          filterValues={filterValues}
+          resetFilterQuery={resetFilterQuery}
+          filterItems={filterItems}
         />
       )}
     </>
@@ -91,6 +128,7 @@ export interface IFormContainerProps {
   className?: string;
   title: string;
   site: ISite | null;
+  formCategories?: string[];
 }
 
 export default FormContainer;

package/src/components/Fields/FormContainer/style.tsx

@@ -71,4 +71,22 @@ const Title = styled.div<{ disabled?: boolean }>`
   margin: ${(p) => p.theme.spacing.xxs} 0;
 `;
 
-export { Component, IconWrapper, Title, HiddenButtonsWrapper };
+const Filters = styled.div`
+  display: flex;
+  height: ${(p) => p.theme.spacing.l};
+  align-items: center;
+  & > * {
+    &:not(:last-child) {
+      margin-right: ${(p) => p.theme.spacing.m};
+    }
+  }
+  .headerWrapper {
+    padding: 0;
+  }
+`;
+
+const FilterWrapper = styled.div`
+  position: relative;
+`;
+
+export { Component, IconWrapper, Title, HiddenButtonsWrapper, Filters, FilterWrapper };

package/src/components/TableFilters/CategoryFilter/index.tsx

@@ -17,6 +17,8 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
     pointer = "categories",
     autoWidth = false,
     menuPosition = "left",
+    hideValues = [],
+    hideOnLoading,
   } = props;
 
   const filters: IFilterValue[] = [
@@ -31,20 +33,25 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
   const parsedValue = Array.isArray(value) && value.length ? value.map((val) => val.value) : [selectAllOption];
   const [selectedValue, setSelectedValue] = useState(parsedValue);
   const [options, setOptions] = useState(filters);
+  const [hideFilter, setHideFilter] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const title = formCategory ? formCategory.label : structuredData.title;
 
   const getSelectCategories = async () => {
+    setIsLoading(true);
     try {
       const site = siteID ? siteID : "global";
       const items = formCategory
         ? await checkgroups.getFormCategories(site, formCategory.value)
         : await checkgroups.getCheckGroupItems(site, structuredData.source);
       if (items && isReqOk(items.status)) {
+        setIsLoading(false);
         return items.data;
       }
     } catch (e) {
       console.log(e);
     }
+    setIsLoading(false);
     return false;
   };
 
@@ -52,6 +59,9 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
     getSelectCategories().then((items) => {
       items &&
         items.forEach((item: { value: string; title: string }) => {
+          if (hideValues.includes(item.value)) {
+            setHideFilter(true);
+          }
           const newFilter = {
             name: item.value,
             value: item.value,
@@ -93,6 +103,10 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
     </S.HeaderWrapper>
   );
 
+  if (hideFilter || (hideOnLoading && isLoading)) {
+    return <></>;
+  }
+
   return (
     <FloatingMenu Button={Header} position={menuPosition} closeOnSelect={false} isCheckGroup={true}>
       <ListTitle data-testid="category-filter-title">Filter by Category</ListTitle>
@@ -112,6 +126,8 @@ export interface ICategoryFilterProps {
   pointer?: string;
   autoWidth?: boolean;
   menuPosition?: string;
+  hideValues?: (string | number)[];
+  hideOnLoading?: boolean;
 }
 
 export default CategoryFilter;

package/src/containers/Navigation/Menu/actions.tsx

@@ -1,68 +1,49 @@
 import { Dispatch } from "redux";
 
-import { removeMenuEditorIds, handleRequest } from "@ax/helpers";
+import { handleRequest } from "@ax/helpers";
 import { generateEditorIDs } from "@ax/forms";
 import { menus } from "@ax/api";
 import { appActions } from "@ax/containers/App";
-import { IMenuItem, IMenu } from "@ax/types";
+import { IMenuItem, IMenu, IRootState, IMenuForm } from "@ax/types";
 import {
   SET_ORIGINAL_MENUS,
   SET_EDITOR_MENU,
-  SET_ID,
   SET_ITEM,
   SET_MENU_FORM_DATA,
   SET_ORIGINAL_MENU,
   SET_TOTAL_ITEMS,
+  SET_CURRENT_TYPE,
 } from "./constants";
 import {
   ISetSavedMenus,
   ISetEditorMenu,
-  ISetId,
   ISetItem,
   ISetMenuForm,
   ISetSavedMenu,
   ISetTotalItems,
+  ISetCurrentType,
 } from "./interfaces";
 import { menuInitialState } from "./reducer";
 
 const { setIsLoading } = appActions;
 
-function setSavedMenus(savedMenus: any): ISetSavedMenus {
-  return {
-    type: SET_ORIGINAL_MENUS,
-    payload: { savedMenus },
-  };
+function setSavedMenus(savedMenus: IMenu[]): ISetSavedMenus {
+  return { type: SET_ORIGINAL_MENUS, payload: { savedMenus } };
 }
 
-function setSavedMenu(savedMenu: any): ISetSavedMenu {
-  return {
-    type: SET_ORIGINAL_MENU,
-    payload: { savedMenu },
-  };
+function setSavedMenu(savedMenu: IMenu): ISetSavedMenu {
+  return { type: SET_ORIGINAL_MENU, payload: { savedMenu } };
 }
 
-function setEditorMenu(editorMenu: any): ISetEditorMenu {
-  return {
-    type: SET_EDITOR_MENU,
-    payload: { editorMenu },
-  };
-}
-
-function setId(id: number): ISetId {
-  return {
-    type: SET_ID,
-    payload: { id },
-  };
+function setEditorMenu(editorMenu: IMenu | null): ISetEditorMenu {
+  return { type: SET_EDITOR_MENU, payload: { editorMenu } };
 }
 
 function setItem(item: IMenuItem): ISetItem {
-  return {
-    type: SET_ITEM,
-    payload: { item },
-  };
+  return { type: SET_ITEM, payload: { item } };
 }
 
-function setMenuFormData(form: any | null): ISetMenuForm {
+function setMenuFormData(form: IMenuForm): ISetMenuForm {
   return { type: SET_MENU_FORM_DATA, payload: { form } };
 }
 
@@ -70,8 +51,12 @@ function setTotalItems(totalItems: number): ISetTotalItems {
   return { type: SET_TOTAL_ITEMS, payload: { totalItems } };
 }
 
-const getStateValues = (getState: any) => {
-  const { savedMenus, savedMenu, editorMenu, id, type } = getState().menu;
+function setCurrentType(currentType: string): ISetCurrentType {
+  return { type: SET_CURRENT_TYPE, payload: { currentType } };
+}
+
+const getStateValues = (getState: () => IRootState) => {
+  const { savedMenus, savedMenu, editorMenu, currentType } = getState().menu;
   const { currentSiteInfo } = getState().sites;
   const { isSaving, isLoading, lang } = getState().app;
 
@@ -79,8 +64,7 @@ const getStateValues = (getState: any) => {
     savedMenus,
     savedMenu,
     editorMenu,
-    id,
-    type,
+    type: currentType,
     currentSiteInfo,
     isLoading,
     isSaving,
@@ -89,17 +73,14 @@ const getStateValues = (getState: any) => {
 };
 
 function setEditorMenuContent(menus: IMenu[], menuType: string, dispatch: Dispatch) {
-  const menu: any = menus.find((menu: IMenu) => menu.name === menuType) || menus[0];
-  const currentMenu = generateEditorIDs(menu).pageContent;
-  const id = menu.id;
+  const menu = menus.find((menu) => menu.name === menuType) || menus[0];
 
-  dispatch(setId(id));
   dispatch(setSavedMenu(menu));
-  dispatch(setEditorMenu(currentMenu));
+  dispatch(setEditorMenu(menu));
   dispatch(setIsLoading(false));
 }
 
-function getMenus(): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getMenus(hasLoading = true): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     try {
       const { currentSiteInfo, type } = getStateValues(getState);
@@ -108,27 +89,31 @@ function getMenus(): (dispatch: Dispatch, getState: any) => Promise<void> {
       const responseActions = {
         handleSuccess: (menus: IMenu[]) => {
           dispatch(setSavedMenus(menus));
-          setEditorMenuContent(menus, type, dispatch);
+          const current = type !== "" ? type : menus.length ? menus[0].name : "";
+          dispatch(setCurrentType(current));
+          setEditorMenuContent(menus, current, dispatch);
           updateTotalItems(dispatch, getState);
         },
-        handleError: () => console.log("Error en getMenus"),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
-      const callback = async () => await menus.getMenus(id);
+      const callback = async () => id && (await menus.getMenus(id));
+
+      const loading = hasLoading ? [appActions.setIsLoading] : [];
 
-      await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+      await handleRequest(callback, responseActions, loading)(dispatch);
     } catch (e) {
       console.log("Error", e);
     }
   };
 }
 
-function getCurrentMenu(menuType: string): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getCurrentMenu(menuType: string): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     try {
       dispatch(setIsLoading(true));
       const { savedMenus } = getStateValues(getState);
-      setEditorMenuContent(savedMenus, menuType, dispatch);
+      setEditorMenuContent(savedMenus || [], menuType, dispatch);
       updateTotalItems(dispatch, getState);
     } catch (e) {
       console.log("Error", e);
@@ -137,9 +122,10 @@ function getCurrentMenu(menuType: string): (dispatch: Dispatch, getState: any) =
   };
 }
 
-function addMenuItem(item: IMenuItem): (dispatch: Dispatch, getState: any) => Promise<void> {
+function addMenuItem(item: IMenuItem): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     const { editorMenu } = getStateValues(getState);
+    if (!editorMenu) return;
     const elements = editorMenu.elements || [];
     const itemWithTemporaryId = { ...item, id: new Date().getTime() };
     const menuElements = [...elements, itemWithTemporaryId];
@@ -151,9 +137,10 @@ function addMenuItem(item: IMenuItem): (dispatch: Dispatch, getState: any) => Pr
   };
 }
 
-function updateMenuItem(updatedItem: IMenuItem): (dispatch: Dispatch, getState: any) => Promise<void> {
+function updateMenuItem(updatedItem: IMenuItem): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     const { editorMenu } = getStateValues(getState);
+    if (!editorMenu) return;
 
     const updateElements = (elements: IMenuItem[]): any => {
       const hasUpdatedChild = elements.some((element) => element.editorID === updatedItem.editorID);
@@ -185,11 +172,12 @@ function updateMenuItem(updatedItem: IMenuItem): (dispatch: Dispatch, getState:
 function deleteMenuItem(
   deletedItemId: number,
   deleteChildren = true
-): (dispatch: Dispatch, getState: any) => Promise<void> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     const { editorMenu } = getStateValues(getState);
+    if (!editorMenu) return;
 
-    const updateElements = (elements: IMenuItem[]): IMenuItem[] | void => {
+    const updateElements = (elements: IMenuItem[]): IMenuItem[] => {
       const deletedItem = elements.find((element) => element.id === deletedItemId);
       if (deletedItem) {
         if (deleteChildren) {
@@ -211,6 +199,7 @@ function deleteMenuItem(
           }
         }
       }
+      return [];
     };
 
     const updatedElements = updateElements([...editorMenu.elements]);
@@ -225,25 +214,21 @@ function deleteMenuItem(
   };
 }
 
-function updateMenu(): (dispatch: Dispatch, getState: any) => Promise<void> {
+function updateMenu(): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     try {
-      const { savedMenu, editorMenu, type, id, currentSiteInfo } = getStateValues(getState);
-      const editorMenuClean = removeMenuEditorIds(editorMenu.elements);
-      savedMenu.elements = editorMenuClean;
+      const { savedMenu, editorMenu } = getStateValues(getState);
+      if (!savedMenu || !editorMenu) return;
+      savedMenu.elements = editorMenu.elements;
 
       const responseActions = {
         handleSuccess: async () => {
-          const currentSiteId = currentSiteInfo && currentSiteInfo.id;
-          const updatedMenusResponse = await menus.getMenus(currentSiteId);
-          const updatedMenus = updatedMenusResponse.data;
-          dispatch(setSavedMenus(updatedMenus));
-          setEditorMenuContent(updatedMenus, type, dispatch);
+          getMenus(false)(dispatch, getState);
         },
-        handleError: () => console.log("Error en updateMenu"),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
-      const callback = async () => menus.updateMenu(savedMenu, id);
+      const callback = async () => menus.updateMenu(savedMenu, savedMenu.id);
 
       await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
     } catch (e) {
@@ -252,9 +237,10 @@ function updateMenu(): (dispatch: Dispatch, getState: any) => Promise<void> {
   };
 }
 
-function reorderMenu(elements: IMenuItem[]): (dispatch: Dispatch, getState: any) => Promise<void> {
+function reorderMenu(elements: IMenuItem[]): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     const { editorMenu } = getStateValues(getState);
+    if (!editorMenu) return;
 
     const updatedMenu = {
       ...editorMenu,
@@ -271,7 +257,7 @@ function setItemValue(page: IMenuItem): (dispatch: Dispatch) => Promise<void> {
   };
 }
 
-function updateFormValue(valueObj: any): (dispatch: Dispatch, getState: any) => void {
+function updateFormValue(valueObj: any): (dispatch: Dispatch, getState: () => IRootState) => void {
   return (dispatch, getState) => {
     const {
       menu: { form },
@@ -290,12 +276,13 @@ function resetItemValues(): (dispatch: Dispatch) => Promise<void> {
 
 const resetMenuValues = (dispatch: Dispatch) => {
   dispatch(setSavedMenus([]));
-  dispatch(setEditorMenu([]));
+  dispatch(setEditorMenu(null));
   dispatch(setMenuFormData(menuInitialState.form));
 };
 
-const updateTotalItems = (dispatch: Dispatch, getState: any) => {
+const updateTotalItems = (dispatch: Dispatch, getState: () => IRootState) => {
   const { editorMenu } = getState().menu;
+  if (!editorMenu) return;
 
   let counter = 0;
   const calculateItems = (elements: IMenuItem[]): void => {
@@ -314,7 +301,6 @@ const updateTotalItems = (dispatch: Dispatch, getState: any) => {
 export {
   setSavedMenus,
   setEditorMenu,
-  setId,
   setItem,
   setEditorMenuContent,
   getMenus,
@@ -328,4 +314,5 @@ export {
   resetMenuValues,
   reorderMenu,
   updateFormValue,
+  setCurrentType,
 };

package/src/containers/Navigation/Menu/constants.tsx

@@ -3,8 +3,7 @@ export const NAME = "menu";
 export const SET_ORIGINAL_MENUS = `${NAME}/SET_ORIGINAL_MENUS`;
 export const SET_ORIGINAL_MENU = `${NAME}/SET_CURRENT_ORIGINAL_MENU`;
 export const SET_EDITOR_MENU = `${NAME}/SET_EDITOR_MENU`;
-export const SET_ID = `${NAME}/SET_ID`;
 export const SET_ITEM = `${NAME}/SET_ITEM`;
 export const SET_MENU_FORM_DATA = `${NAME}/SET_MENU_FORM_DATA`;
 export const SET_TOTAL_ITEMS = `${NAME}/SET_TOTAL_ITEMS`;
-export const SET_CURRENT_MENU = `${NAME}/SET_CURRENT_MENU`;
+export const SET_CURRENT_TYPE = `${NAME}/SET_CURRENT_TYPE`;

package/src/containers/Navigation/Menu/interfaces.tsx

@@ -1,42 +1,38 @@
+import { IMenu, IMenuForm, IMenuItem } from "@ax/types";
+
 import { SET_TOTAL_ITEMS } from "@ax/containers/Sites/constants";
 import {
   SET_ORIGINAL_MENUS,
   SET_ORIGINAL_MENU,
   SET_EDITOR_MENU,
-  SET_ID,
   SET_ITEM,
   SET_MENU_FORM_DATA,
-  SET_CURRENT_MENU,
+  SET_CURRENT_TYPE,
 } from "./constants";
 
 export interface ISetSavedMenus {
   type: typeof SET_ORIGINAL_MENUS;
-  payload: { savedMenus: any };
+  payload: { savedMenus: IMenu[] };
 }
 
 export interface ISetSavedMenu {
   type: typeof SET_ORIGINAL_MENU;
-  payload: { savedMenu: any };
+  payload: { savedMenu: IMenu };
 }
 
 export interface ISetEditorMenu {
   type: typeof SET_EDITOR_MENU;
-  payload: { editorMenu: any };
-}
-
-export interface ISetId {
-  type: typeof SET_ID;
-  payload: { id: number };
+  payload: { editorMenu: IMenu | null };
 }
 
 export interface ISetItem {
   type: typeof SET_ITEM;
-  payload: { item: any };
+  payload: { item: IMenuItem | null };
 }
 
 export interface ISetMenuForm {
   type: typeof SET_MENU_FORM_DATA;
-  payload: { form: any };
+  payload: { form: IMenuForm };
 }
 
 export interface ISetTotalItems {
@@ -44,9 +40,9 @@ export interface ISetTotalItems {
   payload: { totalItems: number };
 }
 
-export interface ISetCurrentMenu {
-  type: typeof SET_CURRENT_MENU;
-  payload: { currentMenu: string };
+export interface ISetCurrentType {
+  type: typeof SET_CURRENT_TYPE;
+  payload: { currentType: string };
 }
 
 export type MenuActionsCreators = ISetSavedMenus | ISetEditorMenu | ISetItem | ISetTotalItems;

package/src/containers/Navigation/Menu/reducer.tsx

@@ -2,32 +2,29 @@ import {
   SET_ORIGINAL_MENUS,
   SET_ORIGINAL_MENU,
   SET_EDITOR_MENU,
-  SET_ID,
   SET_ITEM,
   SET_MENU_FORM_DATA,
   SET_TOTAL_ITEMS,
+  SET_CURRENT_TYPE,
 } from "./constants";
 
 import { MenuActionsCreators } from "./interfaces";
-import { IMenuItem, IMenuForm } from "@ax/types";
+import { IMenuItem, IMenuForm, IMenu } from "@ax/types";
 
 export interface IMenuState {
-  savedMenus: IMenuItem[] | null;
-  savedMenu: any;
-  editorMenu: any;
-  id: number | null;
+  savedMenus: IMenu[] | null;
+  savedMenu: IMenu | null;
+  editorMenu: IMenu | null;
   item: IMenuItem | null;
   form: IMenuForm;
   totalItems: number;
+  currentType: string;
 }
 
 const initialState = {
   savedMenus: [],
-  savedMenu: [],
-  editorMenu: {
-    elements: [],
-  },
-  id: null,
+  savedMenu: null,
+  editorMenu: null,
   item: null,
   form: {
     url: null,
@@ -37,6 +34,7 @@ const initialState = {
     footerStyle: "",
   },
   totalItems: 0,
+  currentType: "",
 };
 
 function reducer(state = initialState, action: MenuActionsCreators): IMenuState {
@@ -44,10 +42,10 @@ function reducer(state = initialState, action: MenuActionsCreators): IMenuState
     case SET_ORIGINAL_MENUS:
     case SET_ORIGINAL_MENU:
     case SET_EDITOR_MENU:
-    case SET_ID:
     case SET_ITEM:
     case SET_MENU_FORM_DATA:
     case SET_TOTAL_ITEMS:
+    case SET_CURRENT_TYPE:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/modules/Navigation/Menus/List/Table/index.tsx

@@ -188,7 +188,7 @@ const mapDispatchToProps = {
 
 const mapStateToProps = (state: IRootState) => ({
   isLoading: state.app.isLoading,
-  editorMenu: state.menu.editorMenu.elements,
+  editorMenu: state.menu.editorMenu?.elements || [],
 });
 
 interface ITableStateProps {

package/src/modules/Navigation/Menus/List/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState } from "react";
+import React, { useEffect, useCallback } from "react";
 import { connect } from "react-redux";
 
 import { IGetSitePagesParams, IRootState, IMenuItem } from "@ax/types";
@@ -13,15 +13,12 @@ import Table from "./Table";
 import * as S from "./style";
 
 const List = (props: IMenuList): JSX.Element => {
-  const { getMenus, lang, getSitePages, currentSiteID, editorMenu, savedMenu, savedMenus } = props;
+  const { getMenus, lang, getSitePages, currentSiteID, editorMenu, savedMenu, currentType, setCurrentType } = props;
 
   if (!currentSiteID) {
     throw new Error(`ERROR: User reached Menu List with null site info`);
   }
 
-  const initialState = savedMenus && savedMenus.length ? savedMenus[0].name : "";
-  const [currentType, setCurrentType] = useState(initialState);
-
   const { isDirty } = useShouldBeSaved(editorMenu, savedMenu, currentType);
   const memoizedGetMenus = useCallback(() => getMenus(), [getMenus]);
   const memoizedGetSitePages = useCallback(
@@ -41,7 +38,10 @@ const List = (props: IMenuList): JSX.Element => {
     memoizedGetSitePages(params);
     memoizedGetMenus();
     setIsSavedData(true);
-  }, [memoizedGetMenus, memoizedGetSitePages, lang.id, currentSiteID]);
+    return () => {
+      setCurrentType("");
+    };
+  }, [memoizedGetMenus, memoizedGetSitePages, setCurrentType, lang.id, currentSiteID]);
 
   return (
     <S.ListWrapper>
@@ -56,14 +56,15 @@ const List = (props: IMenuList): JSX.Element => {
 const mapStateToProps = (state: IRootState) => ({
   currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
   lang: state.app.lang,
-  editorMenu: state.menu.editorMenu.elements,
-  savedMenu: state.menu.savedMenu.elements,
-  savedMenus: state.menu.savedMenus,
+  editorMenu: state.menu.editorMenu?.elements || [],
+  savedMenu: state.menu.savedMenu?.elements || [],
+  currentType: state.menu.currentType,
 });
 
 const mapDispatchToProps = {
   getMenus: menuActions.getMenus,
   getSitePages: sitesActions.getSitePages,
+  setCurrentType: menuActions.setCurrentType,
 };
 
 interface IStateProps {
@@ -71,12 +72,13 @@ interface IStateProps {
   lang: { locale: string; id: number | null };
   editorMenu: IMenuItem[] | undefined;
   savedMenu: IMenuItem[] | undefined;
-  savedMenus: IMenuItem[] | null;
+  currentType: string;
 }
 
 interface IDispatchProps {
   getMenus(): void;
   getSitePages(params: IGetSitePagesParams): Promise<void>;
+  setCurrentType(type: string): void;
 }
 
 type IMenuList = IStateProps & IDispatchProps;