Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 4x 4x | import React, { FC, useEffect, useState } from 'react';
import { RouteComponentProps } from '@reach/router';
import { Layout } from './Layout';
import { useTranslation } from 'react-i18next';
import { useUserContext } from '../../contexts';
const styles = require('./Profile.module.css')
import { Button, Loading } from 'ag-ems-ui-library';
import { NameEditModal, EmailEditModal, PasswordEditModal } from './Modals';
import { Username } from './types';
export const UserData: FC<RouteComponentProps> = () => {
const { t } = useTranslation();
const { user, updateUserData, updateUserEmail, changePassword } = useUserContext();
const [showEditName, setShowEditName] = useState(false);
const [showEditEmail, setShowEditEmail] = useState(false);
const [showEditPassword, setShowEditPassword] = useState(false);
const [preloader, setPreloader] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
console.groupCollapsed('User');
console.log(user);
console.groupEnd();
useEffect(() => {
if (showEditName || showEditEmail || showEditPassword) {
setErrorMessage('');
}
}, [showEditName, showEditEmail, showEditPassword]);
const updateName = (name: Username) => {
setPreloader(true);
setErrorMessage('');
updateUserData(name).then(({ data, errors }) => {
if (errors && errors.length) {
setErrorMessage(errors[0].message);
} else {
setShowEditName(false);
}
setPreloader(false);
});
};
const updateEmail = (email: string, password: string) => {
setPreloader(true);
setErrorMessage('');
updateUserEmail(email, password).then(({ errors }) => {
if (errors && errors.length) {
setErrorMessage(errors[0].message);
} else {
setShowEditEmail(false);
}
setPreloader(false);
});
};
const updatePassword = (password: string, newPassword: string) => {
setPreloader(true);
setErrorMessage('');
changePassword(password, newPassword).then(({ errors }) => {
if (errors && errors.length) {
setErrorMessage(errors[0].message);
} else {
setShowEditPassword(false);
}
setPreloader(false);
});
};
return <Layout current="profile">
<h1>{t('profile.myAccount')}</h1>
{user ? <>
<section className={styles.ProfileDataSection}>
<dl>
<dt>{t('name')}</dt>
<dd>{user.firstname} {user.lastname}</dd>
</dl>
<Button value={t('edit')} variant="ghost" onClick={() => setShowEditName(true)} />
</section>
<section className={styles.ProfileDataSection}>
<dl>
<dt>{t('email')}</dt>
<dd>{user.email}</dd>
</dl>
<Button value={t('edit')} variant="ghost" onClick={() => setShowEditEmail(true)} />
</section>
<section className={styles.ProfileDataSection}>
<dl>
<dt>{t('password')}</dt>
<dd>************</dd>
</dl>
<Button value={t('edit')} variant="ghost" onClick={() => setShowEditPassword(true)} />
</section>
<NameEditModal
isOpen={showEditName}
onClose={() => setShowEditName(false)}
name={{ firstname: user.firstname, lastname: user.lastname }}
onSubmit={updateName}
preloader={preloader}
errorMessage={errorMessage}
/>
<EmailEditModal
isOpen={showEditEmail}
onClose={() => setShowEditEmail(false)}
email={user.email}
onSubmit={updateEmail}
preloader={preloader}
errorMessage={errorMessage}
/>
<PasswordEditModal
isOpen={showEditPassword}
onClose={() => setShowEditPassword(false)}
onSubmit={updatePassword}
preloader={preloader}
errorMessage={errorMessage}
/>
</> : <Loading color="#007c00" />}
{preloader && <Loading color="#007c00" />}
</Layout>;
} |