diff --git a/manifest.webapp b/manifest.webapp
index 0e555931ad46f808da906ce2dfd1c5bd0274f1d1..6ed6ea3cae1dab7f05f22955ac9faf0c5f2e652d 100644
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -3,7 +3,7 @@
"slug": "ecolyo",
"icon": "icon.svg",
"categories": ["energy"],
- "version": "0.1.9",
+ "version": "0.2.0",
"licence": "AGPL-3.0",
"editor": "Métropole de Lyon",
"default_locale": "fr",
diff --git a/package.json b/package.json
index d0344861d4dea23b585dd0e8a084f4d2c3b9ae46..b08ff042f9eb45b8e9b465a60679df109a450239 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ecolyo",
- "version": "0.1.9",
+ "version": "0.2.0",
"scripts": {
"tx": "tx pull --all || true",
"lint": "yarn lint:js && yarn lint:styles",
@@ -41,6 +41,7 @@
"homepage": "https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo#readme",
"devDependencies": {
"@babel/preset-typescript": "^7.7.4",
+ "@types/classnames": "^2.2.10",
"@types/d3": "^5.7.2",
"@types/lodash": "^4.14.149",
"@types/luxon": "^1.21.0",
@@ -86,7 +87,8 @@
"axios": "^0.19.0",
"cozy-bar": "^7.7.10",
"cozy-client": "13.18.0",
- "cozy-harvest-lib": "2.9.1",
+ "cozy-harvest-lib": "2.16.0",
+ "cozy-realtime": "3.10.5",
"cozy-scripts": "4.3.3",
"cozy-ui": "35.45.0",
"d3": "^5.15.0",
@@ -104,6 +106,7 @@
"react-lottie": "^1.2.3",
"react-router-dom": "5.2.0",
"react-swipeable-views": "0.13.4",
+ "recoil": "^0.0.13",
"sass-loader": "^8.0.0"
},
"husky": {
diff --git a/src/assets/icons/ico/coins.svg b/src/assets/icons/ico/coins.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1a398fdce675c429f39f37a01f8fcb555c940b7e
--- /dev/null
+++ b/src/assets/icons/ico/coins.svg
@@ -0,0 +1,83 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.78865 33.3019C3.32505 33.233 3 32.8332 3 32.3645L3 30.1667C3 29.6144 3.44772 29.1667 4 29.1667L31.1667 29.1667C31.719 29.1667 32.1667 29.6144 32.1667 30.1667L32.1667 32.3645C32.1667 32.8332 31.8416 33.233 31.378 33.3019C29.7904 33.5379 25.651 34.0001 17.5833 34.0001C9.51564 34.0001 5.37631 33.5379 3.78865 33.3019Z" fill="url(#paint0_linear)"/>
+<path d="M3 32.3645C3 32.8332 3.32505 33.2329 3.78865 33.3018C5.37631 33.5378 9.51564 34 17.5833 34C25.651 34 29.7904 33.5378 31.378 33.3018C31.8416 33.2329 32.1667 32.8332 32.1667 32.3645L32.1667 31.5311C32.1667 31.9998 31.8416 32.3996 31.378 32.4685C29.7904 32.7045 25.651 33.1666 17.5833 33.1666C9.51564 33.1666 5.37631 32.7045 3.78865 32.4685C3.32505 32.3996 3 31.9998 3 31.5311L3 32.3645Z" fill="#A95508"/>
+<path d="M3.83333 29.1666C3.3731 29.1666 3 28.7935 3 28.3333L32.1667 28.3333C32.1667 28.7935 31.7936 29.1666 31.3333 29.1666L3.83333 29.1666Z" fill="#A95508"/>
+<path d="M3 28.3333L3 25.1666C3 24.6144 3.44772 24.1666 4 24.1666L31.1667 24.1666C31.719 24.1666 32.1667 24.6144 32.1667 25.1666L32.1667 28.3333L3 28.3333Z" fill="url(#paint1_linear)"/>
+<path d="M3.83333 24.1666C3.37309 24.1666 3 23.7935 3 23.3333L32.1667 23.3333C32.1667 23.7935 31.7936 24.1666 31.3333 24.1666L3.83333 24.1666Z" fill="#A95508"/>
+<path d="M3 23.3333L3 20.1666C3 19.6144 3.44772 19.1666 4 19.1666L31.1667 19.1666C31.719 19.1666 32.1667 19.6144 32.1667 20.1666L32.1667 23.3333L3 23.3333Z" fill="url(#paint2_linear)"/>
+<path d="M3.83333 19.1666C3.3731 19.1666 3 18.7935 3 18.3333L32.1667 18.3333C32.1667 18.7935 31.7936 19.1666 31.3333 19.1666L3.83333 19.1666Z" fill="#A95508"/>
+<path d="M3 18.3333L3 15.1666C3 14.6144 3.44772 14.1666 4 14.1666L31.1667 14.1666C31.719 14.1666 32.1667 14.6144 32.1667 15.1666L32.1667 18.3333L3 18.3333Z" fill="url(#paint3_linear)"/>
+<path d="M3.83333 14.1667C3.3731 14.1667 3 13.7936 3 13.3334L32.1667 13.3334C32.1667 13.7936 31.7936 14.1667 31.3333 14.1667L3.83333 14.1667Z" fill="#A95508"/>
+<path d="M3 13.3334L3 10.1667C3 9.61442 3.44772 9.16671 4 9.16671L31.1667 9.16671C31.719 9.16671 32.1667 9.61442 32.1667 10.1667L32.1667 13.3334L3 13.3334Z" fill="url(#paint4_linear)"/>
+<path d="M3.875 9.16669C3.39175 9.16669 3 8.77494 3 8.29169L32.1667 8.29169C32.1667 8.77494 31.7749 9.16669 31.2917 9.16669L3.875 9.16669Z" fill="#A95508"/>
+<path d="M3 8.29169L3 4.04168C3 3.48939 3.44772 3.04168 4 3.04168L31.1667 3.04168C31.719 3.04168 32.1667 3.48939 32.1667 4.04168L32.1667 8.29169L3 8.29169Z" fill="url(#paint5_linear)"/>
+<path d="M32.1667 3.47919C32.1667 4.20406 23.4167 4.79169 17.5833 4.79169C11.75 4.79169 3 4.20406 3 3.47919C3 2.75431 9.52918 2.16669 17.5833 2.16669C25.6375 2.16669 32.1667 2.75431 32.1667 3.47919Z" fill="#FECA81"/>
+<defs>
+<linearGradient id="paint0_linear" x1="32.167" y1="31.2552" x2="3.00036" y2="31.2552" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2AA32"/>
+<stop offset="0.0677083" stop-color="#B3653D"/>
+<stop offset="0.1719" stop-color="#F8B116"/>
+<stop offset="0.3438" stop-color="#EBB12A"/>
+<stop offset="0.5417" stop-color="#9E5810"/>
+<stop offset="0.6771" stop-color="#E2AF0A"/>
+<stop offset="0.7969" stop-color="#FBE05B"/>
+<stop offset="0.8854" stop-color="#DC972D"/>
+<stop offset="1" stop-color="#EBC50B"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="32.167" y1="26.2552" x2="3.00036" y2="26.2552" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2AA32"/>
+<stop offset="0.0677083" stop-color="#B3653D"/>
+<stop offset="0.1719" stop-color="#F8B116"/>
+<stop offset="0.3438" stop-color="#EBB12A"/>
+<stop offset="0.5417" stop-color="#9E5810"/>
+<stop offset="0.6771" stop-color="#E2AF0A"/>
+<stop offset="0.7969" stop-color="#FBE05B"/>
+<stop offset="0.8854" stop-color="#DC972D"/>
+<stop offset="1" stop-color="#EBC50B"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="32.167" y1="21.2552" x2="3.00036" y2="21.2552" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2AA32"/>
+<stop offset="0.0677083" stop-color="#B3653D"/>
+<stop offset="0.1719" stop-color="#F8B116"/>
+<stop offset="0.3438" stop-color="#EBB12A"/>
+<stop offset="0.5417" stop-color="#9E5810"/>
+<stop offset="0.6771" stop-color="#E2AF0A"/>
+<stop offset="0.7969" stop-color="#FBE05B"/>
+<stop offset="0.8854" stop-color="#DC972D"/>
+<stop offset="1" stop-color="#EBC50B"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="32.167" y1="16.2552" x2="3.00036" y2="16.2552" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2AA32"/>
+<stop offset="0.0677083" stop-color="#B3653D"/>
+<stop offset="0.1719" stop-color="#F8B116"/>
+<stop offset="0.3438" stop-color="#EBB12A"/>
+<stop offset="0.5417" stop-color="#9E5810"/>
+<stop offset="0.6771" stop-color="#E2AF0A"/>
+<stop offset="0.7969" stop-color="#FBE05B"/>
+<stop offset="0.8854" stop-color="#DC972D"/>
+<stop offset="1" stop-color="#EBC50B"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="32.167" y1="11.2552" x2="3.00036" y2="11.2552" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2AA32"/>
+<stop offset="0.0677083" stop-color="#B3653D"/>
+<stop offset="0.1719" stop-color="#F8B116"/>
+<stop offset="0.3438" stop-color="#EBB12A"/>
+<stop offset="0.5417" stop-color="#9E5810"/>
+<stop offset="0.6771" stop-color="#E2AF0A"/>
+<stop offset="0.7969" stop-color="#FBE05B"/>
+<stop offset="0.8854" stop-color="#DC972D"/>
+<stop offset="1" stop-color="#EBC50B"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="32.167" y1="5.67322" x2="3.00036" y2="5.67322" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2AA32"/>
+<stop offset="0.0677083" stop-color="#B3653D"/>
+<stop offset="0.1719" stop-color="#F8B116"/>
+<stop offset="0.3438" stop-color="#EBB12A"/>
+<stop offset="0.5417" stop-color="#9E5810"/>
+<stop offset="0.6771" stop-color="#E2AF0A"/>
+<stop offset="0.7969" stop-color="#FBE05B"/>
+<stop offset="0.8854" stop-color="#DC972D"/>
+<stop offset="1" stop-color="#EBC50B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/atoms/challenge.state.ts b/src/atoms/challenge.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2a396a8b22102fc8c277aa60e21cba9245c152cf
--- /dev/null
+++ b/src/atoms/challenge.state.ts
@@ -0,0 +1,7 @@
+import { atom } from 'recoil'
+import { UserChallenge } from 'models'
+
+export const currentChallengeState = atom<UserChallenge | null>({
+ key: 'currentChallengeState',
+ default: null,
+})
diff --git a/src/atoms/chart.state.ts b/src/atoms/chart.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a0b25db8bd405ff4486b0be98d06434afc6e7619
--- /dev/null
+++ b/src/atoms/chart.state.ts
@@ -0,0 +1,12 @@
+import { TimeStep } from 'enum/timeStep.enum'
+import { atom } from 'recoil'
+
+export const previousTimeStepState = atom<TimeStep>({
+ key: 'previousTimeStepState',
+ default: TimeStep.DAY,
+})
+
+export const maxLoadsState = atom<Record<string, number | null>>({
+ key: 'maxLoadsState',
+ default: {},
+})
diff --git a/src/atoms/fluidState.state.ts b/src/atoms/fluidState.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2e3c9623a30da335bcac6fcd6e2bfb0be49ef7a1
--- /dev/null
+++ b/src/atoms/fluidState.state.ts
@@ -0,0 +1,38 @@
+import { atom, selector } from 'recoil'
+import { FluidType } from 'enum/fluid.enum'
+import { FluidStatus } from 'models'
+
+export const fluidStatusState = atom<FluidStatus[]>({
+ key: 'fluidStatusState',
+ default: [
+ {
+ fluidType: 0,
+ status: null,
+ lastDataDate: null,
+ },
+ {
+ fluidType: 1,
+ status: null,
+ lastDataDate: null,
+ },
+ {
+ fluidType: 2,
+ status: null,
+ lastDataDate: null,
+ },
+ ],
+})
+
+export const fluidTypeState = selector<FluidType[]>({
+ key: 'fluidTypeState',
+ get: ({ get }) => {
+ const fluidState: FluidStatus[] = get(fluidStatusState)
+ const fluidTypes: FluidType[] = []
+ fluidState.forEach(fluid => {
+ if (fluid.status) {
+ fluidTypes.push(fluid.fluidType)
+ }
+ })
+ return fluidTypes.sort()
+ },
+})
diff --git a/src/atoms/modal.state.ts b/src/atoms/modal.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8bf6adf56bdad5ab134017bc3954ad665adc14bf
--- /dev/null
+++ b/src/atoms/modal.state.ts
@@ -0,0 +1,7 @@
+import { ModalState } from 'models/modal.model'
+import { atom } from 'recoil'
+
+export const modalState = atom<ModalState>({
+ key: 'modalState',
+ default: { feedbackModal: false },
+})
diff --git a/src/atoms/notification.state.ts b/src/atoms/notification.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1065bca143e112e2f32cdec8dffba43f26712d85
--- /dev/null
+++ b/src/atoms/notification.state.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const challengeNotificationState = atom<boolean>({
+ key: 'challengeNotificationState',
+ default: false,
+})
diff --git a/src/atoms/screenType.state.ts b/src/atoms/screenType.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2dd09e49e2669a24c454373c52a22ad98ca0e6fe
--- /dev/null
+++ b/src/atoms/screenType.state.ts
@@ -0,0 +1,7 @@
+import { ScreenType } from 'enum/screen.enum'
+import { atom } from 'recoil'
+
+export const screenTypeState = atom<ScreenType>({
+ key: 'screenTypeState',
+ default: ScreenType.DESKTOP,
+})
diff --git a/src/atoms/userProfile.state.ts b/src/atoms/userProfile.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..848cb6127f05a896ca994b08c5003016f8614c70
--- /dev/null
+++ b/src/atoms/userProfile.state.ts
@@ -0,0 +1,16 @@
+import { UserProfile } from 'models'
+import { atom } from 'recoil'
+
+export const userProfileState = atom<UserProfile>({
+ key: 'userProfileState',
+ default: {
+ id: '',
+ level: 0,
+ challengeTypeHash: '',
+ ecogestureHash: '',
+ haveSeenWelcomeModal: false,
+ haveSeenOldFluidModal: false,
+ notificationEcogesture: [],
+ report: false,
+ },
+})
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 39fda658ad41d39c84e008a0a0fd48bc2b87a440..12c2beccfa4dd3fdb6bce942cdf4fc27bd6687b1 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,9 +1,38 @@
import React from 'react'
import { hot } from 'react-hot-loader'
-import ViewContainer from 'components/ContainerComponents/ViewContainer/ViewContainer'
+import { RecoilRoot } from 'recoil'
+import { HashRouter } from 'react-router-dom'
+import { createBrowserHistory } from 'history'
+import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
+
+import Routes from 'components/Routes/Routes'
+import Navbar from 'components/Navbar/Navbar'
+import SplashRoot from './Splash/SplashRoot'
+import SplashScreen from 'components/Splash/SplashScreen'
+import SplashScreenError from 'components/Splash/SplashScreenError'
+
+export const history = createBrowserHistory()
export const App = () => {
- return <ViewContainer />
+ return (
+ <HashRouter {...history}>
+ <Layout>
+ <RecoilRoot>
+ <SplashRoot
+ splashComponent={SplashScreen}
+ splashErrorComponent={SplashScreenError}
+ >
+ <Navbar />
+ <Main>
+ <Content className="app-content">
+ <Routes />
+ </Content>
+ </Main>
+ </SplashRoot>
+ </RecoilRoot>
+ </Layout>
+ </HashRouter>
+ )
}
/*
diff --git a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx b/src/components/Challenge/AvailableChallengeDetailsView.tsx
similarity index 62%
rename from src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
rename to src/components/Challenge/AvailableChallengeDetailsView.tsx
index 2b0277187f13c11185a8bf5d488f1623a2076147..4d27c68daaae23c1f53079f9599135b6d01e2a9f 100644
--- a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
+++ b/src/components/Challenge/AvailableChallengeDetailsView.tsx
@@ -1,76 +1,95 @@
-import React, { useState, useEffect, useContext } from 'react'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-import { translate } from 'cozy-ui/react/I18n'
+import React, { useState, useEffect, useCallback } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
import { Redirect } from 'react-router-dom'
-import { Client, withClient } from 'cozy-client'
+import { useRecoilState, useRecoilValue } from 'recoil'
import { DateTime } from 'luxon'
+import { Location } from 'history'
import { ScreenType } from 'enum/screen.enum'
-import { ChallengeType, UserChallenge } from 'models'
+import { ChallengeType, UserProfile } from 'models'
+import { userProfileState } from 'atoms/userProfile.state'
+import { screenTypeState } from 'atoms/screenType.state'
+import { fluidTypeState } from 'atoms/fluidState.state'
+import { currentChallengeState } from 'atoms/challenge.state'
import ChallengeService from 'services/challenge.service'
import ConsumptionService from 'services/consumption.service'
+import UserProfileService from 'services/userProfile.service'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
+import CozyBar from 'components/Header/CozyBar'
+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 StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
import AvailableChallengeIcon from 'assets/png/badges/available-big.png'
interface AvailableChallengeDetailsViewProps {
- location: Location
- props: object
- client: Client
- t: Function
+ location: Location<ChallengeType>
}
-const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetailsViewProps> = (
- props: AvailableChallengeDetailsViewProps
-) => {
- const t = props.t
- const client = props.client
- const challengeService = new ChallengeService(client)
- const {
- refreshCurrentChallenge,
- screenType,
- fluidTypes,
- userProfile,
- setNotificationEcogesture,
- } = useContext(AppContext)
+const AvailableChallengeDetailsView: React.FC<AvailableChallengeDetailsViewProps> = ({
+ location,
+}: AvailableChallengeDetailsViewProps) => {
+ const { t } = useI18n()
+ const client = useClient()
+
+ const screenType = useRecoilValue(screenTypeState)
+ const fluidTypes = useRecoilValue(fluidTypeState)
+ const [userProfile, setUserProfile] = useRecoilState<UserProfile>(
+ userProfileState
+ )
+ const [currentChallenge, setCurrentChallenge] = useRecoilState(
+ currentChallengeState
+ )
+
+ const challengeState = location.state
const [redirect, setRedirect] = useState(false)
const [challenge, setChallenge] = useState<ChallengeType | null>(null)
- const [userChallenge, setUserChallenge] = useState<UserChallenge | null>(null)
const [headerHeight, setHeaderHeight] = useState<number>(0)
const [lackOfDataForChallenge, setLackOfDataForChallenge] = useState<boolean>(
false
)
const [isLoaded, setIsLoaded] = useState<boolean>(false)
+ const challengeService = new ChallengeService(client)
+
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
}
+ const updateUserProfileNotification = useCallback(
+ async (ecogestureList: string[]) => {
+ const userProfileService = new UserProfileService(client)
+ await userProfileService
+ .updateUserProfile({ notificationEcogesture: ecogestureList })
+ .then(updatedUserProfile => {
+ updatedUserProfile && setUserProfile(updatedUserProfile)
+ })
+ },
+ [setUserProfile]
+ )
+
async function startChallenge() {
if (challenge) {
- const data = await challengeService.startChallenge(
+ const startedChallenge = await challengeService.startChallenge(
challenge,
fluidTypes,
challenge.availableEcogestures
)
- const chal = await challengeService.getCurrentChallenge()
- await setUserChallenge(chal)
- const updatedNotificationEcogestureList: string[] =
- userProfile && userProfile.notificationEcogesture
- ? userProfile.notificationEcogesture
- : []
- if (chal && updatedNotificationEcogestureList) {
- updatedNotificationEcogestureList.push(chal.selectedEcogestures[0].id)
- updatedNotificationEcogestureList.push(chal.selectedEcogestures[1].id)
- await setNotificationEcogesture(updatedNotificationEcogestureList)
+ setCurrentChallenge(startedChallenge)
+ const updatedNotificationEcogestureList: string[] = userProfile.notificationEcogesture
+ ? [...userProfile.notificationEcogesture]
+ : []
+ if (startedChallenge && updatedNotificationEcogestureList) {
+ updatedNotificationEcogestureList.push(
+ startedChallenge.selectedEcogestures[0].id
+ )
+ updatedNotificationEcogestureList.push(
+ startedChallenge.selectedEcogestures[1].id
+ )
+ await updateUserProfileNotification(updatedNotificationEcogestureList)
}
-
- await refreshCurrentChallenge()
}
}
@@ -85,7 +104,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
<Redirect
to={{
pathname: '/challenges/ongoing',
- state: { challenge: userChallenge },
+ state: currentChallenge,
}}
/>
)
@@ -94,10 +113,9 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
useEffect(() => {
let subscribed = true
- if (props.location.state) {
+ if (challengeState) {
const lag = challengeService.getLagDays(fluidTypes)
- const firstDayOfPreviousPeriod =
- props && props.location.state.challenge.duration.days
+ const firstDayOfPreviousPeriod = challengeState.duration.days
const timePeriod = {
startDate: DateTime.local()
.plus({ days: -firstDayOfPreviousPeriod })
@@ -116,7 +134,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
)
if (fetchedPerformanceIndicators && subscribed) {
fetchedPerformanceIndicators.forEach(element => {
- !element.value ? setLackOfDataForChallenge(true) : null
+ if (!element.value) setLackOfDataForChallenge(true)
})
} else {
setLackOfDataForChallenge(true)
@@ -124,7 +142,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
setIsLoaded(true)
}
checkPreviousData()
- setChallenge(props && props.location.state.challenge)
+ setChallenge(challengeState)
}
return () => {
subscribed = false
@@ -142,7 +160,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
desktopTitleKey={'COMMON.APP_NEW_CHALLENGE_TITLE'}
displayBackArrow={true}
></Header>
- {!props.location.state ? <Redirect to="/challenges" /> : null}
+ {!challengeState ? <Redirect to="/challenges" /> : null}
<Content height={headerHeight} background="var(--darkLight2)">
{!challenge ? (
<StyledSpinner />
@@ -195,4 +213,4 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
)
}
-export default translate()(withClient(AvailableChallengeDetailsViewContainer))
+export default AvailableChallengeDetailsView
diff --git a/src/components/Challenge/ChallengeCardLink.tsx b/src/components/Challenge/ChallengeCardLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7dada7a8073276c6bd52252fb67e76a628740b5c
--- /dev/null
+++ b/src/components/Challenge/ChallengeCardLink.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useRecoilValue } from 'recoil'
+import { currentChallengeState } from 'atoms/challenge.state'
+import ChallengeCardLinkItem from 'components/Challenge/ChallengeCardLinkItem'
+
+const ChallengeCardLink: React.FC = () => {
+ const { t } = useI18n()
+ const currentChallenge = useRecoilValue(currentChallengeState)
+ return (
+ <>
+ <div className="ccc-root">
+ {currentChallenge && currentChallenge.challengeType && (
+ <div className="ccc-content">
+ <div className="ccc-header text-14-normal-uppercase">
+ {t('COMMON.CHALLENGE_CARD_LABEL')}
+ </div>
+ <ChallengeCardLinkItem userChallenge={currentChallenge} />
+ </div>
+ )}
+ </div>
+ </>
+ )
+}
+
+export default ChallengeCardLink
diff --git a/src/components/ContentComponents/ChallengeCard/ChallengeCard.tsx b/src/components/Challenge/ChallengeCardLinkItem.tsx
similarity index 69%
rename from src/components/ContentComponents/ChallengeCard/ChallengeCard.tsx
rename to src/components/Challenge/ChallengeCardLinkItem.tsx
index 2f20a9917ab74d1bfe707a9fce022086db9659d7..650ab10de2098122e4d2b1aecc2f94e210d17ca9 100644
--- a/src/components/ContentComponents/ChallengeCard/ChallengeCard.tsx
+++ b/src/components/Challenge/ChallengeCardLinkItem.tsx
@@ -1,30 +1,30 @@
-import React, { useContext } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import React from 'react'
import { NavLink } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
import { TypeChallenge } from 'enum/challenge.enum'
+import { challengeNotificationState } from 'atoms/notification.state'
import { UserChallenge } from 'models'
import StyledChallengeCard from 'components/CommonKit/Card/StyledChallengeCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import OngoingChallengePile from 'components/ContentComponents/Challenge/OngoingChallengePile'
-import OngoingChallengeViewingDate from 'components/ContentComponents/Challenge/OngoingChallengeViewingDate'
-import FollowChallengeTimeline from 'components/ContentComponents/Challenge/FollowChallengeTimeline'
+import ChallengePile from 'components/Challenge/ChallengePile'
+import ChallengeViewingDate from 'components/Challenge/ChallengeViewingDate'
+import ChallengeTimeline from 'components/Challenge/ChallengeTimeline'
import BlackArrowIcon from 'assets/icons/ico/black-arrow.svg'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-interface ChallengeCardProps {
+interface ChallengeCardLinkItemProps {
userChallenge: UserChallenge
}
-const ChallengeCard: React.FC<ChallengeCardProps> = ({
+const ChallengeCardLinkItem: React.FC<ChallengeCardLinkItemProps> = ({
userChallenge,
-}: ChallengeCardProps) => {
- const { challengeNotification } = useContext(AppContext)
+}: ChallengeCardLinkItemProps) => {
+ const challengeNotification = useRecoilValue(challengeNotificationState)
const challengesPath = 'challenges'
const challengeDetailPath = {
pathname: `challenges/ongoing`,
- state: { challenge: userChallenge },
+ state: userChallenge,
}
return (
<NavLink
@@ -41,16 +41,13 @@ const ChallengeCard: React.FC<ChallengeCardProps> = ({
{userChallenge.challengeType.title}
</div>
<div className="cc-content-progress">
- <OngoingChallengePile
- challenge={userChallenge}
- small={true}
- />
+ <ChallengePile challenge={userChallenge} small={true} />
</div>
<div className="cc-content-timeline">
- <FollowChallengeTimeline challenge={userChallenge} />
+ <ChallengeTimeline challenge={userChallenge} />
</div>
<div className="cc-content-visu text-15-normal">
- <OngoingChallengeViewingDate challenge={userChallenge} />
+ <ChallengeViewingDate challenge={userChallenge} />
</div>
</div>
<div className="cc-content-right">
@@ -82,4 +79,4 @@ const ChallengeCard: React.FC<ChallengeCardProps> = ({
)
}
-export default translate()(ChallengeCard)
+export default ChallengeCardLinkItem
diff --git a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx b/src/components/Challenge/ChallengeList.tsx
similarity index 72%
rename from src/components/ContentComponents/ChallengeList/ChallengesList.tsx
rename to src/components/Challenge/ChallengeList.tsx
index 2139ac3ef587fb10dad6eaba53fe4549316a83ae..87fa86592402ff5c71f7c0507bc9810c64ce8d52 100644
--- a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
+++ b/src/components/Challenge/ChallengeList.tsx
@@ -1,29 +1,29 @@
-import React, { useState, useEffect, useContext } from 'react'
-import { withClient, Client } from 'cozy-client'
+import React, { useState, useEffect } from 'react'
+import { useClient } from 'cozy-client'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { ChallengeState } from 'enum/challenge.enum'
import { ScreenType } from 'enum/screen.enum'
+import { fluidTypeState } from 'atoms/fluidState.state'
+import { challengeNotificationState } from 'atoms/notification.state'
+import { screenTypeState } from 'atoms/screenType.state'
+import { currentChallengeState } from 'atoms/challenge.state'
import { ChallengeType, UserChallenge } from 'models'
import ChallengeService from 'services/challenge.service'
import StyledChallengeSpinner from 'components/CommonKit/Spinner/StyledChallengeSpinner'
-import ChallengeListItem from 'components/ContentComponents/ChallengeList/ChallengeListItem'
-import ChallengeModal from 'components/ContentComponents/ChallengeModal/ChallengeModal'
-import { AppContext } from 'components/Contexts/AppContextProvider'
+import ChallengeListItem from 'components/Challenge/ChallengeListItem'
+import ChallengeModal from 'components/Challenge/ChallengeModal'
-interface ChallengesListProps {
- client: Client
-}
+const ChallengeList: React.FC = () => {
+ const client = useClient()
+ const screenType = useRecoilValue(screenTypeState)
+ const fluidTypes = useRecoilValue(fluidTypeState)
+ const [challengeNotification, setChallengeNotification] = useRecoilState(
+ challengeNotificationState
+ )
+ const setCurrentChallenge = useSetRecoilState(currentChallengeState)
-const ChallengesList: React.FC<ChallengesListProps> = ({
- client,
-}: ChallengesListProps) => {
- const {
- fluidTypes,
- refreshCurrentChallenge,
- screenType,
- challengeNotification,
- } = useContext(AppContext)
const challengeService = new ChallengeService(client)
const [
ongoingChallenge,
@@ -51,37 +51,37 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
}
const setRightChallengeInTheMiddle = (
- challengesType: ChallengeType[],
- userChallenges: UserChallenge[]
+ _challengesType: ChallengeType[],
+ _userChallenges: UserChallenge[]
) => {
const header = screenType === ScreenType.MOBILE ? 96 : 174
const bottomNav = screenType === ScreenType.MOBILE ? 60 : 0
const challengeCard = screenType === ScreenType.MOBILE ? 100 : 120
- const paddingBottom =
+ const _paddingBottom =
(window.innerHeight - header - bottomNav) / 2 -
- userChallenges.length * challengeCard
+ _userChallenges.length * challengeCard
const canFitInHalfScreen =
window.innerHeight / 2 - header >
- (challengesType.length - 1) * challengeCard
- if (userChallenges[0].state === 0) {
- setPaddingBottom(paddingBottom + bottomNav)
+ (_challengesType.length - 1) * challengeCard
+ if (_userChallenges[0].state === 0) {
+ setPaddingBottom(_paddingBottom + bottomNav)
if (canFitInHalfScreen) {
setScroll(0)
} else {
setScroll(
(challengeCard / 2) *
- challengesType.length *
+ _challengesType.length *
(1 + challengeCard / window.innerHeight)
)
}
} else {
- setPaddingBottom(paddingBottom - challengeCard + bottomNav)
+ setPaddingBottom(_paddingBottom - challengeCard + bottomNav)
if (canFitInHalfScreen) {
setScroll(0)
} else {
setScroll(
(challengeCard / 2) *
- (challengesType.length - 1) *
+ (_challengesType.length - 1) *
(1 + challengeCard / window.innerHeight)
)
}
@@ -109,7 +109,8 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
if (challengeNotification) {
setOpenChallengeModal(true)
await challengeService.endChallenge(ongoingChallengeTmp, fluidTypes)
- await refreshCurrentChallenge()
+ setCurrentChallenge(null)
+ setChallengeNotification(false)
setOngoingChallenge(null)
}
}
@@ -180,29 +181,25 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
)
)}
{userChallenges &&
- userChallenges.map((challenge, index) =>
- challenge && challenge.state === 0 ? (
- <ChallengeListItem
- key={index}
- challenge={challenge.challengeType}
- userChallenge={challenge}
- challengeState="ongoing"
- />
- ) : (
- <ChallengeListItem
- key={index}
- challenge={challenge.challengeType}
- userChallenge={challenge}
- challengeState="finished"
- badgeStatus={challenge.badge}
- />
- )
- )}
+ userChallenges.map((challenge, index) => (
+ <ChallengeListItem
+ key={index}
+ challenge={
+ challenge.challengeType
+ ? challenge.challengeType
+ : undefined
+ }
+ userChallenge={challenge}
+ challengeState={
+ challenge.state === 0 ? 'ongoing' : 'finished'
+ }
+ />
+ ))}
</div>
</div>
</div>
)}
- {openChallengeModal && (
+ {openChallengeModal && ongoingChallengeModal && (
<ChallengeModal
opened={openChallengeModal}
challenge={ongoingChallengeModal}
@@ -214,4 +211,4 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
)
}
-export default withClient(ChallengesList)
+export default ChallengeList
diff --git a/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx b/src/components/Challenge/ChallengeListItem.tsx
similarity index 81%
rename from src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx
rename to src/components/Challenge/ChallengeListItem.tsx
index 13e46e33e6f72d125b98492674fd9f244bf25339..4d417c51083d1ba316ba92daedc144b9caf01e7e 100644
--- a/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx
+++ b/src/components/Challenge/ChallengeListItem.tsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { NavLink } from 'react-router-dom'
import { ChallengeType, Ecogesture, UserChallenge } from 'models'
@@ -14,10 +14,9 @@ import OngoingChallengeIcon from 'assets/png/badges/ongoing.png'
import DefaultChallengeIcon from 'assets/png/badges/default.png'
interface ChallengeListItemProps {
- challenge: ChallengeType
+ challenge?: ChallengeType
userChallenge?: UserChallenge
handleClick?: (challenge: ChallengeType) => void
- t: Function
challengeState?: string
ecogestures?: Ecogesture[]
}
@@ -25,22 +24,24 @@ interface ChallengeListItemProps {
const ChallengeListItem: React.FC<ChallengeListItemProps> = ({
challenge,
userChallenge,
- t,
challengeState,
}: ChallengeListItemProps) => {
+ const { t } = useI18n()
const [badgeIcon, setBadgeIcon] = useState<string | undefined>()
async function importRightBadge(id: string, badgeStatus: number) {
- // Les png doivent être au format idchallenge-badgestate.png
- const importedBadge =
- id === 'CHA00000001'
- ? await import(
- /* webpackMode: "eager" */ `assets/png/badges/${id}-1.png`
- )
- : await import(
- /* webpackMode: "eager" */ `assets/png/badges/${id}-${badgeStatus}.png`
- )
- setBadgeIcon(importedBadge.default)
+ if (badgeStatus !== -1) {
+ // Les png doivent être au format idchallenge-badgestate.png
+ const importedBadge =
+ id === 'CHA00000001'
+ ? await import(
+ /* webpackMode: "eager" */ `assets/png/badges/${id}-1.png`
+ )
+ : await import(
+ /* webpackMode: "eager" */ `assets/png/badges/${id}-${badgeStatus}.png`
+ )
+ setBadgeIcon(importedBadge.default)
+ }
}
const defineBadge = () => {
@@ -69,7 +70,7 @@ const ChallengeListItem: React.FC<ChallengeListItemProps> = ({
className="cli-link"
to={{
pathname: `challenges/${challengeState}`,
- state: { challenge: userChallenge ? userChallenge : challenge },
+ state: userChallenge ? userChallenge : challenge,
}}
>
<div className={`cli cli-${challengeState}`}>
@@ -100,9 +101,9 @@ const ChallengeListItem: React.FC<ChallengeListItemProps> = ({
</div>
)}
<div className={`title-${challengeState} text-18-bold`}>
- {!challenge.title
- ? t('CHALLENGE.NO_CHALLENGE')
- : challenge.title}
+ {challenge && challenge.title
+ ? challenge.title
+ : t('CHALLENGE.NO_CHALLENGE')}
</div>
</div>
</div>
@@ -121,4 +122,4 @@ const ChallengeListItem: React.FC<ChallengeListItemProps> = ({
)
}
-export default translate()(ChallengeListItem)
+export default ChallengeListItem
diff --git a/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx b/src/components/Challenge/ChallengeModal.tsx
similarity index 83%
rename from src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx
rename to src/components/Challenge/ChallengeModal.tsx
index 70918d35351c66a530c3075a662c76d37135d85a..be6fcc9289977aadfb55a1c5f04ef48ce3cb939b 100644
--- a/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx
+++ b/src/components/Challenge/ChallengeModal.tsx
@@ -1,7 +1,9 @@
-import React, { useState, useContext } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import React, { useState } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useRecoilValue } from 'recoil'
import { ScreenType } from 'enum/screen.enum'
+import { screenTypeState } from 'atoms/screenType.state'
import { UserChallenge } from 'models'
import { formatNumberValues } from 'utils/utils'
@@ -10,12 +12,10 @@ import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StarIcon from 'assets/icons/visu/challenge/star.svg'
import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { AppContext } from 'components/Contexts/AppContextProvider'
interface ChallengeModalProps {
opened: boolean
challenge: UserChallenge
- t: Function
handleCloseClick: () => void
badgeStatus: number | null
}
@@ -23,27 +23,29 @@ interface ChallengeModalProps {
const ChallengeModal: React.FC<ChallengeModalProps> = ({
opened,
challenge,
- t,
handleCloseClick,
badgeStatus,
}: ChallengeModalProps) => {
+ const { t } = useI18n()
+ const screenType = useRecoilValue(screenTypeState)
const [badgeIcon, setBadgeIcon] = useState<string | null>(null)
- const { screenType } = useContext(AppContext)
- async function importRightBadge(id: string, badgeStatus: number) {
- // Les png doivent être au format idchallenge-badgestate.png
- const importedBadge =
- id === 'CHA00000001'
- ? await import(
- /* webpackMode: "eager" */ `assets/png/badges/${id}-1.png`
- )
- : await import(
- /* webpackMode: "eager" */ `assets/png/badges/${id}-${badgeStatus}.png`
- )
- setBadgeIcon(importedBadge.default)
+ async function importRightBadge(id: string, _badgeStatus: number) {
+ if (badgeStatus !== -1) {
+ // Les png doivent être au format idchallenge-badgestate.png
+ const importedBadge =
+ id === 'CHA00000001'
+ ? await import(
+ /* webpackMode: "eager" */ `assets/png/badges/${id}-1.png`
+ )
+ : await import(
+ /* webpackMode: "eager" */ `assets/png/badges/${id}-${_badgeStatus}.png`
+ )
+ setBadgeIcon(importedBadge.default)
+ }
}
- const showTheRightBadge = (badgeStatus: number | null) => {
+ const showTheRightBadge = (_badgeStatus: number | null) => {
const result =
challenge &&
formatNumberValues(
@@ -55,7 +57,7 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({
const badge = challenge.badge ? challenge.badge : 0
importRightBadge(challengeId, badge)
if (badgeIcon) {
- if (badgeStatus === 1) {
+ if (_badgeStatus === 1) {
return (
<>
<div className="cm-title win text-24-bold ">
@@ -160,4 +162,4 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({
)
}
-export default translate()(ChallengeModal)
+export default ChallengeModal
diff --git a/src/components/ContentComponents/Challenge/OngoingChallengePile.tsx b/src/components/Challenge/ChallengePile.tsx
similarity index 89%
rename from src/components/ContentComponents/Challenge/OngoingChallengePile.tsx
rename to src/components/Challenge/ChallengePile.tsx
index 61544ac4b5c9d4cb90a73b50f9447a54234051bf..47eaa7d6622af76fc0f28ec39765381d44a3e934 100644
--- a/src/components/ContentComponents/Challenge/OngoingChallengePile.tsx
+++ b/src/components/Challenge/ChallengePile.tsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { UserChallenge } from 'models'
import { formatNumberValues } from 'utils/utils'
@@ -7,17 +7,16 @@ import { formatNumberValues } from 'utils/utils'
import pile from 'assets/icons/visu/challenge/pile.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-interface OngoingChallengePileProps {
+interface ChallengePileProps {
challenge: UserChallenge
small?: boolean
- t: Function
}
-const OngoingChallengePile: React.FC<OngoingChallengePileProps> = ({
+const ChallengePile: React.FC<ChallengePileProps> = ({
challenge,
small = false,
- t,
-}: OngoingChallengePileProps) => {
+}: ChallengePileProps) => {
+ const { t } = useI18n()
const [pilePercent, setPilePercent] = useState<number>(0)
const sizePile = small ? 100 : 150
const textFont = small ? 'text-17-bold' : 'text-20-bold'
@@ -77,4 +76,4 @@ const OngoingChallengePile: React.FC<OngoingChallengePileProps> = ({
)
}
-export default translate()(OngoingChallengePile)
+export default ChallengePile
diff --git a/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx b/src/components/Challenge/ChallengeTimeline.tsx
similarity index 93%
rename from src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx
rename to src/components/Challenge/ChallengeTimeline.tsx
index 05177162204c01df3b9643211fc349e239fea7f5..55e41e7ef637deb523258fdaf47c00159c3e7caf 100644
--- a/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx
+++ b/src/components/Challenge/ChallengeTimeline.tsx
@@ -1,20 +1,18 @@
import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
-import { Client } from 'cozy-client'
+import { useClient } from 'cozy-client'
import { DateTime, Interval } from 'luxon'
import { UserChallenge } from 'models'
import ChallengeService from 'services/challenge.service'
-interface FollowChallengeTimelineViewProps {
+interface ChallengeTimelineViewProps {
challenge: UserChallenge
- client: Client
}
-const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({
+const ChallengeTimeline: React.FC<ChallengeTimelineViewProps> = ({
challenge,
- client,
-}: FollowChallengeTimelineViewProps) => {
+}: ChallengeTimelineViewProps) => {
+ const client = useClient()
const challengeService = new ChallengeService(client)
const viewingDate = () => {
@@ -170,4 +168,4 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({
)
}
-export default translate()(FollowChallengeTimeline)
+export default ChallengeTimeline
diff --git a/src/components/ContainerComponents/ViewContainer/ChallengesViewContainer.tsx b/src/components/Challenge/ChallengeView.tsx
similarity index 55%
rename from src/components/ContainerComponents/ViewContainer/ChallengesViewContainer.tsx
rename to src/components/Challenge/ChallengeView.tsx
index 63e5d2b4a35fb5788dc231a509e5b559660a4ef8..9be9e28ea651c704a1231e683a84c6d50e70d30c 100644
--- a/src/components/ContainerComponents/ViewContainer/ChallengesViewContainer.tsx
+++ b/src/components/Challenge/ChallengeView.tsx
@@ -1,10 +1,10 @@
import React, { useState } from 'react'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-import BadgesContainer from 'components/ContainerComponents/BadgesContainer/BadgesContainer'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
+import ChallengesList from 'components/Challenge/ChallengeList'
-const ChallengesViewContainer: React.FC = () => {
+const ChallengeView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = (height: number) => {
@@ -19,10 +19,10 @@ const ChallengesViewContainer: React.FC = () => {
desktopTitleKey={'COMMON.APP_CHALLENGE_TITLE'}
></Header>
<Content height={headerHeight} background="var(--darkLight2)">
- <BadgesContainer />
+ <ChallengesList />
</Content>
</React.Fragment>
)
}
-export default ChallengesViewContainer
+export default ChallengeView
diff --git a/src/components/ContentComponents/Challenge/OngoingChallengeViewingDate.tsx b/src/components/Challenge/ChallengeViewingDate.tsx
similarity index 64%
rename from src/components/ContentComponents/Challenge/OngoingChallengeViewingDate.tsx
rename to src/components/Challenge/ChallengeViewingDate.tsx
index 311cc1bfb75ffbdbdfb4c49658431acfce08f439..44726b16894aee0369bc9c0e359266222de20f97 100644
--- a/src/components/ContentComponents/Challenge/OngoingChallengeViewingDate.tsx
+++ b/src/components/Challenge/ChallengeViewingDate.tsx
@@ -1,22 +1,20 @@
import React, { useState, useEffect } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
-import { Client, withClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
import { DateTime } from 'luxon'
import { UserChallenge } from 'models'
import ChallengeService from 'services/challenge.service'
-interface OngoingChallengeViewingDateProps {
+interface ChallengeViewingDateProps {
challenge: UserChallenge
- client: Client
- t: Function
}
-const OngoingChallengeViewingDate: React.FC<OngoingChallengeViewingDateProps> = ({
+const ChallengeViewingDate: React.FC<ChallengeViewingDateProps> = ({
challenge,
- client,
- t,
-}: OngoingChallengeViewingDateProps) => {
+}: ChallengeViewingDateProps) => {
+ const { t } = useI18n()
+ const client = useClient()
const challengeService = new ChallengeService(client)
const [firstDateWithData, setFirstDateWithData] = useState<DateTime | null>(
null
@@ -24,6 +22,9 @@ const OngoingChallengeViewingDate: React.FC<OngoingChallengeViewingDateProps> =
const [lastDateWithData, setLastDateWithData] = useState<DateTime | null>(
null
)
+ const diffDays =
+ firstDateWithData && firstDateWithData.diffNow(['days']).toObject().days
+ const diffDaysCeil = Math.ceil(diffDays || 0)
useEffect(() => {
if (challenge) {
@@ -40,14 +41,15 @@ const OngoingChallengeViewingDate: React.FC<OngoingChallengeViewingDateProps> =
)
}
}, [])
-
+ /* eslint-disable @typescript-eslint/camelcase */
return (
<React.Fragment>
{firstDateWithData && firstDateWithData > DateTime.local() ? (
<div className="view-start-date">
- {t('CHALLENGE.VIEW_START.PART1') +
- firstDateWithData.diffNow(['days', 'hours']).toObject().days +
- t('CHALLENGE.VIEW_START.PART2')}
+ {t('CHALLENGE.VIEW_START', {
+ diffDaysCeil,
+ smart_count: diffDaysCeil,
+ })}
</div>
) : (
<div className="view-start-date">
@@ -59,4 +61,4 @@ const OngoingChallengeViewingDate: React.FC<OngoingChallengeViewingDateProps> =
)
}
-export default translate()(withClient(OngoingChallengeViewingDate))
+export default ChallengeViewingDate
diff --git a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx b/src/components/Challenge/FinishedChallengeDetailsView.tsx
similarity index 75%
rename from src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
rename to src/components/Challenge/FinishedChallengeDetailsView.tsx
index 70cc776d20d9e01ea9423530d879ff63b0f04d7e..a577c4be9af569cf61f0a3f5d2a11c2e47471b36 100644
--- a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
+++ b/src/components/Challenge/FinishedChallengeDetailsView.tsx
@@ -1,51 +1,52 @@
-import React, { useState, useEffect, useContext } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
-import { Client, withClient } from 'cozy-client'
+import React, { useState, useEffect } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { Redirect } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import { Location } from 'history'
import { TypeChallenge, BadgeState } from 'enum/challenge.enum'
import { ScreenType } from 'enum/screen.enum'
import { UserChallenge } from 'models'
+import { screenTypeState } from 'atoms/screenType.state'
import { formatNumberValues } from 'utils/utils'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+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 { AppContext } from 'components/Contexts/AppContextProvider'
+import EcogestureModal from 'components/Ecogesture/EcogestureModal'
+import EcogestureCard from 'components/Ecogesture/EcogestureCard'
interface FinishedChallengeDetailsViewProps {
- location: any
- props: object
- client: Client
- t: Function
+ location: Location<UserChallenge>
}
-const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsViewProps> = (
- props: FinishedChallengeDetailsViewProps
-) => {
- const t = props.t
+const FinishedChallengeDetailsView: React.FC<FinishedChallengeDetailsViewProps> = ({
+ location,
+}: FinishedChallengeDetailsViewProps) => {
+ const { t } = useI18n()
+ const userChallengeState = location.state
+ const screenType = useRecoilValue(screenTypeState)
const [challengeEcogesture, setChallengeEcogesture] = useState<number>(0)
const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
const [challenge, setChallenge] = useState<UserChallenge | null>(null)
const [headerHeight, setHeaderHeight] = useState<number>(0)
const [badgeIcon, setBadgeIcon] = useState<string | undefined>()
- const { screenType } = useContext(AppContext)
async function importRightBadge(id: string, badgeStatus: number) {
- // Les png doivent être au format idchallenge-badgestate.png
- const importedBadge =
- id === 'CHA00000001'
- ? await import(
- /* webpackMode: "eager" */ `assets/png/badges/${id}-1.png`
- )
- : await import(
- /* webpackMode: "eager" */ `assets/png/badges/${id}-${badgeStatus}.png`
- )
- setBadgeIcon(importedBadge.default)
+ if (badgeStatus !== -1) {
+ // Les png doivent être au format idchallenge-badgestate.png
+ const importedBadge =
+ id === 'CHA00000001'
+ ? await import(
+ /* webpackMode: "eager" */ `assets/png/badges/${id}-1.png`
+ )
+ : await import(
+ /* webpackMode: "eager" */ `assets/png/badges/${id}-${badgeStatus}.png`
+ )
+ setBadgeIcon(importedBadge.default)
+ }
}
const defineHeaderHeight = (height: number) => {
@@ -62,12 +63,14 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
}
useEffect(() => {
- if (props.location.state) {
- setChallenge(props && props.location.state.challenge)
- importRightBadge(
- props.location.state.challenge.challengeType.id,
- props.location.state.challenge.badge
- )
+ if (userChallengeState) {
+ setChallenge(userChallengeState)
+ if (userChallengeState.challengeType && userChallengeState.badge) {
+ importRightBadge(
+ userChallengeState.challengeType.id,
+ userChallengeState.badge
+ )
+ }
}
}, [])
@@ -86,7 +89,7 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
desktopTitleKey={'COMMON.APP_FINISHED_CHALLENGE_TITLE'}
displayBackArrow={true}
></Header>
- {!props.location.state ? <Redirect to="/challenges" /> : null}
+ {!userChallengeState ? <Redirect to="/challenges" /> : null}
<Content height={headerHeight} background="var(--darkLight2)">
{!challenge ? (
<StyledSpinner />
@@ -161,7 +164,7 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
</div>
{openEcogestureModal && (
<EcogestureModal
- opened={openEcogestureModal}
+ open={openEcogestureModal}
ecogesture={challenge.selectedEcogestures[challengeEcogesture]}
handleCloseClick={handleCloseClick}
unlockedEcogesture={true}
@@ -174,4 +177,4 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
)
}
-export default translate()(withClient(FinishedChallengeDetailsViewContainer))
+export default FinishedChallengeDetailsView
diff --git a/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx b/src/components/Challenge/LockedChallengeDetailsViewContainer.tsx
similarity index 70%
rename from src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx
rename to src/components/Challenge/LockedChallengeDetailsViewContainer.tsx
index 1352a5308c26a0a028aaee58b87cd82dc86117fb..858e0161db84fccacb812c5802f1955ee755f3e0 100644
--- a/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx
+++ b/src/components/Challenge/LockedChallengeDetailsViewContainer.tsx
@@ -1,42 +1,41 @@
-import React, { useState, useEffect, useContext } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import React, { useState, useEffect } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { Redirect } from 'react-router-dom'
-import { Client, withClient } from 'cozy-client'
+import { useRecoilValue } from 'recoil'
+import { Location } from 'history'
import { ScreenType } from 'enum/screen.enum'
+import { screenTypeState } from 'atoms/screenType.state'
import { ChallengeType } from 'models'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
+import CozyBar from 'components/Header/CozyBar'
+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 StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
-import { AppContext } from 'components/Contexts/AppContextProvider'
import LockedChallengeIcon from 'assets/png/badges/locked-big.png'
interface LockedChallengeDetailsViewProps {
- location: any
- props: object
- client: Client
- t: Function
+ location: Location<ChallengeType>
}
-const LockedChallengeDetailsViewContainer: React.FC<LockedChallengeDetailsViewProps> = (
- props: LockedChallengeDetailsViewProps
-) => {
- const t = props.t
+const LockedChallengeDetailsViewContainer: React.FC<LockedChallengeDetailsViewProps> = ({
+ location,
+}: LockedChallengeDetailsViewProps) => {
+ const { t } = useI18n()
+ const screenType = useRecoilValue(screenTypeState)
const [challenge, setChallenge] = useState<ChallengeType | null>(null)
const [headerHeight, setHeaderHeight] = useState<number>(0)
- const { screenType } = useContext(AppContext)
+ const challengeState = location.state
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
}
useEffect(() => {
- if (props.location.state) {
- setChallenge(props && props.location.state.challenge)
+ if (challengeState) {
+ setChallenge(challengeState)
}
}, [])
@@ -51,7 +50,7 @@ const LockedChallengeDetailsViewContainer: React.FC<LockedChallengeDetailsViewPr
desktopTitleKey={'COMMON.APP_LOCKED_CHALLENGE_TITLE'}
displayBackArrow={true}
></Header>
- {!props.location.state ? <Redirect to="/challenges" /> : null}
+ {!challengeState ? <Redirect to="/challenges" /> : null}
<Content height={headerHeight} background="var(--darkLight2)">
{!challenge ? (
<StyledSpinner />
@@ -89,4 +88,4 @@ const LockedChallengeDetailsViewContainer: React.FC<LockedChallengeDetailsViewPr
)
}
-export default translate()(withClient(LockedChallengeDetailsViewContainer))
+export default LockedChallengeDetailsViewContainer
diff --git a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx b/src/components/Challenge/OngoingChallengeDetailsView.tsx
similarity index 61%
rename from src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
rename to src/components/Challenge/OngoingChallengeDetailsView.tsx
index 96fbdb4022a797b8e9018c8bd3c427be4566ef65..00f0c4a7ed60be66a8f6451b55bd8312c15518c8 100644
--- a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
+++ b/src/components/Challenge/OngoingChallengeDetailsView.tsx
@@ -1,77 +1,83 @@
-import React, { useState, useEffect, useContext } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
import { Redirect } from 'react-router-dom'
-import { translate } from 'cozy-ui/react/I18n'
-import { Client, withClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { Location } from 'history'
import { ChallengeState, TypeChallenge } from 'enum/challenge.enum'
import { ScreenType } from 'enum/screen.enum'
-import { UserChallenge } from 'models'
+import { UserChallenge, UserProfile } from 'models'
+import { userProfileState } from 'atoms/userProfile.state'
+import { screenTypeState } from 'atoms/screenType.state'
+import { currentChallengeState } from 'atoms/challenge.state'
import ChallengeService from 'services/challenge.service'
+import UserProfileService from 'services/userProfile.service'
import { formatCompareChallengeDate } from 'utils/date'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
+import CozyBar from 'components/Header/CozyBar'
+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'
-import FollowChallengeTimeline from 'components/ContentComponents/Challenge/FollowChallengeTimeline'
+import ChallengePile from 'components/Challenge/ChallengePile'
+import ChallengeViewingDate from 'components/Challenge/ChallengeViewingDate'
+import ChallengeTimeline from 'components/Challenge/ChallengeTimeline'
import AvailableChallengeIcon from 'assets/png/badges/available.png'
-import { AppContext } from 'components/Contexts/AppContextProvider'
interface OngoingChallengeDetailsViewProps {
- location: any
- props: object
- client: Client
- t: Function
+ location: Location<UserChallenge>
}
-const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsViewProps> = (
- props: OngoingChallengeDetailsViewProps
-) => {
- const t = props.t
- const client = props.client
- const challengeService = new ChallengeService(client)
+const OngoingChallengeDetailsView: React.FC<OngoingChallengeDetailsViewProps> = ({
+ location,
+}: OngoingChallengeDetailsViewProps) => {
+ const { t } = useI18n()
+ const client = useClient()
+ const screenType = useRecoilValue(screenTypeState)
+ const [userProfile, setUserProfile] = useRecoilState<UserProfile>(
+ userProfileState
+ )
+ const setCurrentChallenge = useSetRecoilState(currentChallengeState)
- const {
- refreshCurrentChallenge,
- screenType,
- userProfile,
- setNotificationEcogesture,
- } = useContext(AppContext)
+ const userChallengeState = location.state
const [challengeEcogesture, setChallengeEcogesture] = useState<number>(0)
const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
const [challenge, setChallenge] = useState<UserChallenge | null>(null)
const [headerHeight, setHeaderHeight] = useState<number>(0)
const [maxEnergy, setMaxEnergy] = useState<number | null>(0)
+ const challengeService = new ChallengeService(client)
+
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
}
- async function stopChallenge(challenge: UserChallenge) {
- if (challenge) {
- await challengeService.updateChallengeState(
- challenge.id,
- ChallengeState.ABANDONED
- )
+ const updateUserProfileNotification = useCallback(
+ async (ecogestureList: string[]) => {
+ const userProfileService = new UserProfileService(client)
+ await userProfileService
+ .updateUserProfile({ notificationEcogesture: ecogestureList })
+ .then(updatedUserProfile => {
+ updatedUserProfile && setUserProfile(updatedUserProfile)
+ })
+ },
+ [setUserProfile]
+ )
- userProfile.notificationEcogesture =
- userProfile &&
- userProfile.notificationEcogesture.filter(
- x =>
- x !== challenge.selectedEcogestures[0].id &&
- x !== challenge.selectedEcogestures[1].id
- )
- await setNotificationEcogesture(
- userProfile && userProfile.notificationEcogesture
+ async function stopChallenge(_challenge: UserChallenge) {
+ if (_challenge) {
+ await challengeService.cancelChallenge(_challenge.id)
+ const updatednotificationEcogesture = userProfile.notificationEcogesture.filter(
+ (x: string) =>
+ x !== _challenge.selectedEcogestures[0].id &&
+ x !== _challenge.selectedEcogestures[1].id
)
-
- await refreshCurrentChallenge()
+ await updateUserProfileNotification(updatednotificationEcogesture)
+ setCurrentChallenge(null)
history.goBack()
}
}
@@ -86,9 +92,9 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
}
useEffect(() => {
- if (props.location.state) {
- setChallenge(props && props.location.state.challenge)
- setMaxEnergy(props.location.state.challenge.maxEnergy)
+ if (userChallengeState) {
+ setChallenge(userChallengeState)
+ setMaxEnergy(userChallengeState.maxEnergy)
}
}, [])
@@ -103,7 +109,7 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
desktopTitleKey={'COMMON.APP_ONGOING_CHALLENGE_TITLE'}
displayBackArrow={true}
></Header>
- {!props.location.state ? <Redirect to="/challenges" /> : null}
+ {!location.state ? <Redirect to="/challenges" /> : null}
<Content height={headerHeight} background="var(--darkLight2)">
{!challenge ? (
<StyledSpinner />
@@ -125,13 +131,12 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
) : (
<div className="cp-follow">
{maxEnergy && maxEnergy === -1 && (
- <OngoingChallengeViewingDate challenge={challenge} />
+ <ChallengeViewingDate challenge={challenge} />
)}
- <OngoingChallengePile challenge={challenge} />
- <FollowChallengeTimeline challenge={challenge} />
+ <ChallengePile challenge={challenge} />
+ <ChallengeTimeline challenge={challenge} />
</div>
)}
-
<div className="cp-description text-16-bold">
{challenge.challengeType &&
challenge.challengeType.description}
@@ -174,7 +179,7 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
</div>
{openEcogestureModal && (
<EcogestureModal
- opened={openEcogestureModal}
+ open={openEcogestureModal}
ecogesture={challenge.selectedEcogestures[challengeEcogesture]}
handleCloseClick={handleCloseClick}
unlockedEcogesture={true}
@@ -187,4 +192,4 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
)
}
-export default translate()(withClient(OngoingChallengeDetailsViewContainer))
+export default OngoingChallengeDetailsView
diff --git a/src/components/ContentComponents/Charts/AxisBottom.tsx b/src/components/Charts/AxisBottom.tsx
similarity index 100%
rename from src/components/ContentComponents/Charts/AxisBottom.tsx
rename to src/components/Charts/AxisBottom.tsx
diff --git a/src/components/ContentComponents/Charts/AxisRight.tsx b/src/components/Charts/AxisRight.tsx
similarity index 83%
rename from src/components/ContentComponents/Charts/AxisRight.tsx
rename to src/components/Charts/AxisRight.tsx
index ac48b6a18ef1452442885774fb8b2918394d134b..9d4a1781b5f528dcc9b7d727e0b09dbe4c000490 100644
--- a/src/components/ContentComponents/Charts/AxisRight.tsx
+++ b/src/components/Charts/AxisRight.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { select, selectAll } from 'd3-selection'
import { axisRight } from 'd3-axis'
import { ScaleLinear } from 'd3-scale'
@@ -11,11 +11,16 @@ interface AxisRightProps {
width: number
marginRight: number
marginTop: number
- t: Function // translation service
}
-const AxisRight = (props: AxisRightProps) => {
- const { yScale, fluidTypes, width, marginRight, marginTop, t } = props
+const AxisRight = ({
+ yScale,
+ fluidTypes,
+ width,
+ marginRight,
+ marginTop,
+}: AxisRightProps) => {
+ const { t } = useI18n()
const isHome: boolean = !window.location.hash.split('/')[2] ? true : false
const fluidStyle =
fluidTypes.length > 1 || isHome ? 'MULTIFLUID' : FluidType[fluidTypes[0]]
@@ -47,4 +52,4 @@ const AxisRight = (props: AxisRightProps) => {
)
}
-export default translate()(AxisRight)
+export default AxisRight
diff --git a/src/components/ContentComponents/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
similarity index 96%
rename from src/components/ContentComponents/Charts/Bar.tsx
rename to src/components/Charts/Bar.tsx
index f815d2deedeeddc27d72a199ed223280bb8932ee..fbb7a306d8bc98ee28fa2af669490e16770d7c45 100644
--- a/src/components/ContentComponents/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -27,23 +27,21 @@ interface BarProps {
isSwitching: boolean
}
-const Bar = (props: BarProps) => {
- const {
- index,
- dataload,
- compareDataload,
- fluidTypes,
- timeStep,
- multiFluid,
- selectedDate,
- showCompare,
- handleClickData,
- xScale,
- yScale,
- height,
- isSwitching,
- } = props
-
+const Bar = ({
+ index,
+ dataload,
+ compareDataload,
+ fluidTypes,
+ timeStep,
+ multiFluid,
+ selectedDate,
+ showCompare,
+ handleClickData,
+ xScale,
+ yScale,
+ height,
+ isSwitching,
+}: BarProps) => {
const [clicked, setClicked] = useState(false)
const [animationEnded, setAnimationEnded] = useState(false)
const [compareAnimationEnded, setCompareAnimationEnded] = useState(false)
diff --git a/src/components/ContentComponents/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
similarity index 88%
rename from src/components/ContentComponents/Charts/BarChart.tsx
rename to src/components/Charts/BarChart.tsx
index 4847fb3bcc8a2ccf677d5c9bac789f5b941b278a..45f1ec10d4874413736f09106962645b82265510 100644
--- a/src/components/ContentComponents/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -1,16 +1,17 @@
-import React, { useContext } from 'react'
+import React from 'react'
import { scaleBand, ScaleBand, scaleLinear, ScaleLinear } from 'd3-scale'
+import { useRecoilValue } from 'recoil'
import { DateTime } from 'luxon'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
+import { maxLoadsState } from 'atoms/chart.state'
import { Datachart, Dataload, TimePeriod } from 'models'
-import Bar from 'components/ContentComponents/Charts/Bar'
-import Hash from 'components/ContentComponents/Charts/Hash'
-import AxisBottom from 'components/ContentComponents/Charts/AxisBottom'
-import AxisRight from 'components/ContentComponents/Charts/AxisRight'
-import { AppContext } from 'components/Contexts/AppContextProvider'
+import Bar from 'components/Charts/Bar'
+import Hash from 'components/Charts/Hash'
+import AxisBottom from 'components/Charts/AxisBottom'
+import AxisRight from 'components/Charts/AxisRight'
export interface BarChartProps {
chartData: Datachart
@@ -64,7 +65,7 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
isSwitching,
isHome,
} = props as PropsWithDefaults
- const { maxLoads } = useContext(AppContext)
+ const maxLoads = useRecoilValue(maxLoadsState)
const getContentWidth = () => {
return width - marginLeft - marginRight
@@ -81,16 +82,17 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
if (timeStep === TimeStep.DAY || timeStep === TimeStep.HALF_AN_HOUR) {
const actualMonth = selectedDate.startOf('week').month
const actualYear = selectedDate.startOf('week').year
- const key = `${actualMonth}/${actualYear}-${isHome}-${fluidTypes
- .sort()
- .join('-')}-${timeStep}`
+ const key = `${actualMonth}/${actualYear}-${isHome}-${fluidTypes.join(
+ '-'
+ )}-${timeStep}`
if (DateTime.local() < selectedDate && !maxLoads[key]) {
maxLoads[key] = 15
}
+ const maxLoad = maxLoads[key] || 0
if (showCompare) {
- return Math.max(maxLoads[key], maxCompare)
+ return Math.max(maxLoad, maxCompare)
}
- return maxLoads[key] > 0 ? maxLoads[key] : 15
+ return maxLoad > 0 ? maxLoad : 15
} else {
let max = chartData.actualData
? Math.max(...chartData.actualData.map(d => d.value))
diff --git a/src/components/ContentComponents/Charts/Hash.tsx b/src/components/Charts/Hash.tsx
similarity index 100%
rename from src/components/ContentComponents/Charts/Hash.tsx
rename to src/components/Charts/Hash.tsx
diff --git a/src/components/CommonKit/Modal/Modal.tsx b/src/components/CommonKit/Modal/Modal.tsx
index 89e631ef88795db63bd9bda7a5b238f02c87b9fb..9662ba252aaec46bbbc70b1289a5e1dff62c0664 100644
--- a/src/components/CommonKit/Modal/Modal.tsx
+++ b/src/components/CommonKit/Modal/Modal.tsx
@@ -1,5 +1,4 @@
-import React, { useEffect, useContext, ReactNode } from 'react'
-import { AppContext } from 'components/Contexts/AppContextProvider'
+import React, { useEffect, ReactNode } from 'react'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import CloseIcon from 'assets/icons/ico/close.svg'
@@ -19,20 +18,35 @@ const Modal: React.FC<ModalProps> = ({
yellowBorder,
}: ModalProps) => {
const yellow = yellowBorder ? 'yellow-border' : ''
- const { disableBackgroundScroll } = useContext(AppContext)
- useEffect(() => {
- open ? disableBackgroundScroll(true) : disableBackgroundScroll(false)
- return () => {
- disableBackgroundScroll(false)
+ const disableBackgroundScroll = (disable: boolean) => {
+ const backgroundDesktop = document.querySelector(
+ '.app-content'
+ ) as HTMLElement
+ const backgroundMobile = document.querySelector('html') as HTMLElement
+ const bgStyleDesktop = backgroundDesktop && backgroundDesktop.style
+ const bgStyleMobile = backgroundMobile && backgroundMobile.style
+ if (disable) {
+ bgStyleDesktop.overflowY = 'hidden'
+ bgStyleMobile.overflowY = 'hidden'
+ } else {
+ bgStyleDesktop.overflowY = 'unset'
+ bgStyleMobile.overflowY = 'unset'
}
- }, [open])
+ }
const closeClick = () => {
disableBackgroundScroll(false)
handleCloseClick()
}
+ useEffect(() => {
+ open ? disableBackgroundScroll(true) : disableBackgroundScroll(false)
+ return () => {
+ disableBackgroundScroll(false)
+ }
+ }, [open])
+
return (
<div className={`modal-overlay ${open ? 'modal-opened' : ''}`}>
<div
diff --git a/src/components/Connection/ConnectionForm.tsx b/src/components/Connection/ConnectionForm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..36f9e62a732ed5f01ec92a48b28c093794951a97
--- /dev/null
+++ b/src/components/Connection/ConnectionForm.tsx
@@ -0,0 +1,66 @@
+import React, { useCallback } from 'react'
+import { useClient } from 'cozy-client'
+import { useSetRecoilState } from 'recoil'
+
+import { userProfileState } from 'atoms/userProfile.state'
+import { Konnector, Trigger, FluidConfig } from 'models'
+import UserProfileService from 'services/userProfile.service'
+
+import ConnectionLoginForm from 'components/Connection/ConnectionLoginForm'
+import ConnectionOAuthForm from 'components/Connection/ConnectionOAuthForm'
+
+interface ConnectionFormProps {
+ fluidConfig: FluidConfig
+ konnector: Konnector
+ account: Account | null
+ trigger: Trigger | null
+ handleSuccessForm: Function
+}
+
+const ConnectionForm: React.FC<ConnectionFormProps> = ({
+ fluidConfig,
+ konnector,
+ account,
+ trigger,
+ handleSuccessForm,
+}: ConnectionFormProps) => {
+ const client = useClient()
+ const setUserProfile = useSetRecoilState(userProfileState)
+ const oAuth: boolean = fluidConfig.konnectorConfig.oauth
+
+ const updateProfileHaveSeenOldFluidModal = useCallback(async () => {
+ const userProfileService = new UserProfileService(client)
+ await userProfileService
+ .updateUserProfile({ haveSeenOldFluidModal: false })
+ .then(updatedUserProfile => {
+ updatedUserProfile && setUserProfile(updatedUserProfile)
+ })
+ }, [setUserProfile])
+
+ const handleSuccess = async (_account: Account, _trigger: Trigger) => {
+ await updateProfileHaveSeenOldFluidModal()
+ handleSuccessForm(_account, _trigger)
+ }
+
+ return (
+ <>
+ {!oAuth ? (
+ <ConnectionLoginForm
+ fluidConfig={fluidConfig}
+ onSuccess={handleSuccess}
+ account={account}
+ trigger={trigger}
+ />
+ ) : (
+ <ConnectionOAuthForm
+ fluidConfig={fluidConfig}
+ konnector={konnector}
+ siteLink={fluidConfig.siteLink}
+ onSuccess={handleSuccess}
+ />
+ )}
+ </>
+ )
+}
+
+export default ConnectionForm
diff --git a/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx b/src/components/Connection/ConnectionLaunch.tsx
similarity index 90%
rename from src/components/ContentComponents/Konnector/KonnectorLaunch.tsx
rename to src/components/Connection/ConnectionLaunch.tsx
index e54fc2e6c83adb7b36f0bc640d10bc22d1d5b634..7f0ff3b7f64cf848dea702f094daf9251e90ae82 100644
--- a/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx
+++ b/src/components/Connection/ConnectionLaunch.tsx
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'
-import { withClient, Client } from 'cozy-client'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
import { Konnector, Trigger } from 'models'
import { isKonnectorRunning } from 'cozy-harvest-lib/dist/helpers/triggers'
@@ -27,23 +27,21 @@ const loadingOptions = {
},
}
-interface KonnectorLaunchProps {
+interface ConnectionLaunchProps {
trigger: Trigger
konnector: Konnector
type: string
- handleKonnectorLaunch: Function
- client: Client
- t: Function
+ handleConnectionLaunch: Function
}
-const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
+const ConnectionLaunch: React.FC<ConnectionLaunchProps> = ({
trigger,
konnector,
type,
- handleKonnectorLaunch,
- client,
- t,
-}: KonnectorLaunchProps) => {
+ handleConnectionLaunch,
+}: ConnectionLaunchProps) => {
+ const { t } = useI18n()
+ const client = useClient()
const [state, setState] = useState<string | null>(null)
const [openModal, setOpenModal] = useState(false)
const callbackResponse = (_state: string) => {
@@ -51,7 +49,7 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
}
const handleCloseClick = () => {
- handleKonnectorLaunch()
+ handleConnectionLaunch()
setOpenModal(false)
}
@@ -128,4 +126,4 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
)
}
-export default translate()(withClient(KonnectorLaunch))
+export default ConnectionLaunch
diff --git a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx b/src/components/Connection/ConnectionLoginForm.tsx
similarity index 95%
rename from src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
rename to src/components/Connection/ConnectionLoginForm.tsx
index c2777f9d365f88c4fc54c6ffbbecf1aebae7da85..a93b11c747921eac78230a6fe6a50c1a2fe7647c 100644
--- a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
+++ b/src/components/Connection/ConnectionLoginForm.tsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'
-import { withClient, Client } from 'cozy-client'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
import { Account, AccountAuthData, Trigger, FluidConfig } from 'models'
import AccountService from 'services/account.service'
@@ -15,23 +15,21 @@ import iconEGLLogo from 'assets/icons/visu/egl-logo.svg'
import StyledAuthButton from 'components/CommonKit/Button/StyledAuthButton'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-interface KonnectorLoginFormProps {
+interface ConnectionLoginFormProps {
fluidConfig: FluidConfig
onSuccess: Function
account: Account
trigger: Trigger
- client: Client
- t: Function
}
-const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
+const ConnectionLoginForm: React.FC<ConnectionLoginFormProps> = ({
fluidConfig,
onSuccess,
account,
trigger,
- client,
- t,
-}: KonnectorLoginFormProps) => {
+}: ConnectionLoginFormProps) => {
+ const { t } = useI18n()
+ const client = useClient()
const konnectorSlug: string = fluidConfig.konnectorConfig.slug
const konnectorType: string = fluidConfig.konnectorConfig.type
const siteLink: string = fluidConfig.siteLink
@@ -90,11 +88,11 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
setError(t('KONNECTORCONFIG.ERROR_ACCOUNT_CREATION'))
return null
}
+ setLoading(false)
onSuccess(_account, _trigger)
} catch (err) {
- console.log(err)
- } finally {
setLoading(false)
+ console.log(err)
}
}
@@ -251,4 +249,4 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
)
}
-export default translate()(withClient(KonnectorLoginForm))
+export default ConnectionLoginForm
diff --git a/src/components/ContentComponents/Konnector/KonnectorNotFound.tsx b/src/components/Connection/ConnectionNotFound.tsx
similarity index 77%
rename from src/components/ContentComponents/Konnector/KonnectorNotFound.tsx
rename to src/components/Connection/ConnectionNotFound.tsx
index cfe6ea899b5ee56d2abe54f461583039fd254c1c..bf8fa68d3afe163c7de190333a3297fe31be19c1 100644
--- a/src/components/ContentComponents/Konnector/KonnectorNotFound.tsx
+++ b/src/components/Connection/ConnectionNotFound.tsx
@@ -1,17 +1,17 @@
import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import StyledButton from 'components/CommonKit/Button/StyledButton'
-interface KonnectorNotFoundProps {
+interface ConnectionNotFoundProps {
konnectorSlug: string
- t: Function
}
-const KonnectorNotFound: React.FC<KonnectorNotFoundProps> = ({
+const ConnectionNotFound: React.FC<ConnectionNotFoundProps> = ({
konnectorSlug,
- t,
-}: KonnectorNotFoundProps) => {
+}: ConnectionNotFoundProps) => {
+ const { t } = useI18n()
+
const openKonnectorURL = () => {
// TODO - Use getstoreinstallationurl from client - https://docs.cozy.io/en/cozy-client/api/cozy-client/#getstoreinstallationurl-string
const hostname = window.location.origin.replace('ecolyo', 'store')
@@ -34,4 +34,4 @@ const KonnectorNotFound: React.FC<KonnectorNotFoundProps> = ({
)
}
-export default translate()(KonnectorNotFound)
+export default ConnectionNotFound
diff --git a/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx b/src/components/Connection/ConnectionOAuthForm.tsx
similarity index 82%
rename from src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx
rename to src/components/Connection/ConnectionOAuthForm.tsx
index 9294521020794401ec0141226ab33429385633d8..7e15a20d0df2a3522ef7c2bc8a1739cb53bd551c 100644
--- a/src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx
+++ b/src/components/Connection/ConnectionOAuthForm.tsx
@@ -1,32 +1,30 @@
import React from 'react'
-import { Client, withClient } from 'cozy-client'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
import { Konnector, Trigger, FluidConfig } from 'models'
-import OAuthForm from 'components/ContentComponents/OAuth/OAuthForm'
+import OAuthForm from 'components/Connection/OAuthForm'
import StyledButton from 'components/CommonKit/Button/StyledButton'
import AccountService from 'services/account.service'
import TriggerService from 'services/triggers.service'
-interface KonnectorOAuthFormProps {
+interface ConnectionOAuthFormProps {
fluidConfig: FluidConfig
konnector: Konnector
siteLink: string
onSuccess: Function
loading: boolean
- client: Client
- t: Function
}
-const KonnectorOAuthForm: React.FC<KonnectorOAuthFormProps> = ({
+const ConnectionOAuthForm: React.FC<ConnectionOAuthFormProps> = ({
fluidConfig,
konnector,
siteLink,
onSuccess,
loading,
- client,
- t,
-}: KonnectorOAuthFormProps) => {
+}: ConnectionOAuthFormProps) => {
+ const { t } = useI18n()
+ const client = useClient()
const konnectorSlug: string = fluidConfig.konnectorConfig.slug
const handleSuccess = async (accountId: string) => {
@@ -73,4 +71,4 @@ const KonnectorOAuthForm: React.FC<KonnectorOAuthFormProps> = ({
)
}
-export default translate()(withClient(KonnectorOAuthForm))
+export default ConnectionOAuthForm
diff --git a/src/components/ContentComponents/Konnector/KonnectorResult.tsx b/src/components/Connection/ConnectionResult.tsx
similarity index 65%
rename from src/components/ContentComponents/Konnector/KonnectorResult.tsx
rename to src/components/Connection/ConnectionResult.tsx
index 3a6ecac0406e4c30208c8662572f58f936191748..33df1db8bbe36962237fbc561f50581d79a23db8 100644
--- a/src/components/ContentComponents/Konnector/KonnectorResult.tsx
+++ b/src/components/Connection/ConnectionResult.tsx
@@ -1,46 +1,81 @@
-import React, { useState, useContext, useEffect } from 'react'
-import { withClient, Client } from 'cozy-client'
-import { translate } from 'cozy-ui/react/I18n'
-
-import { AppContext } from 'components/Contexts/AppContextProvider'
-
-import StyledButton from 'components/CommonKit/Button/StyledButton'
-import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
+import React, { useState, useEffect, useCallback } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { isKonnectorRunning } from 'cozy-harvest-lib/dist/helpers/triggers'
import { Account, Konnector, Trigger } from 'models'
+import { userProfileState } from 'atoms/userProfile.state'
+import { fluidStatusState, fluidTypeState } from 'atoms/fluidState.state'
+import { challengeNotificationState } from 'atoms/notification.state'
+import ChallengeService from 'services/challenge.service'
import TriggerService from 'services/triggers.service'
import AccountService from 'services/account.service'
-import warningWhite from 'assets/icons/ico/warning-white.svg'
+import FluidService from 'services/fluid.service'
+import UserProfileService from 'services/userProfile.service'
-import { isKonnectorRunning } from 'cozy-harvest-lib/dist/helpers/triggers'
import ConnectionFlow, {
ERROR_EVENT,
LOGIN_SUCCESS_EVENT,
SUCCESS_EVENT,
} from 'cozy-harvest-lib/dist/models/ConnectionFlow'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import warningWhite from 'assets/icons/ico/warning-white.svg'
+import StyledButton from 'components/CommonKit/Button/StyledButton'
+import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
-interface KonnectorResultProps {
+interface ConnectionResultProps {
account: Account
konnector: Konnector
handleJobState: Function
- client: Client
- t: Function
}
-const KonnectorResult: React.FC<KonnectorResultProps> = ({
+const ConnectionResult: React.FC<ConnectionResultProps> = ({
account,
konnector,
handleJobState,
- client,
- t,
-}: KonnectorResultProps) => {
+}: ConnectionResultProps) => {
+ const { t } = useI18n()
+ const client = useClient()
const [trigger, setTrigger] = useState<Trigger | null>(null)
const [updating, setUpdating] = useState<boolean>(false)
const [lastExecutionDate, setLastExecutionDate] = useState<string>('-')
const [status, setStatus] = useState<string>('')
- const context = useContext(AppContext)
+ const setFluidStatusState = useSetRecoilState(fluidStatusState)
+ const fluidTypes = useRecoilValue(fluidTypeState)
+ const setChallengeNotificationState = useSetRecoilState(
+ challengeNotificationState
+ )
+ const setUserProfile = useSetRecoilState(userProfileState)
+
+ const refreshFluidState = async () => {
+ const fluidService = new FluidService(client)
+ const fluidStatus = await fluidService.getFluidStatus()
+ if (fluidStatus) {
+ setFluidStatusState(fluidStatus)
+ const challengeService = new ChallengeService(client)
+ const achievement = await challengeService.checkAchievement('CHA00000001')
+ if (achievement) {
+ const notificationChallenge = await challengeService.isCurrentChallengeOver(
+ achievement,
+ fluidTypes
+ )
+ if (notificationChallenge) {
+ setChallengeNotificationState(notificationChallenge)
+ }
+ }
+ }
+ }
+
+ const updateProfileHaveSeenOldFluidModal = useCallback(async () => {
+ const userProfileService = new UserProfileService(client)
+ await userProfileService
+ .updateUserProfile({ haveSeenOldFluidModal: false })
+ .then(updatedUserProfile => {
+ updatedUserProfile && setUserProfile(updatedUserProfile)
+ })
+ }, [setUserProfile])
const updateState = async (_trigger: Trigger) => {
const triggerService = new TriggerService(client)
@@ -56,8 +91,7 @@ const KonnectorResult: React.FC<KonnectorResultProps> = ({
}
setStatus(triggerState.status)
handleJobState(triggerState.status)
- await context.refreshFluidTypes()
- await context.refreshFluidStatus()
+ await refreshFluidState()
}
}
@@ -73,10 +107,11 @@ const KonnectorResult: React.FC<KonnectorResultProps> = ({
setStatus('')
setLastExecutionDate('-')
handleJobState('')
-
+ await updateProfileHaveSeenOldFluidModal()
if (trigger && !isKonnectorRunning(trigger)) {
const connectionFlow = new ConnectionFlow(client, trigger, konnector)
await connectionFlow.launch()
+
connectionFlow.jobWatcher.on(ERROR_EVENT, () => {
callbackResponse()
})
@@ -95,8 +130,8 @@ const KonnectorResult: React.FC<KonnectorResultProps> = ({
if (account) {
const accountService = new AccountService(client)
await accountService.deleteAccount(account)
- await context.refreshFluidTypes()
- await context.refreshFluidStatus()
+ await updateProfileHaveSeenOldFluidModal()
+ await refreshFluidState()
}
} catch (error) {
setUpdating(false)
@@ -170,4 +205,4 @@ const KonnectorResult: React.FC<KonnectorResultProps> = ({
)
}
-export default translate()(withClient(KonnectorResult))
+export default ConnectionResult
diff --git a/src/components/ContentComponents/OAuth/OAuthForm.tsx b/src/components/Connection/OAuthForm.tsx
similarity index 88%
rename from src/components/ContentComponents/OAuth/OAuthForm.tsx
rename to src/components/Connection/OAuthForm.tsx
index aae44d9b810140423e3b4e6af23d42e01156b7da..cded6d9149120ab2396ac8ec8b6aafb74b25a946 100644
--- a/src/components/ContentComponents/OAuth/OAuthForm.tsx
+++ b/src/components/Connection/OAuthForm.tsx
@@ -1,8 +1,8 @@
import React, { useState } from 'react'
-import { Client, withClient } from 'cozy-client'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
-import { Konnector } from 'doctypes'
+import { Konnector } from 'models'
import { OAuthWindow } from 'cozy-harvest-lib/dist/components/OAuthWindow'
import iconEnedisLogo from 'assets/icons/visu/enedis-logo.svg'
@@ -14,19 +14,17 @@ interface OAuthFormProps {
konnector: Konnector
onSuccess: Function
loginFailed: boolean
- client: Client
- t: Function
}
const OAuthForm: React.FC<OAuthFormProps> = ({
konnector,
onSuccess,
- client,
- t,
}: OAuthFormProps) => {
const IDLE = 'idle'
const WAITING = 'waiting'
+ const { t } = useI18n()
+ const client = useClient()
const [status, setStatus] = useState<string>(IDLE)
function endOAuth() {
@@ -73,6 +71,7 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
<OAuthWindow
client={client}
konnector={konnector}
+ redirectSlug={client.appMetadata.slug}
onSuccess={handleAccountId}
onCancel={handleOAuthCancel}
t={t}
@@ -82,4 +81,4 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
)
}
-export default translate()(withClient(OAuthForm))
+export default OAuthForm
diff --git a/src/components/ContentComponents/ConsumptionNavigator/ActivateHalfHourLoad.tsx b/src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx
similarity index 81%
rename from src/components/ContentComponents/ConsumptionNavigator/ActivateHalfHourLoad.tsx
rename to src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx
index 12fb02fcf7cfa9284ce6b003fa5d383225065e78..13f0577650b976de5306bad6fdc6b8a0d5c6cc91 100644
--- a/src/components/ContentComponents/ConsumptionNavigator/ActivateHalfHourLoad.tsx
+++ b/src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx
@@ -1,14 +1,14 @@
import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
+
+import ConfigService from 'services/fluidConfig.service'
+
import StyledAuthButton from 'components/CommonKit/Button/StyledAuthButton'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import iconEnedisLogo from 'assets/icons/visu/enedis-logo.svg'
-import ConfigService from 'services/fluidConfig.service'
-interface ActivateHalfHourLoadProps {
- t: Function // translation service
-}
-const ActivateHalfHourLoad = ({ t }: ActivateHalfHourLoadProps) => {
+const ActivateHalfHourLoad = () => {
+ const { t } = useI18n()
const fluidConfig = new ConfigService().getFluidConfig()
return (
<div className="cta-box">
@@ -34,4 +34,4 @@ const ActivateHalfHourLoad = ({ t }: ActivateHalfHourLoadProps) => {
)
}
-export default translate()(ActivateHalfHourLoad)
+export default ActivateHalfHourLoad
diff --git a/src/components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator.tsx b/src/components/ConsumptionNavigator/ConsumptionNavigator.tsx
similarity index 95%
rename from src/components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator.tsx
rename to src/components/ConsumptionNavigator/ConsumptionNavigator.tsx
index f246be2a107a59338b7cd4e81d5b6390ef392859..78af1a14a87e9a34a761e223c019883e0071fc62 100644
--- a/src/components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator.tsx
+++ b/src/components/ConsumptionNavigator/ConsumptionNavigator.tsx
@@ -1,17 +1,17 @@
import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
-import Tabs from 'components/CommonKit/Tabs/StyledTabs'
-import Tab from 'components/CommonKit/Tabs/StyledTab'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
+import Tabs from 'components/CommonKit/Tabs/StyledTabs'
+import Tab from 'components/CommonKit/Tabs/StyledTab'
+
interface ConsumptionNavigatorProps {
fluidTypes: FluidType[]
multiFluid: boolean
timeStep: TimeStep
handleClickTimeStep(timeStep: TimeStep): void
- t: Function
}
const ConsumptionNavigator: React.FC<ConsumptionNavigatorProps> = ({
@@ -19,8 +19,8 @@ const ConsumptionNavigator: React.FC<ConsumptionNavigatorProps> = ({
multiFluid,
timeStep,
handleClickTimeStep,
- t,
}: ConsumptionNavigatorProps) => {
+ const { t } = useI18n()
const fluidStyle = multiFluid
? 'MULTIFLUID'
: fluidTypes.length === 0
@@ -92,4 +92,4 @@ const ConsumptionNavigator: React.FC<ConsumptionNavigatorProps> = ({
)
}
-export default translate()(ConsumptionNavigator)
+export default ConsumptionNavigator
diff --git a/src/components/ContentComponents/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
similarity index 80%
rename from src/components/ContentComponents/ConsumptionVisualizer/ConsumptionVisualizer.tsx
rename to src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
index f7635321d9a9e8c373636c1e583384e991f41d31..b395e25695006f9331c3def39da28729355d616b 100644
--- a/src/components/ContentComponents/ConsumptionVisualizer/ConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { FluidType } from 'enum/fluid.enum'
import { DateTime } from 'luxon'
@@ -7,11 +7,11 @@ import { TimeStep } from 'enum/timeStep.enum'
import { Dataload } from 'models'
import DateChartService from 'services/dateChart.service'
-import DateConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/DateConsumptionVisualizer'
-import DataloadConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer'
-import DetailedConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/DetailedConsumptionVisualizer'
-import LastDataConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/LastDataConsumptionVisualizer'
-import ErrorDataConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/ErrorDataConsumptionVisualizer'
+import DateConsumptionVisualizer from 'components/ConsumptionVisualizer/DateConsumptionVisualizer'
+import DataloadConsumptionVisualizer from 'components/ConsumptionVisualizer/DataloadConsumptionVisualizer'
+import DetailedConsumptionVisualizer from 'components/ConsumptionVisualizer/DetailedConsumptionVisualizer'
+import LastDataConsumptionVisualizer from 'components/ConsumptionVisualizer/LastDataConsumptionVisualizer'
+import ErrorDataConsumptionVisualizer from 'components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer'
interface ConsumptionVisualizerProps {
fluidTypes: FluidType[]
@@ -49,7 +49,7 @@ const ConsumptionVisualizer = ({
handleClickDetails,
handleChangeIndex,
}: ConsumptionVisualizerProps) => {
- fluidTypes.sort()
+ const { t } = useI18n()
const dateChartService = new DateChartService()
return (
<div className="cv">
@@ -111,4 +111,4 @@ const ConsumptionVisualizer = ({
)
}
-export default translate()(ConsumptionVisualizer)
+export default ConsumptionVisualizer
diff --git a/src/components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
similarity index 97%
rename from src/components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
rename to src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 260ab8ba00f5986472634b5ab7f9db3d852eae08..8be307fa6c98daf94885c3150f3aeeebebb90ae5 100644
--- a/src/components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { NavLink } from 'react-router-dom'
import { DateTime } from 'luxon'
@@ -22,7 +22,6 @@ interface DataloadConsumptionVisualizerProps {
isLoaded: boolean
handleClickMove: (increment: number) => void
handleClickDetails: () => void
- t: Function // translation service
}
const DataloadConsumptionVisualizer = ({
fluidTypes,
@@ -32,8 +31,8 @@ const DataloadConsumptionVisualizer = ({
multiFluid,
lastDataDate,
isLoaded,
- t,
}: DataloadConsumptionVisualizerProps) => {
+ const { t } = useI18n()
const converterService = new ConverterService()
const [hasData, setHasData] = useState(false)
const [hasCompareData, setHasCompareData] = useState(false)
@@ -210,4 +209,4 @@ const DataloadConsumptionVisualizer = ({
)
}
-export default translate()(DataloadConsumptionVisualizer)
+export default DataloadConsumptionVisualizer
diff --git a/src/components/ContentComponents/ConsumptionVisualizer/DateConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DateConsumptionVisualizer.tsx
similarity index 93%
rename from src/components/ContentComponents/ConsumptionVisualizer/DateConsumptionVisualizer.tsx
rename to src/components/ConsumptionVisualizer/DateConsumptionVisualizer.tsx
index 0a793c13b4b6491d4b4d1e9d33598789dd5eff61..e6c4352f486816fc1add4ee52562b9ed031d8f09 100644
--- a/src/components/ContentComponents/ConsumptionVisualizer/DateConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DateConsumptionVisualizer.tsx
@@ -3,7 +3,7 @@ import { DateTime } from 'luxon'
import { TimeStep } from 'enum/timeStep.enum'
-import DateFormatConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/DateFormatConsumptionVisualizer'
+import DateFormatConsumptionVisualizer from 'components/ConsumptionVisualizer/DateFormatConsumptionVisualizer'
import StyledIconbutton from 'components/CommonKit/IconButton/StyledIconButton'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RigthArrowIcon from 'assets/icons/ico/right-arrow.svg'
diff --git a/src/components/ContentComponents/ConsumptionVisualizer/DateFormatConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DateFormatConsumptionVisualizer.tsx
similarity index 100%
rename from src/components/ContentComponents/ConsumptionVisualizer/DateFormatConsumptionVisualizer.tsx
rename to src/components/ConsumptionVisualizer/DateFormatConsumptionVisualizer.tsx
diff --git a/src/components/ContentComponents/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx
similarity index 90%
rename from src/components/ContentComponents/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx
rename to src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx
index 4eb83b0ea3008888153f4933b7cd9a84bedb4e4d..aa15c3f199af6e663dd7f5f6063fbd357aa56515 100644
--- a/src/components/ContentComponents/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
@@ -8,15 +8,14 @@ interface DetailedConsumptionVisualizerProps {
timeStep: TimeStep
multiFluid: boolean
handleClickDetails: () => void
- t: Function // translation service
}
const DetailedConsumptionVisualizer = ({
fluidTypes,
timeStep,
multiFluid,
handleClickDetails,
- t,
}: DetailedConsumptionVisualizerProps) => {
+ const { t } = useI18n()
const isDetailDisplayed = () => {
if (multiFluid) {
return false
@@ -60,4 +59,4 @@ const DetailedConsumptionVisualizer = ({
)
}
-export default translate()(DetailedConsumptionVisualizer)
+export default DetailedConsumptionVisualizer
diff --git a/src/components/ContentComponents/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
similarity index 90%
rename from src/components/ContentComponents/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
rename to src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
index d3714333ff530ebf5e5543183c5e5aa4a61abfc0..c763ab1beb662b35609baa794b15784be483d883 100644
--- a/src/components/ContentComponents/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
@@ -1,12 +1,11 @@
import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { DateTime, Interval } from 'luxon'
import warning from 'assets/icons/ico/warning.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
interface ErrorDataConsumptionVisualizerProps {
lastDateWithAllData: DateTime
- t: Function // translation service
handleChangeIndex: (index: number) => void
indexDisplayed: number
setSelectedDate: Function
@@ -15,12 +14,12 @@ interface ErrorDataConsumptionVisualizerProps {
}
const ErrorDataConsumptionVisualizer = ({
lastDateWithAllData,
- t,
date,
indexDisplayed,
setIndexDisplayed,
setSelectedDate,
}: ErrorDataConsumptionVisualizerProps) => {
+ const { t } = useI18n()
const setDateAndMoveToindex = () => {
let indexToMove = 0
if (date < lastDateWithAllData) {
@@ -49,4 +48,4 @@ const ErrorDataConsumptionVisualizer = ({
)
}
-export default translate()(ErrorDataConsumptionVisualizer)
+export default ErrorDataConsumptionVisualizer
diff --git a/src/components/ContentComponents/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
similarity index 79%
rename from src/components/ContentComponents/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
rename to src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
index e295b1fbd847a99a28a840a62bbd15db6d435365..c11f1f1ad942f5291637b671e461eae7d3273e49 100644
--- a/src/components/ContentComponents/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
@@ -8,12 +8,11 @@ interface LastDataConsumptionVisualizerProps {
timeStep: TimeStep
multiFluid: boolean
handleChangeIndex: (index: number) => void
- t: Function // translation service
}
const LastDataConsumptionVisualizer = ({
handleChangeIndex,
- t,
}: LastDataConsumptionVisualizerProps) => {
+ const { t } = useI18n()
return (
<div>
<button className="cv-button" onClick={() => handleChangeIndex(0)}>
@@ -23,4 +22,4 @@ const LastDataConsumptionVisualizer = ({
)
}
-export default translate()(LastDataConsumptionVisualizer)
+export default LastDataConsumptionVisualizer
diff --git a/src/components/ContainerComponents/AgregatedStats/AgregatedStats.jsx b/src/components/ContainerComponents/AgregatedStats/AgregatedStats.jsx
deleted file mode 100644
index a81a3d690ad801964c1a19a6f04e6ab6403206a8..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/AgregatedStats/AgregatedStats.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import ConsumptionAgregator from '../../ContentComponents/ConsumptionAgregator/ConsumptionAgregator'
-
-const AgregatedStats = () => {
- // add <Graph><Graph>
- return (
- <React.Fragment>
- <ConsumptionAgregator></ConsumptionAgregator>
- </React.Fragment>
- )
-}
-
-export default AgregatedStats
diff --git a/src/components/ContainerComponents/BadgesContainer/BadgesContainer.tsx b/src/components/ContainerComponents/BadgesContainer/BadgesContainer.tsx
deleted file mode 100644
index c709b4dac4c0a209d8d79cd04256857dc4657996..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/BadgesContainer/BadgesContainer.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import ChallengesList from 'components/ContentComponents/ChallengeList/ChallengesList'
-
-const BadgesContainer: React.FC = () => {
- return <ChallengesList />
-}
-
-export default BadgesContainer
diff --git a/src/components/ContainerComponents/ChallengeCardContainer/ChallengeCardContainer.tsx b/src/components/ContainerComponents/ChallengeCardContainer/ChallengeCardContainer.tsx
deleted file mode 100644
index caf56ad846cdc99f3e8cbde0d746e74ea2d9710d..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/ChallengeCardContainer/ChallengeCardContainer.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { useContext } from 'react'
-import { Client } from 'cozy-client'
-import { translate } from 'cozy-ui/react/I18n'
-import ChallengeCard from 'components/ContentComponents/ChallengeCard/ChallengeCard'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-
-interface ChallengeCardContainerProps {
- t: Function
- client: Client
-}
-
-const ChallengeCardContainer: React.FC<ChallengeCardContainerProps> = ({
- t,
-}: ChallengeCardContainerProps) => {
- const { currentChallenge } = useContext(AppContext)
-
- return (
- <>
- <div className="ccc-root">
- {currentChallenge && currentChallenge.challengeType && (
- <div className="ccc-content">
- <div className="ccc-header text-14-normal-uppercase">
- {t('COMMON.CHALLENGE_CARD_LABEL')}
- </div>
- <ChallengeCard userChallenge={currentChallenge} />
- </div>
- )}
- </div>
- </>
- )
-}
-
-export default translate()(ChallengeCardContainer)
diff --git a/src/components/ContainerComponents/Content/Content.tsx b/src/components/ContainerComponents/Content/Content.tsx
deleted file mode 100644
index 717da9b382fccb6c7ba2c62c19897176515a9ea0..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/Content/Content.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { useContext } from 'react'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-import { ScreenType } from 'enum/screen.enum'
-import SplashContainer from '../SplashContainer/SplashContainer'
-import WelcomeModalContainer from '../WelcomeModalContainer/WelcomeModalContainer'
-
-interface ContentProps {
- children?: React.ReactNode
- height?: number
- background?: string
-}
-
-const Content: React.FC<ContentProps> = ({
- children,
- height = 0,
- background = 'inherit',
-}: ContentProps) => {
- const {
- isContextLoaded,
- screenType,
- userProfile,
- setWelcomeModalViewed,
- } = useContext(AppContext)
- const cozyBarHeight = 48
- const cozyNavHeight = 56
- return (
- <>
- {!isContextLoaded ? (
- <SplashContainer />
- ) : userProfile && !userProfile.haveSeenWelcomeModal ? (
- <WelcomeModalContainer handleClose={setWelcomeModalViewed} />
- ) : (
- <div
- className="content-view"
- style={{
- marginTop: height,
- paddingBottom: 0,
- minHeight:
- screenType !== ScreenType.DESKTOP
- ? `calc(100vh - ${height}px - ${cozyBarHeight}px - ${cozyNavHeight}px)`
- : `unset`,
- background: background,
- }}
- >
- {children}
- </div>
- )}
- </>
- )
-}
-
-export default Content
diff --git a/src/components/ContainerComponents/EcogestureContainer/EcogesturesContainer.tsx b/src/components/ContainerComponents/EcogestureContainer/EcogesturesContainer.tsx
deleted file mode 100644
index 8b9f6b9ca0b40ec92db12a6db163fd95ceb56665..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/EcogestureContainer/EcogesturesContainer.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import EcogesturesList from 'components/ContentComponents/EcogestureList/EcogestureList'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-
-const EcogesturesContainer: React.FC = () => {
- useEffect(() => {
- window.scrollTo(0, 0)
- }, [])
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const defineHeaderHeight = (height: number) => {
- setHeaderHeight(height)
- }
- return (
- <>
- <CozyBar titleKey={'COMMON.APP_ECO_GESTURE_TITLE'} />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'COMMON.APP_ECO_GESTURE_TITLE'}
- ></Header>
- <Content height={headerHeight}>
- <EcogesturesList />
- </Content>
- </>
- )
-}
-
-export default EcogesturesContainer
diff --git a/src/components/ContainerComponents/FeedbackContainer/FeedbackContainer.tsx b/src/components/ContainerComponents/FeedbackContainer/FeedbackContainer.tsx
deleted file mode 100644
index cbe81713b8cd3328cc8585c6ce63abd08dd0e620..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/FeedbackContainer/FeedbackContainer.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { useContext } from 'react'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-import FeedbackModal from 'components/ContentComponents/Feedback/FeedbackModal'
-
-const FeedbackContainer: React.FC = () => {
- const { feedbackIsOpened, setFeedbackOpened } = useContext(AppContext)
-
- const handleCloseClick = () => {
- setFeedbackOpened(false)
- }
-
- return (
- <FeedbackModal
- opened={feedbackIsOpened}
- handleCloseClick={handleCloseClick}
- />
- )
-}
-
-export default FeedbackContainer
diff --git a/src/components/ContainerComponents/IndicatorsContainer/IndicatorContainerSwitcher.tsx b/src/components/ContainerComponents/IndicatorsContainer/IndicatorContainerSwitcher.tsx
deleted file mode 100644
index 3dbe4b0a97d2996563f29f166e1e9091545bb316..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/IndicatorsContainer/IndicatorContainerSwitcher.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { useContext } from 'react'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-import { TimeStep } from 'enum/timeStep.enum'
-import { TimePeriod, PerformanceIndicator } from 'models'
-import ConfigService from 'services/fluidConfig.service'
-import { convertDateByTimeStep } from 'utils/date'
-import FluidPerformanceIndicator from 'components/ContentComponents/PerformanceIndicator/FluidPerformanceIndicator'
-import KonnectorViewer from 'components/ContentComponents/KonnectorViewer/KonnectorViewer'
-
-interface IndicatorContainerSwitcherProps {
- performanceIndicators: PerformanceIndicator[]
- timeStep: TimeStep
- comparisonTimePeriod: TimePeriod | null
-}
-
-const IndicatorContainerSwitcher: React.FC<IndicatorContainerSwitcherProps> = ({
- performanceIndicators,
- timeStep,
- comparisonTimePeriod,
-}: IndicatorContainerSwitcherProps) => {
- const appContext = useContext(AppContext)
- const allConfiguredFluidTypes = appContext.fluidTypes
- const fluidConfig = new ConfigService().getFluidConfig()
-
- return (
- <div>
- {fluidConfig.map((fluid, index) => {
- return allConfiguredFluidTypes.includes(fluid.fluidTypeId) ? (
- <FluidPerformanceIndicator
- key={index}
- fluidType={fluid.fluidTypeId}
- performanceIndicator={performanceIndicators[fluid.fluidTypeId]}
- timePeriodText={convertDateByTimeStep(
- comparisonTimePeriod,
- timeStep
- )}
- />
- ) : null
- })}
- {fluidConfig.map((fluid, index) => {
- return allConfiguredFluidTypes.includes(fluid.fluidTypeId) ? null : (
- <KonnectorViewer key={index} fluidConfig={fluid} />
- )
- })}
- </div>
- )
-}
-
-export default IndicatorContainerSwitcher
diff --git a/src/components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer.tsx b/src/components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer.tsx
deleted file mode 100644
index d57241291df8ca8f24b87febab7ac741a314f5f8..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
-import ConfigService from 'services/fluidConfig.service'
-import { FluidConfig } from 'models'
-import KonnectorViewerList from 'components/ContentComponents/KonnectorViewer/KonnectorViewerList'
-
-interface KonnectorViewerContainerProps {
- isParam: boolean
- t: Function
-}
-
-const KonnectorViewerContainer: React.FC<KonnectorViewerContainerProps> = ({
- isParam = false,
- t,
-}: KonnectorViewerContainerProps) => {
- const fluidConfigs: FluidConfig[] = new ConfigService().getFluidConfig()
- return (
- <div className="kv-root">
- <div className="kv-content">
- <div className="kv-header text-14-normal-uppercase">
- {t('KONNECTORCONFIG.TITLE_CONNECTION')}
- </div>
- <KonnectorViewerList isParam={isParam} fluidConfigs={fluidConfigs} />
- </div>
- </div>
- )
-}
-
-export default translate()(KonnectorViewerContainer)
diff --git a/src/components/ContainerComponents/ScrollToTop/ScrollToTop.tsx b/src/components/ContainerComponents/ScrollToTop/ScrollToTop.tsx
deleted file mode 100644
index 210526ff663dcc4d9a56c8c8e926f9f00cecc835..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/ScrollToTop/ScrollToTop.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { useEffect, Fragment } from 'react'
-import { withRouter } from 'react-router-dom'
-import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
-
-interface ScrollToTopProps {
- children?: React.ReactNode
-}
-
-function ScrollToTop({ children }: ScrollToTopProps) {
- useEffect(() => {
- const unlisten = history.listen(() => {
- window.scrollTo(0, 0)
- })
- return () => {
- unlisten()
- }
- }, [])
-
- return <Fragment>{children}</Fragment>
-}
-
-export default withRouter(ScrollToTop)
diff --git a/src/components/ContainerComponents/SplashContainer/SplashContainer.tsx b/src/components/ContainerComponents/SplashContainer/SplashContainer.tsx
deleted file mode 100644
index 348628f7dbace3fc0008d29c7d7e941a4c455302..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/SplashContainer/SplashContainer.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { useContext } from 'react'
-import Lottie from 'react-lottie'
-import { translate } from 'cozy-ui/react/I18n'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-import StyledButton from 'components/CommonKit/Button/StyledButton'
-import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
-import logoTiga from 'assets/png/logo-TIGA.png'
-import * as loadingData from 'assets/anims/splash.json'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-
-const loadingOptions = {
- loop: true,
- autoplay: true,
- animationData: loadingData,
- rendererSettings: {
- preserveAspectRatio: 'xMidYMid slice',
- },
-}
-
-interface SplashContainerProps {
- t: Function
-}
-
-const SplashContainer: React.FC<SplashContainerProps> = ({
- t,
-}: SplashContainerProps) => {
- const appContext = useContext(AppContext)
-
- return (
- <div className="splash-root">
- <div className="splash-content">
- <Lottie
- options={loadingOptions}
- height={300}
- width={300}
- isStopped={appContext.isError}
- />
- <div className="splash-logos-container">
- <StyledIcon
- className="logo-grand-lyon"
- icon={logoGrandLyon}
- size={100}
- />
- <img className="logo-tiga" src={logoTiga} />
- </div>
- </div>
- <div className="splash-footer">
- {appContext.isError && (
- <>
- <div className="splash-footer-error-text text-16-normal">
- {t('LOADING.ERROR_LOADING')}
- </div>
- <StyledButton
- className="splash-footer-button"
- onClick={() => window.location.reload()}
- >
- {t('LOADING.RELOAD')}
- </StyledButton>
- </>
- )}
- </div>
- </div>
- )
-}
-
-export default translate()(SplashContainer)
diff --git a/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx
deleted file mode 100644
index 24065c10015ec2b5dffba338aa812194c2f1c5e4..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { useState, useContext, useEffect } from 'react'
-
-import { TimeStep } from 'enum/timeStep.enum'
-
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-import FluidContainer from 'components/ContainerComponents/FluidChartContainer/FluidChartContainer'
-import ConsumptionNavigator from 'components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-import MultliFluidIndicatorsContainer from 'components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer'
-import ChallengeCardContainer from 'components/ContainerComponents/ChallengeCardContainer/ChallengeCardContainer'
-import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
-import OldFluidDataModal from 'components/ContentComponents/OldFluidDataModal/OldFluidDataModal'
-
-const HomeViewContainer: React.FC = () => {
- const {
- fluidTypes,
- fluidStatus,
- previousTimeStep,
- setPreviousTimeStep,
- } = useContext(AppContext)
- const [timeStep, setTimeStep] = useState<TimeStep>(
- previousTimeStep && previousTimeStep !== TimeStep.HALF_AN_HOUR
- ? previousTimeStep
- : TimeStep.DAY
- )
- const [resetRefenceDate, setResetReferenceDate] = useState<boolean>(false)
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const [isChartLoading, setChartLoading] = useState<boolean>(true)
- const [isIndicatorsLoading, setIndicatorsLoading] = useState<boolean>(true)
- const [openOldFluidDataModal, setopenOldFluidDataModal] = useState(false)
-
- const setChartLoaded = () => {
- setChartLoading(false)
- }
-
- const setIndicatorsLoaded = () => {
- setIndicatorsLoading(false)
- }
-
- const handleClickTimeStepForNavigation = (_timeStep: TimeStep) => {
- setResetReferenceDate(true)
- setTimeStep(_timeStep)
- setPreviousTimeStep(_timeStep)
- }
-
- const handleClickTimeStepForFluidContainer = (_timeStep: TimeStep) => {
- setResetReferenceDate(false)
- setTimeStep(_timeStep)
- }
-
- const defineHeaderHeight = (height: number) => {
- setHeaderHeight(height)
- }
- const checkFluidDataPeriod = () => {
- for (const fluid of fluidStatus) {
- let diffInDays = 0
- if (fluid && fluid.lastDataDate)
- diffInDays = Math.round(
- fluid.lastDataDate.diffNow('days').toObject().days
- )
- if (diffInDays < -5) return setopenOldFluidDataModal(true)
- }
- }
-
- const handleCloseClick = () => {
- setopenOldFluidDataModal(false)
- }
-
- useEffect(() => {
- checkFluidDataPeriod()
- }, [fluidStatus])
-
- return (
- <React.Fragment>
- <CozyBar />
- {fluidTypes && fluidTypes.length > 0 ? (
- <>
- <Header
- setHeaderHeight={defineHeaderHeight}
- textKey={'COMMON.APP_PRESENTATION'}
- >
- <ConsumptionNavigator
- fluidTypes={fluidTypes}
- multiFluid={true}
- timeStep={timeStep}
- handleClickTimeStep={handleClickTimeStepForNavigation}
- />
- </Header>
- <Content height={headerHeight}>
- {(isChartLoading || isIndicatorsLoading) && (
- <div className="content-view-loading">
- <StyledSpinner size="5em" />
- </div>
- )}
- <div
- className={`${
- isChartLoading || isIndicatorsLoading
- ? 'chart-indicator-none'
- : 'chart-indicator-block'
- }`}
- >
- <FluidContainer
- timeStep={timeStep}
- fluidTypes={fluidTypes}
- resetReferenceDate={resetRefenceDate}
- multiFluid={true}
- handleClickTimeStep={handleClickTimeStepForFluidContainer}
- setChartLoaded={setChartLoaded}
- />
- <MultliFluidIndicatorsContainer
- timeStep={timeStep}
- setIndicatorsLoaded={setIndicatorsLoaded}
- />
- <ChallengeCardContainer />
- </div>
- </Content>
- {fluidStatus && (
- <OldFluidDataModal
- fluidStatus={fluidStatus}
- opened={openOldFluidDataModal}
- handleCloseClick={handleCloseClick}
- ></OldFluidDataModal>
- )}
- </>
- ) : (
- <>
- <Header setHeaderHeight={defineHeaderHeight}></Header>
- <Content height={headerHeight}>
- <KonnectorViewerContainer></KonnectorViewerContainer>
- </Content>
- </>
- )}
- </React.Fragment>
- )
-}
-
-export default HomeViewContainer
diff --git a/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
deleted file mode 100644
index 70765d27b645b0f7f32019f55c1207800ef19384..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useState } from 'react'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-import FAQContainer from 'components/ContainerComponents/FAQContainer/FAQContainer'
-import LegalNoticeContainer from 'components/ContainerComponents/LegalNoticeContainer/LegalNoticeContainer'
-import Version from 'components/ContentComponents/Version/Version'
-import KonnectorViewerContainer from '../KonnectorViewerContainer/KonnectorViewerContainer'
-import Report from 'components/ContentComponents/Report/Report'
-import LogoTiga from 'assets/png/logo-TIGA.png'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
-
-const ParametersViewContainer: React.FC = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const defineHeaderHeight = (height: number) => {
- setHeaderHeight(height)
- }
- return (
- <>
- <CozyBar titleKey={'COMMON.APP_PARAMETERS_TITLE'} />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'COMMON.APP_PARAMETERS_TITLE'}
- ></Header>
- <Content height={headerHeight}>
- <KonnectorViewerContainer isParam={true} />
- <Report />
- <FAQContainer />
- <LegalNoticeContainer />
- <div className="parameters-logos">
- <StyledIcon
- className="logo-grand-lyon-parameters"
- icon={logoGrandLyon}
- size={100}
- />
- <img className="logo-tiga-parameters" src={LogoTiga}></img>
- </div>
- <Version />
- </Content>
- </>
- )
-}
-
-export default ParametersViewContainer
diff --git a/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx
deleted file mode 100644
index e6aceefc3b9ecf92703e81be59505f0084eb3382..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { useState } from 'react'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
-import Report from 'components/ContentComponents/Report/Report'
-
-const ProfileViewContainer: React.FC = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const defineHeaderHeight = (height: number) => {
- setHeaderHeight(height)
- }
- return (
- <>
- <CozyBar titleKey={'COMMON.APP_PARAMETERS_TITLE'} />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'COMMON.APP_PARAMETERS_TITLE'}
- ></Header>
- <Content height={headerHeight}>
- <Report />
- <KonnectorViewerContainer isParam={true} />
- </Content>
- </>
- )
-}
-
-export default ProfileViewContainer
diff --git a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
deleted file mode 100644
index 989be9fe4515129ec96441ba9c45310e363d3a5c..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React from 'react'
-import { Route, Switch, Redirect, HashRouter } from 'react-router-dom'
-import { createBrowserHistory } from 'history'
-import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
-import { Sprite as IconSprite } from 'cozy-ui/transpiled/react/Icon'
-import { FluidType } from 'enum/fluid.enum'
-
-import AppContextProvider from 'components/Contexts/AppContextProvider'
-import Navbar from 'components/ContentComponents/Navbar/Navbar'
-import ScrollToTop from 'components/ContainerComponents/ScrollToTop/ScrollToTop'
-import HomeViewContainer from 'components/ContainerComponents/ViewContainer/HomeViewContainer'
-import ChallengesViewContainer from 'components/ContainerComponents/ViewContainer/ChallengesViewContainer'
-import SingleFluidViewContainer from './SingleFluidViewContainer'
-import ParametersViewContainer from 'components/ContainerComponents/ViewContainer/ParametersViewContainer'
-import FAQViewContainer from 'components/ContainerComponents/ViewContainer/FAQViewContainer'
-import FinishedChallengeDetailsViewContainer from './FinishedChallengeDetailsViewContainer'
-import OngoingChallengeDetailsViewContainer from './OngoingChallengeDetailsViewContainer'
-import LockedChallengeDetailsViewContainer from './LockedChallengeDetailsViewContainer'
-import AvailableChallengeDetailsViewContainer from './AvailableChallengeDetailsViewContainer'
-import SplashContainer from 'components/ContainerComponents/SplashContainer/SplashContainer'
-import LegalNoticeViewContainer from './LegalNoticeViewContainer'
-import FeedbackContainer from 'components/ContainerComponents/FeedbackContainer/FeedbackContainer'
-import EcogesturesContainer from 'components/ContainerComponents/EcogestureContainer/EcogesturesContainer'
-import ProfileViewContainer from './ProfileViewContainer'
-
-export const history = createBrowserHistory()
-
-export const ViewContainer = () => {
- return (
- <HashRouter {...history}>
- <Layout>
- <AppContextProvider>
- <Navbar />
- <Main>
- <FeedbackContainer />
- <Content className="app-content">
- <ScrollToTop>
- <Switch>
- <Route
- path="/consumption"
- render={({ match: { url } }) => (
- <>
- <Route
- path={`${url}/electricité`}
- component={() => (
- <SingleFluidViewContainer
- fluidTypes={[FluidType.ELECTRICITY]}
- />
- )}
- />
- <Route
- path={`${url}/eau`}
- component={() => (
- <SingleFluidViewContainer
- fluidTypes={[FluidType.WATER]}
- />
- )}
- />
- <Route
- path={`${url}/gaz`}
- component={() => (
- <SingleFluidViewContainer
- fluidTypes={[FluidType.GAS]}
- />
- )}
- />
- <Route
- path={`${url}/`}
- component={HomeViewContainer}
- exact
- />
- </>
- )}
- />
- <Route
- path="/challenges"
- render={({ match: { url } }) => (
- <>
- <Route
- path={`${url}/locked`}
- component={LockedChallengeDetailsViewContainer}
- />
- <Route
- path={`${url}/available`}
- component={AvailableChallengeDetailsViewContainer}
- />
- <Route
- path={`${url}/ongoing`}
- component={OngoingChallengeDetailsViewContainer}
- />
- <Route
- path={`${url}/finished`}
- component={FinishedChallengeDetailsViewContainer}
- />
- <Route
- path={`${url}/`}
- component={ChallengesViewContainer}
- exact
- />
- </>
- )}
- />
- <Route
- path="/parameters"
- render={({ match: { url } }) => (
- <>
- <Route
- path={`${url}/FAQ`}
- component={FAQViewContainer}
- />
- <Route
- path={`${url}/legalnotice`}
- component={LegalNoticeViewContainer}
- />
- <Route
- path={`${url}/`}
- component={ParametersViewContainer}
- exact
- />
- </>
- )}
- />
- <Route path="/ecogestures" component={EcogesturesContainer} />
- <Route path="/profile" component={ProfileViewContainer} />
- <Route path="/splash" component={SplashContainer} />
- <Redirect from="/" to="/consumption" />
- <Redirect from="*" to="/consumption" />
- </Switch>
- </ScrollToTop>
- </Content>
- </Main>
- <IconSprite />
- </AppContextProvider>
- </Layout>
- </HashRouter>
- )
-}
-
-export default ViewContainer
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..093d783dd7db279b60f86060c5f71a9d839f872f
--- /dev/null
+++ b/src/components/Content/Content.tsx
@@ -0,0 +1,106 @@
+import React, { useCallback, useEffect } from 'react'
+import { useClient } from 'cozy-client'
+import { useRecoilState } from 'recoil'
+import { history } from 'components/App'
+
+import { ScreenType } from 'enum/screen.enum'
+import { ModalState, UserProfile } from 'models'
+import { userProfileState } from 'atoms/userProfile.state'
+import { screenTypeState } from 'atoms/screenType.state'
+import { modalState } from 'atoms/modal.state'
+import UserProfileService from 'services/userProfile.service'
+
+import WelcomeModal from 'components/Welcome/WelcomeModal'
+import FeedbackModal from 'components/Feedback/FeedbackModal'
+
+interface ContentProps {
+ children?: React.ReactNode
+ height?: number
+ background?: string
+}
+
+const Content: React.FC<ContentProps> = ({
+ children,
+ height = 0,
+ background = 'inherit',
+}: ContentProps) => {
+ const client = useClient()
+ const cozyBarHeight = 48
+ const cozyNavHeight = 56
+
+ const [screenType, setScreenType] = useRecoilState<ScreenType>(
+ screenTypeState
+ )
+ const [userProfile, setUserProfile] = useRecoilState<UserProfile>(
+ userProfileState
+ )
+ const [modal, setModalState] = useRecoilState<ModalState>(modalState)
+
+ const setWelcomeModalViewed = useCallback(async () => {
+ const userProfileService = new UserProfileService(client)
+ await userProfileService
+ .updateUserProfile({ haveSeenWelcomeModal: true })
+ .then(updatedUserProfile => {
+ updatedUserProfile && setUserProfile(updatedUserProfile)
+ })
+ }, [setUserProfile])
+
+ const handleFeedbackModalClose = () => {
+ setModalState((prev: ModalState) => ({ ...prev, feedbackModal: false }))
+ }
+
+ useEffect(() => {
+ const unlisten = history.listen(() => {
+ window.scrollTo(0, 0)
+ })
+ return () => {
+ unlisten()
+ }
+ }, [children])
+
+ useEffect(() => {
+ function handleResize() {
+ if (innerWidth <= 768) {
+ setScreenType(ScreenType.MOBILE)
+ } else if (innerWidth <= 1024) {
+ setScreenType(ScreenType.TABLET)
+ } else {
+ setScreenType(ScreenType.DESKTOP)
+ }
+ }
+ handleResize()
+ window.addEventListener('resize', handleResize)
+ return () => {
+ window.removeEventListener('resize', handleResize)
+ }
+ }, [])
+
+ return (
+ <>
+ <WelcomeModal
+ open={!userProfile.haveSeenWelcomeModal}
+ handleCloseClick={setWelcomeModalViewed}
+ />
+ <FeedbackModal
+ open={modal.feedbackModal}
+ handleCloseClick={handleFeedbackModalClose}
+ />
+ <div
+ className="content-view"
+ style={{
+ marginTop: height,
+ paddingBottom: 0,
+ minHeight:
+ screenType !== ScreenType.DESKTOP
+ ? `calc(100vh - ${height}px - ${cozyBarHeight}px - ${cozyNavHeight}px)`
+ : `unset`,
+ background: background,
+ }}
+ >
+ {children}
+ </div>
+ </>
+ )
+}
+
+export default Content
diff --git a/src/components/ContentComponents/ChallengeModal/StartChallengeModal.tsx b/src/components/ContentComponents/ChallengeModal/StartChallengeModal.tsx
deleted file mode 100644
index f15301f2e0f603676c54dbcb421758a227ad5cb2..0000000000000000000000000000000000000000
--- a/src/components/ContentComponents/ChallengeModal/StartChallengeModal.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
-import { Duration } from 'luxon'
-
-import { ChallengeType } from 'models'
-
-import Modal from 'components/CommonKit/Modal/Modal'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import StyledWhiteButton from 'components/CommonKit/Button/StyledWhiteButton'
-import DefaultChallengeIcon from 'assets/icons/visu/challenge/default_challenge.svg'
-
-interface ChallengeModalProps {
- opened: boolean
- challenge: ChallengeType
- t: Function
- handleCloseClick: () => void
- handleStartClick: () => void
-}
-
-const ChallengeModal: React.FC<ChallengeModalProps> = ({
- opened,
- challenge,
- t,
- handleCloseClick,
- handleStartClick,
-}: ChallengeModalProps) => {
- return (
- <Modal open={opened} handleCloseClick={handleCloseClick}>
- <div className="cm-header text-14-normal-uppercase">
- {t('CHALLENGE.TITLE_CHALLENGE')}
- </div>
- {!challenge ? (
- <StyledSpinner />
- ) : (
- <>
- <div className="cm-title text-24-bold ">{challenge.title}</div>
- <div className="cm-duration text-24-normal">
- {Duration.fromObject(challenge.duration).as('days')} Jours
- </div>
- <StyledIconButton
- className="cm-icon"
- icon={!challenge.icon ? DefaultChallengeIcon : challenge.icon}
- size={100}
- />
- <div className="cm-description text-16-bold">
- {challenge.description}
- </div>
- </>
- )}
- <StyledWhiteButton onClick={handleStartClick}>
- {t('CHALLENGE.CHALLENGE_GO')}
- </StyledWhiteButton>
- </Modal>
- )
-}
-
-export default translate()(ChallengeModal)
diff --git a/src/components/ContentComponents/ConnectionPrompt/ConnectionPrompt.jsx b/src/components/ContentComponents/ConnectionPrompt/ConnectionPrompt.jsx
deleted file mode 100644
index 50f2fbaadea595277d77060a698cc627a731174e..0000000000000000000000000000000000000000
--- a/src/components/ContentComponents/ConnectionPrompt/ConnectionPrompt.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-const ConnectionPrompt = () => {
- return (
- <div>
- <span>The ConnectionPrompt Component goes in here</span>
- </div>
- )
-}
-
-export default ConnectionPrompt
diff --git a/src/components/ContentComponents/Konnector/KonnectorForm.tsx b/src/components/ContentComponents/Konnector/KonnectorForm.tsx
deleted file mode 100644
index e735794f42cbea3e846a5f80acfe2f25d82ce0ce..0000000000000000000000000000000000000000
--- a/src/components/ContentComponents/Konnector/KonnectorForm.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
-
-import { Konnector, Trigger, FluidConfig } from 'models'
-
-import KonnectorLoginForm from 'components/ContentComponents/Konnector/KonnectorLoginForm'
-import KonnectorOAuthForm from 'components/ContentComponents/Konnector/KonnectorOAuthForm'
-
-interface KonnectorFormProps {
- fluidConfig: FluidConfig
- konnector: Konnector
- account: Account | null
- trigger: Trigger | null
- handleSuccessForm: Function
- t: Function
-}
-
-const KonnectorForm: React.FC<KonnectorFormProps> = ({
- fluidConfig,
- konnector,
- account,
- trigger,
- handleSuccessForm,
- t,
-}: KonnectorFormProps) => {
- const oAuth: boolean = fluidConfig.konnectorConfig.oauth
-
- const handleSuccess = (_account: Account, _trigger: Trigger) => {
- handleSuccessForm(_account, _trigger)
- }
-
- return (
- <>
- {!oAuth ? (
- <KonnectorLoginForm
- fluidConfig={fluidConfig}
- onSuccess={handleSuccess}
- account={account}
- trigger={trigger}
- />
- ) : (
- <KonnectorOAuthForm
- fluidConfig={fluidConfig}
- konnector={konnector}
- siteLink={fluidConfig.siteLink}
- onSuccess={handleSuccess}
- />
- )}
- </>
- )
-}
-
-export default translate()(KonnectorForm)
diff --git a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerList.tsx b/src/components/ContentComponents/KonnectorViewer/KonnectorViewerList.tsx
deleted file mode 100644
index 3cf5f4893f4a8777e859d455155a52331771cbaf..0000000000000000000000000000000000000000
--- a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerList.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { useContext } from 'react'
-import KonnectorViewer from 'components/ContentComponents/KonnectorViewer/KonnectorViewer'
-import { FluidConfig } from 'models'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-
-export interface KonnectorViewerListProps {
- isParam: boolean
- fluidConfigs: FluidConfig[]
-}
-
-const KonnectorViewerList: React.FC<KonnectorViewerListProps> = ({
- isParam = false,
- fluidConfigs,
-}: KonnectorViewerListProps) => {
- const { fluidTypes } = useContext(AppContext)
- return (
- <div>
- {fluidConfigs.map((item: FluidConfig, index: number) => {
- return fluidTypes.includes(item.fluidTypeId) ? (
- <KonnectorViewer isParam={isParam} key={index} fluidConfig={item} />
- ) : null
- })}
- {fluidConfigs.map((item: FluidConfig, index: number) => {
- return fluidTypes.includes(item.fluidTypeId) ? null : (
- <KonnectorViewer isParam={isParam} key={index} fluidConfig={item} />
- )
- })}
- </div>
- )
-}
-
-export default KonnectorViewerList
diff --git a/src/components/ContentComponents/Version/Version.tsx b/src/components/ContentComponents/Version/Version.tsx
deleted file mode 100644
index 90db1233f885eb09c7622b756569ff0b0432ddd6..0000000000000000000000000000000000000000
--- a/src/components/ContentComponents/Version/Version.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { withClient, Client } from 'cozy-client'
-
-interface VersionProps {
- client: Client
-}
-
-const Version: React.FC<VersionProps> = ({ client }: VersionProps) => (
- <div className="version-root text-14-normal">{`v ${client.appMetadata.version}`}</div>
-)
-
-export default withClient(Version)
diff --git a/src/components/Contexts/AppContextProvider.tsx b/src/components/Contexts/AppContextProvider.tsx
deleted file mode 100644
index a04255ff20125be3c8a2139ebf68985738bb7e47..0000000000000000000000000000000000000000
--- a/src/components/Contexts/AppContextProvider.tsx
+++ /dev/null
@@ -1,377 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { withClient, Client } from 'cozy-client'
-
-import { FluidType } from 'enum/fluid.enum'
-import { ScreenType } from 'enum/screen.enum'
-import { TimeStep } from 'enum/timeStep.enum'
-import { FluidStatus, UserChallenge, UserProfile } from 'models'
-import InitDataService from 'services/initData.service'
-import UserProfileService from 'services/userProfile.service'
-import FluidService from 'services/fluid.service'
-
-interface AppContextProps {
- isContextLoaded: boolean
- isError: boolean
- fluidTypes: FluidType[]
- fluidStatus: FluidStatus[]
- refreshFluidStatus: Function
- refreshFluidTypes: Function
- currentChallenge: UserChallenge | null
- challengeNotification: boolean
- setNotificationEcogesture: Function
- refreshCurrentChallenge: Function
- screenType: ScreenType
- previousTimeStep: TimeStep
- setPreviousTimeStep: Function
- userProfile: UserProfile | null
- setUserProfile: Function
- setWelcomeModalViewed: Function
- feedbackIsOpened: boolean
- setFeedbackOpened: Function
- disableBackgroundScroll: Function
- maxLoads: Record<string, any>
- setMaxLoads: Function
-}
-
-export const AppContext = React.createContext<AppContextProps>({
- isContextLoaded: false,
- isError: false,
- fluidTypes: [],
- fluidStatus: [],
- refreshFluidTypes: () => null,
- refreshFluidStatus: () => null,
- currentChallenge: null,
- challengeNotification: false,
- setNotificationEcogesture: () => null,
- refreshCurrentChallenge: () => Promise,
- screenType: ScreenType.MOBILE,
- previousTimeStep: TimeStep.DAY,
- userProfile: null,
- setUserProfile: () => null,
- setPreviousTimeStep: () => null,
- setWelcomeModalViewed: () => null,
- feedbackIsOpened: false,
- setFeedbackOpened: () => null,
- disableBackgroundScroll: () => null,
- maxLoads: {},
- setMaxLoads: () => null,
-})
-
-interface AppContextProviderProps {
- children: React.ReactNode
- client: Client
-}
-
-const AppContextProvider: React.FC<AppContextProviderProps> = ({
- children,
- client,
-}: AppContextProviderProps) => {
- const [feedbackIsOpened, setFeedbackOpened] = useState<boolean>(false)
- const [maxLoads, setMaxLoads] = useState<object>({})
- const [isIndexesLoadingSuccess, setIndexesLoadingSuccess] = useState<
- boolean | null
- >(null)
- const [isDataLoadingSuccess, setDataLoadingSuccess] = useState<
- boolean | null
- >(null)
-
- const [fluidTypes, setFluidTypes] = useState<FluidType[]>([])
- const [isFluidTypesLoadingSuccess, setFluidTypesLoadingSuccess] = useState<
- boolean | null
- >(null)
-
- const [fluidStatus, setFluidStatus] = useState<FluidStatus[]>([])
- const [isFluidStatusLoadingSuccess, setFluidStatusLoadingSuccess] = useState<
- boolean | null
- >(null)
-
- const [
- isCurrentChallengeUpdateLoadingSuccess,
- setCurrentChallengeUpdateLoadingSuccess,
- ] = useState<boolean | null>(null)
- const [
- currentChallenge,
- setCurrentChallenge,
- ] = useState<UserChallenge | null>(null)
- const [challengeNotification, setChallengeNotification] = useState<boolean>(
- false
- )
- const [isContextLoaded, setContextLoaded] = useState<boolean>(false)
- const [isError, setError] = useState<boolean>(false)
- const [screenType, setScreenType] = useState<ScreenType>(ScreenType.MOBILE)
- const [previousTimeStep, setPreviousTimeStep] = useState<TimeStep>(
- TimeStep.DAY
- )
-
- const [isUserProfileLoadingSuccess, setUserProfileLoadingSuccess] = useState<
- boolean | null
- >(null)
- const [userProfile, setUserProfile] = useState<UserProfile | null>(null)
-
- const defineScreenType = () => {
- if (innerWidth <= 768) {
- setScreenType(ScreenType.MOBILE)
- } else if (innerWidth <= 1024) {
- setScreenType(ScreenType.TABLET)
- } else {
- setScreenType(ScreenType.DESKTOP)
- }
- }
-
- const refreshFluidTypes = async () => {
- const initDataService = new InitDataService(client)
- try {
- const resultFluidTypes = await initDataService.checkFluidTypes()
- if (resultFluidTypes) {
- setFluidTypes(resultFluidTypes)
- const resultAchievement = await initDataService.checkAchievement(
- 'CHA00000001'
- )
- if (resultAchievement) {
- const resultNotificationChallenge = await initDataService.isCurrentChallengeOver(
- resultAchievement,
- resultFluidTypes
- )
- if (resultNotificationChallenge) {
- setChallengeNotification(resultNotificationChallenge)
- }
- }
- }
- } catch (error) {
- console.log(error)
- }
- }
-
- const refreshFluidStatus = async () => {
- const fluidService = new FluidService(client)
- try {
- const _fluidStatus = await fluidService.getFluidStatus()
- if (!_fluidStatus) {
- return null
- }
- setFluidStatus(_fluidStatus)
- } catch (error) {
- console.log(error)
- }
- }
-
- const setWelcomeModalViewed = async () => {
- const userProfileService = new UserProfileService(client)
- const updatedUserProfile = await userProfileService.updateUserProfile({
- haveSeenWelcomeModal: true,
- })
- if (updatedUserProfile) {
- setUserProfile(updatedUserProfile)
- }
- }
-
- const refreshCurrentChallenge = async (): Promise<boolean> => {
- const initDataService = new InitDataService(client)
- try {
- const resultUpdateChallenge = await initDataService.checkCurrentChallenge()
- setCurrentChallenge(resultUpdateChallenge)
-
- if (resultUpdateChallenge) {
- const resultNotificationChallenge = await initDataService.isCurrentChallengeOver(
- resultUpdateChallenge,
- resultUpdateChallenge.fluidTypes
- )
- if (resultNotificationChallenge) {
- setChallengeNotification(resultNotificationChallenge)
- }
- } else {
- setChallengeNotification(false)
- }
- return true
- } catch {
- setCurrentChallenge(null)
- setChallengeNotification(false)
- return false
- }
- }
-
- const disableBackgroundScroll = (disable: boolean) => {
- const backgroundDesktop = document.querySelector(
- '.app-content'
- ) as HTMLElement
- const backgroundMobile = document.querySelector('html') as HTMLElement
- const bgStyleDesktop = backgroundDesktop && backgroundDesktop.style
- const bgStyleMobile = backgroundMobile && backgroundMobile.style
- if (disable) {
- bgStyleDesktop.overflowY = 'hidden'
- bgStyleMobile.overflowY = 'hidden'
- } else {
- bgStyleDesktop.overflowY = 'unset'
- bgStyleMobile.overflowY = 'unset'
- }
- }
-
- const setNotificationEcogesture = async (ecogestureList: string[]) => {
- const userProfileService = new UserProfileService(client)
- const updatedUserProfile = await userProfileService.updateUserProfile({
- notificationEcogesture: ecogestureList,
- })
- if (updatedUserProfile) {
- setUserProfile(updatedUserProfile)
- }
- }
-
- useEffect(() => {
- let subscribed = true
- function handleResize() {
- defineScreenType()
- }
- handleResize()
- window.addEventListener('resize', handleResize)
- const initDataService = new InitDataService(client)
- const userProfileService = new UserProfileService(client)
- async function loadData() {
- // Create missing indexes
- const resultIndexConsoData = await initDataService.initIndex()
- if (subscribed && !resultIndexConsoData) {
- setError(true)
- }
- if (subscribed && resultIndexConsoData) {
- console.log(
- '%c Context: Indexes created',
- 'background: #222; color: white'
- )
- setIndexesLoadingSuccess(true)
- }
-
- // Load challenges, ecogesture and user profile data
- const resultInitData = await initDataService.initData()
- if (subscribed && !resultInitData) {
- setDataLoadingSuccess(false)
- setError(true)
- }
- if (subscribed && resultInitData) {
- setDataLoadingSuccess(true)
- }
-
- // Load configured fluidTypes
- const resultFluidTypes = await initDataService.checkFluidTypes()
- if (subscribed && resultFluidTypes) {
- console.log(
- '%c Context: Konnectors loaded ',
- 'background: #222; color: white'
- )
- setFluidTypes(resultFluidTypes)
- setFluidTypesLoadingSuccess(true)
- }
-
- // Get fluid status
- const resultFluidStatus = await initDataService.getFluidStatus()
- if (subscribed && resultFluidStatus) {
- console.log(
- '%c Context: Fluid status loaded ',
- 'background: #222; color: white'
- )
- setFluidStatus(resultFluidStatus)
- setFluidStatusLoadingSuccess(true)
- }
-
- // Update current challenge if exists
- try {
- const resultUpdateChallenge = await initDataService.checkCurrentChallenge()
- if (subscribed && resultUpdateChallenge) {
- const resultNotificationChallenge = await initDataService.isCurrentChallengeOver(
- resultUpdateChallenge,
- resultUpdateChallenge.fluidTypes
- ? resultUpdateChallenge.fluidTypes
- : []
- )
- if (subscribed && resultNotificationChallenge) {
- setChallengeNotification(resultNotificationChallenge)
- }
- }
- if (subscribed) {
- console.log(
- '%c Context: Current Challenge checked',
- 'background: #222; color: white'
- )
- setCurrentChallenge(resultUpdateChallenge)
- setCurrentChallengeUpdateLoadingSuccess(true)
- }
- } catch {
- setCurrentChallengeUpdateLoadingSuccess(false)
- setError(true)
- }
-
- //Retrieve the UserProfile
- const loadedUserProfile = await userProfileService.getUserProfile()
- if (!loadedUserProfile) {
- setError(true)
- }
- if (subscribed && loadedUserProfile) {
- console.log(
- '%c Context: UserProfile Loaded',
- 'background: #222; color: white'
- )
- setUserProfile(loadedUserProfile)
- setUserProfileLoadingSuccess(true)
- }
- }
- loadData()
- return () => {
- subscribed = false
- window.removeEventListener('resize', handleResize)
- }
- }, [])
-
- useEffect(() => {
- if (
- isIndexesLoadingSuccess &&
- isDataLoadingSuccess &&
- isFluidTypesLoadingSuccess &&
- isFluidStatusLoadingSuccess &&
- isCurrentChallengeUpdateLoadingSuccess &&
- isUserProfileLoadingSuccess &&
- !isError
- ) {
- setTimeout(function() {
- setContextLoaded(true)
- }, 1000)
- }
- }, [
- isIndexesLoadingSuccess,
- isDataLoadingSuccess,
- isFluidTypesLoadingSuccess,
- isFluidStatusLoadingSuccess,
- isCurrentChallengeUpdateLoadingSuccess,
- isUserProfileLoadingSuccess,
- isError,
- ])
-
- return (
- <AppContext.Provider
- value={{
- isContextLoaded,
- isError,
- fluidTypes,
- fluidStatus,
- refreshFluidTypes,
- refreshFluidStatus,
- currentChallenge,
- challengeNotification,
- refreshCurrentChallenge,
- screenType,
- userProfile,
- setUserProfile,
- previousTimeStep,
- setPreviousTimeStep,
- setWelcomeModalViewed,
- feedbackIsOpened,
- setFeedbackOpened,
- disableBackgroundScroll,
- maxLoads,
- setMaxLoads,
- setNotificationEcogesture,
- }}
- >
- {children}
- </AppContext.Provider>
- )
-}
-
-export default withClient(AppContextProvider)
diff --git a/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard.tsx
similarity index 85%
rename from src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx
rename to src/components/Ecogesture/EcogestureCard.tsx
index d9baab64b4cabf4faa4ba79a734d3a0b2d1abe8f..9751661b006823bad4077d467b66b3210df70f41 100644
--- a/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard.tsx
@@ -1,9 +1,12 @@
-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' : ''
diff --git a/src/components/ContentComponents/EcogestureList/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
similarity index 75%
rename from src/components/ContentComponents/EcogestureList/EcogestureList.tsx
rename to src/components/Ecogesture/EcogestureList.tsx
index 3f9259f985bb095d2bf542bbdfa70153bcdaf952..e1defba0441a13ee2d6658320b425d4d1f55fc59 100644
--- a/src/components/ContentComponents/EcogestureList/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -1,23 +1,19 @@
import React, { useState, useEffect } from 'react'
-import { withClient, Client } from 'cozy-client'
-import StyledChallengeSpinner from 'components/CommonKit/Spinner/StyledChallengeSpinner'
-import EcogestureCard from '../EcogestureCard/EcogestureCard'
-import EcogestureModal from '../EcogestureModal/EcogestureModal'
-import NegaWattModal from '../NegaWattModal/NegaWattModal'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
+
import { Ecogesture } from 'models'
import ChallengeService from 'services/challenge.service'
-import StyledClearGreyButton from 'components/CommonKit/Button/StyledClearGreyButton'
-import { translate } from 'cozy-ui/react/I18n'
-interface EcogesturesListProps {
- t: Function
- client: Client
-}
+import StyledChallengeSpinner from 'components/CommonKit/Spinner/StyledChallengeSpinner'
+import StyledClearGreyButton from 'components/CommonKit/Button/StyledClearGreyButton'
+import EcogestureCard from 'components/Ecogesture/EcogestureCard'
+import EcogestureModal from 'components/Ecogesture/EcogestureModal'
+import NegaWattModal from 'components/Ecogesture/NegaWattModal'
-const EcogesturesList: React.FC<EcogesturesListProps> = ({
- t,
- client,
-}: EcogesturesListProps) => {
+const EcogesturesList: React.FC = () => {
+ const { t } = useI18n()
+ const client = useClient()
const [
selectedEcogesture,
setSelectedEcogesture,
@@ -52,11 +48,9 @@ const EcogesturesList: React.FC<EcogesturesListProps> = ({
if (subscribed && dataAll) {
if (dataUnlocked) {
dataAll.forEach(element => {
- dataUnlocked.forEach(el => {
- if (el === element.id) {
- element.unlocked = true
- }
- })
+ if (dataUnlocked.includes(element.id)) {
+ element.unlocked = true
+ }
})
}
setEcogestures(dataAll)
@@ -76,6 +70,10 @@ const EcogesturesList: React.FC<EcogesturesListProps> = ({
</div>
) : (
<>
+ <NegaWattModal
+ open={openNegaWattModal}
+ handleCloseClick={handleNegaWattCloseClick}
+ />
<div className="negawatt-button-content">
<StyledClearGreyButton
color="secondary"
@@ -84,10 +82,6 @@ const EcogesturesList: React.FC<EcogesturesListProps> = ({
>
{t('NEGAWATT.QUESTION')}
</StyledClearGreyButton>
- <NegaWattModal
- opened={openNegaWattModal}
- handleCloseClick={handleNegaWattCloseClick}
- />
</div>
<div className="ecogesture-content">
{ecogestures.map((ecogesture, index) => (
@@ -103,7 +97,7 @@ const EcogesturesList: React.FC<EcogesturesListProps> = ({
)}
{openEcogestureModal && (
<EcogestureModal
- opened={openEcogestureModal}
+ open={openEcogestureModal}
ecogesture={selectedEcogesture}
handleCloseClick={handleCloseClick}
/>
@@ -112,4 +106,4 @@ const EcogesturesList: React.FC<EcogesturesListProps> = ({
)
}
-export default translate()(withClient(EcogesturesList))
+export default EcogesturesList
diff --git a/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
similarity index 74%
rename from src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx
rename to src/components/Ecogesture/EcogestureModal.tsx
index 0b5181364bb4420fc41baacf9677fafdb27a7b08..7831971c8d975633f44d80df3b8fdf870732695e 100644
--- a/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -1,30 +1,34 @@
-import React, { useState, useEffect, useContext } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
-import Modal from 'components/CommonKit/Modal/Modal'
+import React, { useState, useEffect, useCallback } from 'react'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react'
+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 { t } = useI18n()
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,16 +43,29 @@ 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) {
index = userProfile.notificationEcogesture.indexOf(ecogesture.id)
}
if (index > -1) {
- const updatedNotificationEcogestureList =
- userProfile && userProfile.notificationEcogesture
+ const updatedNotificationEcogestureList = [
+ ...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}
>
@@ -113,4 +130,4 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
)
}
-export default translate()(EcogestureModal)
+export default EcogestureModal
diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..facbf1de0d82df4eb0600eea54f875198879587a
--- /dev/null
+++ b/src/components/Ecogesture/EcogestureView.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import EcogesturesList from 'components/Ecogesture/EcogestureList'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
+
+const EcogestureView: React.FC = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const defineHeaderHeight = (height: number) => {
+ setHeaderHeight(height)
+ }
+ return (
+ <>
+ <CozyBar titleKey={'COMMON.APP_ECO_GESTURE_TITLE'} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'COMMON.APP_ECO_GESTURE_TITLE'}
+ ></Header>
+ <Content height={headerHeight}>
+ <EcogesturesList />
+ </Content>
+ </>
+ )
+}
+
+export default EcogestureView
diff --git a/src/components/ContentComponents/NegaWattModal/NegaWattModal.tsx b/src/components/Ecogesture/NegaWattModal.tsx
similarity index 83%
rename from src/components/ContentComponents/NegaWattModal/NegaWattModal.tsx
rename to src/components/Ecogesture/NegaWattModal.tsx
index 4feb4141d00ec47e1a334546703db1e78b9edc59..2507e141012cc47a5cc2a271d221b5f99363d8d5 100644
--- a/src/components/ContentComponents/NegaWattModal/NegaWattModal.tsx
+++ b/src/components/Ecogesture/NegaWattModal.tsx
@@ -1,22 +1,20 @@
import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import Modal from 'components/CommonKit/Modal/Modal'
interface NegaWattModalProps {
- opened: boolean
- t: Function
+ open: boolean
handleCloseClick: () => void
- handleStartClick: () => void
}
const NegaWattModal: React.FC<NegaWattModalProps> = ({
- opened,
- t,
+ open,
handleCloseClick,
}: NegaWattModalProps) => {
+ const { t } = useI18n()
return (
<>
- <Modal open={opened} handleCloseClick={handleCloseClick}>
+ <Modal open={open} handleCloseClick={handleCloseClick}>
<div className="em-header text-14-normal-uppercase">
{t('NEGAWATT.TITLE_NEGAWATT')}
</div>
@@ -46,4 +44,4 @@ const NegaWattModal: React.FC<NegaWattModalProps> = ({
)
}
-export default translate()(NegaWattModal)
+export default NegaWattModal
diff --git a/src/components/ContentComponents/FAQ/FAQ.tsx b/src/components/FAQ/FAQContent.tsx
similarity index 97%
rename from src/components/ContentComponents/FAQ/FAQ.tsx
rename to src/components/FAQ/FAQContent.tsx
index 7bd7d5a3fce8d691191fe96951e41441a39054a3..b677f3fbb2ca66abbf5aa17dd8e63a8bf46fa4b4 100644
--- a/src/components/ContentComponents/FAQ/FAQ.tsx
+++ b/src/components/FAQ/FAQContent.tsx
@@ -80,7 +80,7 @@ const formatDetails = (details: Array<string>) => {
return formatedDetails
}
-const FAQ = () => {
+const FAQContent: React.FC = () => {
const [expandedPanel, setExpandedPanel] = useState<string | false>(false)
const handleChange = (panel: string) => (
@@ -109,4 +109,4 @@ const FAQ = () => {
)
}
-export default FAQ
+export default FAQContent
diff --git a/src/components/ContainerComponents/FAQContainer/FAQContainer.tsx b/src/components/FAQ/FAQLink.tsx
similarity index 77%
rename from src/components/ContainerComponents/FAQContainer/FAQContainer.tsx
rename to src/components/FAQ/FAQLink.tsx
index 7b12e44b16e48f43ed89d40800645cdb06ea5aea..0d2853502e38057c3c26f61fa08d3dcc838f00a1 100644
--- a/src/components/ContainerComponents/FAQContainer/FAQContainer.tsx
+++ b/src/components/FAQ/FAQLink.tsx
@@ -1,25 +1,20 @@
import React from 'react'
import { NavLink } from 'react-router-dom'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import QuestionMarkIcon from 'assets/icons/ico/question-mark.svg'
-interface FAQContainerProps {
- t: Function
-}
-
-const FAQContainer: React.FC<FAQContainerProps> = ({
- t,
-}: FAQContainerProps) => {
+const FAQLink: React.FC = () => {
+ const { t } = useI18n()
return (
<div className="faq-root">
<div className="faq-content">
<div className="faq-header text-14-normal-uppercase">
{t('FAQ.TITLE_FAQ')}
</div>
- <NavLink className="faq-card-link" to="parameters/FAQ">
+ <NavLink className="faq-card-link" to="options/FAQ">
<StyledCard>
<div className="faq-card">
<div className="faq-card-content">
@@ -40,4 +35,4 @@ const FAQContainer: React.FC<FAQContainerProps> = ({
)
}
-export default translate()(FAQContainer)
+export default FAQLink
diff --git a/src/components/ContainerComponents/ViewContainer/FAQViewContainer.tsx b/src/components/FAQ/FAQView.tsx
similarity index 59%
rename from src/components/ContainerComponents/ViewContainer/FAQViewContainer.tsx
rename to src/components/FAQ/FAQView.tsx
index 2ea4bfe135ac14f28fd78809e0094754e85df90d..abc27498cdf3b91a0aa23c7eea12687088a9d0e3 100644
--- a/src/components/ContainerComponents/ViewContainer/FAQViewContainer.tsx
+++ b/src/components/FAQ/FAQView.tsx
@@ -1,10 +1,10 @@
import React, { useState } from 'react'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-import FAQ from 'components/ContentComponents/FAQ/FAQ'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
+import FAQContent from 'components/FAQ/FAQContent'
-const EcoGesturesViewContainer: React.FC = () => {
+const FAQView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
@@ -18,10 +18,10 @@ const EcoGesturesViewContainer: React.FC = () => {
displayBackArrow={true}
></Header>
<Content height={headerHeight}>
- <FAQ />
+ <FAQContent />
</Content>
</React.Fragment>
)
}
-export default EcoGesturesViewContainer
+export default FAQView
diff --git a/src/components/ContentComponents/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
similarity index 95%
rename from src/components/ContentComponents/Feedback/FeedbackModal.tsx
rename to src/components/Feedback/FeedbackModal.tsx
index 191bb7e9cb05896a0b747f716e1f7fc4649c2243..12d5a33fc85740d259152cdb175212db20434ff6 100644
--- a/src/components/ContentComponents/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react'
-import { withClient, Client } from 'cozy-client'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
import { detect } from 'detect-browser'
import Modal from 'components/CommonKit/Modal/Modal'
@@ -21,18 +21,16 @@ const FEEDBACK_EMAIL = 'ecolyo@grandlyon.com'
const browser = detect()
interface FeedbackModalProps {
- opened: boolean
+ open: boolean
handleCloseClick: () => void
- t: Function
- client: Client
}
const FeedbackModal: React.FC<FeedbackModalProps> = ({
- opened,
+ open,
handleCloseClick,
- t,
- client,
}: FeedbackModalProps) => {
+ const { t } = useI18n()
+ const client = useClient()
const [type, setType] = useState<string>('bug')
const [description, setDescription] = useState<string>('')
const [email, setEmail] = useState<string>('')
@@ -89,6 +87,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
}
try {
const jobCollection = client.collection('io.cozy.jobs')
+ console.log(jobCollection)
await jobCollection.create('sendmail', mailData)
} catch (e) {
// eslint-disable-next-line no-console
@@ -159,7 +158,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
}
return (
- <Modal open={opened} yellowBorder={true} handleCloseClick={closeModal}>
+ <Modal open={open} yellowBorder={true} handleCloseClick={closeModal}>
{sent ? (
<div className="fb-root">
<div className="fb-content">
@@ -240,4 +239,4 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
)
}
-export default translate()(withClient(FeedbackModal))
+export default FeedbackModal
diff --git a/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx b/src/components/FluidChart/FluidChart.tsx
similarity index 85%
rename from src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx
rename to src/components/FluidChart/FluidChart.tsx
index 8dbd096b29a05fd770a4a1507e281d213de47267..da12a0672b7e8dacda0ee5d8b0c1e557f0a5d639 100644
--- a/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -1,37 +1,37 @@
-import React, { useState, useEffect, useContext } from 'react'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-import { withClient, Client } from 'cozy-client'
+import React, { useState, useEffect } from 'react'
+import { useClient } from 'cozy-client'
+import { useRecoilValue } from 'recoil'
import { DateTime } from 'luxon'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { TypeChallenge } from 'enum/challenge.enum'
+import { currentChallengeState } from 'atoms/challenge.state'
import { UserChallenge } from 'models'
import ConsumptionService from 'services/consumption.service'
-import FluidChartContent from 'components/ContentComponents/FluidChart/FluidChartContent'
-import ActivateHalfHourLoad from 'components/ContentComponents/ConsumptionNavigator/ActivateHalfHourLoad'
+import FluidChartContent from 'components/FluidChart/FluidChartContent'
+import ActivateHalfHourLoad from 'components/ConsumptionNavigator/ActivateHalfHourLoad'
-interface FluidChartContainerProps {
+interface FluidChartProps {
timeStep: TimeStep
fluidTypes: FluidType[]
resetReferenceDate: boolean
multiFluid: boolean
handleClickTimeStep(_timeStep: TimeStep): void
setChartLoaded(): void
- client: Client
}
-const FluidChartContainer: React.FC<FluidChartContainerProps> = ({
+const FluidChart: React.FC<FluidChartProps> = ({
timeStep,
fluidTypes,
resetReferenceDate,
multiFluid,
handleClickTimeStep,
setChartLoaded,
- client,
-}: FluidChartContainerProps) => {
- const { currentChallenge } = useContext(AppContext)
+}: FluidChartProps) => {
+ const client = useClient()
+ const currentChallenge = useRecoilValue(currentChallengeState)
const [lastDataDate, setLastDataDate] = useState<DateTime>(DateTime.local())
const [lastDateWithAllData, setLastDateWithAllData] = useState<DateTime>(
DateTime.local()
@@ -141,4 +141,4 @@ const FluidChartContainer: React.FC<FluidChartContainerProps> = ({
)
}
-export default withClient(FluidChartContainer)
+export default FluidChart
diff --git a/src/components/ContentComponents/FluidChart/FluidChartContent.tsx b/src/components/FluidChart/FluidChartContent.tsx
similarity index 91%
rename from src/components/ContentComponents/FluidChart/FluidChartContent.tsx
rename to src/components/FluidChart/FluidChartContent.tsx
index bb7309704caa297dc8c1fdeb27ea19c2b413a8fd..a12ca65df3e0b0c3824d783c513879b60ef28fb9 100644
--- a/src/components/ContentComponents/FluidChart/FluidChartContent.tsx
+++ b/src/components/FluidChart/FluidChartContent.tsx
@@ -1,19 +1,20 @@
-import React, { useState, useEffect, useContext } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import React, { useState, useEffect } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { DateTime } from 'luxon'
import { NavLink } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
+import { challengeNotificationState } from 'atoms/notification.state'
import { Dataload, TimePeriod, UserChallenge } from 'models'
import DateChartService from 'services/dateChart.service'
import Switch from 'components/CommonKit/Switch/StyledSwitch'
-import FluidChartSwipe from 'components/ContentComponents/FluidChart/FluidChartSwipe'
-import ConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/ConsumptionVisualizer'
+import FluidChartSwipe from 'components/FluidChart/FluidChartSwipe'
+import ConsumptionVisualizer from 'components/ConsumptionVisualizer/ConsumptionVisualizer'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import captionIcon from 'assets/icons/visu/challenge-caption-chart.svg'
-import { AppContext } from 'components/Contexts/AppContextProvider'
interface FluidChartContentProps {
fluidTypes: FluidType[]
@@ -25,7 +26,6 @@ interface FluidChartContentProps {
currentChallenge: UserChallenge | null
isDataLoaded: boolean
handleDetailedDate(date: DateTime, timeStep: TimeStep): void
- t: Function
}
const FluidChartContent: React.FC<FluidChartContentProps> = ({
@@ -38,8 +38,9 @@ const FluidChartContent: React.FC<FluidChartContentProps> = ({
currentChallenge,
isDataLoaded,
handleDetailedDate,
- t,
}: FluidChartContentProps) => {
+ const { t } = useI18n()
+ const challengeNotification = useRecoilValue(challengeNotificationState)
const [indexDisplayed, setIndexDisplayed] = useState<number>(0)
const [selectedDate, setSelectedDate] = useState<DateTime>(referenceDate)
const [selectedDataload, setSelectedDataload] = useState<Dataload>()
@@ -48,11 +49,10 @@ const FluidChartContent: React.FC<FluidChartContentProps> = ({
>()
const [showCompare, setShowCompare] = useState<boolean>(false)
const [isLoaded, setIsLoaded] = useState<boolean>(true)
- const { challengeNotification } = useContext(AppContext)
const challengesPath = 'challenges'
const challengeDetailPath = {
pathname: `challenges/ongoing`,
- state: { challenge: currentChallenge },
+ state: currentChallenge,
}
const challengePeriod: TimePeriod | null = currentChallenge &&
currentChallenge.startingDate &&
@@ -200,4 +200,4 @@ const FluidChartContent: React.FC<FluidChartContentProps> = ({
)
}
-export default translate()(FluidChartContent)
+export default FluidChartContent
diff --git a/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
similarity index 91%
rename from src/components/ContentComponents/FluidChart/FluidChartSlide.tsx
rename to src/components/FluidChart/FluidChartSlide.tsx
index e113f57280812c4d324b768baef49a5bd12481b2..0fcef191a450843652ad11cadd9a791125a071a5 100644
--- a/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -1,15 +1,16 @@
-import React, { useState, useEffect, useContext } from 'react'
-import { withClient, Client } from 'cozy-client'
+import React, { useState, useEffect } from 'react'
+import { useClient } from 'cozy-client'
+import { useRecoilValue } from 'recoil'
import { DateTime } from 'luxon'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
+import { maxLoadsState } from 'atoms/chart.state'
import { Datachart, Dataload, TimePeriod } from 'models'
import ConsumptionService from 'services/consumption.service'
import DateChartService from 'services/dateChart.service'
-import BarChart from 'components/ContentComponents/Charts/BarChart'
-import { AppContext } from 'components/Contexts/AppContextProvider'
+import BarChart from 'components/Charts/BarChart'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
interface FluidChartSlideProps {
@@ -28,7 +29,6 @@ interface FluidChartSlideProps {
compareDataload: Dataload | null
) => void
isSwitching: boolean
- client: Client
}
const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
@@ -44,15 +44,15 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
challengePeriod,
handleClickData,
isSwitching,
- client,
}: FluidChartSlideProps) => {
+ const client = useClient()
const [chartData, setChartData] = useState<Datachart>({
actualData: [],
comparisonData: null,
})
const [isLoaded, setIsLoaded] = useState<boolean>(false)
- const { maxLoads } = useContext(AppContext)
+ const maxLoads = useRecoilValue(maxLoadsState)
const isHome: boolean = !window.location.hash.split('/')[2] ? true : false
@@ -108,9 +108,9 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
const compareMaxTimePeriod = maxTimePeriod
- const key = `${actualMonth}/${actualYear}-${isHome}-${fluidTypes
- .sort()
- .join('-')}-${timeStep}`
+ const key = `${actualMonth}/${actualYear}-${isHome}-${fluidTypes.join(
+ '-'
+ )}-${timeStep}`
const graphMaxLoad = await consumptionService.getMaxLoad(
maxTimePeriod,
@@ -164,4 +164,4 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
)
}
-export default withClient(FluidChartSlide)
+export default FluidChartSlide
diff --git a/src/components/ContentComponents/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx
similarity index 97%
rename from src/components/ContentComponents/FluidChart/FluidChartSwipe.tsx
rename to src/components/FluidChart/FluidChartSwipe.tsx
index 5ca94668fa01140edd9f9cec2a8a40cdc5968aa1..8b2b51ced8d191aa5bc1ed8ef04f626b22f88fad 100644
--- a/src/components/ContentComponents/FluidChart/FluidChartSwipe.tsx
+++ b/src/components/FluidChart/FluidChartSwipe.tsx
@@ -7,7 +7,7 @@ import { TimeStep } from 'enum/timeStep.enum'
import { FluidType } from 'enum/fluid.enum'
import { Dataload, TimePeriod } from 'models'
-import FluidChartSlide from 'components/ContentComponents/FluidChart/FluidChartSlide'
+import FluidChartSlide from 'components/FluidChart/FluidChartSlide'
const VirtualizeSwipeableViews = virtualize(SwipeableViews)
diff --git a/src/components/ContainerComponents/CozyBar/CozyBar.tsx b/src/components/Header/CozyBar.tsx
similarity index 72%
rename from src/components/ContainerComponents/CozyBar/CozyBar.tsx
rename to src/components/Header/CozyBar.tsx
index 4a4769f71698f05d007ef75371c52b618c502513..06dacf74c22549331c66a67895009198e3a2f6d5 100644
--- a/src/components/ContainerComponents/CozyBar/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -1,32 +1,37 @@
-import React, { useContext } from 'react'
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { history } from 'components/App'
+
import { ScreenType } from 'enum/screen.enum'
-import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
-import { translate } from 'cozy-ui/react/I18n'
+import { ModalState } from 'models'
+import { modalState } from 'atoms/modal.state'
+import { screenTypeState } from 'atoms/screenType.state'
+
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
-import { AppContext } from 'components/Contexts/AppContextProvider'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
interface CozyBarProps {
titleKey?: string
displayBackArrow?: boolean
- t: Function
}
const CozyBar = ({
titleKey = 'COMMON.APP_TITLE',
displayBackArrow = false,
- t,
}: CozyBarProps) => {
+ const { t } = useI18n()
const { BarLeft, BarCenter, BarRight } = cozy.bar
- const { screenType, setFeedbackOpened } = useContext(AppContext)
+ const screenType = useRecoilValue(screenTypeState)
+ const setModalState = useSetRecoilState(modalState)
const handleClickBack = () => {
history.goBack()
}
const handleClickFeedbacks = () => {
- setFeedbackOpened(true)
+ setModalState((prev: ModalState) => ({ ...prev, feedbackModal: true }))
}
const cozyBarCustom = (screen?: ScreenType) => {
@@ -64,4 +69,4 @@ const CozyBar = ({
return cozyBarCustom(screenType)
}
-export default translate()(CozyBar)
+export default CozyBar
diff --git a/src/components/ContainerComponents/Header/Header.tsx b/src/components/Header/Header.tsx
similarity index 83%
rename from src/components/ContainerComponents/Header/Header.tsx
rename to src/components/Header/Header.tsx
index 748daf599f8767e0f4b9c40213118551b8863338..7a409634967a4ecff21c89250836082a6472c366 100644
--- a/src/components/ContainerComponents/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,8 +1,13 @@
-import React, { useEffect, useRef, useContext } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
-import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
+import React, { useEffect, useRef } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { history } from 'components/App'
+
import { ScreenType } from 'enum/screen.enum'
-import { AppContext } from 'components/Contexts/AppContextProvider'
+import { ModalState } from 'models'
+import { modalState } from 'atoms/modal.state'
+import { screenTypeState } from 'atoms/screenType.state'
+
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
@@ -13,7 +18,6 @@ interface HeaderProps {
displayBackArrow?: boolean
children?: React.ReactNode
setHeaderHeight(height: number): void
- t: Function
}
const Header: React.FC<HeaderProps> = ({
@@ -22,10 +26,12 @@ const Header: React.FC<HeaderProps> = ({
displayBackArrow,
children,
setHeaderHeight,
- t,
}: HeaderProps) => {
+ const { t } = useI18n()
const header = useRef(null)
- const { screenType, setFeedbackOpened } = useContext(AppContext)
+ const screenType = useRecoilValue(screenTypeState)
+ const setModalState = useSetRecoilState(modalState)
+
const cozyBarHeight = 48
const headerBottomHeight = 8
@@ -34,7 +40,7 @@ const Header: React.FC<HeaderProps> = ({
}
const handleClickFeedbacks = () => {
- setFeedbackOpened(true)
+ setModalState((prev: ModalState) => ({ ...prev, feedbackModal: true }))
}
useEffect(() => {
@@ -110,4 +116,4 @@ const Header: React.FC<HeaderProps> = ({
)
}
-export default translate()(Header)
+export default Header
diff --git a/src/components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer.tsx b/src/components/Home/HomeIndicators.tsx
similarity index 55%
rename from src/components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer.tsx
rename to src/components/Home/HomeIndicators.tsx
index 6aec0583cd100ad6cc01c06798ed944c1352ec5d..4fc26e07444ae34f63a9ccf923e52268da5f7e86 100644
--- a/src/components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer.tsx
+++ b/src/components/Home/HomeIndicators.tsx
@@ -1,45 +1,45 @@
-import React, { useEffect, useContext, useState } from 'react'
-import { withClient, Client } from 'cozy-client'
-import { translate } from 'cozy-ui/react/I18n'
-import { AppContext } from 'components/Contexts/AppContextProvider'
+import React, { useEffect, useState } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
+import { useRecoilValue } from 'recoil'
import { TimeStep } from 'enum/timeStep.enum'
+import { fluidTypeState } from 'atoms/fluidState.state'
import { TimePeriod, PerformanceIndicator } from 'models'
import TimePeriodService from 'services/timePeriod.service'
import ConsumptionService from 'services/consumption.service'
import PerformanceIndicatorService from 'services/performanceIndicator.service'
+import ConfigService from 'services/fluidConfig.service'
import { convertDateByTimeStep } from 'utils/date'
-import PerformanceIndicatorContent from 'components/ContentComponents/PerformanceIndicator/PerformanceIndicatorContent'
-import IndicatorContainerSwitcher from 'components/ContainerComponents/IndicatorsContainer/IndicatorContainerSwitcher'
+import PerformanceIndicatorContent from 'components/PerformanceIndicator/PerformanceIndicatorContent'
+import FluidPerformanceIndicator from 'components/PerformanceIndicator/FluidPerformanceIndicator'
+import KonnectorViewerListItem from 'components/Konnector/KonnectorViewerListItem'
-interface MultiFluidIndicatorsContainerProps {
+interface HomeIndicatorsProps {
timeStep: TimeStep
setIndicatorsLoaded(): void
- client: Client
- t: Function
}
-const MultiFluidIndicatorsContainer: React.FC<MultiFluidIndicatorsContainerProps> = ({
+const HomeIndicators: React.FC<HomeIndicatorsProps> = ({
timeStep,
setIndicatorsLoaded,
- client,
- t,
-}: MultiFluidIndicatorsContainerProps) => {
- const { fluidTypes } = useContext(AppContext)
+}: HomeIndicatorsProps) => {
+ const { t } = useI18n()
+ const client = useClient()
+ const fluidTypes = useRecoilValue(fluidTypeState)
const [performanceIndicators, setPerformanceIndicators] = useState<
PerformanceIndicator[]
>([])
-
const [currentTimePeriod, setCurrentTimePeriod] = useState<TimePeriod | null>(
null
)
- const [
- comparisonTimePeriod,
- setComparisonTimePeriod,
- ] = useState<TimePeriod | null>(null)
const [isLoaded, setIsLoaded] = useState<boolean>(false)
+ const performanceIndicatorService = new PerformanceIndicatorService()
+ const configService = new ConfigService()
+ const fluidConfig = configService.getFluidConfig()
+
useEffect(() => {
let subscribed = true
async function populatePerformanceIndicators() {
@@ -64,7 +64,6 @@ const MultiFluidIndicatorsContainer: React.FC<MultiFluidIndicatorsContainerProps
if (fetchedPerformanceIndicators) {
setPerformanceIndicators(fetchedPerformanceIndicators)
setCurrentTimePeriod(periods.timePeriod)
- setComparisonTimePeriod(periods.comparisonTimePeriod)
}
}
setIndicatorsLoaded()
@@ -76,8 +75,6 @@ const MultiFluidIndicatorsContainer: React.FC<MultiFluidIndicatorsContainerProps
}
}, [timeStep, fluidTypes])
- const performanceIndicatorService = new PerformanceIndicatorService()
-
return (
<>
{isLoaded ? (
@@ -91,17 +88,34 @@ const MultiFluidIndicatorsContainer: React.FC<MultiFluidIndicatorsContainerProps
performanceIndicator={performanceIndicatorService.aggregatePerformanceIndicators(
performanceIndicators
)}
- timePeriodText={convertDateByTimeStep(
- comparisonTimePeriod,
- timeStep
- )}
- timeStep={timeStep}
- />
- <IndicatorContainerSwitcher
- performanceIndicators={performanceIndicators}
timeStep={timeStep}
- comparisonTimePeriod={comparisonTimePeriod}
/>
+ <div>
+ <span className="text-16-normal-uppercase details-title">
+ {t('INDICATOR.DETAIL')}
+ {convertDateByTimeStep(currentTimePeriod, timeStep, true)}
+ </span>
+ {fluidConfig.map((fluid, index) => {
+ return fluidTypes.includes(fluid.fluidTypeId) ? (
+ <FluidPerformanceIndicator
+ key={index}
+ fluidType={fluid.fluidTypeId}
+ performanceIndicator={
+ performanceIndicators[fluid.fluidTypeId]
+ }
+ />
+ ) : null
+ })}
+ {fluidConfig.map((fluid, index) => {
+ return fluidTypes.includes(fluid.fluidTypeId) ? null : (
+ <KonnectorViewerListItem
+ key={index}
+ fluidConfig={fluid}
+ isParam={false}
+ />
+ )
+ })}
+ </div>
</div>
</div>
) : null}
@@ -109,4 +123,4 @@ const MultiFluidIndicatorsContainer: React.FC<MultiFluidIndicatorsContainerProps
)
}
-export default translate()(withClient(MultiFluidIndicatorsContainer))
+export default HomeIndicators
diff --git a/src/components/Home/HomeView.tsx b/src/components/Home/HomeView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f097fca20ac48292360fb56adac64ada4e8661cb
--- /dev/null
+++ b/src/components/Home/HomeView.tsx
@@ -0,0 +1,179 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { useClient } from 'cozy-client'
+import { useRecoilState, useRecoilValue } from 'recoil'
+
+import { TimeStep } from 'enum/timeStep.enum'
+import { fluidStatusState, fluidTypeState } from 'atoms/fluidState.state'
+import { previousTimeStepState } from 'atoms/chart.state'
+
+import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
+import FluidChart from 'components/FluidChart/FluidChart'
+import ConsumptionNavigator from 'components/ConsumptionNavigator/ConsumptionNavigator'
+import HomeIndicators from 'components/Home/HomeIndicators'
+import ChallengeCardLink from 'components/Challenge/ChallengeCardLink'
+import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
+import OldFluidDataModal from 'components/Home/OldFluidDataModal'
+import { DateTime } from 'luxon'
+import { userProfileState } from 'atoms/userProfile.state'
+import UserProfileService from 'services/userProfile.service'
+import { FluidType } from 'enum/fluid.enum'
+
+const HomeView: React.FC = () => {
+ const client = useClient()
+ const fluidTypes = useRecoilValue(fluidTypeState)
+ const fluidStatus = useRecoilValue(fluidStatusState)
+ const [previousTimeStep, setPreviousTimeStep] = useRecoilState(
+ previousTimeStepState
+ )
+ const [userProfile, setUserProfile] = useRecoilState(userProfileState)
+
+ const [timeStep, setTimeStep] = useState<TimeStep>(
+ previousTimeStep !== TimeStep.HALF_AN_HOUR ? previousTimeStep : TimeStep.DAY
+ )
+ const [resetRefenceDate, setResetReferenceDate] = useState<boolean>(false)
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const [isChartLoading, setChartLoading] = useState<boolean>(true)
+ const [isIndicatorsLoading, setIndicatorsLoading] = useState<boolean>(true)
+ const [openOldFluidDataModal, setopenOldFluidDataModal] = useState(false)
+ const fluidOldData: FluidType[] = []
+
+ const updateProfileHaveSeenOldFluidModal = useCallback(async () => {
+ const userProfileService = new UserProfileService(client)
+ await userProfileService
+ .updateUserProfile({ haveSeenOldFluidModal: DateTime.local() })
+ .then(updatedUserProfile => {
+ updatedUserProfile && setUserProfile(updatedUserProfile)
+ })
+ }, [setUserProfile])
+
+ const setChartLoaded = () => {
+ setChartLoading(false)
+ }
+
+ const setIndicatorsLoaded = () => {
+ setIndicatorsLoading(false)
+ }
+
+ const handleClickTimeStepForNavigation = (_timeStep: TimeStep) => {
+ setResetReferenceDate(true)
+ setTimeStep(_timeStep)
+ setPreviousTimeStep(_timeStep)
+ }
+
+ const handleClickTimeStepForFluidContainer = (_timeStep: TimeStep) => {
+ setResetReferenceDate(false)
+ setTimeStep(_timeStep)
+ }
+
+ const defineHeaderHeight = (height: number) => {
+ setHeaderHeight(height)
+ }
+ const checkFluidDataPeriod = async () => {
+ for (const fluid of fluidStatus) {
+ let diffInDays = 0
+ if (fluid && fluid.lastDataDate) {
+ const dateToCompare = fluid.lastDataDate
+ diffInDays = dateToCompare.diffNow('days').toObject().days || 0
+ if (diffInDays < -5 && fluid.status !== null) {
+ !fluidOldData.includes(fluid.fluidType) &&
+ fluidOldData.push(fluid.fluidType)
+ }
+ }
+ }
+ if (fluidOldData.length > 0) {
+ if (userProfile.haveSeenOldFluidModal === false) {
+ //if user never has never seen the modal
+ await updateProfileHaveSeenOldFluidModal()
+ return setopenOldFluidDataModal(true)
+ } else if (userProfile.haveSeenOldFluidModal) {
+ const dateToCompare = userProfile.haveSeenOldFluidModal
+ //if user has seen the modal since more than a day
+ const diff = dateToCompare.diffNow('hours').toObject().hours
+ if (diff && diff < -23) {
+ updateProfileHaveSeenOldFluidModal()
+ return setopenOldFluidDataModal(true)
+ } else return setopenOldFluidDataModal(false)
+ }
+ }
+ }
+
+ const handleCloseClick = () => {
+ setopenOldFluidDataModal(false)
+ }
+
+ useEffect(() => {
+ async function checkData() {
+ await checkFluidDataPeriod()
+ }
+ checkData()
+ }, [fluidStatus])
+
+ return (
+ <React.Fragment>
+ <CozyBar />
+ {fluidTypes && fluidTypes.length > 0 ? (
+ <>
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ textKey={'COMMON.APP_PRESENTATION'}
+ >
+ <ConsumptionNavigator
+ fluidTypes={fluidTypes}
+ multiFluid={true}
+ timeStep={timeStep}
+ handleClickTimeStep={handleClickTimeStepForNavigation}
+ />
+ </Header>
+ <Content height={headerHeight}>
+ {(isChartLoading || isIndicatorsLoading) && (
+ <div className="content-view-loading">
+ <StyledSpinner size="5em" />
+ </div>
+ )}
+ <div
+ className={`${
+ isChartLoading || isIndicatorsLoading
+ ? 'chart-indicator-none'
+ : 'chart-indicator-block'
+ }`}
+ >
+ <FluidChart
+ timeStep={timeStep}
+ fluidTypes={fluidTypes}
+ resetReferenceDate={resetRefenceDate}
+ multiFluid={true}
+ handleClickTimeStep={handleClickTimeStepForFluidContainer}
+ setChartLoaded={setChartLoaded}
+ />
+ <HomeIndicators
+ timeStep={timeStep}
+ setIndicatorsLoaded={setIndicatorsLoaded}
+ />
+ <ChallengeCardLink />
+ </div>
+ </Content>
+ {fluidStatus && (
+ <OldFluidDataModal
+ fluidStatus={fluidStatus}
+ fluidOldData={fluidOldData}
+ open={openOldFluidDataModal}
+ handleCloseClick={handleCloseClick}
+ ></OldFluidDataModal>
+ )}
+ </>
+ ) : (
+ <>
+ <Header setHeaderHeight={defineHeaderHeight}></Header>
+ <Content height={headerHeight}>
+ <KonnectorViewerList isParam={false} />
+ </Content>
+ </>
+ )}
+ </React.Fragment>
+ )
+}
+
+export default HomeView
diff --git a/src/components/ContentComponents/OldFluidDataModal/OldFluidDataModal.tsx b/src/components/Home/OldFluidDataModal.tsx
similarity index 74%
rename from src/components/ContentComponents/OldFluidDataModal/OldFluidDataModal.tsx
rename to src/components/Home/OldFluidDataModal.tsx
index b7f39c857d35cc235b81ee5f6ded29710ddfd25f..78d3798830ce041d30c94770ac33a6846daf7592 100644
--- a/src/components/ContentComponents/OldFluidDataModal/OldFluidDataModal.tsx
+++ b/src/components/Home/OldFluidDataModal.tsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import Modal from 'components/CommonKit/Modal/Modal'
import WarnCross from 'assets/icons/ico/warn-cross.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
@@ -7,25 +7,25 @@ import StyledButton from 'components/CommonKit/Button/StyledButton'
import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
import { Redirect } from 'react-router-dom'
-import { IFluidStatus } from 'services/fluidService'
import { FluidType } from 'enum/fluid.enum'
+import { FluidStatus } from 'models'
interface OldFluidDataModalProps {
- opened: boolean
- t: Function
- fluidStatus: IFluidStatus[]
+ open: boolean
+ fluidStatus: FluidStatus[]
+ fluidOldData: FluidType[]
handleCloseClick: () => void
- handleStartClick: () => void
}
const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
- opened,
- t,
+ open,
fluidStatus,
+ fluidOldData,
handleCloseClick,
}: OldFluidDataModalProps) => {
+ const { t } = useI18n()
const [konnectorError, setkonnectorError] = useState<boolean>(false)
- const [erroredKonnectors, seterroredKonnectors] = useState<FluidType[]>([])
+ const [erroredKonnectors] = useState<FluidType[]>([])
const [redirect, setRedirect] = useState(false)
const checkFluidDataDate = () => {
@@ -33,7 +33,8 @@ const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
fluidStatus.length > 0 &&
fluidStatus.forEach(fluid => {
if (fluid.status === 'errored') {
- erroredKonnectors.push(fluid.fluidType)
+ !erroredKonnectors.includes(fluid.fluidType) &&
+ erroredKonnectors.push(fluid.fluidType)
}
})
if (erroredKonnectors.length > 0) setkonnectorError(true)
@@ -45,7 +46,7 @@ const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
}
const redirectToKonnectors = () => {
if (redirect) {
- return <Redirect to="/parameters" />
+ return <Redirect to="/options" />
}
}
@@ -55,7 +56,7 @@ const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
return (
<>
- <Modal open={opened} handleCloseClick={handleCloseClick}>
+ <Modal open={open} handleCloseClick={handleCloseClick}>
<div className="od-content">
<div className="od-warning">
<StyledIcon icon={WarnCross} size={40} />
@@ -91,6 +92,18 @@ const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
<div className="providerProblem">
<p className="text-16-normal">{t('modalOldData.problem')}</p>
<p className="text-16-normal">{t('modalOldData.contact')}</p>
+ <ul className="od-konnectorsList">
+ {fluidOldData.map((err, index) => {
+ return (
+ <li key={index}>
+ {err === FluidType.ELECTRICITY &&
+ t('FLUID.ELECTRICITY.provider')}
+ {err === FluidType.WATER && t('FLUID.WATER.provider')}
+ {err === FluidType.GAS && t('FLUID.GAS.provider')}
+ </li>
+ )
+ })}
+ </ul>
<StyledButton onClick={handleCloseClick}>Ok</StyledButton>
</div>
)}
@@ -100,4 +113,4 @@ const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
)
}
-export default translate()(OldFluidDataModal)
+export default OldFluidDataModal
diff --git a/src/components/Hooks/userInstanceSettings.tsx b/src/components/Hooks/userInstanceSettings.tsx
index eb05ff8b973ea275f12537a16fe28ea3c88122d1..91d22c9801cd5079e38b0e7d46dc7e6877ffaaf4 100644
--- a/src/components/Hooks/userInstanceSettings.tsx
+++ b/src/components/Hooks/userInstanceSettings.tsx
@@ -1,8 +1,9 @@
import { useState, useEffect } from 'react'
import get from 'lodash/get'
-import { Client } from 'cozy-client'
+import { useClient } from 'cozy-client'
-const userInstanceSettings = (client: Client) => {
+const userInstanceSettings = () => {
+ const client = useClient()
const [settings, setSettings] = useState({})
const [fetchStatus, setFetchStatus] = useState('idle')
@@ -12,7 +13,7 @@ const userInstanceSettings = (client: Client) => {
const response = await client
.getStackClient()
.fetchJSON('GET', '/settings/instance')
- setSettings(get(response, 'data.attributes'), {})
+ setSettings(get(response, 'data.attributes'))
setFetchStatus('loaded')
} catch (error) {
setFetchStatus('failed')
diff --git a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
similarity index 88%
rename from src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx
rename to src/components/Konnector/KonnectorViewerCard.tsx
index f949248f06629527f21ba185b33809a5b767cfc3..91d320838e53887d0bd0db2ce50e2c764ba989b1 100644
--- a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -1,45 +1,39 @@
import React, { useState, useEffect, useRef } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
import { FluidType } from 'enum/fluid.enum'
-
-import { withClient, Client } from 'cozy-client'
-import { translate } from 'cozy-ui/react/I18n'
-
+import { JobState } from 'enum/jobState.enum'
+import { Konnector, Trigger, TriggerState, FluidConfig } from 'models'
+import AccountService from 'services/account.service'
+import TriggerService from 'services/triggers.service'
import { getPicto, getAddPicto, getParamPicto } from 'utils/picto'
import { getFluidType } from 'utils/utils'
+
import chevronDown from 'assets/icons/ico/chevron-down.svg'
import chevronUp from 'assets/icons/ico/chevron-up.svg'
-
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-
import failurePicto from 'assets/png/picto/picto-failure.png'
-
-import KonnectorNotFound from 'components/ContentComponents/Konnector/KonnectorNotFound'
-import KonnectorForm from 'components/ContentComponents/Konnector/KonnectorForm'
-import KonnectorResult from 'components/ContentComponents/Konnector/KonnectorResult'
-import KonnectorLaunch from 'components/ContentComponents/Konnector/KonnectorLaunch'
-
-import { Konnector, Trigger, TriggerState, FluidConfig } from 'models'
-import AccountService from 'services/account.service'
-import TriggerService from 'services/triggers.service'
-import { JobState } from 'enum/jobState.enum'
+import ConnectionNotFound from 'components/Connection/ConnectionNotFound'
+import ConnectionForm from 'components/Connection/ConnectionForm'
+import ConnectionResult from 'components/Connection/ConnectionResult'
+import ConnectionLaunch from 'components/Connection/ConnectionLaunch'
interface KonnectorViewerCardProps {
fluidConfig: FluidConfig
konnector: Konnector
- client: Client
+
isParam: boolean
- t: Function
}
const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
fluidConfig,
konnector,
- client,
isParam,
- t,
}: KonnectorViewerCardProps) => {
+ const { t } = useI18n()
+ const client = useClient()
const [account, setAccount] = useState<Account | null>(null)
const [trigger, setTrigger] = useState<Trigger | null>(null)
const [triggerState, setTriggerState] = useState<TriggerState | null>(null)
@@ -99,7 +93,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
setLaunch(true)
}
- const handleKonnectorLaunch = async () => {
+ const handleConnectionLaunch = async () => {
if (trigger) {
await updateState(trigger)
}
@@ -172,24 +166,24 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
className={`accordion-content ${setActive}`}
>
{!konnector ? (
- <KonnectorNotFound
+ <ConnectionNotFound
konnectorSlug={fluidConfig.konnectorConfig.slug}
/>
) : shouldLaunch && trigger ? (
- <KonnectorLaunch
+ <ConnectionLaunch
trigger={trigger}
konnector={konnector}
type={type}
- handleKonnectorLaunch={handleKonnectorLaunch}
+ handleConnectionLaunch={handleConnectionLaunch}
/>
) : account && !loginFailed ? (
- <KonnectorResult
+ <ConnectionResult
account={account}
konnector={konnector}
handleJobState={handleJobState}
/>
) : (
- <KonnectorForm
+ <ConnectionForm
fluidConfig={fluidConfig}
konnector={konnector}
account={account}
@@ -204,4 +198,4 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
</>
)
}
-export default translate()(withClient(KonnectorViewerCard))
+export default KonnectorViewerCard
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..715b89b47e373543e08423ac58b1349b2624f662
--- /dev/null
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useRecoilValue } from 'recoil'
+
+import { FluidConfig } from 'models'
+import { fluidTypeState } from 'atoms/fluidState.state'
+import ConfigService from 'services/fluidConfig.service'
+
+import KonnectorViewerListItem from 'components/Konnector/KonnectorViewerListItem'
+
+interface KonnectorViewerListProps {
+ isParam: boolean
+}
+
+const KonnectorViewerList: React.FC<KonnectorViewerListProps> = ({
+ isParam = false,
+}: KonnectorViewerListProps) => {
+ const { t } = useI18n()
+ const fluidConfigs: FluidConfig[] = new ConfigService().getFluidConfig()
+ const fluidTypes = useRecoilValue(fluidTypeState)
+ return (
+ <div className="kv-root">
+ <div className="kv-content">
+ <div className="kv-header text-14-normal-uppercase">
+ {t('KONNECTORCONFIG.TITLE_CONNECTION')}
+ </div>
+ <div>
+ {fluidConfigs.map((item: FluidConfig, index: number) => {
+ return fluidTypes.includes(item.fluidTypeId) ? (
+ <KonnectorViewerListItem
+ isParam={isParam}
+ key={index}
+ fluidConfig={item}
+ />
+ ) : null
+ })}
+ {fluidConfigs.map((item: FluidConfig, index: number) => {
+ return fluidTypes.includes(item.fluidTypeId) ? null : (
+ <KonnectorViewerListItem
+ isParam={isParam}
+ key={index}
+ fluidConfig={item}
+ />
+ )
+ })}
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default KonnectorViewerList
diff --git a/src/components/ContentComponents/KonnectorViewer/KonnectorViewer.tsx b/src/components/Konnector/KonnectorViewerListItem.tsx
similarity index 75%
rename from src/components/ContentComponents/KonnectorViewer/KonnectorViewer.tsx
rename to src/components/Konnector/KonnectorViewerListItem.tsx
index 9d0d191dad44a411d47979cfca031b37582cd755..3cb48f4d33583262448e91622f93cd876a288690 100644
--- a/src/components/ContentComponents/KonnectorViewer/KonnectorViewer.tsx
+++ b/src/components/Konnector/KonnectorViewerListItem.tsx
@@ -1,22 +1,21 @@
import React, { useState, useEffect } from 'react'
-import { withClient, Client } from 'cozy-client'
+import { useClient } from 'cozy-client'
import { Konnector, FluidConfig } from 'models'
import KonnectorService from 'services/konnector.service'
-import KonnectorViewerCard from 'components/ContentComponents/KonnectorViewer/KonnectorViewerCard'
+import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard'
-export interface KonnectorViewerProps {
+export interface KonnectorViewerListItemProps {
fluidConfig: FluidConfig
- client: Client
isParam: boolean
}
-const KonnectorViewer: React.FC<KonnectorViewerProps> = ({
+const KonnectorViewerListItem: React.FC<KonnectorViewerListItemProps> = ({
fluidConfig,
- client,
isParam = false,
-}: KonnectorViewerProps) => {
+}: KonnectorViewerListItemProps) => {
+ const client = useClient()
const [konnector, setKonnector] = useState<Konnector | null>(null)
const [loaded, setLoaded] = useState<boolean>(false)
@@ -53,4 +52,4 @@ const KonnectorViewer: React.FC<KonnectorViewerProps> = ({
)
}
-export default withClient(KonnectorViewer)
+export default KonnectorViewerListItem
diff --git a/src/components/ContainerComponents/LegalNoticeContainer/LegalNoticeContainer.tsx b/src/components/LegalNotice/LegalNoticeLink.tsx
similarity index 75%
rename from src/components/ContainerComponents/LegalNoticeContainer/LegalNoticeContainer.tsx
rename to src/components/LegalNotice/LegalNoticeLink.tsx
index e5d82a9e0d5dc47587a176c492b86287056d115a..9118ef5f425c3c7289e8b8750ab67a9970400dd7 100644
--- a/src/components/ContainerComponents/LegalNoticeContainer/LegalNoticeContainer.tsx
+++ b/src/components/LegalNotice/LegalNoticeLink.tsx
@@ -1,25 +1,20 @@
import React from 'react'
import { NavLink } from 'react-router-dom'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
-interface LegalNoticeContainerProps {
- t: Function
-}
-
-const LegalNoticeContainer: React.FC<LegalNoticeContainerProps> = ({
- t,
-}: LegalNoticeContainerProps) => {
+const LegalNoticeLink: React.FC = () => {
+ const { t } = useI18n()
return (
<div className="legal-notice-root">
<div className="legal-notice-content">
<div className="legal-notice-header text-14-normal-uppercase">
{t('LEGAL.TITLE_LEGAL')}
</div>
- <NavLink className="legal-notice-card-link" to="parameters/legalnotice">
+ <NavLink className="legal-notice-card-link" to="options/legalnotice">
<StyledCard>
<div className="legal-notice-card">
<div className="legal-notice-card-content">
@@ -40,4 +35,4 @@ const LegalNoticeContainer: React.FC<LegalNoticeContainerProps> = ({
)
}
-export default translate()(LegalNoticeContainer)
+export default LegalNoticeLink
diff --git a/src/components/ContainerComponents/ViewContainer/LegalNoticeViewContainer.tsx b/src/components/LegalNotice/LegalNoticeView.tsx
similarity index 98%
rename from src/components/ContainerComponents/ViewContainer/LegalNoticeViewContainer.tsx
rename to src/components/LegalNotice/LegalNoticeView.tsx
index ac17fa31bf2cda767983b26c2f47f1e085828871..61526a68473122b737ab718f0f02c2656c480d27 100644
--- a/src/components/ContainerComponents/ViewContainer/LegalNoticeViewContainer.tsx
+++ b/src/components/LegalNotice/LegalNoticeView.tsx
@@ -1,9 +1,9 @@
import React, { useState } from 'react'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
-const LegalNoticeViewContainer: React.FC = () => {
+const LegalNoticeView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
const defineHeaderHeight = (height: number) => {
setHeaderHeight(height)
@@ -328,4 +328,4 @@ const LegalNoticeViewContainer: React.FC = () => {
)
}
-export default LegalNoticeViewContainer
+export default LegalNoticeView
diff --git a/src/components/ContentComponents/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
similarity index 68%
rename from src/components/ContentComponents/Navbar/Navbar.tsx
rename to src/components/Navbar/Navbar.tsx
index 494cf4063db2ae7cc7a67a4c902c1b4eedb14c15..7850d048e0a7884822f9126856141c4fdaf0f318 100644
--- a/src/components/ContentComponents/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,6 +1,5 @@
-import React, { useContext } from 'react'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-import { translate } from 'cozy-ui/react/I18n'
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { NavLink } from 'react-router-dom'
import ConsoIconOn from 'assets/icons/tabbar/conso/conso-on.svg'
@@ -11,22 +10,16 @@ import ParameterIconOn from 'assets/icons/tabbar/parametre/parametre-on.svg'
import ParameterIconOff from 'assets/icons/tabbar/parametre/parametre-off.svg'
import EcogestesIconOn from 'assets/icons/tabbar/ecogeste/ecogeste-on.svg'
import EcogestesIconOff from 'assets/icons/tabbar/ecogeste/ecogeste-off.svg'
-// import ProfileIconOn from 'assets/icons/tabbar/profile/profile-on.svg'
-// import ProfileIconOff from 'assets/icons/tabbar/profile/profile-off.svg'
import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
import logoTiga from 'assets/png/logo-TIGA.png'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useRecoilValue } from 'recoil'
+import { challengeNotificationState } from 'atoms/notification.state'
-interface NavbarProps {
- t: Function
-}
+export const Navbar = () => {
+ const { t } = useI18n()
+ const challengeNotification = useRecoilValue(challengeNotificationState)
-export const Navbar = ({ t }: NavbarProps) => {
- const { challengeNotification, userProfile } = useContext(AppContext)
- let nbNotifEcogest = 0
- if (userProfile != null && userProfile.notificationEcogesture != null) {
- nbNotifEcogest = userProfile.notificationEcogesture.length
- }
return (
<aside className="o-sidebar">
<nav>
@@ -62,34 +55,20 @@ export const Navbar = ({ t }: NavbarProps) => {
className="c-nav-link"
activeClassName="is-active"
>
- {nbNotifEcogest > 0 && (
- <div className="nb-challenge-notif">{nbNotifEcogest}</div>
- )}
<StyledIcon className="c-nav-icon off" icon={EcogestesIconOff} />
<StyledIcon className="c-nav-icon on" icon={EcogestesIconOn} />
{t('Nav.ECOGESTURES')}
</NavLink>
</li>
- {/* <li className="c-nav-item">
- <NavLink
- to="/profile"
- className="c-nav-link"
- activeClassName="is-active"
- >
- <StyledIcon className="c-nav-icon off" icon={ProfileIconOff} />
- <StyledIcon className="c-nav-icon on" icon={ProfileIconOn} />
- {t('Nav.profile')}
- </NavLink>
- </li> */}
<li className="c-nav-item">
<NavLink
- to="/parameters"
+ to="/options"
className="c-nav-link"
activeClassName="is-active"
>
<StyledIcon className="c-nav-icon off" icon={ParameterIconOff} />
<StyledIcon className="c-nav-icon on" icon={ParameterIconOn} />
- {t('Nav.parameters')}
+ {t('Nav.options')}
</NavLink>
</li>
</ul>
@@ -106,5 +85,4 @@ export const Navbar = ({ t }: NavbarProps) => {
)
}
-// translate() provide t() to use translations (ex: locales/en.json)
-export default translate()(Navbar)
+export default Navbar
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6cdbf2f1678986ff19731d31e22d28a8974a47a3
--- /dev/null
+++ b/src/components/Options/OptionsView.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
+import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
+import ReportOptions from 'components/Options/ReportOptions'
+import FAQLink from 'components/FAQ/FAQLink'
+import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
+import Version from 'components/Version/Version'
+
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
+import logoTiga from 'assets/png/logo-TIGA.png'
+
+const OptionsView: React.FC = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const defineHeaderHeight = (height: number) => {
+ setHeaderHeight(height)
+ }
+ return (
+ <>
+ <CozyBar titleKey={'COMMON.APP_OPTIONS_TITLE'} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'COMMON.APP_OPTIONS_TITLE'}
+ ></Header>
+ <Content height={headerHeight}>
+ <KonnectorViewerList isParam={true} />
+ <ReportOptions />
+ <FAQLink />
+ <LegalNoticeLink />
+ <div className="parameters-logos">
+ <StyledIcon
+ className="logo-grand-lyon-parameters"
+ icon={logoGrandLyon}
+ size={100}
+ />
+ <img className="logo-tiga-parameters" src={logoTiga} />
+ </div>
+ <Version />
+ </Content>
+ </>
+ )
+}
+
+export default OptionsView
diff --git a/src/components/ContentComponents/Report/Report.tsx b/src/components/Options/ReportOptions.tsx
similarity index 60%
rename from src/components/ContentComponents/Report/Report.tsx
rename to src/components/Options/ReportOptions.tsx
index 30f8649ab0dd2338aa5f7748d261b3c2168b61f6..4ba49f8528cfa5886b6ae2c15c96ed373c81d841 100644
--- a/src/components/ContentComponents/Report/Report.tsx
+++ b/src/components/Options/ReportOptions.tsx
@@ -1,31 +1,29 @@
-import React, { useContext, useEffect } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
-import { AppContext } from 'components/Contexts/AppContextProvider'
+import React, { useCallback } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
+import { useRecoilState } from 'recoil'
import UserProfileService from 'services/userProfile.service'
-import { Client, withClient } from 'cozy-client'
+import { userProfileState } from 'atoms/userProfile.state'
+import { UserProfile } from 'models'
-interface ReportProps {
- t: Function
- client: Client
-}
-
-const Report: React.FC<ReportProps> = ({ t, client }: ReportProps) => {
- const { userProfile, setUserProfile } = useContext(AppContext)
+const ReportOptions: React.FC = () => {
+ const { t } = useI18n()
+ const client = useClient()
+ const [userProfile, setUserProfile] = useRecoilState<UserProfile>(
+ userProfileState
+ )
- const userProfileService = new UserProfileService(client)
- const updateUserProfileReport = async (value: boolean) => {
- const updatedProfile = await userProfileService.updateUserProfile({
- report: value,
- })
- if (updatedProfile) {
- setUserProfile(updatedProfile)
- }
- }
- useEffect(() => {
- //init report to true
- if (userProfile && userProfile.report === undefined)
- updateUserProfileReport(true)
- }, [userProfile])
+ const updateUserProfileReport = useCallback(
+ async (value: boolean) => {
+ const userProfileService = new UserProfileService(client)
+ await userProfileService
+ .updateUserProfile({ report: value })
+ .then(updatedUserProfile => {
+ updatedUserProfile && setUserProfile(updatedUserProfile)
+ })
+ },
+ [setUserProfile]
+ )
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
e.target.value === 'true'
@@ -72,4 +70,4 @@ const Report: React.FC<ReportProps> = ({ t, client }: ReportProps) => {
)
}
-export default translate()(withClient(Report))
+export default ReportOptions
diff --git a/src/components/ContentComponents/PerformanceIndicator/FluidPerformanceIndicator.tsx b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
similarity index 58%
rename from src/components/ContentComponents/PerformanceIndicator/FluidPerformanceIndicator.tsx
rename to src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
index 915c82fe2c1ad7acaf22fe7f5a6eec7d36244fa0..64c26c94e14a87ac21faaec05f60bf8d1b0224d8 100644
--- a/src/components/ContentComponents/PerformanceIndicator/FluidPerformanceIndicator.tsx
+++ b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import { NavLink } from 'react-router-dom'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { FluidType } from 'enum/fluid.enum'
import { PerformanceIndicator } from 'models'
@@ -10,44 +10,26 @@ import { formatNumberValues } from 'utils/utils'
import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import BlackArrowIcon from 'assets/icons/ico/black-arrow.svg'
+import ConverterService from 'services/converter.service'
interface FluidPerformanceIndicatorProps {
performanceIndicator: PerformanceIndicator
- timePeriodText: string
fluidType: FluidType
- t: Function
}
const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
performanceIndicator,
- timePeriodText,
fluidType,
- t,
}: FluidPerformanceIndicatorProps) => {
+ const { t } = useI18n()
const iconType = getPicto(fluidType)
+ const converterService = new ConverterService()
let displayedValue: string
if (performanceIndicator && performanceIndicator.value)
displayedValue = formatNumberValues(performanceIndicator.value).toString()
else displayedValue = '-----'
- let perf: number | null = null
- if (
- performanceIndicator &&
- performanceIndicator.value &&
- performanceIndicator.compareValue
- ) {
- perf =
- 100 * (performanceIndicator.value / performanceIndicator.compareValue - 1)
- }
- const perfString = perf ? formatNumberValues(perf) : ''
-
- let perfStatus = 'error'
- if (perf === null) perfStatus = 'nodata'
- else if (perf === 0) perfStatus = 'zero'
- else if (perf > 0) perfStatus = 'positive'
- else if (perf < 0) perfStatus = 'negative'
-
return (
<NavLink
className="fpi-link"
@@ -73,25 +55,19 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
<span className="card-indicator">
{t('FLUID.' + FluidType[fluidType] + '.UNIT')}
</span>
+ <span
+ className={`${FluidType[fluidType] + '-color euro-value'}`}
+ >
+ {performanceIndicator &&
+ performanceIndicator.value &&
+ `${formatNumberValues(
+ converterService.LoadToEuro(
+ performanceIndicator.value,
+ fluidType
+ )
+ )} €`}
+ </span>
</div>
- {perfStatus === 'positive' ||
- perfStatus === 'negative' ||
- perfStatus === 'zero' ? (
- <div className="fpi-content-perf-indicator card-text">
- <span
- className={`fpi-content-perf-indicator-kpi ${perfStatus} card-text-bold`}
- >
- {perfStatus === 'positive' ? '+' : ''}
- {perfString}%
- </span>
- <span> / {timePeriodText}</span>
- </div>
- ) : (
- <div className="fpi-content-perf-indicator card-text">
- <div> {t('INDICATOR.ERROR_NO_COMPARE')} </div>
- <div> {t('INDICATOR.ERROR_NO_COMPARE_REASON')} </div>
- </div>
- )}
</div>
</div>
</div>
@@ -104,4 +80,4 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
)
}
-export default translate()(FluidPerformanceIndicator)
+export default FluidPerformanceIndicator
diff --git a/src/components/ContentComponents/PerformanceIndicator/PerformanceIndicatorContent.tsx b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
similarity index 51%
rename from src/components/ContentComponents/PerformanceIndicator/PerformanceIndicatorContent.tsx
rename to src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
index da149d1fd25d9dd55233c0dabc367b79cd6dc6ce..5ed4dc05a39b27435ea487e0c9e2a5087cfec7de 100644
--- a/src/components/ContentComponents/PerformanceIndicator/PerformanceIndicatorContent.tsx
+++ b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
@@ -1,12 +1,12 @@
import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { TimeStep } from 'enum/timeStep.enum'
import { PerformanceIndicator } from 'models'
import { formatNumberValues } from 'utils/utils'
-import StyledBorderCard from 'components/CommonKit/Card/StyledBorderCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import PileIcon from 'assets/icons/ico/coins.svg'
import GreenIndicatorIcon from 'assets/icons/visu/indicator/green.svg'
import RedIndicatorIcon from 'assets/icons/visu/indicator/red.svg'
@@ -15,18 +15,15 @@ import ErrorIndicatorIcon from 'assets/icons/visu/indicator/error.svg'
import NodataIndicatorIcon from 'assets/icons/visu/indicator/nodata.svg'
interface PerformanceIndicatorContentProps {
- t: Function
performanceIndicator: PerformanceIndicator
- timePeriodText: string
timeStep: TimeStep
}
const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> = ({
- t,
performanceIndicator,
- timePeriodText,
timeStep,
}: PerformanceIndicatorContentProps) => {
+ const { t } = useI18n()
let displayedValue: string
if (performanceIndicator && performanceIndicator.value)
displayedValue = formatNumberValues(performanceIndicator.value).toString()
@@ -38,6 +35,7 @@ const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> =
}
let perf: number | null = null
+ let diffInEuro: number | null = null
if (
performanceIndicator &&
performanceIndicator.value &&
@@ -45,8 +43,10 @@ const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> =
) {
perf =
100 * (performanceIndicator.value / performanceIndicator.compareValue - 1)
+ diffInEuro = performanceIndicator.value - performanceIndicator.compareValue
}
const perfString = perf ? formatNumberValues(perf) : ''
+ const diffString = diffInEuro ? formatNumberValues(diffInEuro) : ''
let perfStatus = ['error', ErrorIndicatorIcon]
if (perf === null && !errorInPerf)
@@ -88,49 +88,74 @@ const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> =
}
return (
- <StyledBorderCard>
- <div className="fpi">
- <div className="fpi-left">
- <div className="fpi-title card-title-on">
- {t('COMMON.PERF_INDICATOR_LABEL')}{' '}
- {t(getRelevantFrequencyLabel(timeStep))}
- </div>
- <div className="fpi-content">
- <StyledIcon
- className="fpi-content-icon"
- icon={perfStatus[1]}
- size={50}
- />
- <div className="fpi-content-perf">
- <div className="fpi-content-perf-result card-result">
- <span>{displayedValue}</span>
- <span className="card-indicator">€</span>
+ <div className="fpi">
+ <div className="fpi-left">
+ <div className="fpi-content">
+ <div className="fpi-content-perf">
+ <div className="fpi-content-perf-result card-result">
+ <div className="icon-line">
+ <StyledIcon
+ className="fpi-content-icon perf-icon"
+ icon={PileIcon}
+ size={35}
+ />
+ <div>
+ <span className="euro-value">{displayedValue}</span>
+ <span className="card-indicator"> €</span>
+ </div>
</div>
- {perfStatus[0] === 'positive' ||
- perfStatus[0] === 'negative' ||
- perfStatus[0] === 'zero' ? (
- <div className="fpi-content-perf-indicator card-text">
- <span
- className={`fpi-content-perf-indicator-kpi ${perfStatus[0]} card-text-bold`}
- >
- {perfStatus[0] === 'positive' ? '+' : ''}
- {perfString}%
- </span>
- <span> / {timePeriodText}</span>
+ </div>
+ {perfStatus[0] === 'positive' ||
+ perfStatus[0] === 'negative' ||
+ perfStatus[0] === 'zero' ? (
+ <div className="fpi-content-perf-indicator bilan-card card-text">
+ <div className="icon-line">
+ <StyledIcon
+ className="fpi-content-icon perf-icon"
+ icon={perfStatus[1]}
+ size={35}
+ />
+ <div className="evolution-text">
+ {t('INDICATOR.BILAN.TEXT1')}
+ <span
+ className={`fpi-content-perf-indicator-kpi ${perfStatus[0]} card-text-bold`}
+ >
+ {perfStatus[0] === 'positive' ? ' + ' : ' '}
+ {perfString}%
+ </span>
+ <br />
+ <span>
+ {t('INDICATOR.BILAN.TEXT2')}
+ <span className="diff-value">{diffString} €</span>
+ <br />
+ {t(
+ 'INDICATOR.BILAN.' +
+ `${getRelevantFrequencyLabel(timeStep)}`
+ )}
+ </span>
+ </div>
</div>
- ) : (
- <div className="fpi-content-perf-indicator card-text">
+ </div>
+ ) : (
+ <div className="fpi-content-perf-indicator card-text error">
+ <StyledIcon
+ className="fpi-content-icon perf-icon"
+ icon={perfStatus[1]}
+ size={35}
+ />
+ <div>
+ {' '}
<div> {t('INDICATOR.ERROR_NO_COMPARE')} </div>
<div> {t('INDICATOR.ERROR_NO_COMPARE_REASON')} </div>
</div>
- )}
- </div>
+ </div>
+ )}
</div>
</div>
- <div className="fpi-right"></div>
</div>
- </StyledBorderCard>
+ <div className="fpi-right"></div>
+ </div>
)
}
-export default translate()(PerformanceIndicatorContent)
+export default PerformanceIndicatorContent
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7b9cf70c6720ac0b89b59b74ac8ba032672e7104
--- /dev/null
+++ b/src/components/Routes/Routes.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import { Route, Switch, Redirect } from 'react-router-dom'
+import { FluidType } from 'enum/fluid.enum'
+
+import HomeView from 'components/Home/HomeView'
+import SingleFluidView from 'components/SingleFluid/SingleFluidView'
+import ChallengeView from 'components/Challenge/ChallengeView'
+import LockedChallengeDetailsViewContainer from 'components/Challenge/LockedChallengeDetailsViewContainer'
+import AvailableChallengeDetailsView from 'components/Challenge/AvailableChallengeDetailsView'
+import OngoingChallengeDetailsView from 'components/Challenge/OngoingChallengeDetailsView'
+import FinishedChallengeDetailsView from 'components/Challenge/FinishedChallengeDetailsView'
+import EcogestureView from 'components/Ecogesture/EcogestureView'
+import OptionsView from 'components/Options/OptionsView'
+import FAQView from 'components/FAQ/FAQView'
+import LegalNoticeView from 'components/LegalNotice/LegalNoticeView'
+
+const Routes = () => {
+ return (
+ <Switch>
+ <Route
+ path="/consumption"
+ render={({ match: { url } }) => (
+ <>
+ <Route
+ path={`${url}/electricité`}
+ component={() => (
+ <SingleFluidView fluidTypes={[FluidType.ELECTRICITY]} />
+ )}
+ />
+ <Route
+ path={`${url}/eau`}
+ component={() => (
+ <SingleFluidView fluidTypes={[FluidType.WATER]} />
+ )}
+ />
+ <Route
+ path={`${url}/gaz`}
+ component={() => <SingleFluidView fluidTypes={[FluidType.GAS]} />}
+ />
+ <Route path={`${url}/`} component={HomeView} exact />
+ </>
+ )}
+ />
+ <Route
+ path="/challenges"
+ render={({ match: { url } }) => (
+ <>
+ <Route
+ path={`${url}/locked`}
+ component={LockedChallengeDetailsViewContainer}
+ />
+ <Route
+ path={`${url}/available`}
+ component={AvailableChallengeDetailsView}
+ />
+ <Route
+ path={`${url}/ongoing`}
+ component={OngoingChallengeDetailsView}
+ />
+ <Route
+ path={`${url}/finished`}
+ component={FinishedChallengeDetailsView}
+ />
+ <Route path={`${url}/`} component={ChallengeView} exact />
+ </>
+ )}
+ />
+ <Route path="/ecogestures" component={EcogestureView} />
+ <Route
+ path="/options"
+ render={({ match: { url } }) => (
+ <>
+ <Route path={`${url}/FAQ`} component={FAQView} />
+ <Route path={`${url}/legalnotice`} component={LegalNoticeView} />
+ <Route path={`${url}/`} component={OptionsView} exact />
+ </>
+ )}
+ />
+ <Redirect from="/" to="/consumption" />
+ <Redirect from="*" to="/consumption" />
+ </Switch>
+ )
+}
+
+export default Routes
diff --git a/src/components/ContainerComponents/IndicatorsContainer/SingleFluidIndicatorsContainer.tsx b/src/components/SingleFluid/SingleFluidIndicators.tsx
similarity index 76%
rename from src/components/ContainerComponents/IndicatorsContainer/SingleFluidIndicatorsContainer.tsx
rename to src/components/SingleFluid/SingleFluidIndicators.tsx
index b378d78cfe624b0f5ccd766cc0f1c86758cd6ef5..cbb60c5f445e2d30ae21641a22d1eda28c424a40 100644
--- a/src/components/ContainerComponents/IndicatorsContainer/SingleFluidIndicatorsContainer.tsx
+++ b/src/components/SingleFluid/SingleFluidIndicators.tsx
@@ -1,36 +1,34 @@
-import React, { useEffect, useContext, useState } from 'react'
-import { withClient, Client } from 'cozy-client'
-import { translate } from 'cozy-ui/react/I18n'
-import { AppContext } from 'components/Contexts/AppContextProvider'
+import React, { useEffect, useState } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import { useClient } from 'cozy-client'
+import { useRecoilValue } from 'recoil'
import { TimeStep } from 'enum/timeStep.enum'
import { FluidType } from 'enum/fluid.enum'
+import { fluidTypeState } from 'atoms/fluidState.state'
import { TimePeriod, PerformanceIndicator } from 'models'
-
+import { convertDateByTimeStep } from 'utils/date'
import TimePeriodService from 'services/timePeriod.service'
import ConsumptionService from 'services/consumption.service'
import PerformanceIndicatorService from 'services/performanceIndicator.service'
-import PerformanceIndicatorContent from 'components/ContentComponents/PerformanceIndicator/PerformanceIndicatorContent'
-import { convertDateByTimeStep } from 'utils/date'
-import RedirectionMiniCard from 'components/ContentComponents/Card/RedirectionMiniCard'
-interface SingleFluidIndicatorsContainerProps {
+import PerformanceIndicatorContent from 'components/PerformanceIndicator/PerformanceIndicatorContent'
+import SingleFluidRedirect from 'components/SingleFluid/SingleFluidRedirect'
+
+interface SingleFluidIndicatorsProps {
timeStep: TimeStep
setIndicatorsLoaded(): void
- client: Client
fluidTypes: FluidType[]
- t: Function
}
-const SingleFluidIndicatorsContainer: React.FC<SingleFluidIndicatorsContainerProps> = ({
+const SingleFluidIndicators: React.FC<SingleFluidIndicatorsProps> = ({
timeStep,
setIndicatorsLoaded,
- client,
fluidTypes,
- t,
-}: SingleFluidIndicatorsContainerProps) => {
- const appContext = useContext(AppContext)
- const allConfiguredFluidTypes = appContext.fluidTypes
+}: SingleFluidIndicatorsProps) => {
+ const { t } = useI18n()
+ const client = useClient()
+ const allConfiguredFluidTypes = useRecoilValue(fluidTypeState)
const [performanceIndicators, setPerformanceIndicators] = useState<
PerformanceIndicator[]
@@ -47,6 +45,8 @@ const SingleFluidIndicatorsContainer: React.FC<SingleFluidIndicatorsContainerPro
)
const [isLoaded, setIsLoaded] = useState<boolean>(false)
+ const performanceIndicatorService = new PerformanceIndicatorService()
+
useEffect(() => {
async function populatePerformanceIndicators() {
const consumptionService = new ConsumptionService(client)
@@ -79,8 +79,6 @@ const SingleFluidIndicatorsContainer: React.FC<SingleFluidIndicatorsContainerPro
populatePerformanceIndicators()
}, [timeStep])
- const performanceIndicatorService = new PerformanceIndicatorService()
-
return (
<>
{isLoaded ? (
@@ -108,10 +106,7 @@ const SingleFluidIndicatorsContainer: React.FC<SingleFluidIndicatorsContainerPro
{t('COMMON.MINI_CARDS_LABEL')}
</div>
<div className="sfi-redirect">
- <RedirectionMiniCard
- fluidTypes={filteredFluidTypes}
- timeStep={timeStep}
- />
+ <SingleFluidRedirect fluidTypes={filteredFluidTypes} />
</div>
</>
)}
@@ -122,4 +117,4 @@ const SingleFluidIndicatorsContainer: React.FC<SingleFluidIndicatorsContainerPro
)
}
-export default translate()(withClient(SingleFluidIndicatorsContainer))
+export default SingleFluidIndicators
diff --git a/src/components/ContentComponents/Card/RedirectionMiniCard.tsx b/src/components/SingleFluid/SingleFluidRedirect.tsx
similarity index 76%
rename from src/components/ContentComponents/Card/RedirectionMiniCard.tsx
rename to src/components/SingleFluid/SingleFluidRedirect.tsx
index b68da80da9f73e51e4032799b3066e55d97e089d..e0cfdd09efb033c596464ce4f53f553a4faf7585 100644
--- a/src/components/ContentComponents/Card/RedirectionMiniCard.tsx
+++ b/src/components/SingleFluid/SingleFluidRedirect.tsx
@@ -1,18 +1,17 @@
import React from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react'
import { FluidType } from 'enum/fluid.enum'
import StyledIconCard from 'components/CommonKit/Card/StyledIconCard'
import { NavLink } from 'react-router-dom'
-export interface RedirectionMiniCard {
+export interface SingleFluidRedirectProps {
fluidTypes: FluidType[]
- t: Function
}
-const RedirectionMiniCard: React.FC<RedirectionMiniCard> = ({
+const SingleFluidRedirect: React.FC<SingleFluidRedirectProps> = ({
fluidTypes,
- t,
-}: RedirectionMiniCard) => {
+}: SingleFluidRedirectProps) => {
+ const { t } = useI18n()
return (
<>
{fluidTypes.map(fluidType => (
@@ -36,4 +35,4 @@ const RedirectionMiniCard: React.FC<RedirectionMiniCard> = ({
)
}
-export default translate()(RedirectionMiniCard)
+export default SingleFluidRedirect
diff --git a/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx b/src/components/SingleFluid/SingleFluidView.tsx
similarity index 67%
rename from src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx
rename to src/components/SingleFluid/SingleFluidView.tsx
index bec27b6b61414ce9218f9cc5310c7124cd5541f6..53d5d42e7832e5a28518d53ab6afa659b360b961 100644
--- a/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx
+++ b/src/components/SingleFluid/SingleFluidView.tsx
@@ -1,27 +1,30 @@
-import React, { useState, useContext } from 'react'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-import FluidChartContainer from 'components/ContainerComponents/FluidChartContainer/FluidChartContainer'
+import React, { useState } from 'react'
+import { useRecoilState } from 'recoil'
+
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
-import ConsumptionNavigator from 'components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator'
-import SingleFluidIndicatorsContainer from 'components/ContainerComponents/IndicatorsContainer/SingleFluidIndicatorsContainer'
-import { AppContext } from 'components/Contexts/AppContextProvider'
+import { previousTimeStepState } from 'atoms/chart.state'
-interface SingleFluidViewContainerProps {
+import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
+import FluidChart from 'components/FluidChart/FluidChart'
+import ConsumptionNavigator from 'components/ConsumptionNavigator/ConsumptionNavigator'
+import SingleFluidIndicators from 'components/SingleFluid/SingleFluidIndicators'
+
+interface SingleFluidViewProps {
fluidTypes: FluidType[]
}
-const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
+const SingleFluidView: React.FC<SingleFluidViewProps> = ({
fluidTypes,
-}: SingleFluidViewContainerProps) => {
- const { setPreviousTimeStep, previousTimeStep } = useContext(AppContext)
+}: SingleFluidViewProps) => {
+ const [previousTimeStep, setPreviousTimeStep] = useRecoilState(
+ previousTimeStepState
+ )
- const [timeStep, setTimeStep] = useState<TimeStep | null>(
- previousTimeStep && previousTimeStep !== TimeStep.HALF_AN_HOUR
- ? previousTimeStep
- : TimeStep.DAY
+ const [timeStep, setTimeStep] = useState<TimeStep>(
+ previousTimeStep !== TimeStep.HALF_AN_HOUR ? previousTimeStep : TimeStep.DAY
)
const [resetRefenceDate, setResetReferenceDate] = useState<boolean>(false)
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -83,7 +86,7 @@ const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
: 'chart-indicator-block'
}`}
>
- <FluidChartContainer
+ <FluidChart
timeStep={timeStep}
fluidTypes={fluidTypes}
resetReferenceDate={resetRefenceDate}
@@ -91,7 +94,7 @@ const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
handleClickTimeStep={handleClickTimeStepForFluidContainer}
setChartLoaded={setChartLoaded}
/>
- <SingleFluidIndicatorsContainer
+ <SingleFluidIndicators
timeStep={timeStep}
setIndicatorsLoaded={setIndicatorsLoaded}
fluidTypes={fluidTypes}
@@ -102,4 +105,4 @@ const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
)
}
-export default SingleFluidViewContainer
+export default SingleFluidView
diff --git a/src/components/Splash/SplashRoot.tsx b/src/components/Splash/SplashRoot.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a0f4711934e7cf5a221a9ebe1ecff28c3aaf1832
--- /dev/null
+++ b/src/components/Splash/SplashRoot.tsx
@@ -0,0 +1,126 @@
+import React, { useState, useEffect, ComponentType, ReactNode } from 'react'
+import { useClient } from 'cozy-client'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+import classNames from 'classnames'
+import { fluidStatusState, fluidTypeState } from 'atoms/fluidState.state'
+import { userProfileState } from 'atoms/userProfile.state'
+import { currentChallengeState } from 'atoms/challenge.state'
+import { challengeNotificationState } from 'atoms/notification.state'
+import InitializationService from 'services/initialization.service'
+
+interface SplashRootProps {
+ fadeTimer?: number
+ splashComponent: ComponentType
+ splashErrorComponent: ComponentType
+ children: ReactNode
+}
+
+/**
+ * Added splash screen if data is not ready
+ * @param params {{ fadeTimer, splashComponent, children }}
+ */
+const SplashRoot = ({
+ fadeTimer = 1000,
+ splashComponent: SplashComponent,
+ splashErrorComponent: SplashErrorComponent,
+ children,
+}: SplashRootProps) => {
+ const client = useClient()
+ const [{ splashEnd, splashStart }, setState] = useState({
+ splashEnd: false,
+ splashStart: false,
+ })
+ const [error, setError] = useState<Error | null>(null)
+ const setUserProfile = useSetRecoilState(userProfileState)
+ const fluidTypes = useRecoilValue(fluidTypeState)
+ const setFluidStatusState = useSetRecoilState(fluidStatusState)
+ const setCurrentChallengeState = useSetRecoilState(currentChallengeState)
+ const setChallengeNotificationState = useSetRecoilState(
+ challengeNotificationState
+ )
+
+ useEffect(() => {
+ let timeoutSplash: NodeJS.Timeout
+ if (splashStart) {
+ timeoutSplash = setTimeout(() => {
+ setState(prev => ({ ...prev, splashEnd: true }))
+ }, fadeTimer)
+ }
+ return () => timeoutSplash && clearTimeout(timeoutSplash)
+ }, [splashStart, fadeTimer])
+
+ useEffect(() => {
+ let subscribed = true
+ const initializationService = new InitializationService(client)
+ async function loadData() {
+ try {
+ await initializationService.initIndex()
+ let profile = await initializationService.initUserProfile()
+ if (subscribed && profile) {
+ const resultChallengeType = await initializationService.initChallengeType(
+ profile.challengeTypeHash
+ )
+ if (
+ subscribed &&
+ resultChallengeType.result &&
+ resultChallengeType.userProfile
+ ) {
+ profile = resultChallengeType.userProfile
+ }
+ const resultEcogesture = await initializationService.initEcogesture(
+ profile.ecogestureHash
+ )
+ if (
+ subscribed &&
+ resultEcogesture.result &&
+ resultEcogesture.userProfile
+ ) {
+ profile = resultEcogesture.userProfile
+ }
+ setUserProfile(profile)
+ await initializationService.initUserChallenge()
+ // const fluidTypes = await initializationService.initFluidTypes()
+ // setFluidTypeState(fluidTypes)
+ const fluidStatus = await initializationService.initFluidStatus()
+ setFluidStatusState(fluidStatus)
+ const currentChallenge = await initializationService.initCurrentChallenge()
+ if (currentChallenge) {
+ setCurrentChallengeState(currentChallenge)
+ const isChallengeOver = await initializationService.isCurrentChallengeOver(
+ currentChallenge,
+ fluidTypes
+ )
+ setChallengeNotificationState(isChallengeOver)
+ }
+ setState(prev => ({
+ ...prev,
+ splashStart: true,
+ }))
+ }
+ } catch (err) {
+ setError(err)
+ }
+ }
+ loadData()
+ return () => {
+ subscribed = false
+ }
+ }, [])
+
+ return (
+ <>
+ {!splashEnd && (
+ <div
+ style={{ transitionDuration: `${fadeTimer / 1000}s` }}
+ className={classNames('splash-root', {
+ ['splash-fade']: splashStart,
+ })}
+ >
+ {!error ? <SplashComponent /> : <SplashErrorComponent />}
+ </div>
+ )}
+ {splashStart && children}
+ </>
+ )
+}
+export default SplashRoot
diff --git a/src/components/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..706d00ec6836dda36163e2a30f2438557751ab0c
--- /dev/null
+++ b/src/components/Splash/SplashScreen.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import Lottie from 'react-lottie'
+import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
+import logoTiga from 'assets/png/logo-TIGA.png'
+
+import * as loadingData from 'assets/anims/splash.json'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+
+const loadingOptions = {
+ loop: true,
+ autoplay: true,
+ animationData: loadingData,
+ rendererSettings: {
+ preserveAspectRatio: 'xMidYMid slice',
+ },
+}
+
+const SplashScreen: React.FC = () => {
+ return (
+ <>
+ <div className="splash-content">
+ <Lottie options={loadingOptions} height={300} width={300} />
+ <div className="splash-logos-container">
+ <StyledIcon
+ className="logo-grand-lyon"
+ icon={logoGrandLyon}
+ size={100}
+ />
+ <img className="logo-tiga" src={logoTiga} />
+ </div>
+ </div>
+ <div className="splash-footer"></div>
+ </>
+ )
+}
+
+export default SplashScreen
diff --git a/src/components/Splash/SplashScreenError.tsx b/src/components/Splash/SplashScreenError.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0999d9b77eab098e4133d3b7d98d0ff462173840
--- /dev/null
+++ b/src/components/Splash/SplashScreenError.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react'
+import Lottie from 'react-lottie'
+import StyledButton from 'components/CommonKit/Button/StyledButton'
+import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
+import logoTiga from 'assets/png/logo-TIGA.png'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+
+import * as loadingData from 'assets/anims/splash.json'
+
+const loadingOptions = {
+ loop: false,
+ autoplay: false,
+ animationData: loadingData,
+ rendererSettings: {
+ preserveAspectRatio: 'xMidYMid slice',
+ },
+}
+
+const SplashScreenError: React.FC = () => {
+ const { t } = useI18n()
+ return (
+ <>
+ <div className="splash-content">
+ <Lottie options={loadingOptions} height={300} width={300} />
+ <div className="splash-logos-container">
+ <StyledIcon
+ className="logo-grand-lyon"
+ icon={logoGrandLyon}
+ size={100}
+ />
+ <img className="logo-tiga" src={logoTiga} />
+ </div>
+ </div>
+ <div className="splash-footer">
+ <div className="splash-footer-error-text text-16-normal">
+ {t('LOADING.ERROR_LOADING')}
+ </div>
+ <StyledButton
+ className="splash-footer-button"
+ onClick={() => window.location.reload()}
+ >
+ {t('LOADING.RELOAD')}
+ </StyledButton>
+ </div>
+ </>
+ )
+}
+
+export default SplashScreenError
diff --git a/src/components/Version/Version.tsx b/src/components/Version/Version.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3f4e58db3c3b462c9956f146231bc5d99abb8ada
--- /dev/null
+++ b/src/components/Version/Version.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { useClient } from 'cozy-client'
+
+const Version: React.FC = () => {
+ const client = useClient()
+ return (
+ <div className="version-root text-14-normal">
+ {`v ${client.appMetadata.version}`}
+ </div>
+ )
+}
+
+export default Version
diff --git a/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx b/src/components/Welcome/WelcomeModal.tsx
similarity index 73%
rename from src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx
rename to src/components/Welcome/WelcomeModal.tsx
index 247efaefa0b1e89e5af9279f960ba1cea67104b7..a68cb78cb1dc2f460283e8e54ce49f25762bfafd 100644
--- a/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx
+++ b/src/components/Welcome/WelcomeModal.tsx
@@ -1,26 +1,28 @@
import React from 'react'
-import { withClient, Client } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react'
import Modal from 'components/CommonKit/Modal/Modal'
import StyledButton from 'components/CommonKit/Button/StyledButton'
-import { translate } from 'cozy-ui/react/I18n'
import userInstanceSettings from 'components/Hooks/userInstanceSettings'
interface WelcomeModalContainerProps {
- handleClose: () => void
- t: Function
- client: Client
+ open: boolean
+ handleCloseClick: () => void
}
const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({
- handleClose,
- t,
- client,
+ open,
+ handleCloseClick,
}: WelcomeModalContainerProps) => {
- const { data: instanceSettings } = userInstanceSettings(client)
+ const { t } = useI18n()
+ const { data: instanceSettings } = userInstanceSettings()
return (
<React.Fragment>
- <Modal open={true} handleCloseClick={handleClose} yellowBorder={true}>
+ <Modal
+ open={open}
+ handleCloseClick={handleCloseClick}
+ yellowBorder={true}
+ >
<div className="wm-header text-24-bold">
{t('COMMON.WELCOME_MODAL_TITLE')}
</div>
@@ -36,7 +38,7 @@ const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({
<div className="wm-connect text-18-bold">
{t('COMMON.WELCOME_MODAL_CONNECT')}
</div>
- <StyledButton className="button-ok" onClick={handleClose}>
+ <StyledButton className="button-ok" onClick={handleCloseClick}>
{t('COMMON.WELCOME_MODAL_OK')}
</StyledButton>
</Modal>
@@ -44,4 +46,4 @@ const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({
)
}
-export default translate()(withClient(WelcomeModalContainer))
+export default WelcomeModalContainer
diff --git a/src/cozy-bar.d.ts b/src/cozy-bar.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b4af830ad6af6a7e9853d2138abb32b13732612
--- /dev/null
+++ b/src/cozy-bar.d.ts
@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module 'cozy-bar' {
+ type TcozyBarInitOpts = {
+ appName: string
+ appNamePrefix: string
+ appSlug?: string
+ lang: string
+ iconPath: string
+ cozyClient: Client
+ cozyURL?: string
+ ssl?: boolean
+ token?: string
+ replaceTitleOnMobile: boolean
+ isPublic?: boolean
+ onLogOut?: () => any
+ }
+
+ declare global {
+ const cozy: {
+ bar: {
+ BarCenter: () => any
+ BarLeft: () => any
+ BarRight: () => any
+ init: (opt: TcozyBarInitOpts) => any
+ setBarCenter: (e: string) => any
+ setBarLeft: (e: string) => any
+ setBarRight: (e: string) => any
+ setLocale: (e: any) => any
+ setTheme: (theme: string, opts?: any) => any
+ updateAccessToken: (e: any) => any
+ }
+ }
+ }
+}
diff --git a/src/cozy-client.d.ts b/src/cozy-client.d.ts
index 9259f339a8958061ff6137eff3899e9fe86b6e35..d14548709e101fdbefd8b510a5f111553f9bd903 100644
--- a/src/cozy-client.d.ts
+++ b/src/cozy-client.d.ts
@@ -1,78 +1,762 @@
-declare module 'cozy-client'
-
-type QueryDefinition = {
- doctype: string
- id: string
- ids: Array
- selector: object
- fields: Array
- indexedFields: Array
- sort: Array
- includes: string
- referenced: string
- limit: null | number
- skip: null | number
- cursor: unknown
-}
+/* eslint-disable @typescript-eslint/interface-name-prefix */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { TRealtimePlugin, RealtimePlugin } from 'cozy-realtime'
+import { TDoctype } from 'doctypes'
-type AppMetaData = {
- slug: string
- version: string
-}
+declare module 'cozy-client' {
+ type QueryDefinition = {
+ where(selector: any)
+ include(relations: string[])
+ }
-type Offline = {
- getDatabase: unknown
-}
-export type Client = {
- find(doctype: string): typeof QueryDefinition
- query(doctype: string): typeof QueryDefinition
- destroy(document: any): typeof QueryDefinition
- save(document: any): typeof QueryDefinition
- create(
- doctype: string,
- entry: object,
- relationships?: object
- ): typeof QueryDefinition
- collection(doctype: string): function
- offline: typeof Offline
- getStackClient: function
- appMetadata: AppMetaData
-}
+ type QueryResult = {
+ data: any
+ included?: any
+ }
-export type QueryId = string
+ type AllCollections =
+ | FileCollection
+ | PermissionsCollection
+ | TriggerCollection
+ | JobCollection
+ | KonnectorCollection
+ | TaskCollection
+ | ObjectiveCollection
+ | AppointmentCollection
-export type QueryDefinitionBuilder = (client: Client) => QueryDefinition
+ interface IClientInstanceOpts {
+ cozyAppEditor: string
+ cozyAppName: string
+ cozyAppNamePrefix: string
+ cozyAppSlug: string
+ cozyDomain: string
+ cozyIconPath: string
+ cozyLocale: string
+ cozyToken: string
+ }
+ interface IClientStackClient {
+ jobs: JobCollection
+ konnectors: KonnectorCollection
+ fetchJSON: Function
+ options: any
+ token: { token: string }
+ uri: string
+ _events: any
+ }
+ interface IClientToJSON {
+ uri: string
+ }
+ interface IClientLogin {
+ token: string
+ uri: string
+ }
+ interface IClientSchema {
+ byDoctype: any
+ client: Client
+ }
-export type QueryOptions = {
- doc?: unknown
- query?: QueryDefinition | QueryDefinitionBuilder
- as?: QueryId
-}
+ export type Client = {
+ appMetadata: any
+ options: IClientLogin
+ idCounter: number
+ isLogged: boolean
+ instanceOptions: IClientInstanceOpts
+ links: any
+ chain: any
+ schema: any
+ plugins: { realtime: TRealtimePlugin; [key: string]: any }
-export type QueryOptionsBuilder<P> = (props: P) => QueryOptions
+ /**
+ * A plugin is a class whose constructor receives the client as first argument.
+ * The main mean of interaction with the client should be with events
+ * like "login"/"logout".
+ *
+ * The plugin system is meant to encourage separation of concerns, modularity
+ * and testability : instead of registering events at module level, please
+ * create a plugin that subscribes to events.
+ *
+ * Plugin instances are stored internally in the `plugins` attribute of the client
+ * and can be accessed via this mean. A plugin class must have the attribute
+ * `pluginName` that will be use as the key in the `plugins` object.
+ *
+ * Two plugins with the same `pluginName` cannot co-exist.
+ *
+ * @example
+ * ```
+ * class AlertPlugin {
+ * constructor(client, options) {
+ * this.client = client
+ * this.options = options
+ * this.handleLogin = this.handleLogin.bind(this)
+ * this.handleLogout = this.handleLogout.bind(this)
+ * this.client.on("login", this.handleLogin)
+ * this.client.on("logout", this.handleLogout)
+ * }
+ *
+ * handleLogin() {
+ * alert(this.options.onLoginAlert)
+ * }
+ *
+ * handleLogout() {
+ * alert(this.options.onLogoutAlert)
+ * }
+ * }
+ *
+ * AlertPlugin.pluginName = 'alerts'
+ *
+ * client.registerPlugin(AlertPlugin, {
+ * onLoginAlert: 'client has logged in !',
+ * onLogoutAlert: 'client has logged out !'
+ * })
+ *
+ * // the instance of the plugin is accessible via
+ * client.plugins.alerts
+ * ```
+ */
+ registerPlugin(Plugin: RealtimePlugin | any, options?: any)
-export type QuerySpecs<P> = {
- [k in string]: QueryOptions | QueryOptionsBuilder<P>
-}
+ /**
+ * Notify the links that they can start and set isLogged to true.
+ *
+ * On mobile, where url/token are set after instantiation, use this method
+ * to set the token and uri via options.
+ *
+ * Emits
+ *
+ * - "beforeLogin" at the beginning, before links have been set up
+ * - "login" when the client is fully logged in and links have been set up
+ *
+ * @param {object} options - Options
+ * @param {string} options.token - If passed, the token is set on the client
+ * @param {string} options.uri - If passed, the uri is set on the client
+ * @returns {Promise} - Resolves when all links have been setup and client is fully logged in
+ *
+ */
+ login(options: IClientLogin): Promise<any>
-export function queryConnect<C extends React.ElementType>(
- querySpecs: QuerySpecs<React.ComponentPropsWithoutRef<C>>
-): (wrappedElement: C) => void
-
-export function withClient<C extends React.ElementType>(
- component: React.ComponentPropsWithoutRef<C>
-): (wrappedElement: C) => void
-
-export type QueryState<D> = {
- id: unknown
- definition: unknown
- fetchStatus: 'pending' | 'loading' | 'loaded' | 'failed'
- lastFetch: null | number
- lastUpdate: null | number
- lastError: null | number
- hasMore: boolean
- count: number
- data: D[]
-}
+ /**
+ * Logs out the client and reset all the links
+ *
+ * Emits
+ *
+ * - "beforeLogout" at the beginning, before links have been reset
+ * - "login" when the client is fully logged out and links have been reset
+ *
+ * @returns {Promise} - Resolves when all links have been reset and client is fully logged out
+ */
+ logout(): Promise<any>
+
+ /**
+ * Forwards to a stack client instance and returns
+ * a [DocumentCollection]{@link https://docs.cozy.io/en/cozy-client/api/cozy-stack-client/#DocumentCollection} instance.
+ *
+ * @param {string} doctype The collection doctype.
+ * @returns {DocumentCollection} Collection corresponding to the doctype
+ */
+ collection(doctype: TDoctype): AllCollections
+ fetch(method: string, path: string, body: any, options?: any): Promise<any>
+ find(doctype: string, selector?: any): QueryDefinition
+ get(doctype: TDoctype, id: string): any
+ validate(document: any): any
+ save(
+ documentType: { _type: TDoctype; [key: string]: any },
+ mutationOptions?: any
+ ): Promise<QueryResult>
+
+ /**
+ * Creates a list of mutations to execute to create a document and its relationships.
+ *
+ * ```js
+ * const baseDoc = { _type: 'io.cozy.todo', label: 'Go hiking' }
+ * // relations can be arrays or single objects
+ * const relationships = {
+ * attachments: [{ _id: 12345, _type: 'io.cozy.files' }, { _id: 6789, _type: 'io.cozy.files' }],
+ * bills: { _id: 9999, _type: 'io.cozy.bills' }
+ * }
+ * client.getDocumentSavePlan(baseDoc, relationships)
+ * ```
+ *
+ * @param {object} document The base document to create
+ * @param {object} relationships The list of relationships to add, as a dictionnary. Keys should be relationship names and values the documents to link.
+ * @returns {Mutation[]} One or more mutation to execute
+ */
+ getDocumentSavePlan(document: any, relationships: any)
+ triggerHook(name: string, document: any): any
+
+ /**
+ * Destroys a document. {before,after}:destroy hooks will be fired.
+ *
+ * @param {Document} document - Document to be deleted
+ * @returns {Document} The document that has been deleted
+ */
+ destroy(document: any): typeof QueryDefinition
+ upload(file: any, dirPath: string, mutationOptions?: any)
+ ensureQueryExists(queryId: string, queryDefinition: any): any
+
+ /**
+ * Executes a query and returns its results.
+ *
+ * Results from the query will be saved internally and can be retrieved via
+ * `getQueryFromState` or directly using `<Query />`. `<Query />` automatically
+ * executes its query when mounted if no fetch policy has been indicated.
+ *
+ * @param {QueryDefinition} queryDefinition - Definition that will be executed
+ * @param {string} options - Options
+ * @param {string} options.as - Names the query so it can be reused (by multiple components for example)
+ * @param {string} options.fetchPolicy - Fetch policy to bypass fetching based on what's already inside the state. See "Fetch policies"
+ * @returns {QueryResult}
+ */
+ query(
+ queryDefinition: QueryDefinition,
+ { update, ...options }?: any
+ ): Promise<QueryResult>
+
+ /**
+ * Will fetch all documents for a `queryDefinition`, automatically fetching more
+ * documents if the total of documents is superior to the pagination limit. Can
+ * result in a lot of network requests.
+ *
+ * @param {QueryDefinition} queryDefinition - Definition to be executed
+ * @param {object} options - Options to the query
+ * @returns {Array} All documents matching the query
+ */
+ queryAll(queryDefinition: QueryDefinition, options): Promise<QueryResult>
+ makeObservableQuery(queryDefinition: QueryDefinition, options?: any): any
+ create(
+ doctype: TDoctype,
+ entry: any,
+ relationships?: any,
+ options?: any
+ ): Promise<QueryResult>
+ getStackClient(): IClientStackClient
+ getInstanceOptions(): IClientInstanceOpts
+ toJSON(): IClientToJSON
+ }
+
+ export const CozyProvider: any
+
+ export class DocumentCollection {
+ doctype: TDoctype
+ stackClient: IClientStackClient
+ indexes: any
+ endpoint: string
+
+ /**
+ * Lists all documents of the collection, without filters.
+ *
+ * The returned documents are paginated by the stack.
+ *
+ * @param {{limit, skip, bookmark, keys}} options The fetch options: pagination & fetch of specific docs.
+ * @returns {{data, meta, skip, bookmark, next}} The JSON API conformant response.
+ * @throws {FetchError}
+ */
+ all(options?: any): Promise<any>
+
+ /**
+ * Returns a filtered list of documents using a Mango selector.
+ *
+ * The returned documents are paginated by the stack.
+ *
+ * @param {object} selector The Mango selector.
+ * @param {{sort, fields, limit, skip, bookmark, indexId}} options The query options.
+ * @returns {{data, skip, bookmark, next}} The JSON API conformant response.
+ * @throws {FetchError}
+ */
+ find(selector: any, options?: any): Promise<any>
+
+ /**
+ * Get a document by id
+ *
+ * @param {string} id The document id.
+ * @returns {object} JsonAPI response containing normalized document as data attribute
+ */
+ get(id: string): Promise<any>
+
+ /**
+ * Get many documents by id
+ */
+ getAll(ids: string[]): Promise<any>
+
+ /**
+ * Creates a document
+ *
+ * @param {object} doc - Document to create. Optional: you can force the id with the _id attribute
+ */
+ create(doc: any): Promise<any>
+
+ /**
+ * Updates a document
+ *
+ * @param {object} document - Document to update. Do not forget the _id attribute
+ */
+ update(document: any): Promise<any>
+
+ /**
+ * Destroys a document
+ *
+ * @param {object} doc - Document to destroy. Do not forget _id and _rev attributes
+ */
+ destroy(doc: any): Promise<any>
+
+ /**
+ * Updates several documents in one batch
+ *
+ * @param {Document[]} docs Documents to be updated
+ */
+ updateAll(docs: any[]): Promise<any>
+
+ /**
+ * Deletes several documents in one batch
+ *
+ * @param {Document[]} docs - Documents to delete
+ */
+ destroyAll(docs: any[]): Promise<any>
+
+ toMangoOptions(selector: any, options?: any): Promise<any>
+ checkUniquenessOf(property: any, value: any): Promise<any>
+ getUniqueIndexId(property: any): Promise<any>
+ getIndexId(fields: any, indexName: string[]): Promise<any>
+ createIndex(fields: any): Promise<any>
+ getIndexNameFromFields(fields: string[]): Promise<any>
+
+ /**
+ * Compute fields that should be indexed for a mango
+ * query to work
+ *
+ * @private
+ * @param {object} options - Mango query options
+ * @returns {Array} - Fields to index
+ */
+ getIndexFields(options: any): Promise<any>
+
+ /**
+ * Use Couch _changes API
+ *
+ * @param {object} couchOptions Couch options for changes https://kutt.it/5r7MNQ
+ * @param {object} options { includeDesign: false, includeDeleted: false }
+ */
+ fetchChanges(couchOptions: any, options?: any): Promise<any>
+ }
+
+ export interface FileCollection extends DocumentCollection {
+ specialDirectories: any
+
+ /**
+ * Fetches the file's data
+ */
+ get(id: string): Promise<any>
+
+ /**
+ * Returns a filtered list of documents using a Mango selector.
+ *
+ * The returned documents are paginated by the stack.
+ */
+ find(selector: any, options?: any): Promise<any>
+
+ /**
+ * Returns the list of files referenced by a document -- see https://docs.cozy.io/en/cozy-stack/references-docs-in-vfs/
+ */
+ findReferencedBy(document: any, options?: any): Promise<any>
+
+ /**
+ * Add referenced_by documents to a file — see https://docs.cozy.io/en/cozy-stack/references-docs-in-vfs/#post-filesfile-idrelationshipsreferenced_by
+
+ * For example, to have an album referenced by a file:
+ * ```
+ * addReferencedBy({_id: 123, _type: "io.cozy.files", name: "cozy.jpg"}, [{_id: 456, _type: "io.cozy.photos.albums", name: "Happy Cloud"}])
+ * ```
+ */
+ addReferencedBy(document: any, documents: any[]): Promise<any>
+
+ /**
+ * Remove referenced_by documents from a file — see https://docs.cozy.io/en/cozy-stack/references-docs-in-vfs/#delete-filesfile-idrelationshipsreferenced_by
+ *
+ * For example, to remove an album reference from a file:
+ * ```
+ * removeReferencedBy({_id: 123, _type: "io.cozy.files", name: "cozy.jpg"}, [{_id: 456, _type: "io.cozy.photos.albums", name: "Happy Cloud"}])
+ * ```
+ */
+ removeReferencedBy(document: any, documents: any[]): Promise<any>
+
+ /**
+ * Add files references to a document — see https://docs.cozy.io/en/cozy-stack/references-docs-in-vfs/#post-datatypedoc-idrelationshipsreferences
+ *
+ * For example, to add a photo to an album:
+ * ```
+ * addReferencesTo({_id: 456, _type: "io.cozy.photos.albums", name: "Happy Cloud"}, [{_id: 123, _type: "io.cozy.files", name: "cozy.jpg"}])
+ * ```
+ */
+ addReferencesTo(document: any, documents: any[]): Promise<any>
+
+ /**
+ * Remove files references to a document — see https://docs.cozy.io/en/cozy-stack/references-docs-in-vfs/#delete-datatypedoc-idrelationshipsreferences
+ *
+ * For example, to remove a photo from an album:
+ * ```
+ * removeReferencesTo({_id: 456, _type: "io.cozy.photos.albums", name: "Happy Cloud"}, [{_id: 123, _type: "io.cozy.files", name: "cozy.jpg"}])
+ * ```
+ */
+ removeReferencesTo(document: any, documents: any[]): Promise<any>
+ destroy(any: any, options?: any): Promise<any>
+
+ /**
+ * Empty the Trash
+ */
+ emptyTrash(): Promise<any>
+
+ /**
+ * Restores a trashed file.
+ */
+ restore(id: string): Promise<any>
+
+ /**
+ * Definitely delete a file
+ */
+ deleteFilePermanently(id: string): Promise<any>
+
+ /**
+ * Upload a file
+ */
+ upload(data: File, dirPath: string): Promise<any>
+
+ /**
+ * Creates directory or file.
+ *
+ * - Used by StackLink to support CozyClient.create('io.cozy.files', options)
+ */
+ create(attributes: any): Promise<any>
-export function fromEnv(env: NodeJS.ProcessEnv, schema: object): () => Client
+ /**
+ * Creates a file
+ */
+ createFile(data: File, {}: any)
+
+ /***
+ * updateFile - Updates a file's data
+ */
+ updateFile(data: File, params?: any): Promise<any>
+ getDownloadLinkById(id: string): Promise<string>
+ getDownloadLinkByRevision(versionId: string, filename: string): Promise<any>
+ getDownloadLinkByPath(path: string): Promise<any>
+
+ /**
+ * Download a file or a specific version of the file
+ */
+ download(file: any, versionId?: string, filename?: string): Promise<any>
+
+ /**
+ * Fetch the binary of a file or a specific version of a file
+ * Useful for instance when you can't download the file directly
+ * (via a content-disposition attachement header) and need to store
+ * it before doing an operation.
+ */
+ fetchFileContent(id: string): Promise<any>
+
+ /**
+ * Get a beautified size for a given file
+ *
+ * 1024B => 1KB
+ *
+ * 102404500404B => 95.37 GB
+ */
+ getBeautifulSize(file: any, decimal: number): Promise<any>
+
+ downloadArchive(fileIds: string[], notSecureFilename?: string): Promise<any>
+ getArchiveLinkByIds(ids: string[], name?: string): Promise<any>
+
+ /**
+ * Checks if the file belongs to the parent's hierarchy.
+ */
+ isChildOf(child: any | string, parent: any | string): Promise<any>
+
+ /**
+ * statById - Fetches the metadata about a document. For folders, the results include the list of child files and folders.
+ */
+ statById(id: string, options?: any): Promise<any>
+ statByPath(path: string): Promise<any>
+ createDirectory(attributes: any): Promise<any>
+ ensureDirectoryExists(path: string): Promise<any>
+ getDirectoryOrCreate(name: string, parentDirectory: any): Promise<any>
+
+ /**
+ * Creates one or more folders until the given path exists
+ */
+ createDirectoryByPath(path: string): Promise<any>
+
+ /**
+ *
+ * async updateAttributes - Updates a file / folder's attributes except
+ * the metadata attribute. If you want to update its metadata attribute,
+ * then use `updateFileMetadataAttribute` since `metadata` is a specific
+ * doctype.
+ *
+ * For instance, if you want to update the name of a file, you can pass
+ * attributes = { name: 'newName'}
+ *
+ * You can see the attributes for both Folder and File (as they share the
+ * same doctype they have a few in common) here :
+ * https://docs.cozy.io/en/cozy-doctypes/docs/io.cozy.files/#iocozyfiles
+ */
+ updateAttributes(id: string, attributes: any): Promise<any>
+ updateFileMetadata(id: string, attributes: any): Promise<any>
+
+ /**
+ * Send a metadata object that can be associated to a file uploaded after that,
+ * via the MetadataID query parameter.
+ * See https://github.com/cozy/cozy-stack/blob/master/docs/files.md#post-filesuploadmetadata
+ */
+ createFileMetadata(attributes: any): Promise<any>
+
+ /**
+ *
+ * Updates the metadata attribute of a io.cozy.files
+ * Creates a new version of the file without having
+ * to upload again the file's content
+ *
+ * To see available content of the metadata attribute
+ * see : https://docs.cozy.io/en/cozy-doctypes/docs/io.cozy.files_metadata/
+ */
+ updateMetadataAttribute(id: string, metadata: any): Promise<any>
+
+ /**
+ *
+ * This method should not be called directly to upload a file.
+ *
+ * You should use `createFile`
+ */
+ doUpload(
+ data: File,
+ path: string,
+ options?: any,
+ method: 'POST' | 'PUT' | 'PATCH'
+ ): Promise<any>
+ }
+
+ export interface ContactCollection extends DocumentCollection {
+ find(selector: any, options?: any): Promise<any>
+ findMyself(): Promise<any>
+ }
+
+ export interface PermissionsCollection extends DocumentCollection {
+ get(id: string): Promise<any>
+
+ /**
+ * Create a new set of permissions
+ * It can also associates one or more codes to it, via the codes parameter
+ *
+ * @param {object} permission
+ * @param {string} permission.codes A comma separed list of values (defaulted to code)
+ * @param {string} permission.ttl Make the codes expire after a delay (bigduration format)
+ *
+ * bigduration format: https://github.com/justincampbell/bigduration/blob/master/README.md
+ * @see https://docs.cozy.io/en/cozy-stack/permissions/#post-permissions
+ *
+ */
+ create(attributes: any): Promise<any>
+
+ /**
+ * Adds a permission to the given document. Document type must be
+ * `io.cozy.apps`, `io.cozy.konnectors` or `io.cozy.permissions`
+ *
+ * @param {object} document - Document which receives the permission
+ * @param {object} permission - Describes the permission
+ * @returns {Promise}
+ *
+ * @example
+ * ```
+ * const permissions = await client
+ * .collection('io.cozy.permissions')
+ * .add(konnector, {
+ * folder: {
+ * type: 'io.cozy.files',
+ * verbs: ['GET', 'PUT'],
+ * values: [`io.cozy.files.bc57b60eb2954537b0dcdc6ebd8e9d23`]
+ * }
+ * })
+ * ```
+ */
+ add(document, permission): Promise<any>
+ destroy(permission): Promise<any>
+ findLinksByDoctype(doctype): Promise<any>
+ findApps(): Promise<any>
+
+ /**
+ * Create a share link
+ *
+ * @param {{_id, _type}} document - cozy document
+ * @param {object} options - options
+ * @param {string[]} options.verbs - explicit permissions to use
+ */
+ createSharingLink(document, options?)
+
+ /**
+ * Follow the next link to fetch the next permissions
+ *
+ * @param {object} permissions JSON-API based permissions document
+ */
+ fetchPermissionsByLink(permissions: any)
+
+ /**
+ *
+ * @param {object} document Cozy doc
+ * @returns {object} with all the permissions
+ */
+ fetchAllLinks(document: any)
+
+ /**
+ * Destroy a sharing link and the related permissions
+ *
+ * @param {object} document
+ */
+ revokeSharingLink(document)
+
+ /**
+ * async getOwnPermissions - Gets the permission for the current token
+ *
+ * @returns {object}
+ */
+ getOwnPermissions()
+ }
+
+ export interface TriggerCollection extends DocumentCollection {
+ /**
+ * Get the list of triggers.
+ *
+ * @see https://docs.cozy.io/en/cozy-stack/jobs/#get-jobstriggers
+ * @param {{Worker}} options The fetch options: Worker allow to filter only triggers associated with a specific worker.
+ * @returns {{data}} The JSON API conformant response.
+ * @throws {FetchError}
+ */
+ all(options: any): Promise<any>
+
+ /**
+ * Creates a Trigger document
+ *
+ * @see https://docs.cozy.io/en/cozy-stack/jobs/#post-jobstriggers
+ * @param {object} attributes Trigger's attributes
+ * @returns {object} Stack response, containing trigger document under `data` attribute.
+ */
+ create(attributes: any): Promise<any>
+
+ /**
+ * Deletes a trigger
+ *
+ * @see https://docs.cozy.io/en/cozy-stack/jobs/#delete-jobstriggerstrigger-id
+ * @param {object} document The trigger to delete — must have an _id field
+ * @returns {object} The deleted document
+ */
+ destroy(document: any): Promise<any>
+
+ /**
+ *
+ * Be warned, ATM /jobs/triggers does not return the same informations
+ * than /data/io.cozy.triggers (used by the super.find method).
+ *
+ * See https://github.com/cozy/cozy-stack/pull/2010
+ *
+ * @param {object} selector - Which kind of worker {konnector,service}
+ * @param {object} options - Options
+ * @returns {{data, meta, skip, next}} The JSON API conformant response.
+ * @throws {FetchError}
+ */
+ find(selector = {}, options = {}): Promise<any>
+ get(id: string): Promise<any>
+
+ /**
+ * Force given trigger execution.
+ *
+ * @see https://docs.cozy.io/en/cozy-stack/jobs/#post-jobstriggerstrigger-idlaunch
+ * @param {object} trigger Trigger to launch
+ * @returns {object} Stack response, containing job launched by trigger, under `data` attribute.
+ */
+ launch(trigger: any): Promise<any>
+
+ update(): Promise<any>
+ }
+
+ export interface JobCollection extends DocumentCollection {
+ /**
+ * Enqueue programmatically a new job.
+ *
+ * @see https://docs.cozy.io/en/cozy-stack/jobs/#post-jobsqueueworker-type
+ * @param {object} workerType Job's attributes
+ * @param {object} args Job's attributes
+ * @param {object} options Job's attributes
+ * @returns {object} Stack response, containing job document under `data` attribute.
+ */
+ create(workerType: any, args: any, options?: any): Promise<any>
+
+ get()
+ queued(workerType: any)
+ waitFor(argument: any)
+ }
+
+ export interface AppCollection extends DocumentCollection {
+ endpoint: string
+
+ /**
+ * Lists all apps, without filters.
+ *
+ * The returned documents are not paginated by the stack.
+ *
+ * @returns {{data, meta, skip, next}} The JSON API conformant response.
+ * @throws {FetchError}
+ */
+ all(): Promise<any>
+ create(): Promise<any>
+ update(): Promise<any>
+ destroy(): Promise<any>
+ }
+
+ export interface KonnectorCollection extends AppCollection {
+ doctype: TDoctype
+ endpoint: string
+
+ create(): Promise<any>
+ destroy(): Promise<any>
+
+ /**
+ * Find triggers for a particular konnector
+ *
+ * @param {string} slug of the konnector
+ */
+ findTriggersBySlug(slug: string): Promise<any>
+
+ /**
+ * Launch a trigger for a given konnector.
+ *
+ * @param {string} slug
+ * @param {object} options
+ * @param {object} options.accountId - Pinpoint the account that should be used, useful if the user
+ * has more than 1 account for 1 konnector
+ */
+ launch(slug: string, options: { accountId: string })
+
+ /**
+ * Updates a konnector
+ *
+ * @param {string} slug
+ * @param {object} options
+ * @param {object} options.source - Specify the source (ex: registry://slug/stable)
+ * @param {boolean} options.sync - Wait for konnector to be updated, otherwise the job
+ * is just scheduled
+ */
+ update(slug: string, options: { source: any; sync: boolean }): Promise<any>
+ }
+
+ export type GroupCollection = DocumentCollection
+ export type TaskCollection = DocumentCollection
+ export type ObjectiveCollection = DocumentCollection
+ export type AppointmentCollection = DocumentCollection
+ export type JobCollection = DocumentCollection
+
+ export function useClient(): Client
+
+ class CCozyClient {
+ constructor(n: any): Client
+ }
+ const CozyClient: {
+ new (n: any): Client
+ } = CCozyClient
+ export default CozyClient
+}
diff --git a/src/cozy-doctypes.d.ts b/src/cozy-doctypes.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a81ef94042ff90970b2d3e767a4eae4258a427aa
--- /dev/null
+++ b/src/cozy-doctypes.d.ts
@@ -0,0 +1 @@
+declare module 'cozy-doctypes'
diff --git a/src/cozy-harvest-lib.d.ts b/src/cozy-harvest-lib.d.ts
index 0d2f14528d50e761df857a582f9dafb29f7bcbb0..6322ea7904223decd70f287ceb5d859bc3708e0d 100644
--- a/src/cozy-harvest-lib.d.ts
+++ b/src/cozy-harvest-lib.d.ts
@@ -3,3 +3,5 @@ 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'
+declare module 'cozy-harvest-lib/dist/helpers/oauth'
diff --git a/src/cozy-ui.d.ts b/src/cozy-ui.d.ts
index bf96cf6b8ec1363b57a004b9ed9bfe1f4b72b70d..65c1da052d48e22be47d77b27e9a1be6582dbbae 100644
--- a/src/cozy-ui.d.ts
+++ b/src/cozy-ui.d.ts
@@ -1,4 +1,38 @@
-declare module 'cozy-ui/react/I18n'
+/* eslint-disable @typescript-eslint/interface-name-prefix */
+/* eslint-disable @typescript-eslint/no-explicit-any */
declare module 'cozy-ui/transpiled/react/Icon'
declare module 'cozy-ui/transpiled/react/Spinner'
declare module 'cozy-ui/transpiled/react/Layout'
+
+declare module 'cozy-ui/transpiled/react' {
+ interface IPropsIcon {
+ icon?: string
+ width?: string | number
+ height?: string | number
+ color?: string
+ className?: string
+ preserveColor?: string
+ rotate?: string
+ size?: string | number
+ spin?: any
+ [key: string]: any
+ }
+ interface IuseI18n {
+ t: (key: string, opt?: any) => string
+ f: (date: Date, format: string) => string
+ lang: string
+ }
+
+ export function useI18n(): IuseI18n
+ export function Icon(
+ props: IPropsIcon
+ ): React.CElement<any, React.Component<any, any, any>>
+ export const I18n: any
+}
+
+declare module 'cozy-ui/transpiled/react/I18n' {
+ export function initTranslation(
+ userLocal: string,
+ cb: (lang: string) => string
+ )
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index f89ddc1ba5f673f65b57506c1470170fac973f93..592f3db3a76b2aef0aedd64335f4935781041474 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -12,7 +12,7 @@
"eco_gestures": "Eco-gestes",
"ECOGESTURES": "Ecogestes",
"BADGES": "Badges",
- "parameters": "Options",
+ "options": "Options",
"profile": "Profil",
"connectors": "connecteurs",
"graphs": "graphes"
@@ -21,16 +21,16 @@
"APP_TITLE": "Ecolyo",
"APP_CHALLENGE_TITLE": "Défis",
"APP_ECO_GESTURE_TITLE": "Ecogestes",
- "APP_PARAMETERS_TITLE": "Options",
+ "APP_OPTIONS_TITLE": "Options",
"APP_HELLO": "Bonjour",
- "APP_PRESENTATION": "Votre consommation d'énergie",
+ "APP_PRESENTATION": "Consommation d'énergie",
"CONSO_DETAILS": "détail des consommations",
"NODATA": "Pas de données",
"LASTDATA": "Dernières données",
"LASTVALIDDATA": "Dernières données valides",
"DATATOCOME": "à venir",
"CHALLENGE_CARD_LABEL": "Defi",
- "CONSO_CARDS_LABEL": "Consommation",
+ "CONSO_CARDS_LABEL": "Bilan",
"PERF_INDICATOR_LABEL": "Bilan",
"DAILY_FRENQUENCY": "quotidien",
"WEEKLY_FRENQUENCY": "hebdo",
@@ -66,17 +66,20 @@
{
"CONSOLE": "Une console de jeu fonctionnant 2 h par jour consomme 1,75 kWh en 1 semaine"
}
- ]
+ ],
+ "provider": "Enedis"
},
"WATER": {
"NAME": "Eau",
"LABEL": "Eau",
- "UNIT": "L"
+ "UNIT": "L",
+ "provider": "Eau du Grand Lyon"
},
"GAS": {
"NAME": "Gaz",
"LABEL": "Gaz",
- "UNIT": "kWh"
+ "UNIT": "kWh",
+ "provider": "GRDF"
},
"MULTIFLUID": {
"NAME": "Multi fluide",
@@ -153,6 +156,17 @@
"OK": "Ok"
},
"INDICATOR": {
+ "DETAIL": "Détail",
+ "BILAN": {
+ "TEXT1": "Evolution de : ",
+ "TEXT2": "soit une différence de : ",
+ "COMMON": {
+ "DAILY_FRENQUENCY": "par rapport au jour précédent",
+ "WEEKLY_FRENQUENCY": "par rapport à la semaine précédente",
+ "MONTHLY_FRENQUENCY": "par rapport au mois précédent",
+ "YEARLY_FRENQUENCY": "par rapport à l'année précédente"
+ }
+ },
"DISPLAY_OTHER_FLUID": "Voir",
"ERROR_NO_COMPARE": "comparaison impossible",
"ERROR_NO_COMPARE_REASON": "(manque de données)"
@@ -181,10 +195,7 @@
"BACK": "I'll be back",
"ECOGESTURE": "Voir l'écogeste",
"LINKED_ECOGESTURES": "Écogestes associés",
- "VIEW_START": {
- "PART1": "Revenez dans ",
- "PART2": " jours pour voir l'évolution de vos données et découvrir votre objectif"
- },
+ "VIEW_START": "Revenez dans %{smart_count} jour pour voir l'évolution de vos données et découvrir votre objectif |||| Revenez dans %{smart_count} jours pour voir l'évolution de vos données et découvrir votre objectif",
"VIEW_RESULT": "Résultats le ",
"PERIOD": "Période de defi",
"OK": "Ok",
@@ -221,7 +232,7 @@
"placeholder": "Adresse mail",
"label1": "J'accède à mon",
"label2": "espace client Enedis",
- "info": "Pour accéder à vos données de consommation électrique, connectez-vous à votre compte Enedis via le bouton ci-dessous. Enedis, gestionnaire du réseau de distribution d’électricité, est responsable de votre compteur Linky et en charge de relever vos consommations pour votre fournisseur d’électricité."
+ "info": "Pour accéder à vos données de consommation électrique, connectez-vous à votre compte Enedis via le bouton ci-dessous. Enedis est responsable de votre compteur Linky et en charge de relever vos consommations."
},
"no_account": {
"title": "Pas de compte Enedis ?",
@@ -234,7 +245,7 @@
"placeholder": "Adresse email",
"label1": "Je me connecte à",
"label2": "mon compte GRDF",
- "info": "Pour accéder à vos données de consommation gaz, connectez-vous à votre compte GRDF. GRDF, gestionnaire du réseau de distribution de gaz, est responsable de votre compteur Gazpar et en charge de relever vos consommations pour votre fournisseur de gaz."
+ "info": "Pour accéder à vos données de consommation gaz, connectez-vous à votre compte GRDF. GRDF est responsable de votre compteur Gazpar et en charge de relever vos consommations."
},
"no_account": {
"title": "Pas de compte GRDF ?",
@@ -290,7 +301,7 @@
"errorTxt": "Aïe !",
"oldData": "Vos données semblent anciennes",
"verify": "Veuillez vérifier l’état de vos connecteurs : ",
- "problem": "Vos connecteurs semblent bien connectés, il se peut qu’il y ait un problème au niveau de votre fournisseur de données (Enedis, GRDF, Eau du GrandLyon)",
+ "problem": "Vos connecteurs semblent bien connectés, il se peut qu’il y ait un problème au niveau du ou des fournisseurs de données :",
"contact": "Veuillez prendre contact directement avec eux.",
"accessButton": "Accéder aux connecteurs",
"later": "Plus tard"
diff --git a/src/models/index.ts b/src/models/index.ts
index 913cdf4dadf5abe42b094eca30a8c3f525ec9dd3..88c73990f4f8351e79fc372dbd9774464e174413 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -7,6 +7,7 @@ export * from './ecogesture.model'
export * from './fluid.model'
export * from './indicator.model'
export * from './konnector.model'
+export * from './modal.model'
export * from './timePeriod.model'
export * from './trigger.model'
export * from './userProfile.model'
diff --git a/src/models/modal.model.ts b/src/models/modal.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9eb06e785b45b03a26d9dcbc51a7703a7cbbed60
--- /dev/null
+++ b/src/models/modal.model.ts
@@ -0,0 +1,3 @@
+export interface ModalState {
+ feedbackModal: boolean
+}
diff --git a/src/models/userProfile.model.ts b/src/models/userProfile.model.ts
index 66c89ed5b59d88b06608b7a4539c9dc735e3ced8..be4994ed1f2b04d2f426ec7f56e6807ca48b5cb0 100644
--- a/src/models/userProfile.model.ts
+++ b/src/models/userProfile.model.ts
@@ -1,9 +1,12 @@
+import { DateTime } from 'luxon'
+
export interface UserProfile {
id: string
level: number
challengeTypeHash: string
ecogestureHash: string
haveSeenWelcomeModal: boolean
+ haveSeenOldFluidModal: DateTime | false
notificationEcogesture: string[]
report: boolean
}
diff --git a/src/router/.gitignore b/src/router/.gitignore
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/services/account.service.ts b/src/services/account.service.ts
index 35067a831c24eaa27aa3a960cd20f11fbb2c3689..e5a65852ec9747473cc2c7b758934c254de8ebc9 100644
--- a/src/services/account.service.ts
+++ b/src/services/account.service.ts
@@ -3,7 +3,7 @@ import { Account, AccountAttributes, AccountAuthData, Konnector } from 'models'
import { build } from 'cozy-harvest-lib/dist/helpers/accounts'
import {
createAccount,
- findAccount,
+ fetchAccount,
deleteAccount,
updateAccount,
} from 'cozy-harvest-lib/dist/connections/accounts'
@@ -39,7 +39,7 @@ export default class AccountService {
}
public async getAccount(id: string): Promise<Account> {
- const account: Account = await findAccount(this._client, id)
+ const account: Account = await fetchAccount(this._client, id)
return account
}
diff --git a/src/services/challenge.service.ts b/src/services/challenge.service.ts
index fd9e6bd9c0160893aa423768d882f1ef03a480cf..d4c18b512f763324f1f4177178452eabaa61c45a 100644
--- a/src/services/challenge.service.ts
+++ b/src/services/challenge.service.ts
@@ -218,19 +218,24 @@ export default class ChallengeService {
public async updateChallengeState(
id: string | undefined,
newState: number
- ): Promise<UserChallenge | null> {
- const updateUserChallenge = await this._client
- .query(
- this._client
- .find(USERCHALLENGE_DOCTYPE)
- .where({ _id: id })
- .limitBy(1)
- )
- .then(async ({ data }) => {
- const doc = data[0]
- await this._client.save({ ...doc, state: newState })
- })
- return updateUserChallenge
+ ): Promise<boolean> {
+ try {
+ await this._client
+ .query(
+ this._client
+ .find(USERCHALLENGE_DOCTYPE)
+ .where({ _id: id })
+ .limitBy(1)
+ )
+ .then(async ({ data }) => {
+ const doc = data[0]
+ await this._client.save({ ...doc, state: newState })
+ })
+ return true
+ } catch (err) {
+ console.log(err)
+ throw err
+ }
}
public async isChallengeOver(
@@ -315,21 +320,39 @@ export default class ChallengeService {
return false
}
- public async endChallenge(challenge: UserChallenge, fluidTypes: FluidType[]) {
- if (challenge && challenge.challengeType) {
- if (await this.isChallengeOver(challenge, fluidTypes)) {
- if (challenge.challengeType.type === TypeChallenge.ACHIEVEMENT) {
- await this.updateChallengeState(challenge.id, ChallengeState.FINISHED)
- await this.updateUserLevel(challenge.challengeType.level)
- } else {
- if (
- this.getTheRightBadge(challenge.currentEnergy, challenge.maxEnergy)
- ) {
+ public async endChallenge(
+ challenge: UserChallenge,
+ fluidTypes: FluidType[]
+ ): Promise<boolean> {
+ try {
+ if (challenge && challenge.challengeType) {
+ if (await this.isChallengeOver(challenge, fluidTypes)) {
+ if (challenge.challengeType.type === TypeChallenge.ACHIEVEMENT) {
+ await this.updateChallengeState(
+ challenge.id,
+ ChallengeState.FINISHED
+ )
await this.updateUserLevel(challenge.challengeType.level)
+ } else {
+ if (
+ this.getTheRightBadge(
+ challenge.currentEnergy,
+ challenge.maxEnergy
+ )
+ ) {
+ await this.updateUserLevel(challenge.challengeType.level)
+ }
+ await this.updateChallengeState(
+ challenge.id,
+ ChallengeState.FINISHED
+ )
}
- await this.updateChallengeState(challenge.id, ChallengeState.FINISHED)
}
}
+ return true
+ } catch (err) {
+ console.log(err)
+ throw err
}
}
@@ -387,15 +410,16 @@ export default class ChallengeService {
}
public async deleteAllChallengeTypeEntities(): Promise<boolean> {
- const challengeType = await this.getAllChallengeTypeEntities()
- if (!challengeType) return true
try {
+ const challengeType = await this.getAllChallengeTypeEntities()
+ if (!challengeType) return true
for (let index = 0; index < challengeType.length; index++) {
await this._client.destroy(challengeType[index])
}
return true
- } catch (error) {
- return false
+ } catch (err) {
+ console.log(err)
+ throw err
}
}
@@ -439,7 +463,7 @@ export default class ChallengeService {
const challengeTypes = this._challengeMapper.mapToChallengeTypes(
challengeTypeEntities,
challengeTypeEntityRelationships,
- unlockedEcogestures
+ unlockedEcogestures || undefined
// fluidTypes
)
return challengeTypes
@@ -455,67 +479,93 @@ export default class ChallengeService {
return userLevel
}
+ public async updateCurrentChallengeProgress(
+ challenge: UserChallenge
+ ): Promise<UserChallenge | null> {
+ try {
+ if (
+ challenge &&
+ challenge.challengeType &&
+ challenge.challengeType.type === TypeChallenge.CHALLENGE
+ ) {
+ // Check if we are in the viewing timezone for current challenge
+ const viewingDate = this.getViewingDate(challenge)
+ if (DateTime.local() >= viewingDate && challenge.fluidTypes) {
+ if (challenge.maxEnergy === -1 && challenge.fluidTypes) {
+ const maxEnergyResult = await this.setMaxEnergy(
+ challenge,
+ this._client,
+ challenge.fluidTypes
+ )
+ if (maxEnergyResult > 0) {
+ challenge.maxEnergy = maxEnergyResult
+ }
+ }
+ const currentEnergyResult = await this.setSpentEnergy(
+ challenge,
+ this._client,
+ challenge.fluidTypes
+ )
+ if (currentEnergyResult) {
+ challenge.currentEnergy = currentEnergyResult
+ }
+ }
+ }
+ return challenge
+ } catch (error) {
+ console.log('Context error: ', error)
+ throw error
+ }
+ }
+
public async startChallenge(
challenge: ChallengeType,
fluidTypes: FluidType[],
selectedEcogestes: Ecogesture[]
): Promise<UserChallenge | null> {
- const ongoingChallenge = await this.getCurrentChallenge()
-
- if (!ongoingChallenge) {
- const startDate = DateTime.utc()
- .plus({ days: 1 })
- .startOf('day')
-
- const userChallenge: UserChallenge = {
- startingDate: startDate,
- endingDate: startDate.plus(challenge.duration),
- state: ChallengeState.ONGOING,
- selectedEcogestures: selectedEcogestes,
- challengeType: challenge,
- maxEnergy: -1,
- currentEnergy: -1,
- badge: -1,
- fluidTypes: fluidTypes,
- }
-
- const resultUserChallenge = await this._client.create(
- USERCHALLENGE_DOCTYPE,
- this._challengeMapper.mapFromUserChallenge(userChallenge)
- )
-
- const createdUserChallengeEntity: UserChallengeEntity | null = resultUserChallenge.data
- ? resultUserChallenge.data
- : null
- if (!createdUserChallengeEntity) return null
+ try {
+ // Ensure that none challenge is already on going
+ const ongoingChallenge = await this.getCurrentChallenge()
+ if (!ongoingChallenge) {
+ const startDate = DateTime.utc()
+ .plus({ days: 1 })
+ .startOf('day')
+
+ const userChallenge: UserChallenge = {
+ startingDate: startDate,
+ endingDate: startDate.plus(challenge.duration),
+ state: ChallengeState.ONGOING,
+ selectedEcogestures: selectedEcogestes,
+ challengeType: challenge,
+ maxEnergy: -1,
+ currentEnergy: -1,
+ badge: -1,
+ fluidTypes: fluidTypes,
+ }
- const createdUserChallenge = this._challengeMapper.mapToUserChallenge(
- createdUserChallengeEntity
- )
+ await this._client.create(
+ USERCHALLENGE_DOCTYPE,
+ this._challengeMapper.mapFromUserChallenge(userChallenge)
+ )
- return createdUserChallenge
- } else {
- return null
+ // Retrive the challenge from base to have the userChallengeEntityRelationships
+ let createdUserChallenge = await this.getCurrentChallenge()
+ if (createdUserChallenge) {
+ // Update challenge progess
+ createdUserChallenge = await this.updateCurrentChallengeProgress(
+ createdUserChallenge
+ )
+ }
+ return createdUserChallenge
+ } else {
+ return null
+ }
+ } catch (err) {
+ console.log(err)
+ throw err
}
}
- public async getAllUserChallengeEntities(): Promise<
- UserChallengeEntity[] | null
- > {
- let userChallengeEntities: UserChallengeEntity[] | null = null
-
- const userChallengesresult = await this._client.query(
- this._client.find(USERCHALLENGE_DOCTYPE)
- )
- userChallengeEntities = userChallengesresult.data
- ? userChallengesresult.data
- : null
-
- if (!userChallengeEntities) return null
-
- return userChallengeEntities
- }
-
public async getAllUserChallenges(
withEcogestures = true
): Promise<UserChallenge[] | null> {
@@ -603,27 +653,16 @@ export default class ChallengeService {
return userChallenge
}
- public async cancelChallenge(
- id: string | undefined
- ): Promise<UserChallenge | null> {
- const updateUserChallenge = await this._client
- .query(
- this._client
- .find(USERCHALLENGE_DOCTYPE)
- .where({ _id: id })
- .limitBy(1)
- )
- .then(async ({ data }) => {
- const doc = data[0]
- await this._client.save({
- ...doc,
- state: ChallengeState.ABANDONED,
- })
- })
- return updateUserChallenge
+ public async cancelChallenge(id: string): Promise<boolean> {
+ try {
+ await this.updateChallengeState(id, ChallengeState.ABANDONED)
+ return true
+ } catch (err) {
+ console.log(err)
+ throw err
+ }
}
-
- public async getUnlockedEcogestures(): Promise<Ecogesture[] | null> {
+ public async getUnlockedEcogestures(): Promise<string[] | null> {
const relationShipsToInclude = ['selectedEcogestures']
const ecogestures = await this._client.query(
this._client
@@ -736,4 +775,34 @@ export default class ChallengeService {
}
return null
}
+
+ /*
+ * If the challenge is over
+ * Set the rigth badge and return true
+ * else return false
+ */
+ public async isCurrentChallengeOver(
+ challenge: UserChallenge,
+ fluidTypes: FluidType[]
+ ): Promise<boolean> {
+ try {
+ const typeChallenge = challenge.challengeType
+ ? challenge.challengeType.type
+ : 0
+ const isOver = await this.isChallengeOverByDate(
+ challenge.endingDate,
+ fluidTypes,
+ typeChallenge
+ )
+ if (isOver) {
+ await this.setTheRightBadge(challenge)
+ return true
+ } else {
+ return false
+ }
+ } catch (error) {
+ console.log(error)
+ throw error
+ }
+ }
}
diff --git a/src/services/challengeMapper.service.ts b/src/services/challengeMapper.service.ts
index 0fb28bf9fbc0d82cb9f369dce90783b4fda9a39c..56f93678412d9e74cbc25189bfb065363dac8b37 100644
--- a/src/services/challengeMapper.service.ts
+++ b/src/services/challengeMapper.service.ts
@@ -224,7 +224,7 @@ export default class ChallengeMapperService {
public mapToChallengeTypes(
challengeEntities: ChallengeTypeEntity[],
challengeTypeEntityRelationships?: object | null,
- unlockedEcogestures?: object
+ unlockedEcogestures?: string[]
// fluidTypes?: FluidType[]
): ChallengeType[] {
return challengeEntities.map(challengeEntity =>
diff --git a/src/services/fluid.service.ts b/src/services/fluid.service.ts
index 8c3602994bfcab1efd826918b16c3821d18c0e8f..2cd355c935354a09a426fa96f0554023114f4af6 100644
--- a/src/services/fluid.service.ts
+++ b/src/services/fluid.service.ts
@@ -7,6 +7,7 @@ import KonnectorService from 'services/konnector.service'
import ConsumptionService from 'services/consumption.service'
import AccountService from 'services/account.service'
import TriggerService from 'services/triggers.service'
+import { DateTime } from 'luxon'
export default class FluidService {
private _client: Client
diff --git a/src/services/initData.service.ts b/src/services/initialization.service.ts
similarity index 57%
rename from src/services/initData.service.ts
rename to src/services/initialization.service.ts
index b3a31d95e6b7ab483fccd5dcb9a917b07cfae6bb..92281a377947f24ad86e2a60375d371cb37c2e57 100644
--- a/src/services/initData.service.ts
+++ b/src/services/initialization.service.ts
@@ -22,7 +22,7 @@ import { FluidType } from 'enum/fluid.enum'
import { TypeChallenge } from 'enum/challenge.enum'
import { FluidStatus, UserChallenge, UserProfile } from 'models'
-import ChallengeDataManager from 'services/challenge.service'
+import ChallengeService from 'services/challenge.service'
import challengeTypeData from 'db/challengeTypeData.json'
import userChallengeData from 'db/userChallengeData.json'
import EcogestureService from 'services/ecogesture.service'
@@ -36,20 +36,116 @@ import FluidService from 'services/fluid.service'
import { hashFile } from 'utils/hash'
-export default class InitDataService {
+export default class InitializationService {
private readonly _client: Client
constructor(_client: Client) {
this._client = _client
}
- public async checkChallengeType(hash: string): Promise<boolean> {
+ /*
+ * Call a query with where clause to create the index if not exist
+ */
+ public async createIndex(doctype: string): Promise<object> {
+ return await this._client.query(
+ this._client
+ .find(doctype)
+ .where({
+ year: {
+ $lte: 9999,
+ },
+ month: {
+ $lte: 12,
+ },
+ day: {
+ $lte: 31,
+ },
+ })
+ .limitBy(1)
+ )
+ }
+
+ /*
+ * create index for each Doctype
+ * sucess return: true
+ * failure throw error
+ */
+ public async initIndex(): Promise<boolean> {
+ try {
+ const accountService = new AccountService(this._client)
+ const konnectorService = new KonnectorService(this._client)
+ await Promise.all([
+ this.createIndex(EGL_DAY_DOCTYPE),
+ this.createIndex(EGL_MONTH_DOCTYPE),
+ this.createIndex(EGL_YEAR_DOCTYPE),
+ this.createIndex(ENEDIS_DAY_DOCTYPE),
+ this.createIndex(ENEDIS_MINUTE_DOCTYPE),
+ this.createIndex(ENEDIS_MONTH_DOCTYPE),
+ this.createIndex(ENEDIS_YEAR_DOCTYPE),
+ this.createIndex(GRDF_DAY_DOCTYPE),
+ this.createIndex(GRDF_HOUR_DOCTYPE),
+ this.createIndex(GRDF_MONTH_DOCTYPE),
+ this.createIndex(GRDF_YEAR_DOCTYPE),
+ konnectorService.createIndexKonnector(),
+ accountService.createIndexAccount(),
+ ])
+ console.log(
+ '%c Initialization: Indexes created',
+ 'background: #222; color: white'
+ )
+ return true
+ } catch (error) {
+ console.log('Initialization error: ', error)
+ throw error
+ }
+ }
+
+ /*
+ * Check if UserProfil exist
+ * If not, the UserProfil is created
+ * sucess return: userProfil
+ * failure return: null
+ */
+ public async initUserProfile(): Promise<UserProfile | null> {
+ const userProfileService = new UserProfileService(this._client)
+ try {
+ const loadedUserProfile = await userProfileService.getUserProfile()
+ if (!loadedUserProfile) {
+ // Population with the data
+ await this._client.create(USERPROFILE_DOCTYPE, userProfileData[0])
+ // Check of created document
+ const checkUserProfile = await userProfileService.getUserProfile()
+ if (checkUserProfile) {
+ console.log(
+ '%c Initialization: User Profile created',
+ 'background: #222; color: white'
+ )
+ return checkUserProfile
+ } else {
+ throw new Error('initUserProfile: UserProfile not created')
+ }
+ } else {
+ console.log(
+ '%c Initialization: User Profile loaded',
+ 'background: #222; color: white'
+ )
+ return loadedUserProfile
+ }
+ } catch (error) {
+ console.log('Initialization error: ', error)
+ throw error
+ }
+ }
+
+ public async initChallengeType(
+ hash: string
+ ): Promise<{ result: boolean; userProfile: UserProfile | null }> {
const hashChanllengeType = hashFile(challengeTypeData)
- const cdm = new ChallengeDataManager(this._client)
+ const challengeService = new ChallengeService(this._client)
const userProfileService = new UserProfileService(this._client)
// Populate data if none challengeType exists
- const loadedChallengeTypes = await cdm.getAllChallengeTypeEntities()
+ const loadedChallengeTypes = await challengeService.getAllChallengeTypeEntities()
if (
!loadedChallengeTypes ||
(loadedChallengeTypes && loadedChallengeTypes.length === 0)
@@ -57,34 +153,35 @@ export default class InitDataService {
// Populate the doctype with data
try {
for (let i = 0; i <= challengeTypeData.length - 1; i++) {
- const result = await this._client.create(
- CHALLENGETYPE_DOCTYPE,
- challengeTypeData[i]
- )
- if (!result) {
- return false
- }
+ await this._client.create(CHALLENGETYPE_DOCTYPE, challengeTypeData[i])
}
// Check of created document
- const checkCount = await cdm.getAllChallengeTypeEntities()
+ const checkCount = await challengeService.getAllChallengeTypeEntities()
if (
!checkCount ||
(checkCount && checkCount.length !== challengeTypeData.length)
) {
- return false
+ throw new Error(
+ 'initChallengeType: Created challenge type entities does not macht'
+ )
}
// Update userProfil with the hash
- const updatedUserProfil = await userProfileService.updateUserProfile({
+ const updatedUserProfile = await userProfileService.updateUserProfile({
challengeTypeHash: hashChanllengeType,
})
- if (!updatedUserProfil) {
- return false
+ if (updatedUserProfile) {
+ console.log(
+ '%c Initialization: Challenge Type created',
+ 'background: #222; color: white'
+ )
+ return { result: true, userProfile: updatedUserProfile }
+ } else {
+ throw new Error('initChallengeType: UserProfile not updated')
}
} catch (error) {
- console.log('Context error: ', error)
- return false
+ console.log('Initialization error: ', error)
+ throw error
}
- return true
}
// Update if the hash is not the same as the one from userprofile
@@ -92,46 +189,53 @@ export default class InitDataService {
// Update the doctype
try {
// Deletion of all documents
- const resultDeletion = await cdm.deleteAllChallengeTypeEntities()
- if (!resultDeletion) {
- return false
- }
+ await challengeService.deleteAllChallengeTypeEntities()
// Population with the data
- const resultPopulation = await Promise.all(
+ await Promise.all(
challengeTypeData.map(async challengeType => {
await this._client.create(CHALLENGETYPE_DOCTYPE, challengeType)
})
)
- if (!resultPopulation) {
- return false
- }
// Check of created document
- const checkCount = await cdm.getAllChallengeTypeEntities()
+ const checkCount = await challengeService.getAllChallengeTypeEntities()
if (
!checkCount ||
(checkCount && checkCount.length !== challengeTypeData.length)
) {
- return false
+ throw new Error(
+ 'initChallengeType: Created challenge type entities does not macht'
+ )
}
// Update userProfil with the hash
- const updatedUserProfil = await userProfileService.updateUserProfile({
+ const updatedUserProfile = await userProfileService.updateUserProfile({
challengeTypeHash: hashChanllengeType,
})
- if (!updatedUserProfil) {
- return false
+ if (updatedUserProfile) {
+ console.log(
+ '%c Initialization: Challenge Type updated',
+ 'background: #222; color: white'
+ )
+ return { result: true, userProfile: updatedUserProfile }
+ } else {
+ throw new Error('initChallengeType: UserProfile not updated')
}
} catch (error) {
- console.log('Context error: ', error)
- return false
+ console.log('Initialization error: ', error)
+ throw error
}
- return true
} else {
// Doctype already up to date
- return true
+ console.log(
+ '%c Initialization: Challenge Type loaded',
+ 'background: #222; color: white'
+ )
+ return { result: true, userProfile: null }
}
}
- public async checkEcogesture(hash: string): Promise<boolean> {
+ public async initEcogesture(
+ hash: string
+ ): Promise<{ result: boolean; userProfile: UserProfile | null }> {
const hashEcogestureType = hashFile(ecogestureData)
const ecogestureService = new EcogestureService(this._client)
const userProfileService = new UserProfileService(this._client)
@@ -145,35 +249,35 @@ export default class InitDataService {
// Populate the doctype with data
try {
for (let i = 0; i <= ecogestureData.length - 1; i++) {
- const result = await this._client.create(
- ECOGESTURE_DOCTYPE,
- ecogestureData[i]
- )
- if (!result) {
- return false
- }
+ await this._client.create(ECOGESTURE_DOCTYPE, ecogestureData[i])
}
-
// Check of created document based on count
const checkCount = await ecogestureService.getAllEcogestures()
if (
!checkCount ||
(checkCount && checkCount.length !== ecogestureData.length)
) {
- return false
+ throw new Error(
+ 'initEcogesture: Created challenge type entities does not macht'
+ )
}
// Update userProfil with the hash
- const updatedUserProfil = await userProfileService.updateUserProfile({
+ const updatedUserProfile = await userProfileService.updateUserProfile({
ecogestureHash: hashEcogestureType,
})
- if (!updatedUserProfil) {
- return false
+ if (updatedUserProfile) {
+ console.log(
+ '%c Initialization: Ecogesture created',
+ 'background: #222; color: white'
+ )
+ return { result: true, userProfile: updatedUserProfile }
+ } else {
+ throw new Error('initChallengeType: UserProfile not updated')
}
} catch (error) {
- console.log('Context error: ', error)
- return false
+ console.log('Initialization error: ', error)
+ throw error
}
- return true
}
// Update if the hash is not the same as the one from userprofile
@@ -181,54 +285,59 @@ export default class InitDataService {
// Update the doctype
try {
// Deletion of all documents
- const resultDeletion = await ecogestureService.deleteAllEcogestures()
- if (!resultDeletion) {
- return false
- }
+ await ecogestureService.deleteAllEcogestures()
// Population with the data
- const resultPopulation = await Promise.all(
+ await Promise.all(
ecogestureData.map(async ecogesture => {
await this._client.create(ECOGESTURE_DOCTYPE, ecogesture)
})
)
- if (!resultPopulation) {
- return false
- }
// Check of created document based on count
- const checkCount = await edm.getAllEcogestures()
+ const checkCount = await ecogestureService.getAllEcogestures()
if (
!checkCount ||
(checkCount && checkCount.length !== ecogestureData.length)
) {
- return false
+ throw new Error(
+ 'initEcogesture: Created challenge type entities does not macht'
+ )
}
// Update userProfil with the hash
- const updatedUserProfil = await userProfileService.updateUserProfile({
+ const updatedUserProfile = await userProfileService.updateUserProfile({
ecogestureHash: hashEcogestureType,
})
- if (!updatedUserProfil) {
- return false
+ if (updatedUserProfile) {
+ console.log(
+ '%c Initialization: Ecogesture updated',
+ 'background: #222; color: white'
+ )
+ return { result: true, userProfile: updatedUserProfile }
+ } else {
+ throw new Error('initChallengeType: UserProfile not updated')
}
} catch (error) {
- console.log('Context error: ', error)
- return false
+ console.log('Initialization error: ', error)
+ throw error
}
- return true
} else {
// Doctype already up to date
- return true
+ console.log(
+ '%c Initialization: Ecogesture loaded',
+ 'background: #222; color: white'
+ )
+ return { result: true, userProfile: null }
}
}
/*
* Check if userChallenge exist
* If not, the userChallenge is created
- * sucess return: true
- * failure return: false
+ * sucess return: UserChallenge[]
+ * failure throw Error
*/
- public async checkUserChallenge(): Promise<boolean> {
- const cdm = new ChallengeDataManager(this._client)
- const loadedUserChallenge = await cdm.getAllUserChallengeEntities()
+ public async initUserChallenge(): Promise<UserChallenge[]> {
+ const challengeService = new ChallengeService(this._client)
+ const loadedUserChallenge = await challengeService.getAllUserChallenges()
if (
!loadedUserChallenge ||
(loadedUserChallenge && loadedUserChallenge.length === 0)
@@ -237,187 +346,74 @@ export default class InitDataService {
// Population with the data
await this._client.create(USERCHALLENGE_DOCTYPE, userChallengeData[0])
// Check of created document
- const checkUserChallenge = await cdm.getAllUserChallengeEntities()
- if (!checkUserChallenge) {
- return false
+ const checkUserChallenge = await challengeService.getAllUserChallenges()
+ if (checkUserChallenge) {
+ console.log(
+ '%c Initialization: User Challenge created',
+ 'background: #222; color: white'
+ )
+ return checkUserChallenge
+ } else {
+ throw new Error('initUserChallenge: UserProfile not updated')
}
- return true
- } catch (error) {
- console.log('Context error: ', error)
- return false
- }
- } else {
- return true
- }
- }
-
- /*
- * Check if UserProfil exist
- * If not, the UserProfil is created
- * sucess return: userProfil
- * failure return: null
- */
- public async checkUserProfile(): Promise<UserProfile | null> {
- const userProfileService = new UserProfileService(this._client)
- const loadedUserProfile = await userProfileService.getUserProfile()
- if (!loadedUserProfile) {
- try {
- // Population with the data
- await this._client.create(USERPROFILE_DOCTYPE, userProfileData[0])
- // Check of created document
- const checkUserProfile = await userProfileService.getUserProfile()
- return checkUserProfile
} catch (error) {
- console.log('Context error: ', error)
- return null
+ console.log('Initialization error: ', error)
+ throw error
}
} else {
- return loadedUserProfile
- }
- }
-
- /*
- * Call each check function to init data
- * sucess return: true
- * failure return: false or null
- */
- public async initData(): Promise<boolean | null> {
- try {
- const resultUserProfile = await this.checkUserProfile()
- if (!resultUserProfile) {
- return false
- } else {
- console.log(
- '%c Context: UserProfile loaded ',
- 'background: #222; color: white'
- )
- }
- const resultChallengeType = await this.checkChallengeType(
- resultUserProfile.challengeTypeHash
- )
- if (!resultChallengeType) {
- return false
- } else {
- console.log(
- '%c Context: ChallengeType loaded ',
- 'background: #222; color: white'
- )
- }
- const resultEcogesture = await this.checkEcogesture(
- resultUserProfile.ecogestureHash
+ console.log(
+ '%c Initialization: User Challenge loaded',
+ 'background: #222; color: white'
)
- if (!resultEcogesture) {
- return false
- } else {
- console.log(
- '%c Context: Ecogesture loaded ',
- 'background: #222; color: white'
- )
- }
- const resultUserChallenge = await this.checkUserChallenge()
- if (!resultUserChallenge) {
- return false
- } else {
- console.log(
- '%c Context: UserChallenge loaded',
- 'background: #222; color: white'
- )
- }
- return true
- } catch (error) {
- console.log('Context error: ', error)
- return null
+ return loadedUserChallenge
}
}
/*
* Check if FluidTypes exist
* sucess return: FluidType[]
- * failure return: null
+ * failure throw error
*/
- public async checkFluidTypes(): Promise<FluidType[] | null> {
+ public async initFluidTypes(): Promise<FluidType[]> {
const kss = new KonnectorStatusService(this._client)
try {
const fluidtypes = await kss.getKonnectorAccountStatus()
- if (!fluidtypes) {
- return null
+ if (fluidtypes) {
+ console.log(
+ '%c Initialization: Fluid Types loaded',
+ 'background: #222; color: white'
+ )
+ return fluidtypes
+ } else {
+ throw new Error('initFluidTypes: FluidTypes not found')
}
- return fluidtypes
} catch (error) {
- console.log('Context error: ', error)
- return null
+ console.log('Initialization error: ', error)
+ throw error
}
}
/*
* For each fluid get the trigger status and the last data date
* sucess return: FluidStatus[]
- * failure return: null
+ * failure throw error
*/
- public async getFluidStatus(): Promise<FluidStatus[] | null> {
+ public async initFluidStatus(): Promise<FluidStatus[]> {
const fs = new FluidService(this._client)
try {
const fluidStatus = await fs.getFluidStatus()
- if (!fluidStatus) {
- return null
+ if (fluidStatus) {
+ console.log(
+ '%c Initialization: Fluid Status loaded',
+ 'background: #222; color: white'
+ )
+ return fluidStatus
+ } else {
+ throw new Error('initFluidStatus: fluidStatus not found')
}
- return fluidStatus
} catch (error) {
- console.log('Context error: ', error)
- return null
- }
- }
-
- /*
- * Call a query with where clause to create the index if not exist
- */
- public async createIndex(doctype: string): Promise<object> {
- return await this._client.query(
- this._client
- .find(doctype)
- .where({
- year: {
- $lte: 9999,
- },
- month: {
- $lte: 12,
- },
- day: {
- $lte: 31,
- },
- })
- .limitBy(1)
- )
- }
-
- /*
- * create index for each Doctype
- * sucess return: true
- * failure return: null
- */
- public async initIndex(): Promise<boolean | null> {
- try {
- const accountService = new AccountService(this._client)
- const konnectorService = new KonnectorService(this._client)
- await Promise.all([
- this.createIndex(EGL_DAY_DOCTYPE),
- this.createIndex(EGL_MONTH_DOCTYPE),
- this.createIndex(EGL_YEAR_DOCTYPE),
- this.createIndex(ENEDIS_DAY_DOCTYPE),
- this.createIndex(ENEDIS_MINUTE_DOCTYPE),
- this.createIndex(ENEDIS_MONTH_DOCTYPE),
- this.createIndex(ENEDIS_YEAR_DOCTYPE),
- this.createIndex(GRDF_DAY_DOCTYPE),
- this.createIndex(GRDF_HOUR_DOCTYPE),
- this.createIndex(GRDF_MONTH_DOCTYPE),
- this.createIndex(GRDF_YEAR_DOCTYPE),
- konnectorService.createIndexKonnector(),
- accountService.createIndexAccount(),
- ])
- return true
- } catch (error) {
- console.log('Context error: ', error)
- return null
+ console.log('Initialization error: ', error)
+ throw error
}
}
@@ -425,11 +421,11 @@ export default class InitDataService {
* Search for a current challenge
* and update it if found
*/
- public async checkCurrentChallenge(): Promise<UserChallenge | null> {
+ public async initCurrentChallenge(): Promise<UserChallenge | null> {
try {
// get the current challenge
- const cdm = new ChallengeDataManager(this._client)
- const currentChallenge = await cdm.getCurrentChallenge()
+ const challengeService = new ChallengeService(this._client)
+ const currentChallenge = await challengeService.getCurrentChallenge()
if (!currentChallenge) {
// No current challenge
return null
@@ -440,13 +436,13 @@ export default class InitDataService {
currentChallenge.challengeType.type === TypeChallenge.CHALLENGE
) {
// Check if we are in the viewing timezone for current challenge
- const viewingDate = cdm.getViewingDate(currentChallenge)
+ const viewingDate = challengeService.getViewingDate(currentChallenge)
if (DateTime.local() >= viewingDate && currentChallenge.fluidTypes) {
if (
currentChallenge.maxEnergy === -1 &&
currentChallenge.fluidTypes
) {
- const maxEnergyResult = await cdm.setMaxEnergy(
+ const maxEnergyResult = await challengeService.setMaxEnergy(
currentChallenge,
this._client,
currentChallenge.fluidTypes
@@ -455,7 +451,7 @@ export default class InitDataService {
currentChallenge.maxEnergy = maxEnergyResult
}
}
- const currentEnergyResult = await cdm.setSpentEnergy(
+ const currentEnergyResult = await challengeService.setSpentEnergy(
currentChallenge,
this._client,
currentChallenge.fluidTypes
@@ -468,7 +464,7 @@ export default class InitDataService {
return currentChallenge
}
} catch (error) {
- console.log('Context error: ', error)
+ console.log('Initialization error: ', error)
throw error
}
}
@@ -482,36 +478,16 @@ export default class InitDataService {
challenge: UserChallenge,
fluidTypes: FluidType[]
): Promise<boolean> {
- try {
- // get the current challenge
- if (!challenge) {
- // No current challenge
- return false
- } else {
- const cdm = new ChallengeDataManager(this._client)
- const typeChallenge = challenge.challengeType
- ? challenge.challengeType.type
- : 0
- const isOver = await cdm.isChallengeOverByDate(
- challenge.endingDate,
- fluidTypes,
- typeChallenge
- )
- if (isOver) {
- await cdm.setTheRightBadge(challenge)
- return true
- } else {
- return false
- }
- }
- } catch (error) {
- console.log('Context error: ', error)
- return false
- }
+ const challengeService = new ChallengeService(this._client)
+ const isOver = await challengeService.isCurrentChallengeOver(
+ challenge,
+ fluidTypes
+ )
+ return isOver
}
public async checkAchievement(id: string): Promise<UserChallenge | null> {
- const cdm = new ChallengeDataManager(this._client)
- return await cdm.checkAchievement(id)
+ const challengeService = new ChallengeService(this._client)
+ return await challengeService.checkAchievement(id)
}
}
diff --git a/src/services/userProfile.service.ts b/src/services/userProfile.service.ts
index f356597974fcb1d19a101a4a38b78863dadb15a6..e6a6faa31e95cd6b2672781a09fa85606410532e 100644
--- a/src/services/userProfile.service.ts
+++ b/src/services/userProfile.service.ts
@@ -1,6 +1,7 @@
import { Client } from 'cozy-client'
import { UserProfile } from 'models'
import { USERPROFILE_DOCTYPE } from 'doctypes'
+import { DateTime } from 'luxon'
export default class UserProfileService {
private readonly _client: Client
@@ -10,14 +11,20 @@ export default class UserProfileService {
}
public async getUserProfile(): Promise<UserProfile | null> {
- const { data: userProfiles } = await this._client.query(
+ const { data } = await this._client.query(
this._client.find(USERPROFILE_DOCTYPE).limitBy(1)
)
- return userProfiles[0] ? userProfiles[0] : null
+ const userProfile: UserProfile | null = data[0] ? data[0] : null
+ if (userProfile && typeof userProfile.haveSeenOldFluidModal === 'string') {
+ userProfile.haveSeenOldFluidModal = DateTime.fromISO(
+ userProfile.haveSeenOldFluidModal
+ )
+ }
+ return userProfile
}
public async updateUserProfile(attributes: {
- [key: string]: string | string[] | boolean
+ [key: string]: string | string[] | boolean | DateTime
}): Promise<UserProfile | null> {
const { data: userProfile } = await this._client
.query(this._client.find(USERPROFILE_DOCTYPE).limitBy(1))
@@ -28,6 +35,11 @@ export default class UserProfileService {
...attributes,
})
})
+ if (userProfile && typeof userProfile.haveSeenOldFluidModal === 'string') {
+ userProfile.haveSeenOldFluidModal = DateTime.fromISO(
+ userProfile.haveSeenOldFluidModal
+ )
+ }
return userProfile ? userProfile : null
}
}
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 458661823904470cf7cb43f89a9f6588a754099a..9a379223a73f0f966f44ebe6c7c73a113a8b244c 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -83,6 +83,14 @@ p {
font-size: 1rem;
line-height: 120%;
}
+.text-16-normal-uppercase {
+ font-family: $text-font;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 1rem;
+ line-height: 120%;
+ text-transform: uppercase;
+}
.text-16-normal-150 {
font-family: $text-font;
font-style: normal;
diff --git a/src/styles/components/_barchart.scss b/src/styles/components/_barchart.scss
index a2fb106967970b70629c65ab89c51466c3d7df20..d4329e36c73af5810ae7cdf7a83add0210ae4709 100644
--- a/src/styles/components/_barchart.scss
+++ b/src/styles/components/_barchart.scss
@@ -16,6 +16,18 @@
.background-false {
opacity: 0;
}
+.bar-compare-ELECTRICITY,
+.bar-compare-GAS,
+.bar-compare-WATER,
+.bar-compare-MULTIFLUID,
+.bar-MULTIFLUID,
+.bar-WATER,
+.bar-GAS,
+.bar-ELECTRICITY {
+ &:hover {
+ cursor: pointer;
+ }
+}
.bar-ELECTRICITY {
fill: $elec-off-color;
&.selected {
diff --git a/src/styles/components/_indicators.scss b/src/styles/components/_indicators.scss
index 7b884748731859f26fdbc5478e74184bcc8e5ef6..5e91831830d3892fd9b16e7099802eef241097d1 100644
--- a/src/styles/components/_indicators.scss
+++ b/src/styles/components/_indicators.scss
@@ -19,9 +19,10 @@
width: 100%;
}
.fi-header {
- margin-top: 2.5rem;
+ margin-top: 1rem;
margin-bottom: 1.25rem;
color: $grey-bright;
+ font-size: 1rem;
}
}
//SingleFluidIndicator
@@ -54,6 +55,11 @@
.fpi-link {
color: transparent;
}
+.details-title {
+ color: white;
+ display: inline-block;
+ margin-bottom: 1rem;
+}
.fpi {
display: flex;
flex-direction: row;
@@ -70,28 +76,71 @@
.fpi-content {
display: flex;
flex-direction: row;
+ &:first-child() {
+ margin-bottom: 2rem;
+ }
+ .icon-line {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 0.25rem;
+ .euro-value {
+ font-size: 2.2rem;
+ font-weight: 900;
+ margin-right: 0.2rem;
+ }
+ .evolution-text {
+ color: $soft-grey;
+ .fpi-content-perf-indicator-kpi {
+ &.positive {
+ color: $red-primary !important;
+ }
+ &.negative {
+ color: $green !important;
+ }
+ }
+ .diff-value {
+ color: white;
+ font-weight: 700;
+ }
+ }
+ }
+ .bilan-card {
+ margin-bottom: 2rem;
+ }
+ .error {
+ display: flex;
+ gap: 1rem;
+ }
.fpi-content-icon {
margin: 0.5rem 0;
}
- .fpi-content-perf {
- margin: 0 1rem;
+ .perf-icon {
+ align-self: start;
+ }
+ .fpi-content-perf:not(:first-child) {
+ margin: 0 0 0 1rem;
align-self: center;
+
.fpi-content-perf-result {
color: $grey-bright;
& span {
display: inline-block;
padding-right: 0.25rem;
}
- }
- .fpi-content-perf-indicator {
- color: $soft-grey;
- .fpi-content-perf-indicator-kpi {
- &.positive {
- color: $red-primary;
- }
- &.negative {
- color: $green;
- }
+ .euro-value {
+ font-size: 1.125rem;
+ display: block;
+ font-weight: 400;
+ }
+ .ELECTRICITY-color {
+ color: $elec-color;
+ }
+ .GAS-color {
+ color: $gas-color;
+ }
+ .WATER-color {
+ color: $water-color;
}
}
}
diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss
index bc1f3f475ce1cf3916e24f9e82ea56989cac3d59..71852729c87b6f24d24ab9a90d14cd3145457c7b 100644
--- a/src/styles/components/_nav.scss
+++ b/src/styles/components/_nav.scss
@@ -26,7 +26,7 @@
}
.logo-tiga {
width: 100%;
- max-width: 130px;
+ max-width: 80px;
}
}
.parameters-logos {
@@ -39,7 +39,7 @@
.logo-tiga-parameters {
display: block;
width: 100%;
- max-width: 130px;
+ max-width: 80px;
margin: auto;
}
.logo-grand-lyon-parameters {
diff --git a/src/styles/components/_splash.scss b/src/styles/components/_splash.scss
index 62f09b7b1c81cb383a9bde423f52f5b43beb15b7..797facc9bca294132baac08d96349d826703cad6 100644
--- a/src/styles/components/_splash.scss
+++ b/src/styles/components/_splash.scss
@@ -3,16 +3,24 @@
.splash-root {
position: fixed;
- z-index: 1000;
+ z-index: 1500;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
+ opacity: 1;
overflow: hidden;
background-color: rgba(27, 28, 34, 1);
display: flex;
flex-direction: column;
- .splash-header {
+ transition-property: opacity;
+ transition-timing-function: ease-in-out;
+ &.splash-fade {
+ opacity: 0;
+ }
+}
+
+.splash-header {
height: 6rem;
display: flex;
align-items: center;
@@ -61,5 +69,4 @@
.splash-footer-button {
max-width: 50vw;
}
- }
-}
+ }
\ No newline at end of file
diff --git a/src/targets/browser/index.tsx b/src/targets/browser/index.tsx
index acfe5941e44d07fb740a69b4f4f80b48d68d04c6..be2dfb3c7c802098443603d6972212213f8eb66e 100644
--- a/src/targets/browser/index.tsx
+++ b/src/targets/browser/index.tsx
@@ -1,77 +1,90 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
/* global cozy */
import '../../styles/index.scss'
import React from 'react'
-import CozyClient, { CozyProvider } from 'cozy-client'
-import { render } from 'react-dom'
-import { I18n } from 'cozy-ui/react/I18n'
+import CozyClient, { CozyProvider, Client } from 'cozy-client'
+import ReactDOM, { render } from 'react-dom'
+import { Document } from 'cozy-doctypes'
+import { I18n } from 'cozy-ui/transpiled/react'
+import { initTranslation } from 'cozy-ui/transpiled/react/I18n'
+import { handleOAuthResponse } from 'cozy-harvest-lib/dist/helpers/oauth'
import schema from 'doctypes'
const manifest = require('../../../manifest.webapp')
-let appLocale: string
-const renderApp = function(client) {
+const renderApp = (polyglot: any, lang: string, client: Client) => {
+ if (handleOAuthResponse()) return
const App = require('components/App').default
render(
- <I18n
- lang={appLocale}
- dictRequire={appLocale => require(`locales/${appLocale}`)}
- >
- <CozyProvider client={client}>
+ <CozyProvider client={client}>
+ <I18n lang={lang} polyglot={polyglot}>
<App />
- </CozyProvider>
- </I18n>,
+ </I18n>
+ </CozyProvider>,
document.querySelector('[role=application]')
)
}
+export const getDataset = () => {
+ const root: any = document.querySelector('[role=application]')
+ return root.dataset
+}
+
// return a defaultData if the template hasn't been replaced by cozy-stack
-const getDataOrDefault = function(toTest: string, defaultData: string) {
+export const getDataOrDefault = (toTest: string, defaultData: string) => {
const templateRegex = /^\{\{\.[a-zA-Z]*\}\}$/ // {{.Example}}
return templateRegex.test(toTest) ? defaultData : toTest
}
-// initial rendering of the application
-document.addEventListener('DOMContentLoaded', () => {
- const root = document.querySelector('[role=application]')
- const data = root.dataset
- const appIcon = getDataOrDefault(
+const initApp = () => {
+ const supportedLocales = ['fr', 'en']
+ const data = getDataset()
+
+ const iconPath = getDataOrDefault(
data.cozyIconPath,
require('../vendor/assets/icon.svg')
)
-
const appNamePrefix = getDataOrDefault(
data.cozyAppNamePrefix || manifest.name_prefix,
''
)
const appName = getDataOrDefault(data.cozyAppName, manifest.name)
const appSlug = getDataOrDefault(data.cozyAppSlug, manifest.slug)
- // const appVersion = getDataOrDefault(data.cozyAppVersion, manifest.version)
const appVersion = manifest.version
+ // FIX cozyLocal
+ const userLocale = 'fr' // getDataOrDefault(data.cozyLocale, 'fr')
+ const polyglot = initTranslation(userLocale, lang =>
+ require(`locales/${lang}`)
+ )
- // appLocale = getDataOrDefault(data.cozyLocale, 'fr')
- appLocale = 'fr'
-
+ const lang = supportedLocales.includes(userLocale) ? userLocale : 'fr'
const protocol = window.location ? window.location.protocol : 'https:'
- // initialize the client to interact with the cozy stack
+ const token = data.cozyToken
+
+ // initialize the client
const client = new CozyClient({
uri: `${protocol}//${data.cozyDomain}`,
- token: data.cozyToken,
- schema,
+ token,
appMetadata: {
slug: appSlug,
version: appVersion,
},
+ schema,
})
+ if (!Document.cozyClient) {
+ Document.registerClient(client)
+ }
- // initialize the bar, common of all applications, it allows
- // platform features like apps navigation without doing anything
+ // necessary to initialize the bar with the correct React instance
+ window.React = React
+ window.ReactDOM = ReactDOM
cozy.bar.init({
- appName: appName,
- appNamePrefix: appNamePrefix,
- iconPath: appIcon,
- lang: appLocale,
+ appName,
+ appNamePrefix,
+ iconPath,
+ lang,
replaceTitleOnMobile: true,
cozyClient: client,
})
@@ -79,5 +92,8 @@ document.addEventListener('DOMContentLoaded', () => {
const { setTheme } = cozy.bar
setTheme('primary', { primaryColor: 'transparent' })
- renderApp(client)
-})
+ renderApp(polyglot, lang, client)
+}
+
+// initial rendering of the application
+document.addEventListener('DOMContentLoaded', initApp)
diff --git a/yarn.lock b/yarn.lock
index a703eb6ee10aa8a49115a1c69fa1f56683a2495a..545ed92b970e09d4bd23ff7f735f165880493c84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1362,6 +1362,11 @@
dependencies:
"@babel/types" "^7.3.0"
+"@types/classnames@^2.2.10":
+ version "2.2.10"
+ resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.10.tgz#cc658ca319b6355399efc1f5b9e818f1a24bf999"
+ integrity sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ==
+
"@types/color-name@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -3963,14 +3968,14 @@ cozy-bar@^7.7.10:
redux-thunk "2.3.0"
semver-compare "^1.0.0"
-cozy-bi-auth@0.0.6:
- version "0.0.6"
- resolved "https://registry.yarnpkg.com/cozy-bi-auth/-/cozy-bi-auth-0.0.6.tgz#03010694bc26072ca14a68c40ae75153a863dae9"
- integrity sha512-/+i9OyosDrVaoTnnoP8/y361ksJpkF+2AxZrpQZs7/NAyiobvW4HmOa2u0ucpH0U1xWZDNPk5YHnGN68GBarfg==
+cozy-bi-auth@0.0.11:
+ version "0.0.11"
+ resolved "https://registry.yarnpkg.com/cozy-bi-auth/-/cozy-bi-auth-0.0.11.tgz#95e8229fef454f25a8166baff8736b786df29814"
+ integrity sha512-HJTWaEsGqvNcSviazNqER7IkwXFzb4BayYo1dCuOOu1/lSe29MER+DuTc84MPwKTgoQsdmVUhKJIpQBBX/7L8g==
dependencies:
cozy-logger "^1.3.0"
- lodash "^4.17.15"
- node-jose "^1.1.0"
+ lodash "^4.17.20"
+ node-jose "^1.1.4"
cozy-client-js@^0.17.3:
version "0.17.3"
@@ -4076,6 +4081,13 @@ cozy-device-helper@1.8.0:
dependencies:
lodash "4.17.15"
+cozy-device-helper@^1.10.2:
+ version "1.10.2"
+ resolved "https://registry.yarnpkg.com/cozy-device-helper/-/cozy-device-helper-1.10.2.tgz#f744ce65c76d1e5a95e30bf6c08bcc6d9d772f37"
+ integrity sha512-KebAmQZmL9xI500ncXXt8c1m89rhu8qLpNLV7FgyPHmqN8RIodw8taZb/E4bEk0ZkwDfNIsEU10MLSDXi4uAPg==
+ dependencies:
+ lodash "4.17.19"
+
cozy-device-helper@^1.7.3:
version "1.10.0"
resolved "https://registry.yarnpkg.com/cozy-device-helper/-/cozy-device-helper-1.10.0.tgz#86c102d32b012f648dbce36cc6031d3895ee95a2"
@@ -4102,10 +4114,10 @@ cozy-doctypes@^1.73.0:
lodash "4.17.19"
prop-types "^15.7.2"
-cozy-doctypes@^1.74.5:
- version "1.74.5"
- resolved "https://registry.yarnpkg.com/cozy-doctypes/-/cozy-doctypes-1.74.5.tgz#e1baa9482452a992fcaff9f44cb5cff413f9bb5b"
- integrity sha512-YRMXAxtCcoXbqoF0A4W8vPO1wGYqFOAwbe/ue2F4gSkLE0K40gmWchRICPG3A1VjFWCmfKLLCOUBZV4N4cPwKw==
+cozy-doctypes@^1.74.6:
+ version "1.74.6"
+ resolved "https://registry.yarnpkg.com/cozy-doctypes/-/cozy-doctypes-1.74.6.tgz#e4bcfd5d570dddd74af84b15e3b39aeceb3e9671"
+ integrity sha512-EEGVfLoFoyPEWTloJUuRjGx3mihCkTUftjuS4efegqFMg0GsN58kVx1Lvq/tDgW0WWlcxodIfN2NNW5I1pa6yw==
dependencies:
"@babel/runtime" "7.5.5"
cozy-logger "^1.6.0"
@@ -4114,24 +4126,24 @@ cozy-doctypes@^1.74.5:
lodash "4.17.19"
prop-types "^15.7.2"
-cozy-flags@^2.3.3:
- version "2.3.3"
- resolved "https://registry.yarnpkg.com/cozy-flags/-/cozy-flags-2.3.3.tgz#4f9cca9190d46f7c47062da47be77cc005ab3850"
- integrity sha512-5fDbaRSI8fw+WT6miLcf7ufEUJeHrS11+hoZGXShfqQU6DnepDphUpt7osSFhd26T7L54c1YFTKR9gMgCqeJNg==
+cozy-flags@^2.3.4:
+ version "2.3.4"
+ resolved "https://registry.yarnpkg.com/cozy-flags/-/cozy-flags-2.3.4.tgz#a2175fd711529e93175029e0d20e376142035546"
+ integrity sha512-JE8oFfHCeZsHTp9L0xEYtEtNwfTl2Ik3Hr7YaFsjd3H/6YYucNchVNp8FlmEIe3cyA1DWhv/jw/oSTYuSnSo9A==
dependencies:
microee "^0.0.6"
-cozy-harvest-lib@2.9.1:
- version "2.9.1"
- resolved "https://registry.yarnpkg.com/cozy-harvest-lib/-/cozy-harvest-lib-2.9.1.tgz#053a90df2957604794e966bd7e7022c7fd1a8d29"
- integrity sha512-0VRDMZf2aF8hmfCHYm8pdu2MMrUhrk8IpVPMQWrMBZ9mTGC/CbB252ePikcvOa7vZdZno/xj0/iQn5QUgMxvOQ==
+cozy-harvest-lib@2.16.0:
+ version "2.16.0"
+ resolved "https://registry.yarnpkg.com/cozy-harvest-lib/-/cozy-harvest-lib-2.16.0.tgz#eb255e0170d6af7f4955e895815853c878d4fda4"
+ integrity sha512-2bSJHXJOiKdAg30pyyW2V+34jNeyI3aPXA+Da6ywdY33EVd9+nQg2kr8Q4fg+4J2kzXdrkS+h4nXYuI+vL9uSQ==
dependencies:
"@babel/runtime" "^7.5.2"
"@material-ui/core" "3"
"@testing-library/react" "^10.4.9"
- cozy-bi-auth "0.0.6"
- cozy-doctypes "^1.74.5"
- cozy-flags "^2.3.3"
+ cozy-bi-auth "0.0.11"
+ cozy-doctypes "^1.74.6"
+ cozy-flags "^2.3.4"
cozy-keys-lib "3.1.2"
cozy-logger "1.6.0"
date-fns "^1.30.1"
@@ -4229,6 +4241,14 @@ cozy-logger@1.6.0, cozy-logger@^1.3.0, cozy-logger@^1.6.0:
chalk "^2.4.2"
json-stringify-safe "5.0.1"
+cozy-realtime@3.10.5:
+ version "3.10.5"
+ resolved "https://registry.yarnpkg.com/cozy-realtime/-/cozy-realtime-3.10.5.tgz#aa040bd921a0f83fd0452092d050ee201e090bff"
+ integrity sha512-PISZsNkXzTWwYAbLTjQn1tIi0iVwEAEZQTVNS2eDu46a8EtIGBje8QM/GQoFZdoIi0wtgciW5VvQUEuP/wY+xQ==
+ dependencies:
+ cozy-device-helper "^1.10.2"
+ minilog "https://github.com/cozy/minilog.git#master"
+
cozy-realtime@3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/cozy-realtime/-/cozy-realtime-3.2.1.tgz#b22cb9468566ae691edfa0383efbab3071a2f01e"
@@ -8967,7 +8987,7 @@ lodash.unionwith@4.6.0:
version "4.6.0"
resolved "https://registry.yarnpkg.com/lodash.unionwith/-/lodash.unionwith-4.6.0.tgz#74d140b5ca8146e6c643c3724f5152538d9ac1f0"
-lodash@4:
+lodash@4, lodash@^4.17.20:
version "4.17.20"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -9452,6 +9472,13 @@ minilog@3.1.0, "minilog@https://github.com/cozy/minilog.git#master":
dependencies:
microee "0.0.6"
+"minilog@git+https://github.com/cozy/minilog.git#master":
+ version "3.1.0"
+ uid f01f7d9dfe20981177dd34b9662c2f077d818f82
+ resolved "git+https://github.com/cozy/minilog.git#f01f7d9dfe20981177dd34b9662c2f077d818f82"
+ dependencies:
+ microee "0.0.6"
+
minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -9821,7 +9848,7 @@ node-int64@^0.4.0:
resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
-node-jose@^1.1.0:
+node-jose@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/node-jose/-/node-jose-1.1.4.tgz#af3f44a392e586d26b123b0e12dc09bef1e9863b"
integrity sha512-L31IFwL3pWWcMHxxidCY51ezqrDXMkvlT/5pLTfNw5sXmmOLJuN6ug7txzF/iuZN55cRpyOmoJrotwBQIoo5Lw==
@@ -11895,6 +11922,11 @@ realpath-native@^1.1.0:
dependencies:
util.promisify "^1.0.0"
+recoil@^0.0.13:
+ version "0.0.13"
+ resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.0.13.tgz#23e6d63135c07d8defbd91aaa35dca94ec5c15a6"
+ integrity sha512-2OToaQ8GR//KsdKdaEhMi04QKStLGRpk3qjC58iBpZpUtsByZ4dUy2UJtRcYuhnVlltGZ8HNwcEQRdFOS864SQ==
+
"recompose@0.28.0 - 0.30.0":
version "0.30.0"
resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0"