@strapi/plugin-users-permissions 4.12.6 → 4.12.7

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

@@ -1,6 +1,6 @@
 import React, { useReducer } from 'react';
 
-import { Accordion, AccordionContent, AccordionToggle, Flex } from '@strapi/design-system';
+import { Accordion, AccordionContent, AccordionToggle, Box, Flex } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
@@ -44,7 +44,9 @@ const Permissions = () => {
             variant={index % 2 ? 'primary' : 'secondary'}
           />
           <AccordionContent>
-            <PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
+            <Box>
+              <PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
+            </Box>
           </AccordionContent>
         </Accordion>
       ))}

package/admin/src/hooks/index.js

@@ -0,0 +1,5 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as useForm } from './useForm';
+export { default as useRolesList } from './useRolesList';
+export * from './usePlugins';
+export { default as useFetchRole } from './useFetchRole';

package/admin/src/hooks/useFetchRole/index.js

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+
+import { useFetchClient, useNotification } from '@strapi/helper-plugin';
+
+import pluginId from '../../pluginId';
+
+import reducer, { initialState } from './reducer';
+
+const useFetchRole = (id) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const toggleNotification = useNotification();
+  const isMounted = useRef(null);
+  const { get } = useFetchClient();
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    if (id) {
+      fetchRole(id);
+    } else {
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        role: {},
+      });
+    }
+
+    return () => (isMounted.current = false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  const fetchRole = async (roleId) => {
+    try {
+      const {
+        data: { role },
+      } = await get(`/${pluginId}/roles/${roleId}`);
+
+      // Prevent updating state on an unmounted component
+      if (isMounted.current) {
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          role,
+        });
+      }
+    } catch (err) {
+      console.error(err);
+
+      dispatch({
+        type: 'GET_DATA_ERROR',
+      });
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+    }
+  };
+
+  const handleSubmitSucceeded = useCallback((data) => {
+    dispatch({
+      type: 'ON_SUBMIT_SUCCEEDED',
+      ...data,
+    });
+  }, []);
+
+  return { ...state, onSubmitSucceeded: handleSubmitSucceeded };
+};
+
+export default useFetchRole;

package/admin/src/hooks/useFetchRole/reducer.js

@@ -0,0 +1,31 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+
+export const initialState = {
+  role: {},
+  isLoading: true,
+};
+
+const reducer = (state, action) =>
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.role = action.role;
+        draftState.isLoading = false;
+        break;
+      }
+      case 'GET_DATA_ERROR': {
+        draftState.isLoading = false;
+        break;
+      }
+      case 'ON_SUBMIT_SUCCEEDED': {
+        draftState.role.name = action.name;
+        draftState.role.description = action.description;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

package/admin/src/hooks/useForm/index.js

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+
+import { useFetchClient, useNotification, useRBAC } from '@strapi/helper-plugin';
+
+import reducer, { initialState } from './reducer';
+
+const useUserForm = (endPoint, permissions) => {
+  const { isLoading: isLoadingForPermissions, allowedActions } = useRBAC(permissions);
+  const [{ isLoading, modifiedData }, dispatch] = useReducer(reducer, initialState);
+  const toggleNotification = useNotification();
+  const isMounted = useRef(true);
+
+  const { get } = useFetchClient();
+
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        dispatch({
+          type: 'GET_DATA',
+        });
+
+        const { data } = await get(`/users-permissions/${endPoint}`);
+
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          data,
+        });
+      } catch (err) {
+        // The user aborted the request
+        if (isMounted.current) {
+          dispatch({
+            type: 'GET_DATA_ERROR',
+          });
+          console.error(err);
+          toggleNotification({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+      }
+    };
+
+    if (!isLoadingForPermissions) {
+      getData();
+    }
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, [isLoadingForPermissions, endPoint, get, toggleNotification]);
+
+  const dispatchSubmitSucceeded = useCallback((data) => {
+    dispatch({
+      type: 'ON_SUBMIT_SUCCEEDED',
+      data,
+    });
+  }, []);
+
+  return {
+    allowedActions,
+    dispatchSubmitSucceeded,
+    isLoading,
+    isLoadingForPermissions,
+    modifiedData,
+  };
+};
+
+export default useUserForm;

