strapi-plugin-navigation 1.1.1 → 2.0.0-beta.3

package/admin/src/index.js

@@ -1,49 +1,53 @@
-import pluginPkg from "../../package.json";
-import pluginId from "./pluginId";
-import App from "./containers/App";
-import Initializer from "./containers/Initializer";
-import lifecycles from "./lifecycles";
-import trads from "./translations";
-import pluginPermissions from "./permissions";
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
+import PluginIcon from './components/PluginIcon';
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
 
-export default (strapi) => {
-  const pluginDescription =
-    pluginPkg.strapi.description || pluginPkg.description;
-  const { icon, name } = pluginPkg.strapi;
+const name = pluginPkg.strapi.name;
 
-  const plugin = {
-    blockerComponent: null,
-    blockerComponentProps: {},
-    description: pluginDescription,
-    icon,
-    id: pluginId,
-    initializer: Initializer,
-    injectedComponents: [],
-    isReady: false,
-    isRequired: pluginPkg.strapi.required || false,
-    layout: null,
-    lifecycles,
-    leftMenuLinks: [],
-    leftMenuSections: [],
-    mainComponent: App,
-    name,
-    preventComponentRendering: false,
-    trads,
-    menu: {
-      pluginsSectionLinks: [
-        {
-          destination: `/plugins/${pluginId}`,
-          icon,
-          name,
-          label: {
-            id: `${pluginId}.plugin.name`,
-            defaultMessage: "NAVIGATION",
-          },
-          permissions: pluginPermissions.main,
-        },
-      ],
-    },
-  };
+export default {
+  register(app) {
+    app.addMenuLink({
+      to: `/plugins/${pluginId}`,
+      icon: PluginIcon,
+      intlLabel: {
+        id: `${pluginId}.plugin.name`,
+        defaultMessage: 'Navigation',
+      },
+      Component: async () => {
+        const component = await import(/* webpackChunkName: "my-plugin" */ './pages/App');
 
-  return strapi.registerPlugin(plugin);
+        return component;
+      },
+      permissions: [],
+    });
+    app.registerPlugin({
+      id: pluginId,
+      name,
+    });
+  },
+  bootstrap() {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(
+          /* webpackChunkName: "[pluginId]-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

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

@@ -0,0 +1,31 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+ import React, { Suspense, lazy } from "react";
+ import { Switch, Route } from "react-router-dom";
+ import { NotFound, LoadingIndicatorPage } from "@strapi/helper-plugin";
+ // Utils
+ import DataManagerProvider from "../DataManagerProvider";
+ import pluginId from "../../pluginId";
+ // Containers
+ const View = lazy(() => import("../View"));
+ 
+ const App = () => {
+   return (
+     <DataManagerProvider>
+       <Suspense fallback={<LoadingIndicatorPage />}>
+         <Switch>
+           <Route path={`/plugins/${pluginId}`} component={View} exact />
+           <Route component={NotFound} />
+         </Switch>
+       </Suspense>
+     </DataManagerProvider>
+   );
+ };
+ 
+ export default App;
+ 

package/admin/src/{containers → pages}/DataManagerProvider/index.js

@@ -1,12 +1,14 @@
 import React, { memo, useEffect, useReducer, useRef } from "react";
+import { useLocation, useRouteMatch } from "react-router-dom";
+import { useIntl } from 'react-intl';
 import PropTypes from "prop-types";
 import { get, find, first, isEmpty } from "lodash";
 import {
   request,
   LoadingIndicatorPage,
-  useGlobalContext,
-} from "strapi-helper-plugin";
-import { useLocation, useRouteMatch } from "react-router-dom";
+  useNotification,
+  useAppInfos,
+} from "@strapi/helper-plugin";
 import DataManagerContext from "../../contexts/DataManagerContext";
 import getTrad from "../../utils/getTrad";
 import pluginId from "../../pluginId";
@@ -30,16 +32,13 @@ import {
   SUBMIT_NAVIGATION_ERROR,
 } from './actions';
 import { prepareItemToViewPayload } from '../View/utils/parsers';
-import { getTradId } from "../../translations";
 
 const DataManagerProvider = ({ children }) => {
   const [reducerState, dispatch] = useReducer(reducer, initialState, init);
-  const {
-    autoReload,
-    emitEvent,
-    currentEnvironment,
-    formatMessage,
-  } = useGlobalContext();
+  const toggleNotification = useNotification();
+  const { autoReload } = useAppInfos();
+  const { formatMessage } = useIntl();
+
   const {
     items,
     config,
@@ -54,9 +53,8 @@ const DataManagerProvider = ({ children }) => {
     isLoadingForAdditionalDataToBeSet,
     isLoadingForSubmit,
     error
-  } = reducerState.toJS();
+  } = reducerState;
   const { pathname } = useLocation();
-
   const formatMessageRef = useRef();
   formatMessageRef.current = formatMessage;
 
@@ -64,8 +62,7 @@ const DataManagerProvider = ({ children }) => {
   getLayoutSettingRef.current = (settingName) =>
     get({}, ["settings", settingName], "");
 
-  const isInDevelopmentMode =
-    currentEnvironment === "development" && autoReload;
+  const isInDevelopmentMode = autoReload;
 
   const abortController = new AbortController();
   const { signal } = abortController;
@@ -95,9 +92,11 @@ const DataManagerProvider = ({ children }) => {
         });
       }
     } catch (err) {
-      // please don't do this, because js stringify a error and that error is not readable in dev tool
-      console.error(err);
-      strapi.notification.error("notification.error");
+      console.error({ err });
+      toggleNotification({
+        type: 'error',
+        message: { id: 'notification.error' },
+      });
     }
   };
 
@@ -110,7 +109,6 @@ const DataManagerProvider = ({ children }) => {
         method: "GET",
         signal,
       });
-
       dispatch({
         type: GET_CONFIG_SUCCEEDED,
         config,
@@ -134,7 +132,10 @@ const DataManagerProvider = ({ children }) => {
       }
     } catch (err) {
       console.error({ err });
-      strapi.notification.error("notification.error");
+      toggleNotification({
+        type: 'error',
+        message: { id: 'notification.error' },
+      });
     }
   };
 
@@ -152,21 +153,19 @@ const DataManagerProvider = ({ children }) => {
   }, [isLoading, pathname]);
 
   useEffect(() => {
-    if (currentEnvironment === "development" && !autoReload) {
-      strapi.notification.info(
-        formatMessageRef.current({
-          id: getTrad("notification.info.autoreaload-disable"),
-        }),
-      );
+    if (!autoReload) {
+      toggleNotification({
+        type: 'info',
+        message: { id: getTrad('notification.info.autoreaload-disable') },
+      });
     }
-  }, [autoReload, currentEnvironment]);
+  }, [autoReload]);
 
-  const getContentTypeItems = async ({type, query}, plugin = "") => {
+  const getContentTypeItems = async ({ modelUID, query }) => {
     dispatch({
       type: GET_CONTENT_TYPE_ITEMS,
     });
-    const url = plugin ? `/${plugin}/${type}` : `/${type}`;
-
+    const url =`/navigation/content-type-items/${modelUID}`;
     const queryParams = new URLSearchParams();
     queryParams.append('_publicationState', 'preview');
     if (query) {
@@ -178,14 +177,13 @@ const DataManagerProvider = ({ children }) => {
       signal,
     });
 
-    const fetchedContentType = find(config.contentTypes, ct => ct.endpoint === type);
-
+    const fetchedContentType = find(config.contentTypes, ct => ct.uid === modelUID);
     const isArray = Array.isArray(contentTypeItems);
     dispatch({
       type: GET_CONTENT_TYPE_ITEMS_SUCCEEDED,
       contentTypeItems: (isArray ? contentTypeItems : [contentTypeItems]).map(item => ({
         ...item,
-        __collectionName: get(fetchedContentType, 'collectionName', type),
+        __collectionUid: get(fetchedContentType, 'collectionUid', modelUID),
       })),
     });
   };
@@ -195,86 +193,81 @@ const DataManagerProvider = ({ children }) => {
   };
 
   const handleChangeNavigationPopupVisibility = (visible) => {
-    emitEvent("willChangeNavigationPopupVisibility");
     dispatch({
       type: CHANGE_NAVIGATION_POPUP_VISIBILITY,
       navigationPopupOpened: visible,
     });
-    emitEvent("didChangeNavigationPopupVisibility");
-    emitEvent(`navigationPopup${visible ? "Visible" : "Hidden"}`);
   };
 
   const handleChangeNavigationItemPopupVisibility = (visible) => {
-    emitEvent("willChangeNavigationItemPopupVisibility");
     dispatch({
       type: CHANGE_NAVIGATION_ITEM_POPUP_VISIBILITY,
       navigationItemPopupOpened: visible,
     });
-    emitEvent("didChangeNavigationItemPopupVisibility");
-    emitEvent(`navigationItemPopup${visible ? "Visible" : "Hidden"}`);
   };
 
   const handleChangeNavigationData = (payload, forceClosePopups) => {
-    emitEvent("willChangeNavigationData");
     dispatch({
       type: CHANGE_NAVIGATION_DATA,
       changedActiveItem: payload,
       forceClosePopups,
     });
-    emitEvent("didChangeNavigationData");
   };
 
   const handleResetNavigationData = () => {
-    emitEvent("willResetNavigationChanges");
-    dispatch({ 
+    dispatch({
       type: RESET_NAVIGATION_DATA,
       activeItem,
     });
-    emitEvent("didResetNavigationChanges");
   };
 
   const handleSubmitNavigation = async (formatMessage, payload = {}) => {
-    try {
-      emitEvent("willSubmitNavigation");
-      dispatch({
-        type: SUBMIT_NAVIGATION,
-      });
-
-      const nagivationId = payload.id ? `/${payload.id}` : "";
-      const method = payload.id ? "PUT" : "POST";
-      const navigation = await request(`/${pluginId}${nagivationId}`, {
-        method,
-        signal,
-        body: payload,
-      });
-
-      dispatch({
-        type: SUBMIT_NAVIGATION_SUCCEEDED,
-        navigation: {
-          ...navigation,
-          items: prepareItemToViewPayload(navigation.items, null, config),
-        },
-      });
-      emitEvent("didSubmitNavigation");
-
-      strapi.notification.success(getTradId('notification.navigation.submit'));
-    } catch (err) {
-      dispatch({
-        type: SUBMIT_NAVIGATION_ERROR,
-        error: err.response.payload.data
-      });
-      console.error({ err: err.response });
-      emitEvent('didNotSubmitNavigation');
-      if (err.response.payload.data && err.response.payload.data.errorTitles) {
-        return strapi.notification.error(
-          formatMessage(
-            getTrad('notification.navigation.error'),
-            { ...err.response.payload.data, errorTitles: err.response.payload.data.errorTitles.join(' and ') },
-          ),
-        );
-      }
-      strapi.notification.error('notification.error');
-    }
+     try {
+       dispatch({
+         type: SUBMIT_NAVIGATION,
+       });
+
+       const nagivationId = payload.id ? `/${payload.id}` : "";
+       const method = payload.id ? "PUT" : "POST";
+       const navigation = await request(`/${pluginId}${nagivationId}`, {
+         method,
+         signal,
+         body: payload,
+       });
+       dispatch({
+         type: SUBMIT_NAVIGATION_SUCCEEDED,
+         navigation: {
+           ...navigation,
+           items: prepareItemToViewPayload(navigation.items, null, config),
+         },
+       });
+       toggleNotification({
+         type: 'success',
+         message: { id: getTrad('notification.navigation.submit') },
+       });
+     } catch (err) {
+       dispatch({
+         type: SUBMIT_NAVIGATION_ERROR,
+         error: err.response.payload.data
+       });
+       console.error({ err: err.response });
+
+       if (err.response.payload.data && err.response.payload.data.errorTitles) {
+         return toggleNotification({
+           type: 'error',
+           message: {
+             id: formatMessage(
+               getTrad('notification.navigation.error'),
+               { ...err.response.payload.data, errorTitles: err.response.payload.data.errorTitles.join(' and ') },
+             )
+           },
+         });
+       }
+       toggleNotification({
+         type: 'error',
+         message: { id: getTrad('notification.error') },
+       });
+     }
   };
 
   return (

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

@@ -0,0 +1,125 @@
+import produce from 'immer';
+
+import {
+  GET_LIST_DATA,
+  GET_LIST_DATA_SUCCEEDED,
+  GET_NAVIGATION_DATA,
+  GET_NAVIGATION_DATA_SUCCEEDED,
+  RELOAD_PLUGIN,
+  RESET_NAVIGATION_DATA,
+  CHANGE_NAVIGATION_POPUP_VISIBILITY,
+  CHANGE_NAVIGATION_ITEM_POPUP_VISIBILITY,
+  CHANGE_NAVIGATION_DATA,
+  GET_CONFIG,
+  GET_CONFIG_SUCCEEDED,
+  GET_CONTENT_TYPE_ITEMS,
+  GET_CONTENT_TYPE_ITEMS_SUCCEEDED,
+  SUBMIT_NAVIGATION_SUCCEEDED,
+  SUBMIT_NAVIGATION,
+  SUBMIT_NAVIGATION_ERROR,
+} from './actions';
+
+const initialState = {
+  items: [],
+  activeItem: undefined,
+  changedActiveItem: undefined,
+  navigationPopupOpened: false,
+  navigationItemPopupOpened: false,
+  config: {},
+  isLoading: true,
+  isLoadingForDataToBeSet: false,
+  isLoadingForDetailsDataToBeSet: false,
+  isLoadingForAdditionalDataToBeSet: false,
+  isLoadingForSubmit: false,
+  error: undefined,
+};
+
+const reducer = (state, action) => produce(state, draftState => {
+  switch (action.type) {
+    case GET_CONFIG: {
+      draftState.isLoadingForDetailsDataToBeSet = true;
+      draftState.config = {};
+      break;
+    }
+    case GET_CONFIG_SUCCEEDED: {
+      draftState.isLoadingForDetailsDataToBeSet = false;
+      draftState.config = action.config;
+      break;
+    }
+    case GET_LIST_DATA: {
+      draftState.items = [];
+      draftState.isLoadingForDataToBeSet = true;
+      break;
+    }
+    case GET_LIST_DATA_SUCCEEDED: {
+      draftState.items = action.items;
+      draftState.isLoading = false;
+      draftState.isLoadingForDataToBeSet = false;
+      break;
+    }
+    case GET_NAVIGATION_DATA: {
+      draftState.activeItem = undefined;
+      draftState.changedActiveItem = undefined;
+      draftState.isLoadingForDetailsDataToBeSet = true;
+      break;
+    }
+    case GET_NAVIGATION_DATA_SUCCEEDED: {
+      const activeItem = action.activeItem || {};
+      draftState.activeItem = activeItem;
+      draftState.changedActiveItem = activeItem;
+      draftState.isLoadingForDetailsDataToBeSet = false;
+      break;
+    }
+    case CHANGE_NAVIGATION_DATA: {
+      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: {
+      draftState.isLoadingForAdditionalDataToBeSet = true;
+      break;
+    }
+    case GET_CONTENT_TYPE_ITEMS_SUCCEEDED: {
+      draftState.isLoadingForAdditionalDataToBeSet = false;
+      draftState.config.contentTypeItems = action.contentTypeItems;
+      break;
+    }
+    case CHANGE_NAVIGATION_POPUP_VISIBILITY: {
+      draftState.navigationPopupOpened = action.navigationPopupOpened;
+      break;
+    }
+    case CHANGE_NAVIGATION_ITEM_POPUP_VISIBILITY: {
+      draftState.navigationItemPopupOpened = action.navigationItemPopupOpened;
+      break;
+    }
+    case SUBMIT_NAVIGATION: {
+      draftState.isLoadingForSubmit = true;
+      draftState.error = undefined;
+      break;
+    }
+    case SUBMIT_NAVIGATION_SUCCEEDED: {
+      draftState.activeItem = action.navigation || {};
+      draftState.changedActiveItem = action.navigation || {};
+      draftState.isLoadingForSubmit = false;
+      break;
+    }
+    case SUBMIT_NAVIGATION_ERROR: {
+      draftState.isLoadingForSubmit = false;
+      draftState.error = action.error;
+      break;
+    }
+    case RELOAD_PLUGIN: {
+      return initialState;
+    }
+    default:
+      return draftState;
+  }
+});
+
+export default reducer;
+export { initialState };

package/admin/src/pages/View/components/NavigationContentHeader/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Flex } from '@strapi/design-system/Flex';
+
+const NavigationContentHeader = ({ startActions, endActions }) => {
+	return (
+			<Flex justifyContent="space-between" width="100%">
+				<Flex alignItems="space-between">
+					{startActions}
+				</Flex>
+				<Flex alignItems="space-between">
+					{endActions}
+				</Flex>
+			</Flex>
+	);
+}
+
+export default NavigationContentHeader;

package/admin/src/pages/View/components/NavigationHeader/index.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { HeaderLayout } from '@strapi/design-system/Layout';
+import { Stack } from '@strapi/design-system/Stack';
+import { Button } from '@strapi/design-system/Button';
+import { IconButton } from '@strapi/design-system/IconButton';
+import Check from '@strapi/icons/Check';
+import More from '@strapi/icons/More';
+import Plus from '@strapi/icons/Plus';
+import styled from 'styled-components';
+import { getTrad } from '../../../../translations';
+import { transformToRESTPayload } from '../../utils/parsers';
+const MoreButton = styled(IconButton)`
+  margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
+  padding: ${({ theme }) => theme.spaces[2]};
+
+  svg {
+    width: ${18 / 16}rem;
+    height: ${18 / 16}rem;
+  }
+`;
+
+const NavigationHeader = ({
+  structureHasErrors,
+  handleSave,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <HeaderLayout
+        primaryAction={
+        <Stack horizontal size={2}>
+            <Button
+              onClick={handleSave}
+              startIcon={<Check />}
+              disabled={structureHasErrors}
+              type="submit"
+            >
+              {formatMessage(getTrad('submit.cta.save'))}
+            </Button>
+            <MoreButton
+              id="more"
+              label="More"
+              icon={<More />}
+            />
+          </Stack>
+        }
+        title={formatMessage({
+          id: getTrad('header.title'),
+          defaultMessage: 'UI Navigation',
+        })}
+        subtitle={formatMessage({
+          id: getTrad('header.description'),
+          defaultMessage: 'Define your portal navigation',
+        })}
+      />
+  );
+};
+
+export default NavigationHeader;