From 733ee5caf1bcfa743dcd3cfeaab48e3048bddfd8 Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Tue, 26 May 2020 21:49:09 +0200 Subject: [PATCH] fix issues in users list. --- client/package.json | 2 + .../containers/Dialogs/InviteUserDialog.js | 14 +- .../src/containers/Dialogs/UserFormDialog.js | 37 +++- .../containers/Preferences/Users/UsersList.js | 189 ++++++++++-------- client/src/lang/en/index.js | 5 +- client/src/style/pages/invite-form.scss | 28 +-- 6 files changed, 162 insertions(+), 113 deletions(-) diff --git a/client/package.json b/client/package.json index 3da2d9d4f..25dab72d7 100644 --- a/client/package.json +++ b/client/package.json @@ -28,6 +28,7 @@ "basscss": "^8.0.2", "camelcase": "^5.3.1", "case-sensitive-paths-webpack-plugin": "2.3.0", + "cross-env": "^7.0.2", "css-loader": "3.4.2", "dotenv": "8.2.0", "dotenv-expand": "5.1.0", @@ -101,6 +102,7 @@ }, "scripts": { "start": "PORT=8000 node scripts/start.js", + "start-win": "cross-env PORT=8000 node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js", "flow": "flow" diff --git a/client/src/containers/Dialogs/InviteUserDialog.js b/client/src/containers/Dialogs/InviteUserDialog.js index a6345b8cd..999473e3e 100644 --- a/client/src/containers/Dialogs/InviteUserDialog.js +++ b/client/src/containers/Dialogs/InviteUserDialog.js @@ -12,6 +12,7 @@ import { } from '@blueprintjs/core'; import { objectKeysTransform } from 'utils'; import { pick, snakeCase } from 'lodash'; +import { queryCache } from 'react-query'; import AppToaster from 'components/AppToaster'; @@ -80,6 +81,7 @@ function InviteUserDialog({ message: formatMessage({id:'the_user_details_has_been_updated'}), }); setSubmitting(false); + queryCache.refetchQueries('users-table',{force:true}) }) .catch((error) => { setSubmitting(false); @@ -97,14 +99,15 @@ function InviteUserDialog({ formik.resetForm(); }, [formik.resetForm]); - const handleClose = () => { - closeDialog(name); - }; + // Handles dialog close. + const handleClose = useCallback(() => { + closeDialog(name); +}, [closeDialog, name]); return ( : ''} + title={payload.action === 'edit' ? : ''} className={classNames({ 'dialog--loading': fetchHook.pending, 'dialog--invite-user': true, @@ -115,6 +118,7 @@ function InviteUserDialog({ isLoading={fetchHook.pending} onClosed={onDialogClosed} onOpening={onDialogOpening} + onClose={handleClose} >
@@ -179,7 +183,7 @@ function InviteUserDialog({
-
diff --git a/client/src/containers/Dialogs/UserFormDialog.js b/client/src/containers/Dialogs/UserFormDialog.js index cdcd7f0b6..ab24e3de2 100644 --- a/client/src/containers/Dialogs/UserFormDialog.js +++ b/client/src/containers/Dialogs/UserFormDialog.js @@ -1,4 +1,4 @@ -import React, {useCallback } from 'react'; +import React, { useCallback } from 'react'; import { FormattedMessage as T, useIntl } from 'react-intl'; import { useFormik } from 'formik'; import * as Yup from 'yup'; @@ -37,7 +37,10 @@ function UserFormDialog({ }, false); const validationSchema = Yup.object().shape({ - email: Yup.string().email().required().label(formatMessage({id:'email'})), + email: Yup.string() + .email() + .required() + .label(formatMessage({ id: 'email' })), }); const initialValues = { @@ -45,7 +48,7 @@ function UserFormDialog({ ...(payload.action === 'edit' && pick( objectKeysTransform(payload.user, snakeCase), - Object.keys(validationSchema.fields) + Object.keys(validationSchema.fields), )), }; @@ -82,7 +85,10 @@ function UserFormDialog({ resetForm(); }, [resetForm]); - const handleClose = () => { closeDialog(name); }; + // Handles dialog close. + const handleClose = useCallback(() => { + closeDialog(name); + }, [closeDialog, name]); return (
-

+

@@ -115,7 +122,7 @@ function UserFormDialog({ label={} className={classNames('form-group--email', Classes.FILL)} intent={errors.email && touched.email && Intent.DANGER} - helperText={} + helperText={} inline={true} >
- - +
@@ -141,5 +158,5 @@ function UserFormDialog({ export default compose( UserFormDialogConnect, - DialogReduxConnect + DialogReduxConnect, )(UserFormDialog); diff --git a/client/src/containers/Preferences/Users/UsersList.js b/client/src/containers/Preferences/Users/UsersList.js index 4fbcb1338..cf88e8a66 100644 --- a/client/src/containers/Preferences/Users/UsersList.js +++ b/client/src/containers/Preferences/Users/UsersList.js @@ -1,5 +1,5 @@ import React, { useState, useMemo, useCallback } from 'react'; -import { useQuery } from 'react-query'; +import { queryCache,useQuery } from 'react-query'; import DataTable from 'components/DataTable'; import { Alert, @@ -10,10 +10,14 @@ import { MenuDivider, Position, Intent, - Tag + Tag, } from '@blueprintjs/core'; import { snakeCase } from 'lodash'; -import { FormattedMessage as T, useIntl } from 'react-intl'; +import { + FormattedMessage as T, + FormattedHTMLMessage, + useIntl, +} from 'react-intl'; import Icon from 'components/Icon'; import LoadingIndicator from 'components/LoadingIndicator'; @@ -27,13 +31,12 @@ import withUsersActions from 'containers/Users/withUsersActions'; import { compose } from 'utils'; - function UsersListPreferences({ // #withDialog openDialog, closeDialog, - // #withUsers + // #withUsers usersList, // #withUsersActions @@ -46,9 +49,8 @@ function UsersListPreferences({ }) { const [deleteUserState, setDeleteUserState] = useState(false); const [inactiveUserState, setInactiveUserState] = useState(false); - const { formatMessage } = useIntl() - const fetchUsers = useQuery('users-table', - () => requestFetchUsers()); + const { formatMessage } = useIntl(); + const fetchUsers = useQuery('users-table', () => requestFetchUsers()); const onInactiveUser = (user) => { setInactiveUserState(user); @@ -63,9 +65,18 @@ function UsersListPreferences({ const handleConfirmUserActive = useCallback(() => { requestInactiveUser(inactiveUserState.id).then(() => { setInactiveUserState(false); - AppToaster.show({ message: formatMessage({id:'the_user_has_been_successfully_inactivated'}) }); + AppToaster.show({ + message: formatMessage({ + id: 'the_user_has_been_successfully_inactivated', + }), + }); }); - }, [inactiveUserState, requestInactiveUser, requestFetchUsers,formatMessage]); + }, [ + inactiveUserState, + requestInactiveUser, + requestFetchUsers, + formatMessage, + ]); const onDeleteUser = (user) => { setDeleteUserState(user); @@ -75,16 +86,6 @@ function UsersListPreferences({ setDeleteUserState(false); }; - const onEditInviteUser = (user) => () => { - const form = Object.keys(user).reduce((obj, key) => { - const camelKey = snakeCase(key); - obj[camelKey] = user[key]; - return obj; - }, {}); - - openDialog('user-form', { action: 'edit', user: form }); - }; - const onEditUser = (user) => () => { const form = Object.keys(user).reduce((obj, key) => { const camelKey = snakeCase(key); @@ -95,72 +96,97 @@ function UsersListPreferences({ openDialog('userList-form', { action: 'edit', user: form }); }; - const handleConfirmUserDelete = () => { - if (!deleteUserState) { return; } + // Handle confirm User delete + + const handleConfirmUserDelete =useCallback(()=>{ + if (!deleteUserState) { + return; + } requestDeleteUser(deleteUserState.id).then((response) => { setDeleteUserState(false); AppToaster.show({ - message: formatMessage({id:'the_user_has_been_successfully_deleted'}), + message: formatMessage({ + id: 'the_user_has_been_successfully_deleted', + }), + intent:Intent.SUCCESS, }); - }); - }; + queryCache.refetchQueries('users-table',{force:true}) + }).catch((errors)=>{ + setDeleteUserState(false) + }) + },[deleteUserState,requestDeleteUser,formatMessage]) + const actionMenuList = useCallback( (user) => ( } onClick={onEditUser(user)} /> - - } onClick={onEditInviteUser(user)} /> - } onClick={() => onInactiveUser(user)} /> - } onClick={() => onDeleteUser(user)} /> + } + onClick={() => onInactiveUser(user)} + /> + } + onClick={() => onDeleteUser(user)} + /> ), - [] + [], ); - const columns = useMemo(() => [ - { - id: 'full_name', - Header:formatMessage({id:'full_name'}), + const columns = useMemo( + () => [ + { + id: 'full_name', + Header: formatMessage({ id: 'full_name' }), accessor: 'full_name', - width: 170, - }, - { - id: 'email', - Header: formatMessage({id:'email'}), - accessor: 'email', - width: 150, - }, - { - id: 'phone_number', - Header: formatMessage({id:'phone_number'}), - accessor: 'phone_number', - width: 150, - }, - { - id: 'active', - Header: 'Status', - accessor: (user) => user.active ? - : - , - width: 50, - className: 'status', - }, - { - id: 'actions', - Header: '', - Cell: ({ cell }) => ( - -