strapi-plugin-navigation 2.0.0-beta.1 → 2.0.0-beta.5

package/README.md

@@ -1,34 +1,45 @@
-# Strapi v4 - Navigation plugin - BETA
-
-<p align="center">
+<div align="center">
+  <h1>Strapi v4 - Navigation plugin - BETA</h1>
+  <p>Create consumable navigation with a simple and straigthforward visual builder.</p>
   <a href="https://www.npmjs.org/package/strapi-plugin-navigation">
-    <img src="https://img.shields.io/npm/v/strapi-plugin-navigation/latest.svg" alt="NPM Version" />
+    <img src="https://img.shields.io/github/package-json/v/VirtusLab-Open-Source/strapi-plugin-navigation/feat%252Fstrapi-v4-support?label=npm" alt="NPM Version" />
   </a>
   <a href="https://www.npmjs.org/package/strapi-plugin-navigation">
     <img src="https://img.shields.io/npm/dm/strapi-plugin-navigation.svg" alt="Monthly download on NPM" />
   </a>
   <a href="https://circleci.com/gh/VirtusLab/strapi-plugin-navigation">
-    <img src="https://circleci.com/gh/VirtusLab/strapi-plugin-navigation.svg?style=shield" alt="CircleCI" />
+    <img src="https://circleci.com/gh/VirtusLab-Open-Source/strapi-plugin-navigation/tree/feat%2Fstrapi-v4-support.svg?style=shield" alt="CircleCI" />
   </a>
   <a href="https://codecov.io/gh/VirtusLab/strapi-plugin-navigation">
-    <img src="https://codecov.io/gh/VirtusLab/strapi-plugin-navigation/coverage.svg?branch=master" alt="codecov.io" />
+    <img src="https://codecov.io/gh/VirtusLab/strapi-plugin-navigation/coverage.svg?branch=feat%2Fstrapi-v4-support" alt="codecov.io" />
   </a>
-</p>
+</div>
+
+---
 
