Skip to content
Snippets Groups Projects
ReportOptions.tsx 2.63 KiB
Newer Older
  • Learn to ignore specific revisions
  • import React, { useCallback } from 'react'
    
    import { useI18n } from 'cozy-ui/transpiled/react'
    import { useClient } from 'cozy-client'
    
    import { useRecoilState } from 'recoil'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    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)
          }
    
        },
        [setUserProfile]
      )
    
      const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    
        e.target.value === 'true'
          ? updateUserProfileReport(true)
          : updateUserProfileReport(false)
    
    CARRON Guilhem's avatar
    CARRON Guilhem committed
        <div className="report-root">
          <div className="report-content">
            <div className="head text-14-normal-uppercase">
              {t('PROFILE.REPORT.TITLE')}
    
    CARRON Guilhem's avatar
    CARRON Guilhem committed
            <form action="" className="radios">
              <div className="input">
                <input
                  id="monthly"
                  name="report"
                  type="radio"
    
    CARRON Guilhem's avatar
    CARRON Guilhem committed
                  onChange={handleChange}
                  checked={
    
                    userProfile &&
                    userProfile.report.sendReportNotification === true
    
    CARRON Guilhem's avatar
    CARRON Guilhem committed
                  }
                ></input>
                <label htmlFor="monthly"> {t('PROFILE.REPORT.MONTHLY')}</label>
              </div>
              <div className="input">
                <input
                  id="never"
                  name="report"
                  type="radio"
    
    CARRON Guilhem's avatar
    CARRON Guilhem committed
                  onChange={handleChange}
                  checked={
    
                    userProfile &&
                    userProfile.report.sendReportNotification === false
    
    CARRON Guilhem's avatar
    CARRON Guilhem committed
                  }
                ></input>
                <label htmlFor="never"> {t('PROFILE.REPORT.NEVER')}</label>
              </div>
            </form>
          </div>
    
    export default ReportOptions