feat: review Ecogesture card & modal

src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx

@@ -13,8 +13,8 @@ import Header from 'components/Header/Header'
 import Content from 'components/Content/Content'
 import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
 import StarIcon from 'assets/png/challenge/star.png'
-import EcogestureModal from 'components/ContentComponents/EcogestureModal/EcogestureModal'
-import EcogestureCard from 'components/ContentComponents/EcogestureCard/EcogestureCard'
+import EcogestureModal from 'components/Ecogesture/EcogestureModal'
+import EcogestureCard from 'components/Ecogesture/EcogestureCard'
 import { AppContext } from 'components/Contexts/AppContextProvider'
 
 interface FinishedChallengeDetailsViewProps {
@@ -161,7 +161,7 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
             </div>
             {openEcogestureModal && (
               <EcogestureModal
-                opened={openEcogestureModal}
+                open={openEcogestureModal}
                 ecogesture={challenge.selectedEcogestures[challengeEcogesture]}
                 handleCloseClick={handleCloseClick}
                 unlockedEcogesture={true}

src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx

@@ -14,8 +14,8 @@ import Header from 'components/Header/Header'
 import Content from 'components/Content/Content'
 import { history } from 'components/App'
 import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import EcogestureModal from 'components/ContentComponents/EcogestureModal/EcogestureModal'
-import EcogestureCard from 'components/ContentComponents/EcogestureCard/EcogestureCard'
+import EcogestureModal from 'components/Ecogesture/EcogestureModal'
+import EcogestureCard from 'components/Ecogesture/EcogestureCard'
 import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
 import OngoingChallengePile from 'components/ContentComponents/Challenge/OngoingChallengePile'
 import OngoingChallengeViewingDate from 'components/ContentComponents/Challenge/OngoingChallengeViewingDate'
@@ -174,7 +174,7 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
             </div>
             {openEcogestureModal && (
               <EcogestureModal
-                opened={openEcogestureModal}
+                open={openEcogestureModal}
                 ecogesture={challenge.selectedEcogestures[challengeEcogesture]}
                 handleCloseClick={handleCloseClick}
                 unlockedEcogesture={true}

src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx → src/components/Ecogesture/EcogestureCard.tsx

-import React, { useState, useEffect, useContext } from 'react'
+import React, { useState, useEffect } from 'react'
+import { useRecoilValue } from 'recoil'
+
 import { Ecogesture } from 'models'
+import { userProfileState } from 'atoms/userProfile.state'
+
 import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard'
 import def from 'assets/icons/visu/ecogesture/default.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { AppContext } from 'components/Contexts/AppContextProvider'
 
 interface EcogestureCardProps {
   ecogesture: Ecogesture
@@ -17,10 +20,10 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
   challengeEcogesture,
 }: EcogestureCardProps) => {
   const handleCardclick = () => {
-    handleClick && ecogesture ? handleClick(ecogesture) : null
+    handleClick && ecogesture && handleClick(ecogesture)
   }
   const [ecogestureIcon, setEcogestureIcon] = useState(def)
-  const { userProfile } = useContext(AppContext)
+  const userProfile = useRecoilValue(userProfileState)
   const newEcogestures: string[] | null =
     userProfile && userProfile.notificationEcogesture
   async function importEcogestureIcon(id: string) {
@@ -54,9 +57,6 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
             }
           >
             <div className="ec">
-              {newEcogestures && newEcogestures.includes(ecogesture.id) && (
-                <div className="ecogesture-card-notif">1</div>
-              )}
               <div className="ec-content ec-content-challenge">
                 <div>
                   <StyledIcon
@@ -81,9 +81,6 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
           }
         >
           <div className="ec">
-            {newEcogestures && newEcogestures.includes(ecogesture.id) && (
-              <div className="ecogesture-card-notif">1</div>
-            )}
             <div
               className={`ec-content ${
                 ecogesture.unlocked ? 'ec-content-unlocked' : ''

src/components/Ecogesture/EcogestureList.tsx

@@ -7,8 +7,8 @@ import ChallengeService from 'services/challenge.service'
 
 import StyledChallengeSpinner from 'components/CommonKit/Spinner/StyledChallengeSpinner'
 import StyledClearGreyButton from 'components/CommonKit/Button/StyledClearGreyButton'
-import EcogestureCard from 'components/ContentComponents/EcogestureCard/EcogestureCard'
-import EcogestureModal from 'components/ContentComponents/EcogestureModal/EcogestureModal'
+import EcogestureCard from 'components/Ecogesture/EcogestureCard'
+import EcogestureModal from 'components/Ecogesture/EcogestureModal'
 import NegaWattModal from 'components/Ecogesture/NegaWattModal'
 
 interface EcogesturesListProps {
@@ -105,7 +105,7 @@ const EcogesturesList: React.FC<EcogesturesListProps> = ({
       )}
       {openEcogestureModal && (
         <EcogestureModal
-          opened={openEcogestureModal}
+          open={openEcogestureModal}
           ecogesture={selectedEcogesture}
           handleCloseClick={handleCloseClick}
         />

src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx → src/components/Ecogesture/EcogestureModal.tsx

-import React, { useState, useEffect, useContext } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
+import { useClient } from 'cozy-client'
 import { translate } from 'cozy-ui/react/I18n'
-import Modal from 'components/CommonKit/Modal/Modal'
+import { useRecoilState } from 'recoil'
 import { getPicto } from 'utils/picto'
+
 import { Ecogesture } from 'models'
+import { userProfileState } from 'atoms/userProfile.state'
+
+import Modal from 'components/CommonKit/Modal/Modal'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import def from 'assets/icons/visu/ecogesture/default.svg'
-import { AppContext } from 'components/Contexts/AppContextProvider'
+import UserProfileService from 'services/userProfile.service'
 
 interface EcogestureModalProps {
-  opened: boolean
+  open: boolean
   ecogesture: Ecogesture
   unlockedEcogesture: boolean
   t: Function
   handleCloseClick: () => void
-  handleStartClick: () => void
 }
 
 const EcogestureModal: React.FC<EcogestureModalProps> = ({
-  opened,
+  open,
   ecogesture,
   unlockedEcogesture,
   t,
   handleCloseClick,
 }: EcogestureModalProps) => {
   const [ecogestureIcon, setEcogestureIcon] = useState(def)
-  const { userProfile, setNotificationEcogesture } = useContext(AppContext)
+  const [userProfile, setUserProfile] = useRecoilState(userProfileState)
+  const client = useClient()
 
   async function importEcogestureIcon(id: string) {
     // Les svg doivent être au format id.svg
@@ -39,6 +44,18 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
     }
   }
 
+  const updateUserProfileNotification = useCallback(
+    async (ecogestureList: string[]) => {
+      const userProfileService = new UserProfileService(client)
+      await userProfileService
+        .updateUserProfile({ notificationEcogesture: ecogestureList })
+        .then(updatedUserProfile => {
+          updatedUserProfile && setUserProfile(updatedUserProfile)
+        })
+    },
+    [setUserProfile]
+  )
+
   useEffect(() => {
     let index = -1
     if (userProfile && userProfile.notificationEcogesture != undefined) {
@@ -48,7 +65,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
       const updatedNotificationEcogestureList =
         userProfile && userProfile.notificationEcogesture
       updatedNotificationEcogestureList.splice(index, 1)
-      setNotificationEcogesture(updatedNotificationEcogestureList)
+      updateUserProfileNotification(updatedNotificationEcogestureList)
     }
   }, [])
 
@@ -62,7 +79,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
     <>
       {ecogesture && (
         <Modal
-          open={opened}
+          open={open}
           border={ecogesture.unlocked || unlockedEcogesture}
           handleCloseClick={handleCloseClick}
         >

src/cozy-harvest-lib.d.ts

@@ -3,3 +3,4 @@ declare module 'cozy-harvest-lib/dist/helpers/accounts'
 declare module 'cozy-harvest-lib/dist/connections/triggers'
 declare module 'cozy-harvest-lib/dist/helpers/triggers'
 declare module 'cozy-harvest-lib/dist/models/ConnectionFlow'
+declare module 'cozy-harvest-lib/dist/components/OAuthWindow'