-A plugin for [Strapi Headless CMS](https://github.com/strapi/strapi) that provides navigation / menu builder feature with their possibility to control the audience and different output structure renderers:
+Strapi Navigation Plugin provides a website navigation / menu builder feature for [Strapi Headless CMS](https://github.com/strapi/strapi) admin panel. Navigation has the possibility to control the audience and can be consumed by the website with different output structure renderers:
 
 - Flat
 - Tree (nested)
 - RFR (ready for handling by Redux First Router)
 
-### Versions
+## ✨ Features
+
+- **Navigation Public API:** Simple and ready for use API endpoint for consuming the navigation structure you've created
+- **Visual builder:** Elegant and easy to use visual builder
+- **Any Content Type relation:** Navigation can by linked to any of your Content Types by default. Simply, you're controlling it and also limiting available content types by configuration props
+- **Customizable:** Possibility to customize the options like: available Content Types, Maximum level for "attach to menu", Additional fields (audience)
+- **[Audit log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log):** integration with Strapi Molecules Audit Log plugin that provides changes track record
+
+
+## ⚙️ Versions
 
 - **Stable** - [v1.1.2](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation)
 - **Beta** - v4 support - [v2.0.0-beta.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/tree/feat/strapi-v4-support)
 
-### ⏳ Installation
+## ⏳ Installation
 
-(Use **yarn** to install this plugin within your Strapi project (recommended). [Install yarn with these docs](https://yarnpkg.com/lang/en/docs/install/).)
+It's recommended to use **yarn** to install this plugin within your Strapi project. [You can install yarn with these docs](https://yarnpkg.com/lang/en/docs/install/).
 
 ```bash
 yarn add strapi-plugin-navigation@latest
@@ -49,87 +60,53 @@ yarn develop --watch-admin
 
 The **UI Navigation** plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.
 
-
 Enjoy 🎉
 
-### 🖐 Requirements
+## 🖐 Requirements
 
-Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under <a href="https://strapi.io/documentation/v3.x/installation/cli.html#step-1-make-sure-requirements-are-met">Installation Requirements</a>.
+Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under <a href="https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/installation/cli.html#preparing-the-installation">Installation Requirements</a>.
 
 **Supported Strapi versions**:
 
-- Strapi v4.0.2 (recently tested)
-
-(This plugin is not working with v3.x and not may work with the older Strapi v4 versions, but these are not tested nor officially supported at this time.)
-
-**We recommend always using the latest version of Strapi to start your new projects**.
-
-## Features
-
-- **Navigation Public API:** Simple and ready for use API endpoint for getting the navigation structure you've created
-- **Visual builder:** Elegant and easy to use visual builder
-- **Any Content Type relation:** Navigation can by linked to any of your Content Types by default. Simply, you're controlling it and also limiting available content types by configuration props
-- **Customizable:** Possibility to customize the options like: available Content Types, Maximum level for "attach to menu", Additional fields (audience)
-- **[Audit log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log):** integration with Strapi Molecules Audit Log plugin that provides changes track record
-
-
-## Content Type model relation to Navigation Item
-
-To enable Content Type to work with Navigation Item, you've to add following field to your model `*.settings.json`:
+- Strapi v4.0.5 (recently tested)
+- Strapi v4.x
 
-```
-    "navigation": {
-      "model": "navigationitem",
-      "plugin": "navigation",
-      "via": "related",
-      "configurable": false,
-      "hidden": true
-    }
-```
+_This plugin is not working with v3.x._
 
-inside the `attributes` section like in example below:
+It may or may not work with the older Strapi v4 versions, these are not tested nor officially supported at this time.
 
-```
-    "attributes": {
-        ...,
-        "navigation": {
-            "model": "navigationitem",
-            "plugin": "navigation",
-            "via": "related",
-            "configurable": false,
-            "hidden": true
-        },
-        ...
-    },
-```
+**We recommend always using the latest version of Strapi to start your new projects**.
 
-## Configuration
-To setup the plugin properly we recommend to put following snippet as part of `config/custom.js` or `config/<env>/custom.js` file. If you've got already configurations for other plugins stores by this way, use just the `navigation` part within exising `plugins` item.
+## 🔧 Configuration
+Config for this plugin is stored as a part of `config/plugins.js` or `config/<env>/plugins.js` file. You can use following snippet to make sure that the config structure is correct. If you've got already configurations for other plugins stores by this way, you can use the `navigation` along with them. 
 
 ```js
-    ...
-    plugins: {
-      navigation: {
-        additionalFields: ['audience'],
-        allowedLevels: 2,
-        contentTypesNameFields: {
-          'blog_posts': ['altTitle'],
-          'pages': ['title'],
-        },
-        gql: { ... }
-      },
-    },
-    ...
+    module.exports = ({ env }) => ({
+        // ...
+        navigation: {
+            enabled: true,
+            config: {
+                additionalFields: ['audience'],
+                contentTypes: ['api::page.page'],
+                contentTypesNameFields: {
+                    'api::page.page': ['title']
+                },
+                allowedLevels: 2,
+                gql: {...},
+            }
+        }
+    });
 ```
 
 ### Properties
 - `additionalFields` - Additional fields: 'audience', more in the future
 - `allowedLevels` - Maximum level for which your're able to mark item as "Menu attached"
-- `contentTypesNameFields` - Definition of content type title fields like `'content_type_name': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`
+- `contentTypes` - UIDs of related content types
+- `contentTypesNameFields` - Definition of content type title fields like `'api::<collection name>.<content type name>': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`. **TIP** - Proper content type uid you can find in the URL of Content Manager where you're managing relevant entities like: `admin/content-manager/collectionType/< THE UID HERE >?page=1&pageSize=10&sort=Title:ASC&plugins[i18n][locale]=en`
 - `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#gql-configuration)**
 
 ## GQL Configuration
-To properly configure GQL to work with navigation you should provide `gql` prop which should contain union types which will be used for define GQL response format for your data while fetching:
+Using navigation with GraphQL requires both plugins to be installed and working. You can find instalation guide for GraphQL plugin **[here](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#graphql)**.  To properly configure GQL to work with navigation you should provide `gql` prop. This should contain union types that will be used to define GQL response format for your data while fetching:
 
 ```gql
 master: Int
@@ -137,11 +114,11 @@ items: [NavigationItem]
 related: NavigationRelated
 ```
 
-as follows:   
+This prop should look as follows:   
 
 ```js
 gql: {
-    navigationItemRelated: 'union NavigationRelated = <your GQL related entities>',
+    navigationItemRelated: ['<your GQL related content types>'],
 },
 ```
 
@@ -149,10 +126,10 @@ for example:
 
 ```js
 gql: {
-        navigationItemRelated: 'union NavigationRelated = Pages | UploadFile',
+    navigationItemRelated: ['Page', 'UploadFile'],
 },
 ```
-where `Pages` and `UploadFile` are your types to the **Content Types** you're referring by navigation items relations. 
+where `Page` and `UploadFile` are your type names for the **Content Types** you're referring by navigation items relations. 
 
 
 ## Public API Navigation Item model
@@ -225,13 +202,13 @@ where `Pages` and `UploadFile` are your types to the **Content Types** you're re
 
 ### Render
 
-`GET <host>/navigation/render/<idOrSlug>?type=<type>`
+`GET <host>/api/navigation/render/<idOrSlug>?type=<type>`
 
 Return a rendered navigation structure depends on passed type (`tree`, `rfr` or nothing to render as `flat/raw`).
 
 *Note: The ID of navigation by default is `1`, that's for future extensions and multi-navigation feature.*
 
-**Example URL**: `https://localhost:1337/navigation/render/1`
+**Example URL**: `https://localhost:1337/api/navigation/render/1`
 
 **Example response body**
 
@@ -260,7 +237,7 @@ Return a rendered navigation structure depends on passed type (`tree`, `rfr` or
 ]
 ```
 
-**Example URL**: `https://localhost:1337/navigation/render/1?type=tree`
+**Example URL**: `https://localhost:1337/api/navigation/render/1?type=tree`
 
 **Example response body**
 
@@ -296,7 +273,7 @@ Return a rendered navigation structure depends on passed type (`tree`, `rfr` or
 ]
 ```
 
-**Example URL**: `https://localhost:1337/navigation/render/1?type=rfr`
+**Example URL**: `https://localhost:1337/api/navigation/render/1?type=rfr`
 
 **Example response body**
 
@@ -387,30 +364,11 @@ For collection types it will be read from content type's attribute name `templat
 
 For single types a global name of this content type will be used as a template name or it can be set manually with an option named `templateName`.
 
-## Audit log
-If you would like to use the [Strapi Molecules Audit Log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log) plugin you've to first install and then add in you `config/middleware.js` following section enable it:
-```js
-{
-    'audit-log': {
-          enabled: true,
-          exclude: [],
-          map: [
-            {
-              pluginName: 'navigation',
-              serviceName: 'navigation',
-              Class: Navigation,
-            },
-          ]
-        }
-}
-```
-As a last step you've to provide the Navigation class to let Audit Log use it. To not provide external & hard dependencies we've added the example of class code in the `examples/audit-log-integration.js` .
-
-## Examples
+## 🧩 Examples
 
 Live example of plugin usage can be found in the [VirtusLab Strapi Examples](https://github.com/VirtusLab/strapi-examples/tree/master/strapi-plugin-navigation) repository.
 
-## Q&A
+## 💬 Q&A
 
 ### Content Types
 
@@ -418,11 +376,11 @@ Live example of plugin usage can be found in the [VirtusLab Strapi Examples](htt
 
 **A:** As an authors of the plugin we're not supporting any editing of mentioned content types via built-in Strapi Content Manager. Plugin delivers highly customized & extended functionality which might be covered only by dedicated editor UI accessible via **Plugins Section > UI Navigation**. Only issues that has been recognized there, are in the scope of support we've providing.
 
-## Contributing
+## 🤝 Contributing
 
 Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!
 
-## Community support
+## 👨‍💻 Community support
 
 For general help using Strapi, please refer to [the official Strapi documentation](https://strapi.io/documentation/). For additional help, you can use one of these channels to ask a question:
 
@@ -430,6 +388,6 @@ For general help using Strapi, please refer to [the official Strapi documentatio
 - [Slack - VirtusLab Open Source](https://virtuslab-oss.slack.com) We're present on a public channel #strapi-molecules
 - [GitHub](https://github.com/VirtusLab/strapi-plugin-navigation/issues) (Bug reports, Contributions, Questions and Discussions)
 
-## License
+## 📝 License
 
 [MIT License](LICENSE.md) Copyright (c) 2021 [VirtusLab Sp. z o.o.](https://virtuslab.com/) &amp; [Strapi Solutions](https://strapi.io/).

package/admin/src/components/Item/ItemCardHeader/index.js

@@ -12,7 +12,7 @@ import Wrapper from './Wrapper';
 import ItemCardBadge from '../ItemCardBadge';
 import { getTrad } from "../../../translations";
 
-const ItemCardHeader = ({ title, path, icon, removed, isPublished, onItemRemove, onItemEdit, onItemRestore }) => {
+const ItemCardHeader = ({ title, path, icon, removed, isExternal, isPublished, onItemRemove, onItemEdit, onItemRestore }) => {
 	const badgeColor = isPublished ? 'success' : 'secondary';
 	const { formatMessage } = useIntl();
 
@@ -36,7 +36,7 @@ const ItemCardHeader = ({ title, path, icon, removed, isPublished, onItemRemove,
 					>
 						{formatMessage(getTrad("navigation.item.badge.removed"))}
 					</ItemCardBadge>
-					: <ItemCardBadge
+					: !isExternal && <ItemCardBadge
 						borderColor={`${badgeColor}200`}
 						backgroundColor={`${badgeColor}100`}
 						textColor={`${badgeColor}600`}

package/admin/src/components/Item/index.js

@@ -31,6 +31,7 @@ const Item = (props) => {
     onItemRestore,
     onItemEdit,
     error,
+    displayChildren,
   } = props;
 
   const {
@@ -48,7 +49,7 @@ const Item = (props) => {
   const isPublished = relatedRef && relatedRef?.publishedAt;
   const isNextMenuAllowedLevel = isNumber(allowedLevels) ? level < (allowedLevels - 1) : true;
   const isMenuAllowedLevel = isNumber(allowedLevels) ? level < allowedLevels : true;
-  const hasChildren = !isEmpty(item.items) && !isExternal;
+  const hasChildren = !isEmpty(item.items) && !isExternal && !displayChildren;
   const absolutePath = isExternal ? undefined : `${levelPath === '/' ? '' : levelPath}/${path === '/' ? '' : path}`;
 
   return (
@@ -60,6 +61,7 @@ const Item = (props) => {
             path={isExternal ? externalPath : absolutePath}
             icon={isExternal ? <EarthIcon /> : <LinkIcon />}
             isPublished={isPublished}
+            isExternal={isExternal}
             onItemRemove={() => onItemRemove(item)}
             onItemEdit={() => onItemEdit({
               ...item,

package/admin/src/components/NavigationItemList/index.js

@@ -15,6 +15,7 @@ const List = ({
   onItemLevelAdd,
   onItemRemove,
   onItemRestore,
+  displayFlat,
 }) => (
   <Wrapper level={level}>
     {items.map((item, n) => {
@@ -34,6 +35,7 @@ const List = ({
           onItemRemove={onItemRemove}
           onItemEdit={onItemEdit}
           error={error}
+          displayChildren={displayFlat}
         />
       );
     })}

package/admin/src/components/Search/index.js

@@ -0,0 +1,49 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Searchbar, SearchForm } from '@strapi/design-system/Searchbar';
+import SearchIcon from "@strapi/icons/Search";
+import { getTradId } from '../../translations';
+
+const Search = ({ value, setValue }) => {
+	const [isOpen, setIsOpen] = useState(!!value);
+	const wrapperRef = useRef(null);
+	const { formatMessage } = useIntl();
+
+	useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        wrapperRef.current.querySelector('input').focus();
+      }, 0);
+    }
+	}, [isOpen]);
+	
+	if (isOpen) {
+		return (
+			<div ref={wrapperRef}>
+				<SearchForm>
+					<Searchbar
+						name="searchbar"
+						onClear={() => setValue('')}
+						value={value}
+						size="S"
+						onChange={(e) => setValue(e.target.value)}
+						clearLabel="Clearing the search"
+						placeholder={formatMessage({
+							id: getTradId('popup.item.form.audience.placeholder'),
+							defaultMessage: 'Type to start searching...',
+						})}
+					>
+						Search for navigation items
+					</Searchbar>
+				</SearchForm>
+			</div>
+		);
+	} else {
+		return (
+			<IconButton icon={<SearchIcon />} onClick={() => setIsOpen(!isOpen)} />
+		);
+	}
+}
+
+export default Search;

package/admin/src/pages/DataManagerProvider/index.js

@@ -8,7 +8,6 @@ import {
   LoadingIndicatorPage,
   useNotification,
   useAppInfos,
-  useStrapiApp,
 } from "@strapi/helper-plugin";
 import DataManagerContext from "../../contexts/DataManagerContext";
 import getTrad from "../../utils/getTrad";
@@ -39,7 +38,7 @@ const DataManagerProvider = ({ children }) => {
   const toggleNotification = useNotification();
   const { autoReload } = useAppInfos();
   const { formatMessage } = useIntl();
- 
+
   const {
     items,
     config,
@@ -54,10 +53,8 @@ const DataManagerProvider = ({ children }) => {
     isLoadingForAdditionalDataToBeSet,
     isLoadingForSubmit,
     error
-  } = reducerState.toJS();
+  } = reducerState;
   const { pathname } = useLocation();
-  const { getPlugin } = useStrapiApp();
-  const { apis } = getPlugin(pluginId);
   const formatMessageRef = useRef();
   formatMessageRef.current = formatMessage;
 
@@ -164,7 +161,7 @@ const DataManagerProvider = ({ children }) => {
     }
   }, [autoReload]);
 
-  const getContentTypeItems = async ({ modelUID, query }, plugin = "") => {
+  const getContentTypeItems = async ({ modelUID, query }) => {
     dispatch({
       type: GET_CONTENT_TYPE_ITEMS,
     });
@@ -174,7 +171,7 @@ const DataManagerProvider = ({ children }) => {
     if (query) {
       queryParams.append('_q', query);
     }
-    
+
     const contentTypeItems = await request(`${url}?${queryParams.toString()}`, {
       method: "GET",
       signal,
@@ -229,7 +226,7 @@ const DataManagerProvider = ({ children }) => {
        dispatch({
          type: SUBMIT_NAVIGATION,
        });
- 
+
        const nagivationId = payload.id ? `/${payload.id}` : "";
        const method = payload.id ? "PUT" : "POST";
        const navigation = await request(`/${pluginId}${nagivationId}`, {
@@ -309,4 +306,4 @@ DataManagerProvider.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-export default memo(DataManagerProvider);
+export default memo(DataManagerProvider);

package/admin/src/pages/DataManagerProvider/reducer.js

@@ -1,4 +1,5 @@
-import { fromJS } from "immutable";
+import produce from 'immer';
+
 import {
   GET_LIST_DATA,
   GET_LIST_DATA_SUCCEEDED,
@@ -18,7 +19,7 @@ import {
   SUBMIT_NAVIGATION_ERROR,
 } from './actions';
 
-const initialState = fromJS({
+const initialState = {
   items: [],
   activeItem: undefined,
   changedActiveItem: undefined,
@@ -31,106 +32,94 @@ const initialState = fromJS({
   isLoadingForAdditionalDataToBeSet: false,
   isLoadingForSubmit: false,
   error: undefined,
-});
+};
 
-const reducer = (state, action) => {
+const reducer = (state, action) => produce(state, draftState => {
   switch (action.type) {
     case GET_CONFIG: {
-      return state
-        .update("isLoadingForAdditionalDataToBeSet", () => true)
-        .removeIn("config");
+      draftState.isLoadingForDetailsDataToBeSet = true;
+      draftState.config = {};
+      break;
     }
     case GET_CONFIG_SUCCEEDED: {
-      return state
-        .update("isLoadingForAdditionalDataToBeSet", () => false)
-        .update("config", () => fromJS(action.config));
+      draftState.isLoadingForDetailsDataToBeSet = false;
+      draftState.config = action.config;
+      break;
     }
     case GET_LIST_DATA: {
-      return state
-        .removeIn("items")
-        .update("isLoadingForDataToBeSet", () => true);
+      draftState.items = [];
+      draftState.isLoadingForDataToBeSet = true;
+      break;
     }
     case GET_LIST_DATA_SUCCEEDED: {
-      return state
-        .update("items", () => fromJS(action.items))
-        .update("isLoading", () => false)
-        .update("isLoadingForDataToBeSet", () => false);
+      draftState.items = action.items;
+      draftState.isLoading = false;
+      draftState.isLoadingForDataToBeSet = false;
+      break;
     }
     case GET_NAVIGATION_DATA: {
-      return state
-        .removeIn("activeItem")
-        .removeIn("changedActiveItem")
-        .update("isLoadingForDetailsDataToBeSet", () => true);
+      draftState.activeItem = undefined;
+      draftState.changedActiveItem = undefined;
+      draftState.isLoadingForDetailsDataToBeSet = true;
+      break;
     }
     case GET_NAVIGATION_DATA_SUCCEEDED: {
-      const { activeItem = {} } = action;
-      return state
-        .update("activeItem", () => fromJS(activeItem))
-        .update("changedActiveItem", () => fromJS(activeItem))
-        .update("isLoadingForDetailsDataToBeSet", () => false);
+      const activeItem = action.activeItem || {};
+      draftState.activeItem = activeItem;
+      draftState.changedActiveItem = activeItem;
+      draftState.isLoadingForDetailsDataToBeSet = false;
+      break;
     }
     case CHANGE_NAVIGATION_DATA: {
-      return state
-        .update("changedActiveItem", () => action.changedActiveItem)
-        .update("navigationPopupOpened", () =>
-          action.forceClosePopups ? false : state.navigationPopupOpened,
-        )
-        .update("navigationItemPopupOpened", () =>
-          action.forceClosePopups ? false : state.navigationItemPopupOpened,
-        );
-    }
-    case RESET_NAVIGATION_DATA: {
-      const { activeItem = {} } = action;
-      return state.update("changedActiveItem", () => activeItem);
+      draftState.changedActiveItem = action.changedActiveItem;
+      draftState.navigationPopupOpened = action.forceClosePopups ? false : state.navigationPopupOpened;
+      draftState.navigationItemPopupOpened = action.forceClosePopups ? false : state.navigationItemPopupOpened;
+      break;
+    }
+    case RESET_NAVIGATION_DATA : {
+      draftState.changedActiveItem = action.activeItem || {};
+      break;
     }
     case GET_CONTENT_TYPE_ITEMS: {
-      return state.update("isLoadingForAdditionalDataToBeSet", () => true);
+      draftState.isLoadingForAdditionalDataToBeSet = true;
+      break;
     }
     case GET_CONTENT_TYPE_ITEMS_SUCCEEDED: {
-      return state
-        .update("isLoadingForAdditionalDataToBeSet", () => false)
-        .updateIn(["config", "contentTypeItems"], () =>
-          fromJS(action.contentTypeItems),
-        );
+      draftState.isLoadingForAdditionalDataToBeSet = false;
+      draftState.config.contentTypeItems = action.contentTypeItems;
+      break;
     }
     case CHANGE_NAVIGATION_POPUP_VISIBILITY: {
-      return state.update(
-        "navigationPopupOpened",
-        () => action.navigationPopupOpened,
-      );
+      draftState.navigationPopupOpened = action.navigationPopupOpened;
+      break;
     }
     case CHANGE_NAVIGATION_ITEM_POPUP_VISIBILITY: {
-      return state.update(
-        "navigationItemPopupOpened",
-        () => action.navigationItemPopupOpened,
-      );
+      draftState.navigationItemPopupOpened = action.navigationItemPopupOpened;
+      break;
     }
     case SUBMIT_NAVIGATION: {
-      return state
-        .update('isLoadingForSubmit', () => true)
-        .update('error', () => undefined);
+      draftState.isLoadingForSubmit = true;
+      draftState.error = undefined;
+      break;
     }
     case SUBMIT_NAVIGATION_SUCCEEDED: {
-      const { navigation = {} } = action;
-      return state
-        .update("activeItem", () => fromJS(navigation))
-        .update("changedActiveItem", () => fromJS(navigation))
-        .update(
-          'isLoadingForSubmit',
-          () => false,
-        );
+      draftState.activeItem = action.navigation || {};
+      draftState.changedActiveItem = action.navigation || {};
+      draftState.isLoadingForSubmit = false;
+      break;
     }
     case SUBMIT_NAVIGATION_ERROR: {
-      return state
-        .update('isLoadingForSubmit', () => false)
-        .update('error', () => action.error);
+      draftState.isLoadingForSubmit = false;
+      draftState.error = action.error;
+      break;
     }
-    case RELOAD_PLUGIN:
+    case RELOAD_PLUGIN: {
       return initialState;
+    }
     default:
-      return state;
+      return draftState;
   }
-};
+});
 
 export default reducer;
 export { initialState };