From e28e4bb5dab0f43319d003738a348f17966f870c Mon Sep 17 00:00:00 2001 From: soupette Date: Thu, 2 Sep 2021 17:04:03 +0200 Subject: [PATCH] Post user Signed-off-by: soupette --- .../Users/ListPage/DynamicTable/index.js | 2 + .../{SelectRoles.js => SelectRoles/index.js} | 2 +- .../pages/Users/ListPage/ModalForm/index.js | 57 +++++++++++++++---- .../admin/src/pages/Users/ListPage/index.js | 10 ++-- 4 files changed, 55 insertions(+), 16 deletions(-) rename packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/{SelectRoles.js => SelectRoles/index.js} (97%) diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/DynamicTable/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/DynamicTable/index.js index 47017b92bc..5e9ec9920a 100644 --- a/packages/core/admin/admin/src/pages/Users/ListPage/DynamicTable/index.js +++ b/packages/core/admin/admin/src/pages/Users/ListPage/DynamicTable/index.js @@ -50,6 +50,7 @@ const Table = ({ try { setIsConfirmButtonLoading(true); await onConfirmDeleteAll(entriesToDelete); + handleToggleConfirmDeleteAll(); } catch (err) { setIsConfirmButtonLoading(false); handleToggleConfirmDeleteAll(); @@ -60,6 +61,7 @@ const Table = ({ try { setIsConfirmButtonLoading(true); await onConfirmDeleteAll(entriesToDelete); + handleToggleConfirmDelete(); } catch (err) { setIsConfirmButtonLoading(false); handleToggleConfirmDelete(); diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/SelectRoles.js b/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/SelectRoles/index.js similarity index 97% rename from packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/SelectRoles.js rename to packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/SelectRoles/index.js index 08d8bedd7b..f8b286dbdb 100644 --- a/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/SelectRoles.js +++ b/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/SelectRoles/index.js @@ -5,7 +5,7 @@ import { Select, Option } from '@strapi/parts'; import { useQuery } from 'react-query'; import styled, { keyframes } from 'styled-components'; import LoadingIcon from '@strapi/icons/LoadingIcon'; -import { axiosInstance } from '../../../../core/utils'; +import { axiosInstance } from '../../../../../core/utils'; const rotation = keyframes` from { diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js index 5b6ec036e7..da2956bd69 100644 --- a/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js +++ b/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js @@ -16,24 +16,54 @@ import { H2, } from '@strapi/parts'; import { Formik } from 'formik'; -import { Form, GenericInput } from '@strapi/helper-plugin'; +import { Form, GenericInput, useNotification, useOverlayBlocker } from '@strapi/helper-plugin'; +import { useQueryClient, useMutation } from 'react-query'; import formDataModel from 'ee_else_ce/pages/Users/ListPage/ModalForm/utils/formDataModel'; import roleSettingsForm from 'ee_else_ce/pages/Users/ListPage/ModalForm/utils/roleSettingsForm'; import SelectRoles from './SelectRoles'; import layout from './utils/layout'; import schema from './utils/schema'; import stepper from './utils/stepper'; +import { axiosInstance } from '../../../../core/utils'; -const ModalForm = ({ onToggle }) => { +const ModalForm = ({ queryName, onToggle }) => { const [currentStep, setStep] = useState('create'); + const [isSubmitting, setIsSubmiting] = useState(false); + const [registrationToken, setRegistrationToken] = useState(null); + const queryClient = useQueryClient(); const { formatMessage } = useIntl(); + const toggleNotification = useNotification(); + const { lockApp, unlockApp } = useOverlayBlocker(); + const postMutation = useMutation(body => axiosInstance.post('/admin/users', body), { + onSuccess: async ({ data }) => { + setRegistrationToken(data.registrationToken); + await queryClient.invalidateQueries(queryName); + goNext(); + setIsSubmiting(false); + }, + onError: err => { + console.error(err.response); + + toggleNotification({ + type: 'warning', + message: { id: 'notification.error', defaultMessage: 'An error occured' }, + }); + }, + onSettled: () => { + unlockApp(); + }, + }); + const headerTitle = formatMessage({ id: 'Settings.permissions.users.create', defaultMessage: 'Create new user', }); - const handleSubmit = () => { - goNext(); + const handleSubmit = async body => { + lockApp(); + setIsSubmiting(true); + + postMutation.mutateAsync(body); }; const goNext = () => { @@ -45,6 +75,16 @@ const ModalForm = ({ onToggle }) => { }; const { buttonSubmitLabel, isDisabled, next } = stepper[currentStep]; + const endActions = + currentStep === 'create' ? ( + + ) : ( + + ); return ( @@ -138,13 +178,7 @@ const ModalForm = ({ onToggle }) => { })} } - endActions={ - <> - - - } + endActions={endActions} /> ); @@ -156,6 +190,7 @@ const ModalForm = ({ onToggle }) => { ModalForm.propTypes = { onToggle: PropTypes.func.isRequired, + queryName: PropTypes.array.isRequired, }; export default ModalForm; diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/index.js index 0cabc8adc6..2808e465e5 100644 --- a/packages/core/admin/admin/src/pages/Users/ListPage/index.js +++ b/packages/core/admin/admin/src/pages/Users/ListPage/index.js @@ -23,7 +23,7 @@ import displayedFilters from './utils/displayedFilters'; import tableHeaders from './utils/tableHeaders'; const ListPage = () => { - const [isModalOpened, setIsModalOpen] = useState(true); + const [isModalOpened, setIsModalOpen] = useState(false); const { allowedActions: { canCreate, canDelete, canRead, canUpdate }, } = useRBAC(adminPermissions.settings.users); @@ -32,11 +32,13 @@ const ListPage = () => { const { formatMessage } = useIntl(); const { search } = useLocation(); useFocusWhenNavigate(); + const queryName = ['users', search]; - const { status, data, isFetching } = useQuery(['users', search], () => fetchData(search), { + const { status, data, isFetching } = useQuery(queryName, () => fetchData(search), { enabled: canRead, keepPreviousData: true, retry: false, + staleTime: 5000, onError: () => { toggleNotification({ type: 'warning', @@ -53,7 +55,7 @@ const ListPage = () => { const deleteAllMutation = useMutation(ids => deleteData(ids), { onSuccess: async () => { - await queryClient.invalidateQueries(['users', search]); + await queryClient.invalidateQueries(queryName); }, onError: err => { if (err?.response?.data?.data) { @@ -129,7 +131,7 @@ const ListPage = () => { )} - {isModalOpened && } + {isModalOpened && } );