Skip to content
Snippets Groups Projects
Commit b2e058b6 authored by Yoan VALLET's avatar Yoan VALLET
Browse files

feat: create monthly report component

parent abbf703e
Branches
Tags
1 merge request!113Features/us221 report view creation
import React, { useCallback, useEffect } from 'react'
import React, { useEffect, useState } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react'
import { useClient } from 'cozy-client'
import { useRecoilState } from 'recoil'
import UserProfileService from 'services/userProfile.service'
import { useRecoilValue } from 'recoil'
import { TimeStep } from 'enum/timeStep.enum'
import { fluidTypeState } from 'atoms/fluidState.state'
import { userProfileState } from 'atoms/userProfile.state'
import { ReportAttributes, UserProfile } from 'models'
import { TimePeriod, PerformanceIndicator } from 'models'
import TimePeriodService from 'services/timePeriod.service'
import ConsumptionService from 'services/consumption.service'
import PerformanceIndicatorService from 'services/performanceIndicator.service'
import ConfigService from 'services/fluidConfig.service'
import { convertDateByTimeStep } from 'utils/date'
import PerformanceIndicatorContent from 'components/PerformanceIndicator/PerformanceIndicatorContent'
import FluidPerformanceIndicator from 'components/PerformanceIndicator/FluidPerformanceIndicator'
const MonthlyReport = () => {
const { t } = useI18n()
const client = useClient()
const [userProfile, setUserProfile] = useRecoilState<UserProfile>(
userProfileState
const fluidTypes = useRecoilValue(fluidTypeState)
const userProfile = useRecoilValue(userProfileState)
const [performanceIndicators, setPerformanceIndicators] = useState<
PerformanceIndicator[]
>([])
const [currentTimePeriod, setCurrentTimePeriod] = useState<TimePeriod | null>(
null
)
const [isLoaded, setIsLoaded] = useState<boolean>(false)
const updateUserProfileReport = useCallback(
async (reportAttributes: ReportAttributes) => {
const userProfileService = new UserProfileService(client)
try {
await userProfileService
.updateUserProfile({ report: reportAttributes })
.then(updatedUserProfile => {
updatedUserProfile && setUserProfile(updatedUserProfile)
})
} catch (err) {
console.log(err)
}
},
[setUserProfile]
)
const performanceIndicatorService = new PerformanceIndicatorService()
const configService = new ConfigService()
const fluidConfig = configService.getFluidConfig()
const timeStep = TimeStep.MONTH
useEffect(() => {
if (!userProfile.report.haveSeenLastReport) {
const reportAttributes = {
sendReportNotification: userProfile.report.sendReportNotification,
haveSeenLastReport: true,
monthlyReportDate: userProfile.report.monthlyReportDate,
let subscribed = true
async function populatePerformanceIndicators() {
const consumptionService = new ConsumptionService(client)
// const lastDate = await consumptionService.fetchLastDateData(fluidTypes)
if (subscribed) {
const timePeriodService = new TimePeriodService()
const periods = timePeriodService.getTimePeriods(
userProfile.report.monthlyReportDate,
fluidTypes,
timeStep
)
console.log(periods)
const fetchedPerformanceIndicators = await consumptionService.getPerformanceIndicators(
periods.timePeriod,
timeStep,
fluidTypes,
periods.comparisonTimePeriod
)
if (fetchedPerformanceIndicators) {
setPerformanceIndicators(fetchedPerformanceIndicators)
setCurrentTimePeriod(periods.timePeriod)
}
}
updateUserProfileReport(reportAttributes)
setIsLoaded(true)
}
}, [])
populatePerformanceIndicators()
return () => {
subscribed = false
}
}, [timeStep, fluidTypes])
return <div>Votre bilan mensuel</div>
return (
<>
{isLoaded ? (
<div className="fi-root">
<div className="fi-content">
<div className="fi-header text-14-normal-uppercase">
{t('COMMON.CONSO_CARDS_LABEL')}{' '}
{convertDateByTimeStep(currentTimePeriod, timeStep, true)}
</div>
<PerformanceIndicatorContent
performanceIndicator={performanceIndicatorService.aggregatePerformanceIndicators(
performanceIndicators
)}
timeStep={timeStep}
/>
<div>
<span className="text-16-normal-uppercase details-title">
{t('INDICATOR.DETAIL')}
{convertDateByTimeStep(currentTimePeriod, timeStep, true)}
</span>
{fluidConfig.map((fluid, index) => {
return fluidTypes.includes(fluid.fluidTypeId) ? (
<FluidPerformanceIndicator
key={index}
fluidType={fluid.fluidTypeId}
performanceIndicator={
performanceIndicators[fluid.fluidTypeId]
}
/>
) : null
})}
</div>
</div>
</div>
) : null}
</>
)
}
export default MonthlyReport
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import { useClient } from 'cozy-client'
import { useRecoilState } from 'recoil'
import { ReportAttributes, UserProfile } from 'models'
import { userProfileState } from 'atoms/userProfile.state'
import UserProfileService from 'services/userProfile.service'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
import MonthlyReport from 'components/Report/MonthlyReport'
const ReportView: React.FC = () => {
const client = useClient()
const [userProfile, setUserProfile] = useRecoilState<UserProfile>(
userProfileState
)
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
}
useEffect(() => {
let subscribed = true
const updateUserProfileReport = async () => {
if (!userProfile.report.haveSeenLastReport) {
const reportAttributes: ReportAttributes = {
sendReportNotification: userProfile.report.sendReportNotification,
haveSeenLastReport: true,
monthlyReportDate: userProfile.report.monthlyReportDate,
}
const userProfileService = new UserProfileService(client)
try {
await userProfileService
.updateUserProfile({ report: reportAttributes })
.then(updatedUserProfile => {
subscribed &&
updatedUserProfile &&
setUserProfile(updatedUserProfile)
})
} catch (err) {
console.log(err)
}
}
}
updateUserProfileReport()
return () => {
subscribed = false
}
}, [])
return (
<>
<CozyBar titleKey={'report.viewTitle'} />
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment