Skip to content
Snippets Groups Projects
Commit 8ae6b4a9 authored by CARRON Guilhem's avatar CARRON Guilhem
Browse files

add energy recap in profile + update userProfile

parent 757b2008
No related branches found
No related tags found
3 merge requests!103Support,!102Dev,!66Features/profil page
...@@ -2,7 +2,6 @@ import React, { useState } from 'react' ...@@ -2,7 +2,6 @@ import React, { useState } from 'react'
import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar' import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
import Header from 'components/ContainerComponents/Header/Header' import Header from 'components/ContainerComponents/Header/Header'
import Content from 'components/ContainerComponents/Content/Content' import Content from 'components/ContainerComponents/Content/Content'
import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
import FAQContainer from 'components/ContainerComponents/FAQContainer/FAQContainer' import FAQContainer from 'components/ContainerComponents/FAQContainer/FAQContainer'
import LegalNoticeContainer from 'components/ContainerComponents/LegalNoticeContainer/LegalNoticeContainer' import LegalNoticeContainer from 'components/ContainerComponents/LegalNoticeContainer/LegalNoticeContainer'
import Version from 'components/ContentComponents/Version/Version' import Version from 'components/ContentComponents/Version/Version'
...@@ -13,7 +12,7 @@ const ParametersViewContainer: React.FC = () => { ...@@ -13,7 +12,7 @@ const ParametersViewContainer: React.FC = () => {
setHeaderHeight(height) setHeaderHeight(height)
} }
return ( return (
<React.Fragment> <>
<CozyBar titleKey={'COMMON.APP_PARAMETERS_TITLE'} /> <CozyBar titleKey={'COMMON.APP_PARAMETERS_TITLE'} />
<Header <Header
setHeaderHeight={defineHeaderHeight} setHeaderHeight={defineHeaderHeight}
...@@ -24,7 +23,7 @@ const ParametersViewContainer: React.FC = () => { ...@@ -24,7 +23,7 @@ const ParametersViewContainer: React.FC = () => {
<LegalNoticeContainer /> <LegalNoticeContainer />
<Version /> <Version />
</Content> </Content>
</React.Fragment> </>
) )
} }
......
...@@ -3,6 +3,7 @@ import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar' ...@@ -3,6 +3,7 @@ import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
import Header from 'components/ContainerComponents/Header/Header' import Header from 'components/ContainerComponents/Header/Header'
import Content from 'components/ContainerComponents/Content/Content' import Content from 'components/ContainerComponents/Content/Content'
import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer' import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
import EnergyRecap from 'components/ContentComponents/EnergyRecap/EnergyRecap'
const ProfileViewContainer: React.FC = () => { const ProfileViewContainer: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0) const [headerHeight, setHeaderHeight] = useState<number>(0)
...@@ -17,6 +18,7 @@ const ProfileViewContainer: React.FC = () => { ...@@ -17,6 +18,7 @@ const ProfileViewContainer: React.FC = () => {
desktopTitleKey={'COMMON.APP_PARAMETERS_TITLE'} desktopTitleKey={'COMMON.APP_PARAMETERS_TITLE'}
></Header> ></Header>
<Content height={headerHeight}> <Content height={headerHeight}>
<EnergyRecap />
<KonnectorViewerContainer isParam={true} /> <KonnectorViewerContainer isParam={true} />
</Content> </Content>
</> </>
......
import React, { useState, useContext, useEffect } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { AppContext } from 'components/Contexts/AppContextProvider'
import UserProfileManager from 'services/userProfileDataManagerService'
import { Client, withClient } from 'cozy-client'
interface EnergyRecapProps {
t: Function
client: Client
}
const EnergyRecap: React.FC<EnergyRecapProps> = ({
t,
client,
}: EnergyRecapProps) => {
const [state, setstate] = useState<string>('')
const { userProfile } = useContext(AppContext)
const upm = new UserProfileManager(client)
const updatedUserProfile = async (value: string) => {
return await upm.updateUserProfile({ energyBilanRecap: value })
}
useEffect(() => {
if (userProfile && userProfile.energyBilanRecap)
setstate(userProfile.energyBilanRecap)
}, [])
const handleChange = (e: any) => {
updatedUserProfile(e.target.value).then(data => {
if (data) setstate(data.energyBilanRecap)
})
}
return (
<div className="energy-recap-container">
<div className="head text-14-normal-uppercase">
Réception du bilan énergétique
</div>
<form action="" className="radios">
<div className="input">
<input
id="weekly"
name="energyBilanRecap"
type="radio"
value="weekly"
onChange={handleChange}
checked={state === 'weekly'}
></input>
<label htmlFor="weekly">Hebdomadaire</label>
</div>
<div className="input">
<input
id="monthly"
name="energyBilanRecap"
type="radio"
value="monthly"
onChange={handleChange}
checked={state === 'monthly'}
></input>
<label htmlFor="monthly">Mensuel</label>
</div>
<div className="input">
<input
id="never"
name="energyBilanRecap"
type="radio"
value="never"
onChange={handleChange}
checked={state === 'never'}
></input>
<label htmlFor="never">Jamais</label>
</div>
</form>
</div>
)
}
export default translate()(withClient(EnergyRecap))
...@@ -141,19 +141,22 @@ export class UserProfile { ...@@ -141,19 +141,22 @@ export class UserProfile {
challengeTypeHash: string challengeTypeHash: string
ecogestureHash: string ecogestureHash: string
haveSeenWelcomeModal: boolean haveSeenWelcomeModal: boolean
energyBilanRecap: string
constructor( constructor(
id: string, id: string,
level: number, level: number,
challengeTypeHash: string, challengeTypeHash: string,
ecogestureHash: string, ecogestureHash: string,
haveSeenWelcomeModal: boolean haveSeenWelcomeModal: boolean,
energyBilanRecap: string
) { ) {
this.id = id this.id = id
this.level = level this.level = level
this.challengeTypeHash = challengeTypeHash this.challengeTypeHash = challengeTypeHash
this.ecogestureHash = ecogestureHash this.ecogestureHash = ecogestureHash
this.haveSeenWelcomeModal = haveSeenWelcomeModal this.haveSeenWelcomeModal = haveSeenWelcomeModal
this.energyBilanRecap = energyBilanRecap
} }
} }
......
.energy-recap-container {
padding: 2rem 1.5rem 1rem 1.5rem;
.head {
color: $google-text-1;
}
.radios {
.input {
padding: 1rem 0.5rem;
input[type='radio'] {
box-sizing: border-box;
-webkit-appearance: none;
outline: none;
border-radius: 50%;
position: relative;
top: 0.3rem;
width: 1.3rem;
height: 1.3rem;
border: 2px solid $google-text-1;
background: transparent;
&:after {
transition: all 300ms ease;
content: '';
border-radius: 50%;
}
&:checked {
&:after {
content: '';
position: absolute;
top: -2px;
left: -2px;
box-sizing: border-box;
width: inherit;
height: inherit;
background-color: transparent;
border-radius: 50%;
border: 6px solid $gold-shadow;
}
}
}
input:checked label {
color: $google-text-1;
}
}
label {
color: $text-dark;
margin-left: 1rem;
}
}
}
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
@import 'components/auth'; @import 'components/auth';
@import 'components/feedback'; @import 'components/feedback';
@import 'components/version'; @import 'components/version';
@import 'components/energyrecap';
:root { :root {
--blue: #{$blue}; --blue: #{$blue};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment