Add action update

src/components/Action/ActionBegin.tsx

 import React, { useCallback, useState } from 'react'
-import { useHistory } from 'react-router-dom'
 import { Client, useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { Ecogesture, UserChallenge } from 'models'
 import StarsContainer from 'components/Challenge/StarsContainer'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
@@ -13,6 +12,7 @@ import ActionService from 'services/action.service'
 import { useEffect } from 'react'
 import { importIconbyId } from 'utils/utils'
 import { Button } from '@material-ui/core'
+import ActionModal from './ActionModal'
 
 interface ActionBeginProps {
   action?: Ecogesture
@@ -31,39 +31,16 @@ const ActionBegin: React.FC<ActionBeginProps> = ({
     (state: AppStore) => state.ecolyo.profile
   )
   const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
-  const dispatch = useDispatch()
-  const history = useHistory()
-
   const [currentAction, setCurrentAction] = useState<Ecogesture>()
   const [actionIcon, setActionIcon] = useState<string>('')
-  const goBack = useCallback(() => {
-    history.goBack()
-  }, [history])
+  const [openLaunchModal, setOpenLaunchModal] = useState<boolean>(false)
 
-  const goToList = () => {
+  const toggleLaunchModal = useCallback(() => {
+    setOpenLaunchModal(prev => !prev)
+  }, [])
+  const goToList = useCallback(() => {
     setShowList(true)
-  }
-  // const startExploration = async () => {
-  //   if (userChallenge.exploration.state !== UserExplorationState.ONGOING) {
-  //     const challengeService = new ChallengeService(client)
-  //     const updatedChallenge = await challengeService.updateUserChallenge(
-  //       userChallenge,
-  //       UserChallengeUpdateFlag.EXPLORATION_START
-  //     )
-  //     dispatch(updateUserChallengeList(updatedChallenge))
-  //   }
-  //   history.push('/challenges')
-  // }
-
-  // const validExploration = async () => {
-  //   const challengeService = new ChallengeService(client)
-  //   const updatedChallenge = await challengeService.updateUserChallenge(
-  //     userChallenge,
-  //     UserChallengeUpdateFlag.EXPLORATION_DONE
-  //   )
-  //   dispatch(updateUserChallengeList(updatedChallenge))
-  //   history.push('/challenges')
-  // }
+  }, [setShowList])
 
   useEffect(() => {
     if (action) {
@@ -117,7 +94,7 @@ const ActionBegin: React.FC<ActionBeginProps> = ({
             <div className="action-hint text-18">{t('action.hint')}</div>
             <div className="action-buttons">
               <Button
-                // onClick={validAction}
+                onClick={toggleLaunchModal}
                 classes={{
                   root: 'btn-secondary-negative',
                   label: 'text-16-normal',
@@ -136,6 +113,13 @@ const ActionBegin: React.FC<ActionBeginProps> = ({
               </Button>
             </div>
           </div>
+          {openLaunchModal && (
+            <ActionModal
+              action={currentAction}
+              handleCloseClick={toggleLaunchModal}
+              userChallenge={userChallenge}
+            />
+          )}
         </div>
       )}
     </>

src/components/Action/ActionList.tsx

-import React, { useCallback, useState } from 'react'
-import { useHistory } from 'react-router-dom'
-import { Client, useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useDispatch, useSelector } from 'react-redux'
-import { Ecogesture, Profile, UserChallenge } from 'models'
-import StarsContainer from 'components/Challenge/StarsContainer'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import React, { useState } from 'react'
 
+import { Client, useClient } from 'cozy-client'
+import { useSelector } from 'react-redux'
+import { Ecogesture } from 'models'
 import './actionBegin.scss'
 import { AppStore } from 'store'
 import ActionService from 'services/action.service'
@@ -27,13 +23,7 @@ const ActionList: React.FC<ActionListProps> = ({
     (state: AppStore) => state.ecolyo.profile
   )
   const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
-  const dispatch = useDispatch()
-  const history = useHistory()
-
   const [actions, setActions] = useState<Ecogesture[]>()
-  const goBack = useCallback(() => {
-    history.goBack()
-  }, [history])
 
   useEffect(() => {
     const actionService = new ActionService(client)

src/components/Action/ActionModal.tsx

+import React from 'react'
+import { Ecogesture, UserChallenge } from 'models'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import './actionList.scss'
+import Modal from 'components/CommonKit/Modal/Modal'
+import { Button } from '@material-ui/core'
+import { useCallback } from 'react'
+import ChallengeService from 'services/challenge.service'
+import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import { useClient } from 'cozy-client'
+import { useDispatch } from 'react-redux'
+interface ActionModalProps {
+  action: Ecogesture
+  handleCloseClick: () => void
+  userChallenge: UserChallenge
+}
+
+const ActionModal: React.FC<ActionModalProps> = ({
+  action,
+  handleCloseClick,
+  userChallenge,
+}: ActionModalProps) => {
+  const dispatch = useDispatch()
+  const client = useClient()
+
+  const launchAction = useCallback(async () => {
+    const challengeService = new ChallengeService(client)
+    const updatedChallenge = await challengeService.updateUserChallenge(
+      userChallenge,
+      UserChallengeUpdateFlag.ACTION_START,
+      undefined,
+      undefined,
+      action
+    )
+    console.log('updated', updatedChallenge)
+    dispatch(updateUserChallengeList(updatedChallenge))
+    handleCloseClick()
+  }, [action, client, dispatch, userChallenge, handleCloseClick])
+
+  return (
+    <Modal border={true} handleCloseClick={handleCloseClick}>
+      <>
+        <StyledIcon icon={'lauchAction'} />
+        <div className="action-title text-18-bold">{action.longName}</div>
+
+        <Button className="action-card" onClick={launchAction}>
+          Je relève le défi
+        </Button>
+        <Button className="action-card" onClick={handleCloseClick}>
+          Je me défile
+        </Button>
+      </>
+    </Modal>
+  )
+}
+
+export default ActionModal

src/components/Action/ActionOnGoing.tsx

+import React, { useCallback, useState } from 'react'
+import { UserAction } from 'models'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+
+import './actionList.scss'
+import { Button } from '@material-ui/core'
+import { DateTime } from 'luxon'
+import './actionOnGoing.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import EcogestureModal from 'components/Ecogesture/EcogestureModal'
+
+interface ActionOnGoingProps {
+  userAction: UserAction
+}
+
+const ActionOnGoing: React.FC<ActionOnGoingProps> = ({
+  userAction,
+}: ActionOnGoingProps) => {
+  const { t } = useI18n()
+
+  const [openEcogestureModal, setOpenEcogestureModal] = useState<boolean>(false)
+  const [durationIcon, setDurationIcon] = useState<string>('')
+
+  const toggleEcogestureModal = useCallback(() => {
+    setOpenEcogestureModal(prev => !prev)
+  }, [setOpenEcogestureModal])
+
+  // const getRightIcon = useCallback(() => {
+  //   if (userAction.startDate && userAction.ecogesture) {
+  //     const startDate: DateTime = userAction.startDate
+  //     const durationInDays = userAction.ecogesture.actionDuration
+  //     const durationInHours = durationInDays * 24
+  //     const progressInHours = startDate.diffNow('hours').hours
+  //     if (progressInHours > durationInHours) {
+  //       //UpdateToDone
+  //     }
+  //   }
+  // }, [userAction])
+
+  const getResultDate = useCallback(() => {
+    if (userAction.startDate && userAction.ecogesture) {
+      const startDate: DateTime = userAction.startDate
+      const durationInHours = userAction.ecogesture.actionDuration * 24
+      const resultDate: string = startDate
+        .plus({ hours: durationInHours })
+        .setLocale('fr')
+        .toFormat('cccc dd LLLL')
+      return resultDate
+    }
+  }, [userAction])
+
+  return (
+    <div className="action-ongoing">
+      {userAction.ecogesture && (
+        <>
+          <div className="duration text-18-normal">
+            {t('action.duration', {
+              // eslint-disable-next-line @typescript-eslint/camelcase
+              smart_count: userAction.ecogesture.actionDuration,
+            })}
+          </div>
+          <div className="description text-18-bold">
+            {userAction.ecogesture.longName}
+          </div>
+          <StyledIcon icon={''} />
+
+          <div className="result-title text-18-bold"> {t('action.result')}</div>
+          <div className="result-date text-24-bold">{getResultDate()}</div>
+          <Button
+            classes={{
+              root: 'btn-secondary-negative btn-detail',
+              label: 'text-16-normal',
+            }}
+            onClick={toggleEcogestureModal}
+          >
+            {t('action.details')}
+          </Button>
+          {openEcogestureModal && (
+            <EcogestureModal
+              ecogesture={userAction.ecogesture}
+              isAction={false}
+              handleCloseClick={toggleEcogestureModal}
+            />
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default ActionOnGoing

src/components/Action/ActionView.tsx

@@ -5,9 +5,9 @@ import CozyBar from 'components/Header/CozyBar'
 import Content from 'components/Content/Content'
 import Header from 'components/Header/Header'
 import { UserChallenge } from 'models'
-import { UserEcogestureState } from 'enum/userEcogesture.enum'
-import ActionBegin from './ActionBegin'
 import ActionChoose from './ActionChoose'
+import { UserActionState } from 'enum/userAction.enum'
+import ActionOnGoing from './ActionOnGoing'
 
 const ActionView: React.FC = () => {
   const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -19,25 +19,21 @@ const ActionView: React.FC = () => {
     setHeaderHeight(height)
   }, [])
 
-  const renderAction = (challenge: UserChallenge) => {
-    if (challenge.action) {
-      switch (challenge.action.state) {
-        case UserEcogestureState.UNSTARTED:
-          return <ActionChoose userChallenge={challenge} />
+  const renderAction = useCallback((challenge: UserChallenge) => {
+    switch (challenge.action.state) {
+      case UserActionState.UNSTARTED:
+        return <ActionChoose userChallenge={challenge} />
 
-        case UserEcogestureState.ONGOING:
-          return <ActionChoose userChallenge={challenge} />
+      case UserActionState.ONGOING:
+        return <ActionOnGoing userAction={challenge.action} />
 
-        case UserEcogestureState.DONE:
-          return <ActionChoose userChallenge={challenge} />
+      case UserActionState.DONE:
+        return <ActionChoose userChallenge={challenge} />
 
-        default:
-          return <ActionChoose userChallenge={challenge} />
-      }
-    } else {
-      return <ActionChoose userChallenge={challenge} />
+      default:
+        return <ActionChoose userChallenge={challenge} />
     }
-  }
+  }, [])
 
   return (
     <>

src/components/Action/actionOnGoing.scss

+@import '../../styles/base/color';
+@import '../../styles/base/breakpoint';
+
+.action-ongoing {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  max-width: 600px;
+  padding: 1.5rem;
+  min-height: 75vh;
+  .duration,
+  .result-title {
+    color: $grey-bright;
+  }
+  .description {
+    color: white;
+    margin-top: 1rem;
+  }
+  .result-date {
+    color: $blue-light;
+    margin-bottom: 2rem;
+  }
+  button.btn-detail {
+    padding: 0.3rem;
+  }
+}

src/components/Ecogesture/EcogestureModal.tsx

@@ -14,8 +14,6 @@ import { useSelector } from 'react-redux'
 import MuiButton from '@material-ui/core/Button'
 import EfficientyRating from './EfficientyRating'
 import classNames from 'classnames'
-import { NavLink } from 'react-router-dom'
-
 interface EcogestureModalProps {
   ecogesture: Ecogesture
   isAction: boolean

src/locales/fr.json

@@ -434,6 +434,8 @@
     "title_action": "Action",
     "select_action": "Je choisis cette action",
     "duration": "Durée : %{smart_count} jours",
+    "result": "Résultat",
+    "details": "Détail de l'écogeste",
     "apply": "J'applique cette action",
     "other": "Je choisis une autre action",
     "hint": "Je pourrais visualiser la différence à la fin du défi."

src/models/action.model.ts

@@ -2,8 +2,11 @@ import { UserActionState } from 'enum/userAction.enum'
 import { DateTime } from 'luxon'
 import { Ecogesture } from 'models'
 
-export interface UserAction {
+export interface UserActionEntity {
   ecogesture: Ecogesture | null
   state: UserActionState
+  startDate: string | null
+}
+export interface UserAction extends Omit<UserActionEntity, 'startDate'> {
   startDate: DateTime | null
 }

src/models/challenge.model.ts

@@ -10,6 +10,7 @@ import {
   UserQuiz,
   UserExploration,
   Relation,
+  UserActionEntity,
 } from 'models'
 import { UserAction } from 'models'
 
@@ -53,12 +54,16 @@ export interface UserChallengeEntity {
   endingDate: string | null
   quiz: UserQuiz
   exploration: UserExploration
-  action: UserAction
+  action: UserActionEntity
 }
 
 export interface UserChallenge
-  extends Omit<UserChallengeEntity, 'startDate' | 'endingDate' | 'duel'> {
+  extends Omit<
+    UserChallengeEntity,
+    'startDate' | 'endingDate' | 'duel' | 'action'
+  > {
   startDate: DateTime | null
   endingDate: DateTime | null
   duel: UserDuel
+  action: UserAction
 }

src/services/challenge.service.ts

@@ -17,6 +17,7 @@ import {
   ExplorationEntity,
   RelationEntitiesObject,
   FluidStatus,
+  Ecogesture,
 } from 'models'
 import {
   UserChallengeState,
@@ -35,6 +36,7 @@ import ExplorationService from './exploration.service'
 import { FluidState, FluidType } from 'enum/fluid.enum'
 import { UserExplorationState } from 'enum/userExploration.enum'
 import { UserActionState } from 'enum/userAction.enum'
+import ActionService from './action.service'
 export default class ChallengeService {
   private readonly _client: Client
 
@@ -92,6 +94,14 @@ export default class ChallengeService {
             })
           : null,
       },
+      action: {
+        ...userChallengeEntity.action,
+        startDate: userChallengeEntity.action.startDate
+          ? DateTime.fromISO(userChallengeEntity.action.startDate, {
+              zone: 'utc',
+            })
+          : null,
+      },
     }
     return userChallenge
   }
@@ -528,7 +538,8 @@ export default class ChallengeService {
     userChallenge: UserChallenge,
     flag: UserChallengeUpdateFlag,
     quizWithUpdatedQuestions?: UserQuiz,
-    fluidStatus?: Array<FluidStatus>
+    fluidStatus?: Array<FluidStatus>,
+    action?: Ecogesture
   ): Promise<UserChallenge> {
     let updatedUserChallenge: UserChallenge
     let updatedDuel = userChallenge.duel
@@ -537,6 +548,7 @@ export default class ChallengeService {
     const duelService = new DuelService(this._client)
     const quizService = new QuizService(this._client)
     const explorationService = new ExplorationService(this._client)
+    const actionService = new ActionService(this._client)
     switch (flag) {
       case UserChallengeUpdateFlag.CHALLENGE:
       case UserChallengeUpdateFlag.DUEL_CONSUMPTION:
@@ -669,6 +681,19 @@ export default class ChallengeService {
           },
         }
         break
+      case UserChallengeUpdateFlag.ACTION_START:
+        if (action) {
+          // console.log('action', action)
+          const userAction = actionService.launchAction(action)
+          // console.log('userAction', userAction)
+
+          updatedUserChallenge = {
+            ...userChallenge,
+            action: userAction,
+          }
+          // console.log('upd', updatedUserChallenge)
+        }
+        break
       default:
         updatedUserChallenge = userChallenge
         break