From 9b4e3931a949b852404c3d8a7f1d4fefad5c5a20 Mon Sep 17 00:00:00 2001 From: Maksim Eltyshev Date: Thu, 9 Apr 2020 18:27:28 +0500 Subject: [PATCH] Add phone and organization fields to user --- .../AccountPane/AccountPane.jsx | 8 ++++ .../AccountPane/EditInformation.jsx | 46 ++++++++++++++----- .../UserSettingsModal/UserSettingsModal.jsx | 8 ++++ .../containers/UserSettingsModalContainer.js | 4 ++ client/src/locales/en-US/app.js | 2 + client/src/locales/ru-RU/app.js | 2 + client/src/models/User.js | 2 + server/api/controllers/users/create.js | 19 +++++++- server/api/controllers/users/update.js | 12 ++++- server/api/models/User.js | 10 ++++ ...0180721220409_create_user_account_table.js | 2 + 11 files changed, 102 insertions(+), 13 deletions(-) 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} /> -