import React, { useContext, useState } from 'react'; import { useFormik } from 'formik'; import { updateCustomer } from './service'; import { useCustomerData, useTranslation } from './app-state'; import { APIErrorContext } from './APIErrorProvider'; import './Profile.scss'; interface FormValues { email: string, username: string, } export const Profile: React.FC = (props) => { const { id, token, customerEmail, customerName, setEmail, setName } = useCustomerData(); const { t } = useTranslation(); const [isEditMode, setIsEditMode] = useState(false); const [isLoading, setIsLoading] = useState(false); const { addError } = useContext(APIErrorContext); const initialValues:FormValues = { email: customerEmail, username: customerName, }; const validate = (values:FormValues) => { const errors:any = {}; if (!values.email) { errors.email = t('required'); } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) { errors.email = t('invalid-email'); } if (!values.username) { errors.username = t('required'); } return errors; }; const {handleSubmit, handleChange, values, errors, setFieldValue} = useFormik({ initialValues, validate, onSubmit: (values) => { setIsLoading(true); // @ts-ignore updateCustomer(id, values.username, values.email, token) .then((result) => { setIsLoading(false); setEmail(result.data.email); setName(result.data.name); setIsEditMode(false); }) .catch(error => { addError(error.errors); console.error(error); }); }, }); const handleShowForm = () => { setIsEditMode(true); setFieldValue('email', customerEmail, false); setFieldValue('username', customerName, false); }; const handleHideForm = () => { setIsEditMode(false); errors.email = ''; errors.username = ''; }; return ( <div className="profile"> <h1 className="profile__title">{t('my-profile')}</h1> <div className="profile__data"> <p className="profile__titlesmall">{t('general')}</p> <div className="profile__container"> <h2>{t('personal-information')}</h2> {!isEditMode ? ( <div className="profile__info"> <p className="profile__infoitem"> <span className="profile__infolabel">{t('email')}:</span> {customerEmail} </p> <p className="profile__infoitem"> <span className="profile__infolabel">{t('username')}:</span> {customerName} </p> <button className="epbtn" onClick={handleShowForm}>{t('edit')}</button> </div> ) : ( <div className={`profile__form ${isLoading ? '--loading' : ''}`}> <form className="epform" onSubmit={handleSubmit}> { (isLoading) ? <div className="epminiLoader --centered" /> : ('') } <div className="epform__group"> <label className="epform__label" htmlFor="email">{t('email')}:</label> <input type="text" id="email" className="epform__input" onChange={handleChange} value={values.email} /> <div className="epform__error"> {errors.email ? errors.email : null} </div> </div> <div className="epform__group"> <label className="epform__label" htmlFor="username">{t('username')}:</label> <input type="text" id="username" name="username" className="epform__input" onChange={handleChange} value={values.username} /> <div className="epform__error"> {errors.username ? errors.username : null} </div> </div> <div className="epform__group"> <button className="epbtn --secondary" type="submit">{t('save')}</button> <button className="epbtn --bordered" type="submit" onClick={handleHideForm}>{t('cancel')}</button> </div> </form> </div> )} </div> </div> </div> ) };