package/admin/src/hooks/useForm/reducer.js

@@ -0,0 +1,40 @@
+import produce from 'immer';
+
+const initialState = {
+  isLoading: true,
+  modifiedData: {},
+};
+
+const reducer = (state, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'GET_DATA': {
+        draftState.isLoading = true;
+        draftState.modifiedData = {};
+
+        break;
+      }
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.isLoading = false;
+        draftState.modifiedData = action.data;
+
+        break;
+      }
+      case 'GET_DATA_ERROR': {
+        draftState.isLoading = true;
+        break;
+      }
+      case 'ON_SUBMIT_SUCCEEDED': {
+        draftState.modifiedData = action.data;
+
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default reducer;
+export { initialState };

package/admin/src/{pages/Roles/hooks → hooks}/usePlugins.js

@@ -3,7 +3,8 @@ import { useEffect } from 'react';
 import { useNotification, useFetchClient, useAPIErrorHandler } from '@strapi/helper-plugin';
 import { useQueries } from 'react-query';
 
-import { cleanPermissions, getTrad } from '../../../utils';
+import pluginId from '../pluginId';
+import { cleanPermissions, getTrad } from '../utils';
 
 export const usePlugins = () => {
   const toggleNotification = useNotification();
@@ -20,23 +21,19 @@ export const usePlugins = () => {
     { data: routes, isLoading: isLoadingRoutes, error: routesError, refetch: refetchRoutes },
   ] = useQueries([
     {
-      queryKey: ['users-permissions', 'permissions'],
+      queryKey: [pluginId, 'permissions'],
       async queryFn() {
-        const {
-          data: { permissions },
-        } = await get(`/users-permissions/permissions`);
+        const res = await get(`/${pluginId}/permissions`);
 
-        return permissions;
+        return res.data.permissions;
       },
     },
     {
-      queryKey: ['users-permissions', 'routes'],
+      queryKey: [pluginId, 'routes'],
       async queryFn() {
-        const {
-          data: { routes },
-        } = await get(`/users-permissions/routes`);
+        const res = await get(`/${pluginId}/routes`);
 
-        return routes;
+        return res.data.routes;
       },
     },
   ]);
@@ -66,12 +63,8 @@ export const usePlugins = () => {
   const isLoading = isLoadingPermissions || isLoadingRoutes;
 
   return {
-    // TODO: these return values need to be memoized, otherwise
-    // they will create infinite rendering loops when used as
-    // effect dependencies
     permissions: permissions ? cleanPermissions(permissions) : {},
     routes: routes ?? {},
-
     getData: refetchQueries,
     isLoading,
   };

package/admin/src/hooks/useRolesList/index.js

@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+
+import { useFetchClient, useNotification } from '@strapi/helper-plugin';
+import get from 'lodash/get';
+
+import pluginId from '../../pluginId';
+
+import init from './init';
+import reducer, { initialState } from './reducer';
+
+const useRolesList = (shouldFetchData = true) => {
+  const [{ roles, isLoading }, dispatch] = useReducer(reducer, initialState, () =>
+    init(initialState, shouldFetchData)
+  );
+  const toggleNotification = useNotification();
+
+  const isMounted = useRef(true);
+  const fetchClient = useFetchClient();
+
+  const fetchRolesList = useCallback(async () => {
+    try {
+      dispatch({
+        type: 'GET_DATA',
+      });
+
+      const {
+        data: { roles },
+      } = await fetchClient.get(`/${pluginId}/roles`);
+
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        data: roles,
+      });
+    } catch (err) {
+      const message = get(err, ['response', 'payload', 'message'], 'An error occured');
+
+      if (isMounted.current) {
+        dispatch({
+          type: 'GET_DATA_ERROR',
+        });
+
+        if (message !== 'Forbidden') {
+          toggleNotification({
+            type: 'warning',
+            message,
+          });
+        }
+      }
+    }
+  }, [fetchClient, toggleNotification]);
+
+  useEffect(() => {
+    if (shouldFetchData) {
+      fetchRolesList();
+    }
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, [shouldFetchData, fetchRolesList]);
+
+  return { roles, isLoading, getData: fetchRolesList };
+};
+
+export default useRolesList;

package/admin/src/hooks/useRolesList/init.js

@@ -0,0 +1,5 @@
+const init = (initialState, shouldFetchData) => {
+  return { ...initialState, isLoading: shouldFetchData };
+};
+
+export default init;

package/admin/src/hooks/useRolesList/reducer.js

@@ -0,0 +1,31 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+
+export const initialState = {
+  roles: [],
+  isLoading: true,
+};
+
+const reducer = (state, action) =>
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'GET_DATA': {
+        draftState.isLoading = true;
+        draftState.roles = [];
+        break;
+      }
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.roles = action.data;
+        draftState.isLoading = false;
+        break;
+      }
+      case 'GET_DATA_ERROR': {
+        draftState.isLoading = false;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

package/admin/src/index.js

@@ -9,6 +9,7 @@ import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 
 import { PERMISSIONS } from './constants';
+import pluginId from './pluginId';
 import getTrad from './utils/getTrad';
 
 const name = pluginPkg.strapi.name;
@@ -18,7 +19,7 @@ export default {
     // Create the plugin's settings section
     app.createSettingSection(
       {
-        id: 'users-permissions',
+        id: pluginId,
         intlLabel: {
           id: getTrad('Settings.section-label'),
           defaultMessage: 'Users & Permissions plugin',
@@ -31,7 +32,7 @@ export default {
             defaultMessage: 'Roles',
           },
           id: 'roles',
-          to: `/settings/users-permissions/roles`,
+          to: `/settings/${pluginId}/roles`,
           async Component() {
             const component = await import(
               /* webpackChunkName: "users-roles-settings-page" */ './pages/Roles'
@@ -47,7 +48,7 @@ export default {
             defaultMessage: 'Providers',
           },
           id: 'providers',
-          to: `/settings/users-permissions/providers`,
+          to: `/settings/${pluginId}/providers`,
           async Component() {
             const component = await import(
               /* webpackChunkName: "users-providers-settings-page" */ './pages/Providers'
@@ -63,7 +64,7 @@ export default {
             defaultMessage: 'Email templates',
           },
           id: 'email-templates',
-          to: `/settings/users-permissions/email-templates`,
+          to: `/settings/${pluginId}/email-templates`,
           async Component() {
             const component = await import(
               /* webpackChunkName: "users-email-settings-page" */ './pages/EmailTemplates'
@@ -79,7 +80,7 @@ export default {
             defaultMessage: 'Advanced Settings',
           },
           id: 'advanced-settings',
-          to: `/settings/users-permissions/advanced-settings`,
+          to: `/settings/${pluginId}/advanced-settings`,
           async Component() {
             const component = await import(
               /* webpackChunkName: "users-advanced-settings-page" */ './pages/AdvancedSettings'
@@ -93,7 +94,7 @@ export default {
     );
 
     app.registerPlugin({
-      id: 'users-permissions',
+      id: pluginId,
       name,
     });
   },
@@ -106,7 +107,7 @@ export default {
         )
           .then(({ default: data }) => {
             return {
-              data: prefixPluginTranslations(data, 'users-permissions'),
+              data: prefixPluginTranslations(data, pluginId),
               locale,
             };
           })

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

@@ -20,8 +20,6 @@ import {
   GenericInput,
   LoadingIndicatorPage,
   SettingsPageTitle,
-  useAPIErrorHandler,
-  useFetchClient,
   useFocusWhenNavigate,
   useNotification,
   useOverlayBlocker,
@@ -35,6 +33,7 @@ import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { PERMISSIONS } from '../../constants';
 import { getTrad } from '../../utils';
 
+import { fetchData, putAdvancedSettings } from './utils/api';
 import layout from './utils/layout';
 import schema from './utils/schema';
 
@@ -50,9 +49,6 @@ const AdvancedSettingsPage = () => {
   const { lockApp, unlockApp } = useOverlayBlocker();
   const { notifyStatus } = useNotifyAT();
   const queryClient = useQueryClient();
-  const { get, put } = useFetchClient();
-  const { formatAPIError } = useAPIErrorHandler();
-
   useFocusWhenNavigate();
 
   const {
@@ -60,37 +56,28 @@ const AdvancedSettingsPage = () => {
     allowedActions: { canUpdate },
   } = useRBAC({ update: PERMISSIONS.updateAdvancedSettings });
 
-  const { isLoading: isLoadingData, data } = useQuery(
-    ['users-permissions', 'advanced'],
-    async () => {
-      const { data } = await get('/users-permissions/advanced');
-
-      return data;
+  const { status: isLoadingData, data } = useQuery('advanced', () => fetchData(), {
+    onSuccess() {
+      notifyStatus(
+        formatMessage({
+          id: getTrad('Form.advancedSettings.data.loaded'),
+          defaultMessage: 'Advanced settings data has been loaded',
+        })
+      );
     },
-    {
-      onSuccess() {
-        notifyStatus(
-          formatMessage({
-            id: getTrad('Form.advancedSettings.data.loaded'),
-            defaultMessage: 'Advanced settings data has been loaded',
-          })
-        );
-      },
-      onError() {
-        toggleNotification({
-          type: 'warning',
-          message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' },
-        });
-      },
-    }
-  );
+    onError() {
+      toggleNotification({
+        type: 'warning',
+        message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' },
+      });
+    },
+  });
 
-  const isLoading = isLoadingForPermissions || isLoadingData;
+  const isLoading = isLoadingForPermissions || isLoadingData !== 'success';
 
-  const submitMutation = useMutation((body) => put('/users-permissions/advanced', body), {
+  const submitMutation = useMutation((body) => putAdvancedSettings(body), {
     async onSuccess() {
-      await queryClient.invalidateQueries(['users-permissions', 'advanced']);
-
+      await queryClient.invalidateQueries('advanced');
       toggleNotification({
         type: 'success',
         message: { id: getTrad('notification.success.saved'), defaultMessage: 'Saved' },
@@ -98,12 +85,11 @@ const AdvancedSettingsPage = () => {
 
       unlockApp();
     },
-    onError(error) {
+    onError() {
       toggleNotification({
         type: 'warning',
-        message: formatAPIError(error),
+        message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' },
       });
-
       unlockApp();
     },
     refetchActive: true,
@@ -114,12 +100,9 @@ const AdvancedSettingsPage = () => {
   const handleSubmit = async (body) => {
     lockApp();
 
-    submitMutation.mutate({
-      ...body,
-      email_confirmation_redirection: body.email_confirmation
-        ? body.email_confirmation_redirection
-        : '',
-    });
+    const urlConfirmation = body.email_confirmation ? body.email_confirmation_redirection : '';
+
+    await submitMutation.mutateAsync({ ...body, email_confirmation_redirection: urlConfirmation });
   };
 
   if (isLoading) {

package/admin/src/pages/AdvancedSettings/utils/api.js

@@ -0,0 +1,16 @@
+import { getFetchClient } from '@strapi/helper-plugin';
+
+const fetchData = async () => {
+  const { get } = getFetchClient();
+  const { data } = await get('/users-permissions/advanced');
+
+  return data;
+};
+
+const putAdvancedSettings = (body) => {
+  const { put } = getFetchClient();
+
+  return put('/users-permissions/advanced', body);
+};
+
+export { fetchData, putAdvancedSettings };