Skip to content
Snippets Groups Projects
Commit 2b8f60c2 authored by Rémi PAILHAREY's avatar Rémi PAILHAREY :fork_knife_plate:
Browse files

Merge branch 'dev' of...

Merge branch 'dev' of https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo into chore/updated-cozy-libs
parents e505367c 53612950
No related branches found
No related tags found
1 merge request!1229chore(deps): Updated cozy-ui client and cozy-libs
Showing
with 235 additions and 132 deletions
......@@ -36,6 +36,7 @@ describe('ActionBegin component', () => {
action={defaultEcogestureData[1]}
setShowList={jest.fn()}
userChallenge={userChallengeData[1]}
setFocus={jest.fn()}
/>
</Provider>
)
......@@ -58,6 +59,7 @@ describe('ActionBegin component', () => {
action={mockedEcogesturesData[1]}
setShowList={jest.fn()}
userChallenge={userChallengeData[1]}
setFocus={jest.fn()}
/>
</Provider>
)
......@@ -76,6 +78,7 @@ describe('ActionBegin component', () => {
action={defaultEcogestureData[1]}
setShowList={jest.fn()}
userChallenge={userChallengeData[1]}
setFocus={jest.fn()}
/>
</Provider>
)
......
......@@ -16,12 +16,14 @@ interface ActionBeginProps {
action?: Ecogesture
setShowList: React.Dispatch<React.SetStateAction<boolean>>
userChallenge: UserChallenge
setFocus: () => void
}
const ActionBegin = ({
action,
setShowList,
userChallenge,
setFocus,
}: ActionBeginProps) => {
const { t } = useI18n()
const client = useClient()
......@@ -107,6 +109,7 @@ const ActionBegin = ({
action={currentAction}
handleCloseClick={() => setOpenLaunchModal(false)}
userChallenge={userChallenge}
setFocus={setFocus}
/>
</div>
)}
......
......@@ -24,6 +24,7 @@ describe('ActionCard component', () => {
setShowList={jest.fn()}
setSelectedAction={jest.fn()}
action={defaultEcogestureData[1]}
setFocus={jest.fn()}
/>
</Provider>
)
......@@ -37,6 +38,7 @@ describe('ActionCard component', () => {
setShowList={jest.fn()}
setSelectedAction={jest.fn()}
action={defaultEcogestureData[1]}
setFocus={jest.fn()}
/>
</Provider>
)
......
......@@ -11,12 +11,14 @@ interface ActionCardProps {
action: Ecogesture
setSelectedAction: React.Dispatch<React.SetStateAction<Ecogesture | null>>
setShowList: React.Dispatch<React.SetStateAction<boolean>>
setFocus: () => void
}
const ActionCard = ({
action,
setSelectedAction,
setShowList,
setFocus,
}: ActionCardProps) => {
const [actionIcon, setActionIcon] = useState<string>('')
const [openEcogestureModal, setOpenEcogestureModal] = useState<boolean>(false)
......@@ -25,7 +27,8 @@ const ActionCard = ({
setSelectedAction(action)
setShowList(false)
setOpenEcogestureModal(false)
}, [setSelectedAction, setShowList, action])
setFocus()
}, [setSelectedAction, action, setShowList, setFocus])
useEffect(() => {
async function handleEcogestureIcon() {
......
.action-content-view {
width: 100%;
margin: auto;
outline: none;
}
......@@ -42,7 +42,10 @@ describe('ActionChoose component', () => {
])
const { container } = render(
<Provider store={store}>
<ActionChoose userChallenge={userChallengeData[1]} />
<ActionChoose
userChallenge={userChallengeData[1]}
setFocus={jest.fn()}
/>
</Provider>
)
await waitFor(() => null, { container })
......@@ -64,7 +67,10 @@ describe('ActionChoose component', () => {
const { container } = render(
<Provider store={store}>
<ActionChoose userChallenge={userChallengeData[1]} />
<ActionChoose
userChallenge={userChallengeData[1]}
setFocus={jest.fn()}
/>
</Provider>
)
await waitFor(() => null, { container })
......
......@@ -2,26 +2,35 @@ import { Ecogesture, UserChallenge } from 'models'
import React, { useState } from 'react'
import ActionBegin from '../ActionBegin/ActionBegin'
import ActionList from '../ActionList/ActionList'
import './ActionChoose.scss'
const ActionChoose = ({ userChallenge }: { userChallenge: UserChallenge }) => {
const ActionChoose = ({
userChallenge,
setFocus,
}: {
userChallenge: UserChallenge
setFocus: () => void
}) => {
const [selectedAction, setSelectedAction] = useState<Ecogesture | null>(null)
const [showList, setShowList] = useState<boolean>(false)
return (
<>
<div className="action-content-view">
{!showList ? (
<ActionBegin
action={selectedAction ?? undefined}
setShowList={setShowList}
userChallenge={userChallenge}
setFocus={setFocus}
/>
) : (
<ActionList
setSelectedAction={setSelectedAction}
setShowList={setShowList}
setFocus={setFocus}
/>
)}
</>
</div>
)
}
......
......@@ -3,120 +3,124 @@
exports[`ActionChoose component should render correctly 1`] = `
<div>
<div
class="action-begin"
class="action-content-view"
>
<div
class="action-container"
class="action-begin"
>
<div
class="action-begin-container"
class="action-container"
>
<div
class="icon-container"
class="action-begin-container"
>
<svg
aria-hidden="true"
class="action-icon styles__icon___23x3R"
height="100"
width="100"
<div
class="icon-container"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
</div>
<div
class="stars"
>
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
height="25"
width="25"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
height="25"
width="25"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
height="25"
width="25"
<svg
aria-hidden="true"
class="action-icon styles__icon___23x3R"
height="100"
width="100"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
</div>
<div
class="stars"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
height="25"
width="25"
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
height="25"
width="25"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
height="25"
width="25"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
height="25"
width="25"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
height="25"
width="25"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
height="25"
width="25"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
</div>
<h1
class="text-20-bold"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
height="25"
width="25"
Bonhomme de neige
</h1>
<div
class="action-duration text-18"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
</div>
<h1
class="text-20-bold"
>
Bonhomme de neige
</h1>
<div
class="action-duration text-18"
>
action.duration
</div>
<div
class="action-text text-18-bold"
/>
<div
class="action-buttons"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
action.duration
</div>
<div
class="action-text text-18-bold"
/>
<div
class="action-buttons"
>
<span
class="MuiButton-label"
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
action.apply
</span>
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
class="MuiButton-label"
<span
class="MuiButton-label"
>
action.apply
</span>
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
action.other
</span>
</button>
<span
class="MuiButton-label"
>
action.other
</span>
</button>
</div>
</div>
</div>
</div>
......
......@@ -28,7 +28,11 @@ describe('ActionList component', () => {
})
const { container } = render(
<Provider store={store}>
<ActionList setSelectedAction={jest.fn()} setShowList={jest.fn()} />
<ActionList
setSelectedAction={jest.fn()}
setShowList={jest.fn()}
setFocus={jest.fn()}
/>
</Provider>
)
await waitFor(() => null, { container })
......
......@@ -9,9 +9,14 @@ import './actionList.scss'
interface ActionListProps {
setSelectedAction: React.Dispatch<React.SetStateAction<Ecogesture | null>>
setShowList: React.Dispatch<React.SetStateAction<boolean>>
setFocus: () => void
}
const ActionList = ({ setSelectedAction, setShowList }: ActionListProps) => {
const ActionList = ({
setSelectedAction,
setShowList,
setFocus,
}: ActionListProps) => {
const client = useClient()
const {
global: { fluidTypes },
......@@ -47,6 +52,7 @@ const ActionList = ({ setSelectedAction, setShowList }: ActionListProps) => {
action={action}
setSelectedAction={setSelectedAction}
setShowList={setShowList}
setFocus={setFocus}
/>
))}
</div>
......
......@@ -25,6 +25,7 @@ describe('ActionModal component', () => {
handleCloseClick={jest.fn()}
action={defaultEcogestureData[1]}
userChallenge={userChallengeData[1]}
setFocus={jest.fn()}
/>
</Provider>
)
......@@ -44,6 +45,7 @@ describe('ActionModal component', () => {
handleCloseClick={jest.fn()}
action={defaultEcogestureData[1]}
userChallenge={userChallengeData[1]}
setFocus={jest.fn()}
/>
</Provider>
)
......
......@@ -17,6 +17,7 @@ interface ActionModalProps {
action: Ecogesture
handleCloseClick: () => void
userChallenge: UserChallenge
setFocus: () => void
}
const ActionModal = ({
......@@ -24,6 +25,7 @@ const ActionModal = ({
action,
handleCloseClick,
userChallenge,
setFocus,
}: ActionModalProps) => {
const client = useClient()
const { t } = useI18n()
......@@ -38,7 +40,8 @@ const ActionModal = ({
action
)
dispatch(updateUserChallengeList(updatedChallenge))
}, [action, client, dispatch, userChallenge])
setFocus()
}, [action, client, dispatch, setFocus, userChallenge])
return (
<Dialog
......
......@@ -3,28 +3,37 @@ import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { UserActionState } from 'enums'
import { UserChallenge } from 'models'
import React from 'react'
import React, { useRef } from 'react'
import { useAppSelector } from 'store/hooks'
import ActionChoose from './ActionChoose/ActionChoose'
import ActionDone from './ActionDone/ActionDone'
import ActionOnGoing from './ActionOnGoing/ActionOnGoing'
/**
* http://ecolyo.cozy.tools:8080/#/challenges/
* http://ecolyo.cozy.tools:8080/#/challenges/action
*/
const ActionView = () => {
const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
const mainContentRef = useRef<HTMLDivElement>(null)
const focusMainContent = () => {
setTimeout(() => mainContentRef.current?.focus(), 0)
}
const renderAction = (challenge: UserChallenge) => {
switch (challenge.action.state) {
case UserActionState.UNSTARTED:
return <ActionChoose userChallenge={challenge} />
return (
<ActionChoose userChallenge={challenge} setFocus={focusMainContent} />
)
case UserActionState.ONGOING:
return <ActionOnGoing userAction={challenge.action} />
case UserActionState.NOTIFICATION:
return <ActionDone currentChallenge={challenge} />
default:
return <ActionChoose userChallenge={challenge} />
return (
<ActionChoose userChallenge={challenge} setFocus={focusMainContent} />
)
}
}
......@@ -32,7 +41,15 @@ const ActionView = () => {
<>
<CozyBar titleKey="common.title_action" displayBackArrow={true} />
<Header desktopTitleKey="common.title_action" displayBackArrow={true} />
<Content>{currentChallenge && renderAction(currentChallenge)}</Content>
<Content>
<div
ref={mainContentRef}
style={{ outline: 'none', margin: 'auto' }}
tabIndex={-1}
>
{currentChallenge && renderAction(currentChallenge)}
</div>
</Content>
</>
)
}
......
......@@ -11,9 +11,14 @@ exports[`ActionView component should render match snapshot with "Notification" s
displaybackarrow="true"
/>
<mock-content>
<mock-action-done
currentchallenge="[object Object]"
/>
<div
style="outline: none; margin: auto;"
tabindex="-1"
>
<mock-action-done
currentchallenge="[object Object]"
/>
</div>
</mock-content>
</div>
`;
......@@ -29,9 +34,14 @@ exports[`ActionView component should render match snapshot with "Unstarted" stat
displaybackarrow="true"
/>
<mock-content>
<mock-action-choose
userchallenge="[object Object]"
/>
<div
style="outline: none; margin: auto;"
tabindex="-1"
>
<mock-action-choose
userchallenge="[object Object]"
/>
</div>
</mock-content>
</div>
`;
......@@ -47,9 +57,14 @@ exports[`ActionView component should render match snapshot with "onGoing" state
displaybackarrow="true"
/>
<mock-content>
<mock-action-ongoing
useraction="[object Object]"
/>
<div
style="outline: none; margin: auto;"
tabindex="-1"
>
<mock-action-ongoing
useraction="[object Object]"
/>
</div>
</mock-content>
</div>
`;
......@@ -65,9 +80,14 @@ exports[`ActionView component should render match snapshot with default case 1`]
displaybackarrow="true"
/>
<mock-content>
<mock-action-choose
userchallenge="[object Object]"
/>
<div
style="outline: none; margin: auto;"
tabindex="-1"
>
<mock-action-choose
userchallenge="[object Object]"
/>
</div>
</mock-content>
</div>
`;
......@@ -7,7 +7,7 @@ import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
import useUserInstanceSettings from 'components/Hooks/useUserInstanceSettings'
import { FluidType } from 'enums'
import { AccountGRDFData } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAppSelector } from 'store/hooks'
import '../connection.scss'
......@@ -42,6 +42,11 @@ export const GrdfConnectView = () => {
pceConfirm: false,
})
const mainContentRef = useRef<HTMLDivElement>(null)
const focusMainContent = () => {
setTimeout(() => mainContentRef.current?.focus(), 0)
}
const [connect, update] = useKonnectorAuth(FluidType.GAS, {
grdfAuthData: formData,
})
......@@ -98,10 +103,12 @@ export const GrdfConnectView = () => {
if (currentStep === GrdfStep.Consent) {
setLaunchConnection(true)
}
focusMainContent()
}, [currentStep, isNextValid])
const handlePrev = () => {
setCurrentStep(prev => prev - 1)
focusMainContent()
}
const renderStep = (step: GrdfStep) => {
......@@ -125,7 +132,7 @@ export const GrdfConnectView = () => {
displayBackArrow={true}
/>
<Content>
<div className="connectView">
<div ref={mainContentRef} className="connectView" tabIndex={-1}>
<div className="stepContainer">
<FormProgress
currentStep={currentStep}
......
......@@ -6,7 +6,7 @@ import Header from 'components/Header/Header'
import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
import { FluidType, SgeStep } from 'enums'
import { SgeStore } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import {
setShouldRefreshConsent,
......@@ -44,6 +44,11 @@ const SgeConnectView = () => {
const currentFluidStatus = fluidStatus[FluidType.ELECTRICITY]
const account = currentFluidStatus.connection.account
const mainContentRef = useRef<HTMLDivElement>(null)
const focusMainContent = () => {
setTimeout(() => mainContentRef.current?.focus(), 0)
}
const [connect, update] = useKonnectorAuth(FluidType.ELECTRICITY, {
sgeAuthData: sgeConnect,
})
......@@ -112,6 +117,7 @@ const SgeConnectView = () => {
setCurrentSgeState(updatedState)
dispatch(updateSgeStore(updatedState))
}
focusMainContent()
}, [currentStep, isLoading, dispatch, currentSgeState])
const handlePrev = useCallback(() => {
......@@ -119,6 +125,7 @@ const SgeConnectView = () => {
setCurrentStep(prev => prev - 1)
}
dispatch(updateSgeStore(currentSgeState))
focusMainContent()
}, [currentSgeState, currentStep, dispatch])
const onChange = useCallback(
......@@ -160,7 +167,7 @@ const SgeConnectView = () => {
displayBackArrow={true}
/>
<Content>
<div className="connectView">
<div ref={mainContentRef} className="connectView" tabIndex={-1}>
<div className="stepContainer">
<FormProgress
currentStep={currentStep}
......
......@@ -57,6 +57,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
<mock-content>
<div
class="connectView"
tabindex="-1"
>
<div
class="stepContainer"
......
......@@ -92,6 +92,7 @@
display: flex;
flex-direction: column;
gap: 1rem;
color: $grey-bright;
h2 {
color: $grey-bright;
......
......@@ -12,7 +12,7 @@ import DuelOngoing from './DuelOngoing/DuelOngoing'
import DuelUnlocked from './DuelUnlocked/DuelUnlocked'
/**
* http://ecolyo.cozy.tools:8080/#/challenges/
* http://ecolyo.cozy.tools:8080/#/challenges/duel
*/
const DuelView = () => {
const navigate = useNavigate()
......
......@@ -10,7 +10,7 @@ import ExplorationFinished from './ExplorationFinished'
import ExplorationOngoing from './ExplorationOngoing'
/**
* http://ecolyo.cozy.tools:8080/#/challenges/
* http://ecolyo.cozy.tools:8080/#/challenges/exploration
*/
const ExplorationView = () => {
const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment