diff --git a/client/src/components/UserSettingsModal/AccountPane/AccountPane.jsx b/client/src/components/UserSettingsModal/AccountPane/AccountPane.jsx index ba5026a0..47e0acd1 100644 --- a/client/src/components/UserSettingsModal/AccountPane/AccountPane.jsx +++ b/client/src/components/UserSettingsModal/AccountPane/AccountPane.jsx @@ -18,6 +18,8 @@ const AccountPane = React.memo( name, username, avatar, + phone, + organization, isAvatarUploading, usernameUpdateForm, emailUpdateForm, @@ -53,6 +55,8 @@ const AccountPane = React.memo( @@ -120,6 +124,8 @@ AccountPane.propTypes = { name: PropTypes.string.isRequired, username: PropTypes.string, avatar: PropTypes.string, + phone: PropTypes.string, + organization: PropTypes.string, isAvatarUploading: PropTypes.bool.isRequired, /* eslint-disable react/forbid-prop-types */ usernameUpdateForm: PropTypes.object.isRequired, @@ -139,6 +145,8 @@ AccountPane.propTypes = { AccountPane.defaultProps = { username: undefined, avatar: undefined, + phone: undefined, + organization: undefined, }; export default AccountPane; diff --git a/client/src/components/UserSettingsModal/AccountPane/EditInformation.jsx b/client/src/components/UserSettingsModal/AccountPane/EditInformation.jsx index c1062ff1..bfde6409 100644 --- a/client/src/components/UserSettingsModal/AccountPane/EditInformation.jsx +++ b/client/src/components/UserSettingsModal/AccountPane/EditInformation.jsx @@ -1,5 +1,6 @@ import dequal from 'dequal'; -import React, { useCallback, useRef } from 'react'; +import pickBy from 'lodash/pickBy'; +import React, { useCallback, useMemo, useRef } from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import { Button, Form, Input } from 'semantic-ui-react'; @@ -11,26 +12,33 @@ import styles from './EditInformation.module.css'; const EditInformation = React.memo(({ defaultData, onUpdate }) => { const [t] = useTranslation(); - const [data, handleFieldChange] = useForm({ + const [data, handleFieldChange] = useForm(() => ({ name: '', - ...defaultData, - }); + phone: '', + organization: '', + ...pickBy(defaultData), + })); + + const cleanData = useMemo( + () => ({ + ...data, + name: data.name.trim(), + phone: data.phone.trim() || null, + organization: data.organization.trim() || null, + }), + [data], + ); const nameField = useRef(null); const handleSubmit = useCallback(() => { - const cleanData = { - ...data, - name: data.name.trim(), - }; - if (!cleanData.name) { nameField.current.select(); return; } onUpdate(cleanData); - }, [onUpdate, data]); + }, [onUpdate, cleanData]); return (
@@ -43,7 +51,23 @@ const EditInformation = React.memo(({ defaultData, onUpdate }) => { className={styles.field} onChange={handleFieldChange} /> -