strapi-plugin-navigation 1.1.0 → 2.0.0-beta.2

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

@@ -1,12 +1,15 @@
 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,
+  useStrapiApp,
+} from "@strapi/helper-plugin";
 import DataManagerContext from "../../contexts/DataManagerContext";
 import getTrad from "../../utils/getTrad";
 import pluginId from "../../pluginId";
@@ -30,16 +33,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,
@@ -56,7 +56,8 @@ const DataManagerProvider = ({ children }) => {
     error
   } = reducerState.toJS();
   const { pathname } = useLocation();
-
+  const { getPlugin } = useStrapiApp();
+  const { apis } = getPlugin(pluginId);
   const formatMessageRef = useRef();
   formatMessageRef.current = formatMessage;
 
@@ -64,8 +65,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 +95,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 +112,6 @@ const DataManagerProvider = ({ children }) => {
         method: "GET",
         signal,
       });
-
       dispatch({
         type: GET_CONFIG_SUCCEEDED,
         config,
@@ -134,7 +135,10 @@ const DataManagerProvider = ({ children }) => {
       }
     } catch (err) {
       console.error({ err });
-      strapi.notification.error("notification.error");
+      toggleNotification({
+        type: 'error',
+        message: { id: 'notification.error' },
+      });
     }
   };
 
@@ -152,40 +156,37 @@ 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 }, plugin = "") => {
     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) {
       queryParams.append('_q', query);
     }
-
+    
     const contentTypeItems = await request(`${url}?${queryParams.toString()}`, {
       method: "GET",
       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 +196,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 (
@@ -313,4 +309,4 @@ DataManagerProvider.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-export default memo(DataManagerProvider);
+export default memo(DataManagerProvider);

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;