diff --git a/src/components/Action/ActionBegin.tsx b/src/components/Action/ActionBegin.tsx index 9379e5921b9ebc6bf22d386ea301783efd4a6a16..8318ebf2402ead5c01782cd0507f9404ba6242b4 100644 --- a/src/components/Action/ActionBegin.tsx +++ b/src/components/Action/ActionBegin.tsx @@ -5,14 +5,13 @@ import { useSelector } from 'react-redux' import { Ecogesture, UserChallenge } from 'models' import StarsContainer from 'components/Challenge/StarsContainer' import StyledIcon from 'components/CommonKit/Icon/StyledIcon' - +import ActionModal from 'components/Action/ActionModal' import './actionBegin.scss' import { AppStore } from 'store' 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 @@ -45,7 +44,7 @@ const ActionBegin: React.FC<ActionBeginProps> = ({ useEffect(() => { let subscribed = true if (action) { - setCurrentAction(action) + if (subscribed) setCurrentAction(action) } else { const getSingleAction = async () => { const actionService = new ActionService(client) @@ -55,11 +54,11 @@ const ActionBegin: React.FC<ActionBeginProps> = ({ } else { actions = await actionService.getDefaultActions() } - setCurrentAction(actions[0]) - } - if (subscribed) { - getSingleAction() + if (subscribed) { + setCurrentAction(actions[0]) + } } + getSingleAction() } return () => { subscribed = false diff --git a/src/components/Action/ActionCard.tsx b/src/components/Action/ActionCard.tsx index 3cc90b5d884eb0fd455bc2d32165fc8cdaa71316..8086a138e394042ec053c42df379879d88cbcf74 100644 --- a/src/components/Action/ActionCard.tsx +++ b/src/components/Action/ActionCard.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useState, useCallback } from 'react' import { Ecogesture } from 'models' import StyledIcon from 'components/CommonKit/Icon/StyledIcon' import { useEffect } from 'react' @@ -6,7 +6,6 @@ import { importIconbyId } from 'utils/utils' import './actionList.scss' import { Button } from '@material-ui/core' import EcogestureModal from 'components/Ecogesture/EcogestureModal' -import { useCallback } from 'react' interface ActionCardProps { action: Ecogesture setSelectedAction: React.Dispatch<React.SetStateAction<Ecogesture | null>> @@ -18,8 +17,8 @@ const ActionCard: React.FC<ActionCardProps> = ({ setSelectedAction, setShowList, }: ActionCardProps) => { - const [actionIcon, setActionIcon] = useState('') - const [openEcogestureModal, setOpenEcogestureModal] = useState(false) + const [actionIcon, setActionIcon] = useState<string>('') + const [openEcogestureModal, setOpenEcogestureModal] = useState<boolean>(false) const toggleModal = useCallback(() => { setOpenEcogestureModal(prev => !prev) diff --git a/src/components/Action/ActionChoose.tsx b/src/components/Action/ActionChoose.tsx index 675f5275d2130c4413111f5bcef8d84ef026cdb5..c2c95dbd9716727bec4e1f1fcb1f4050e64b467a 100644 --- a/src/components/Action/ActionChoose.tsx +++ b/src/components/Action/ActionChoose.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import { Ecogesture, UserChallenge } from 'models' -import ActionBegin from './ActionBegin' -import ActionList from './ActionList' +import ActionBegin from 'components/Action/ActionBegin' +import ActionList from 'components/Action/ActionList' interface ActionChooseProps { userChallenge: UserChallenge } @@ -17,13 +17,11 @@ const ActionChoose: React.FC<ActionChooseProps> = ({ {!selectedAction && !showList ? ( <ActionBegin setShowList={setShowList} userChallenge={userChallenge} /> ) : selectedAction && !showList ? ( - <> - <ActionBegin - action={selectedAction} - setShowList={setShowList} - userChallenge={userChallenge} - /> - </> + <ActionBegin + action={selectedAction} + setShowList={setShowList} + userChallenge={userChallenge} + /> ) : ( <ActionList setSelectedAction={setSelectedAction} diff --git a/src/components/Action/ActionDone.tsx b/src/components/Action/ActionDone.tsx index 79b5b62f2fc9c13c92fa7b9247f7f7365db1df27..63355806a52321b3166855e3ac35da05f17d8876 100644 --- a/src/components/Action/ActionDone.tsx +++ b/src/components/Action/ActionDone.tsx @@ -24,7 +24,6 @@ const ActionDone: React.FC<ActionDoneProps> = ({ const history = useHistory() const handleEndAction = useCallback(async () => { const challengeService = new ChallengeService(client) - const updatedChallenge: UserChallenge = await challengeService.updateUserChallenge( currentChallenge, UserChallengeUpdateFlag.ACTION_DONE diff --git a/src/components/Action/ActionList.tsx b/src/components/Action/ActionList.tsx index b92de619d89f5491fefe3cb16e480f864618915f..c3f2cf6ef1713895ba47c4a055568550d8f70233 100644 --- a/src/components/Action/ActionList.tsx +++ b/src/components/Action/ActionList.tsx @@ -1,13 +1,11 @@ -import React, { useState } from 'react' - +import React, { useState, useEffect } 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' -import { useEffect } from 'react' -import ActionCard from './ActionCard' +import ActionCard from 'components/Action/ActionCard' interface ActionListProps { setSelectedAction: React.Dispatch<React.SetStateAction<Ecogesture | null>> @@ -26,21 +24,20 @@ const ActionList: React.FC<ActionListProps> = ({ const [actions, setActions] = useState<Ecogesture[]>() useEffect(() => { - const actionService = new ActionService(client) let subscribed = true - const getActions = async () => { - let actions: Ecogesture[] = [] + const actionService = new ActionService(client) + let actionList: Ecogesture[] = [] if (isProfileTypeCompleted) { - actions = await actionService.getCustomActions(fluidTypes) + actionList = await actionService.getCustomActions(fluidTypes) } else { - actions = await actionService.getDefaultActions() + actionList = await actionService.getDefaultActions() + } + if (subscribed) { + setActions(actionList) } - setActions(actions) - } - if (subscribed) { - getActions() } + getActions() return () => { subscribed = false } diff --git a/src/components/Action/ActionView.tsx b/src/components/Action/ActionView.tsx index b1bb98c192c8c5c614565cdb74d5682fa8f8a056..1d7f991dbd15ac5f702c98c7c82d72ccb12be5b9 100644 --- a/src/components/Action/ActionView.tsx +++ b/src/components/Action/ActionView.tsx @@ -5,10 +5,10 @@ import CozyBar from 'components/Header/CozyBar' import Content from 'components/Content/Content' import Header from 'components/Header/Header' import { UserChallenge } from 'models' -import ActionChoose from './ActionChoose' +import ActionChoose from 'components/Action/ActionChoose' import { UserActionState } from 'enum/userAction.enum' -import ActionOnGoing from './ActionOnGoing' -import ActionDone from './ActionDone' +import ActionOnGoing from 'components/Action/ActionOnGoing' +import ActionDone from 'components/Action/ActionDone' const ActionView: React.FC = () => { const [headerHeight, setHeaderHeight] = useState<number>(0) @@ -19,7 +19,7 @@ const ActionView: React.FC = () => { setHeaderHeight(height) }, []) - const renderAction = useCallback((challenge: UserChallenge) => { + const renderAction = (challenge: UserChallenge) => { switch (challenge.action.state) { case UserActionState.UNSTARTED: return <ActionChoose userChallenge={challenge} /> @@ -33,7 +33,7 @@ const ActionView: React.FC = () => { default: return <ActionChoose userChallenge={challenge} /> } - }, []) + } return ( <>