Newer
Older
import { useI18n } from 'cozy-ui/transpiled/react'
import { useClient } from 'cozy-client'
import UserProfileService from 'services/userProfile.service'
import { userProfileState } from 'atoms/userProfile.state'
import { UserProfile } from 'models'
const ReportOptions: React.FC = () => {
const { t } = useI18n()
const client = useClient()
const [userProfile, setUserProfile] = useRecoilState<UserProfile>(
userProfileState
)
const updateUserProfileReport = useCallback(
async (value: boolean) => {
const userProfileService = new UserProfileService(client)
const reportAttributes = {
sendReportNotification: value,
haveSeenLastReport: userProfile.report.haveSeenLastReport,
monthlyReportDate: userProfile.report.monthlyReportDate,
}
try {
await userProfileService
.updateUserProfile({ report: reportAttributes })
.then(updatedUserProfile => {
updatedUserProfile && setUserProfile(updatedUserProfile)
})
} catch (err) {
console.log(err)
}
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
e.target.value === 'true'
? updateUserProfileReport(true)
: updateUserProfileReport(false)
<div className="report-root">
<div className="report-content">
<div className="head text-14-normal-uppercase">
{t('PROFILE.REPORT.TITLE')}
<form action="" className="radios">
<div className="input">
<input
id="monthly"
name="report"
type="radio"
value="true"
userProfile &&
userProfile.report.sendReportNotification === true
}
></input>
<label htmlFor="monthly"> {t('PROFILE.REPORT.MONTHLY')}</label>
</div>
<div className="input">
<input
id="never"
name="report"
type="radio"
value="false"
userProfile &&
userProfile.report.sendReportNotification === false
}
></input>
<label htmlFor="never"> {t('PROFILE.REPORT.NEVER')}</label>
</div>
</form>
</div>