From 832d0d93006c76eff6ec6aa933ac09b31ffa2d87 Mon Sep 17 00:00:00 2001 From: Guilhem CARRON <gcarron@grandlyon.com> Date: Mon, 9 May 2022 14:26:28 +0000 Subject: [PATCH] Revert "Merge branch 'feat/us675-matomo' into 'dev'" --- app.config.environment.alpha.js | 2 - app.config.environment.dev.js | 2 - app.config.environment.prod.js | 2 - docker/docker-compose.matomo.yml | 38 - src/components/Action/ActionView.spec.tsx | 15 +- src/components/Analysis/AnalysisView.spec.tsx | 1 + src/components/App.tsx | 23 +- .../Challenge/ChallengeView.spec.tsx | 29 +- .../__snapshots__/ChallengeView.spec.tsx.snap | 2131 +++++++---------- src/components/Content/Content.tsx | 10 +- src/components/Duel/DuelView.spec.tsx | 4 - .../Ecogesture/EcogestureView.spec.tsx | 1 + .../Exploration/ExplorationView.spec.tsx | 52 +- src/components/FAQ/FAQView.spec.tsx | 3 - .../FAQ/__snapshots__/FAQView.spec.tsx.snap | 40 +- src/components/GCU/GCUView.spec.tsx | 4 - .../GCU/__snapshots__/GCUView.spec.tsx.snap | 8 +- src/components/Home/ConsumptionView.spec.tsx | 12 +- .../LegalNotice/LegalNoticeView.spec.tsx | 4 - .../LegalNoticeView.spec.tsx.snap | 8 +- src/components/Options/OptionsView.spec.tsx | 5 +- src/components/Options/UnSubscribe.spec.tsx | 9 +- .../__snapshots__/OptionsView.spec.tsx.snap | 8 +- .../__snapshots__/UnSubscribe.spec.tsx.snap | 198 +- .../ProfileType/ProfileTypeView.spec.tsx | 14 +- .../ProfileType/ProfileTypeView.tsx | 2 +- src/components/Quiz/QuizView.spec.tsx | 11 +- src/services/environment.service.ts | 5 - src/targets/browser/index.ejs | 12 +- src/targets/browser/index.tsx | 75 +- src/types/cozy-ui.d.ts | 1 - src/types/custom.d.ts | 2 - src/utils/bar.ts | 59 + src/utils/client.ts | 25 + src/utils/matomoTracker.ts | 116 - 35 files changed, 1103 insertions(+), 1828 deletions(-) delete mode 100644 docker/docker-compose.matomo.yml create mode 100644 src/utils/bar.ts create mode 100644 src/utils/client.ts delete mode 100644 src/utils/matomoTracker.ts diff --git a/app.config.environment.alpha.js b/app.config.environment.alpha.js index e0c4b0b3e..65e849511 100644 --- a/app.config.environment.alpha.js +++ b/app.config.environment.alpha.js @@ -17,8 +17,6 @@ module.exports = { __DEVELOPMENT__: false, __DEVTOOLS__: false, __STACK_ASSETS__: target !== 'mobile', - __PIWIK_TRACKER_URL__: JSON.stringify('https://statweb.grandlyon.com/'), - __PIWIK_SITEID__: 117, }), ], optimization: { diff --git a/app.config.environment.dev.js b/app.config.environment.dev.js index 8fdfb95ec..86282e3bc 100644 --- a/app.config.environment.dev.js +++ b/app.config.environment.dev.js @@ -20,8 +20,6 @@ const stackProvidedLibsConfig = { 'process.env.NODE_ENV': JSON.stringify('development'), __IS_ALPHA__: true, __STACK_ASSETS__: true, - __PIWIK_TRACKER_URL__: JSON.stringify('http://localhost:9800/'), - __PIWIK_SITEID__: 1, }), ], module: { diff --git a/app.config.environment.prod.js b/app.config.environment.prod.js index 7dc15dbcf..9e5401b8d 100644 --- a/app.config.environment.prod.js +++ b/app.config.environment.prod.js @@ -17,8 +17,6 @@ module.exports = { __DEVELOPMENT__: false, __DEVTOOLS__: false, __STACK_ASSETS__: target !== 'mobile', - __PIWIK_TRACKER_URL__: JSON.stringify('https://statweb.grandlyon.com/'), - __PIWIK_SITEID__: 118, }), ], optimization: { diff --git a/docker/docker-compose.matomo.yml b/docker/docker-compose.matomo.yml deleted file mode 100644 index a0a90254e..000000000 --- a/docker/docker-compose.matomo.yml +++ /dev/null @@ -1,38 +0,0 @@ -version: '3.8' - -services: - db: - image: mariadb - command: --max-allowed-packet=64MB - restart: always - environment: - - MYSQL_ROOT_PASSWORD=root - - MYSQL_PASSWORD=password - - MYSQL_DATABASE=matomo - - MYSQL_USER=matomo - volumes: - - db:/var/lib/mysql - - app: - image: matomo:latest - restart: always - depends_on: - - db - environment: - - MATOMO_DATABASE_HOST=db - - MATOMO_DATABASE_ADAPTER=mysql - - MATOMO_DATABASE_TABLES_PREFIX=matomo_ - - MATOMO_DATABASE_USERNAME=matomo - - MATOMO_DATABASE_PASSWORD=password - - MATOMO_DATABASE_DBNAME=matomo - - PHP_MEMORY_LIMIT=2048M - volumes: - # - ./config:/var/www/html/config:rw - # - ./logs:/var/www/html/logs - - matomo:/var/www/html - ports: - - 9800:80 - -volumes: - db: - matomo: diff --git a/src/components/Action/ActionView.spec.tsx b/src/components/Action/ActionView.spec.tsx index 736802cd2..8442277f4 100644 --- a/src/components/Action/ActionView.spec.tsx +++ b/src/components/Action/ActionView.spec.tsx @@ -21,9 +21,6 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { }), } }) -jest.mock('components/Header/CozyBar', () => 'mock-cozybar') -jest.mock('components/Header/Header', () => 'mock-header') -jest.mock('components/Content/Content', () => 'mock-content') const mockStore = configureStore([]) describe('ActionView component', () => { @@ -37,7 +34,7 @@ describe('ActionView component', () => { } const store = mockStore({ ecolyo: { - challenge: { currentChallenge: userChallenge }, + challenge: userChallenge, global: { ...globalStateData, fluidTypes: [0, 1, 2] }, profile: profileData, modal: modalStateData, @@ -48,7 +45,7 @@ describe('ActionView component', () => { <ActionView /> </Provider> ) - expect(wrapper.find(ActionChoose).exists()).toBeTruthy() + expect(wrapper.find(ActionChoose).exists()) expect(wrapper).toMatchSnapshot() }) it('should render ActionDone component', () => { @@ -61,7 +58,7 @@ describe('ActionView component', () => { } const store = mockStore({ ecolyo: { - challenge: { currentChallenge: userChallenge }, + challenge: userChallenge, global: { ...globalStateData, fluidTypes: [0, 1, 2] }, profile: profileData, modal: modalStateData, @@ -72,7 +69,7 @@ describe('ActionView component', () => { <ActionView /> </Provider> ) - expect(wrapper.find(ActionDone).exists()).toBeTruthy() + expect(wrapper.find(ActionDone).exists()) }) it('should render ActionOnGoing component', () => { const userChallenge = { @@ -84,7 +81,7 @@ describe('ActionView component', () => { } const store = mockStore({ ecolyo: { - challenge: { currentChallenge: userChallenge }, + challenge: userChallenge, global: { ...globalStateData, fluidTypes: [0, 1, 2] }, modal: modalStateData, profile: profileData, @@ -95,6 +92,6 @@ describe('ActionView component', () => { <ActionView /> </Provider> ) - expect(wrapper.find(ActionOnGoing).exists()).toBeTruthy() + expect(wrapper.find(ActionOnGoing).exists()) }) }) diff --git a/src/components/Analysis/AnalysisView.spec.tsx b/src/components/Analysis/AnalysisView.spec.tsx index e3c5062d5..286f6cf6b 100644 --- a/src/components/Analysis/AnalysisView.spec.tsx +++ b/src/components/Analysis/AnalysisView.spec.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/display-name */ import React from 'react' import { mount } from 'enzyme' import * as reactRedux from 'react-redux' diff --git a/src/components/App.tsx b/src/components/App.tsx index d86299f0c..86d54f5d4 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import React, { useEffect } from 'react' +import React from 'react' import { HashRouter } from 'react-router-dom' +import { createBrowserHistory } from 'history' import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout' import { useSelector } from 'react-redux' import { AppStore } from 'store' @@ -11,30 +12,14 @@ import SplashRoot from 'components/Splash/SplashRoot' import SplashScreen from 'components/Splash/SplashScreen' import SplashScreenError from 'components/Splash/SplashScreenError' import WelcomeModal from 'components/Onboarding/WelcomeModal' -import MatomoTracker from 'utils/matomoTracker' -import EnvironmentService from 'services/environment.service' -interface AppProps { - tracker: MatomoTracker -} +export const history = createBrowserHistory() -export const App = ({ tracker }: AppProps) => { +export const App = () => { const { onboarding, isProfileEcogestureCompleted } = useSelector( (state: AppStore) => state.ecolyo.profile ) const { termsStatus } = useSelector((state: AppStore) => state.ecolyo.global) - const isDev = new EnvironmentService().isDev() - - useEffect(() => { - if (tracker && !isDev) { - if (termsStatus.accepted) { - tracker.connectToHistory() - } - return () => { - tracker.disconnectFromHistory() - } - } - }, [termsStatus.accepted, tracker]) return ( <HashRouter {...history}> diff --git a/src/components/Challenge/ChallengeView.spec.tsx b/src/components/Challenge/ChallengeView.spec.tsx index 1e33a6132..aff70fdae 100644 --- a/src/components/Challenge/ChallengeView.spec.tsx +++ b/src/components/Challenge/ChallengeView.spec.tsx @@ -1,13 +1,8 @@ import React from 'react' -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' +import { shallow } from 'enzyme' import ChallengeView from 'components/Challenge/ChallengeView' import * as reactRedux from 'react-redux' import { challengeStateDataFull } from '../../../tests/__mocks__/challengeStateData.mock' -import { - createMockStore, - mockInitialEcolyoState, -} from '../../../tests/__mocks__/store' const mockUseSelector = jest.spyOn(reactRedux, 'useSelector') @@ -21,28 +16,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { } }) -jest.mock('components/Header/CozyBar', () => 'mock-cozybar') -jest.mock('components/Header/Header', () => 'mock-header') -jest.mock('components/Content/Content', () => 'mock-content') -jest.mock('components/Challenge/ChallengeCard', () => 'mock-challengecard') - -const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector') - describe('ChallengeView component', () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - let store: any - beforeEach(() => { - store = createMockStore(mockInitialEcolyoState) - useSelectorSpy.mockClear() - }) - it('should be rendered correctly', () => { mockUseSelector.mockReturnValue(challengeStateDataFull) - const wrapper = mount( - <reactRedux.Provider store={store}> - <ChallengeView /> - </reactRedux.Provider> - ) - expect(toJson(wrapper)).toMatchSnapshot() + const component = shallow(<ChallengeView />).getElement() + expect(component).toMatchSnapshot() }) }) diff --git a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap index 3d17797f4..ee1c09130 100644 --- a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap +++ b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap @@ -1,1260 +1,953 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChallengeView component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <ChallengeView> - <mock-cozybar - titleKey="common.title_challenge" - /> - <mock-header - desktopTitleKey="common.title_challenge" - setHeaderHeight={[Function]} - /> - <mock-content - height={0} +<React.Fragment> + <CozyBar + titleKey="common.title_challenge" + /> + <Header + desktopTitleKey="common.title_challenge" + setHeaderHeight={[Function]} + /> + <Content + height={0} + > + <div + className="challengeSlider" + onClick={[Function]} + onMouseDown={[Function]} + onMouseMove={[Function]} + onMouseUp={[Function]} + onTouchEnd={[Function]} + onTouchMove={[Function]} + onTouchStart={[Function]} > <div - className="challengeSlider" - onClick={[Function]} - onMouseDown={[Function]} - onMouseMove={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} + className="challenge-container" + style={ + Object { + "transform": "translateX(16px)", + } + } > - <div - className="challenge-container" - style={ + <ChallengeCard + cardHeight={384} + cardWidth={285} + index={0} + indexSlider={0} + moveToSlide={[Function]} + userChallenge={ Object { - "transform": "translateX(-874.2px)", - } - } - > - <mock-challengecard - cardHeight={384} - cardWidth={285} - index={0} - indexSlider={3} - key="0" - moveToSlide={[Function]} - userChallenge={ - Object { - "action": Object { - "ecogesture": null, - "startDate": null, - "state": 0, - }, - "description": "Description challenge 1", - "duel": Object { - "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", - "duration": "P30D", - "fluidTypes": Array [], - "id": "DUEL001", - "startDate": null, - "state": 0, - "threshold": 0, - "title": "Title DUEL001", - "userConsumption": 0, - }, - "endingDate": null, - "exploration": Object { - "complementary_description": "Refaire un tour dans son profil si déjà fait", - "date": null, - "description": "Avoir complété son profil", - "ecogesture_id": "", - "fluid_condition": Array [], - "id": "EXPLORATION001", - "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", - "progress": 0, - "state": 0, - "target": 1, - "type": 1, - }, - "id": "CHALLENGE0001", - "progress": Object { - "actionProgress": 0, - "explorationProgress": 0, - "quizProgress": 0, + "action": Object { + "ecogesture": null, + "startDate": null, + "state": 0, + }, + "description": "Description challenge 1", + "duel": Object { + "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", + "duration": "P30D", + "fluidTypes": Array [], + "id": "DUEL001", + "startDate": null, + "state": 0, + "threshold": 0, + "title": "Title DUEL001", + "userConsumption": 0, + }, + "endingDate": null, + "exploration": Object { + "complementary_description": "Refaire un tour dans son profil si déjà fait", + "date": null, + "description": "Avoir complété son profil", + "ecogesture_id": "", + "fluid_condition": Array [], + "id": "EXPLORATION001", + "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", + "progress": 0, + "state": 0, + "target": 1, + "type": 1, + }, + "id": "CHALLENGE0001", + "progress": Object { + "actionProgress": 0, + "explorationProgress": 0, + "quizProgress": 0, + }, + "quiz": Object { + "customQuestion": Object { + "interval": 20, + "period": Object {}, + "questionLabel": "Custom1", + "result": 0, + "singleFluid": false, + "timeStep": 20, + "type": 0, }, - "quiz": Object { - "customQuestion": Object { - "interval": 20, - "period": Object {}, - "questionLabel": "Custom1", + "id": "QUIZ001", + "questions": Array [ + Object { + "answers": Array [ + Object { + "answerLabel": "86 km", + "isTrue": true, + }, + Object { + "answerLabel": "78 km", + "isTrue": false, + }, + Object { + "answerLabel": "56 km", + "isTrue": false, + }, + ], + "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", + "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", "result": 0, - "singleFluid": false, - "timeStep": 20, - "type": 0, + "source": "string", }, - "id": "QUIZ001", - "questions": Array [ - Object { - "answers": Array [ - Object { - "answerLabel": "86 km", - "isTrue": true, - }, - Object { - "answerLabel": "78 km", - "isTrue": false, - }, - Object { - "answerLabel": "56 km", - "isTrue": false, - }, - ], - "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", - "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "1 point d’eau public pour 800 habitants.", - "isTrue": true, - }, - Object { - "answerLabel": "1 point d’eau public pour 400 habitants.", - "isTrue": false, - }, - Object { - "answerLabel": "1 point d’eau public pour 200 habitants.", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "François Mitterrand", - "isTrue": false, - }, - Object { - "answerLabel": "Napoléon Ier", - "isTrue": true, - }, - Object { - "answerLabel": "Napoléon III", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "Aristide Dumont", - "isTrue": true, - }, - ], - "explanation": "string", - "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", - "result": 0, - "source": "string", - }, - ], - "result": 0, - "startDate": null, - "state": 0, - }, + Object { + "answers": Array [ + Object { + "answerLabel": "1 point d’eau public pour 800 habitants.", + "isTrue": true, + }, + Object { + "answerLabel": "1 point d’eau public pour 400 habitants.", + "isTrue": false, + }, + Object { + "answerLabel": "1 point d’eau public pour 200 habitants.", + "isTrue": false, + }, + ], + "explanation": "string", + "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", + "result": 0, + "source": "string", + }, + Object { + "answers": Array [ + Object { + "answerLabel": "François Mitterrand", + "isTrue": false, + }, + Object { + "answerLabel": "Napoléon Ier", + "isTrue": true, + }, + Object { + "answerLabel": "Napoléon III", + "isTrue": false, + }, + ], + "explanation": "string", + "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", + "result": 0, + "source": "string", + }, + Object { + "answers": Array [ + Object { + "answerLabel": "string", + "isTrue": false, + }, + Object { + "answerLabel": "string", + "isTrue": false, + }, + Object { + "answerLabel": "Aristide Dumont", + "isTrue": true, + }, + ], + "explanation": "string", + "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", + "result": 0, + "source": "string", + }, + ], + "result": 0, "startDate": null, - "state": 4, - "success": 2, - "target": 15, - "title": "Challenge 1", - } + "state": 0, + }, + "startDate": null, + "state": 4, + "success": 2, + "target": 15, + "title": "Challenge 1", } - /> - <mock-challengecard - cardHeight={384} - cardWidth={285} - index={1} - indexSlider={3} - key="1" - moveToSlide={[Function]} - userChallenge={ - Object { - "action": Object { - "ecogesture": null, - "startDate": null, - "state": 0, - }, - "description": "Description challenge 2", - "duel": Object { - "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", - "duration": "P30D", - "fluidTypes": Array [], - "id": "DUEL001", - "startDate": null, - "state": 0, - "threshold": 0, - "title": "Title DUEL001", - "userConsumption": 0, - }, - "endingDate": null, - "exploration": Object { - "complementary_description": "Refaire un tour dans son profil si déjà fait", - "date": null, - "description": "Avoir complété son profil", - "ecogesture_id": "", - "fluid_condition": Array [], - "id": "EXPLORATION001", - "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", - "progress": 0, - "state": 0, - "target": 1, - "type": 1, - }, - "id": "CHALLENGE0002", - "progress": Object { - "actionProgress": 0, - "explorationProgress": 0, - "quizProgress": 0, + } + /> + <ChallengeCard + cardHeight={384} + cardWidth={285} + index={1} + indexSlider={0} + moveToSlide={[Function]} + userChallenge={ + Object { + "action": Object { + "ecogesture": null, + "startDate": null, + "state": 0, + }, + "description": "Description challenge 2", + "duel": Object { + "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", + "duration": "P30D", + "fluidTypes": Array [], + "id": "DUEL001", + "startDate": null, + "state": 0, + "threshold": 0, + "title": "Title DUEL001", + "userConsumption": 0, + }, + "endingDate": null, + "exploration": Object { + "complementary_description": "Refaire un tour dans son profil si déjà fait", + "date": null, + "description": "Avoir complété son profil", + "ecogesture_id": "", + "fluid_condition": Array [], + "id": "EXPLORATION001", + "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", + "progress": 0, + "state": 0, + "target": 1, + "type": 1, + }, + "id": "CHALLENGE0002", + "progress": Object { + "actionProgress": 0, + "explorationProgress": 0, + "quizProgress": 0, + }, + "quiz": Object { + "customQuestion": Object { + "interval": 20, + "period": Object {}, + "questionLabel": "Custom1", + "result": 0, + "singleFluid": false, + "timeStep": 20, + "type": 0, }, - "quiz": Object { - "customQuestion": Object { - "interval": 20, - "period": Object {}, - "questionLabel": "Custom1", + "id": "QUIZ001", + "questions": Array [ + Object { + "answers": Array [ + Object { + "answerLabel": "86 km", + "isTrue": true, + }, + Object { + "answerLabel": "78 km", + "isTrue": false, + }, + Object { + "answerLabel": "56 km", + "isTrue": false, + }, + ], + "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", + "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", "result": 0, - "singleFluid": false, - "timeStep": 20, - "type": 0, + "source": "string", }, - "id": "QUIZ001", - "questions": Array [ - Object { - "answers": Array [ - Object { - "answerLabel": "86 km", - "isTrue": true, - }, - Object { - "answerLabel": "78 km", - "isTrue": false, - }, - Object { - "answerLabel": "56 km", - "isTrue": false, - }, - ], - "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", - "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "1 point d’eau public pour 800 habitants.", - "isTrue": true, - }, - Object { - "answerLabel": "1 point d’eau public pour 400 habitants.", - "isTrue": false, - }, - Object { - "answerLabel": "1 point d’eau public pour 200 habitants.", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "François Mitterrand", - "isTrue": false, - }, - Object { - "answerLabel": "Napoléon Ier", - "isTrue": true, - }, - Object { - "answerLabel": "Napoléon III", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "Aristide Dumont", - "isTrue": true, - }, - ], - "explanation": "string", - "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", - "result": 0, - "source": "string", - }, - ], - "result": 0, - "startDate": null, - "state": 0, - }, + Object { + "answers": Array [ + Object { + "answerLabel": "1 point d’eau public pour 800 habitants.", + "isTrue": true, + }, + Object { + "answerLabel": "1 point d’eau public pour 400 habitants.", + "isTrue": false, + }, + Object { + "answerLabel": "1 point d’eau public pour 200 habitants.", + "isTrue": false, + }, + ], + "explanation": "string", + "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", + "result": 0, + "source": "string", + }, + Object { + "answers": Array [ + Object { + "answerLabel": "François Mitterrand", + "isTrue": false, + }, + Object { + "answerLabel": "Napoléon Ier", + "isTrue": true, + }, + Object { + "answerLabel": "Napoléon III", + "isTrue": false, + }, + ], + "explanation": "string", + "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", + "result": 0, + "source": "string", + }, + Object { + "answers": Array [ + Object { + "answerLabel": "string", + "isTrue": false, + }, + Object { + "answerLabel": "string", + "isTrue": false, + }, + Object { + "answerLabel": "Aristide Dumont", + "isTrue": true, + }, + ], + "explanation": "string", + "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", + "result": 0, + "source": "string", + }, + ], + "result": 0, "startDate": null, - "state": 4, - "success": 1, - "target": 15, - "title": "Challenge 2", - } + "state": 0, + }, + "startDate": null, + "state": 4, + "success": 1, + "target": 15, + "title": "Challenge 2", } - /> - <mock-challengecard - cardHeight={384} - cardWidth={285} - index={2} - indexSlider={3} - key="2" - moveToSlide={[Function]} - userChallenge={ - Object { - "action": Object { - "ecogesture": null, - "startDate": null, - "state": 0, - }, - "description": "Description challenge 3", - "duel": Object { - "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", - "duration": "P30D", - "fluidTypes": Array [], - "id": "DUEL001", - "startDate": null, - "state": 0, - "threshold": 0, - "title": "Title DUEL001", - "userConsumption": 0, - }, - "endingDate": null, - "exploration": Object { - "complementary_description": "Refaire un tour dans son profil si déjà fait", - "date": null, - "description": "Avoir complété son profil", - "ecogesture_id": "", - "fluid_condition": Array [], - "id": "EXPLORATION001", - "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", - "progress": 0, - "state": 0, - "target": 1, - "type": 1, - }, - "id": "CHALLENGE0003", - "progress": Object { - "actionProgress": 0, - "explorationProgress": 0, - "quizProgress": 0, + } + /> + <ChallengeCard + cardHeight={384} + cardWidth={285} + index={2} + indexSlider={0} + moveToSlide={[Function]} + userChallenge={ + Object { + "action": Object { + "ecogesture": null, + "startDate": null, + "state": 0, + }, + "description": "Description challenge 3", + "duel": Object { + "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", + "duration": "P30D", + "fluidTypes": Array [], + "id": "DUEL001", + "startDate": null, + "state": 0, + "threshold": 0, + "title": "Title DUEL001", + "userConsumption": 0, + }, + "endingDate": null, + "exploration": Object { + "complementary_description": "Refaire un tour dans son profil si déjà fait", + "date": null, + "description": "Avoir complété son profil", + "ecogesture_id": "", + "fluid_condition": Array [], + "id": "EXPLORATION001", + "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", + "progress": 0, + "state": 0, + "target": 1, + "type": 1, + }, + "id": "CHALLENGE0003", + "progress": Object { + "actionProgress": 0, + "explorationProgress": 0, + "quizProgress": 0, + }, + "quiz": Object { + "customQuestion": Object { + "interval": 20, + "period": Object {}, + "questionLabel": "Custom1", + "result": 0, + "singleFluid": false, + "timeStep": 20, + "type": 0, }, - "quiz": Object { - "customQuestion": Object { - "interval": 20, - "period": Object {}, - "questionLabel": "Custom1", + "id": "QUIZ001", + "questions": Array [ + Object { + "answers": Array [ + Object { + "answerLabel": "86 km", + "isTrue": true, + }, + Object { + "answerLabel": "78 km", + "isTrue": false, + }, + Object { + "answerLabel": "56 km", + "isTrue": false, + }, + ], + "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", + "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", "result": 0, - "singleFluid": false, - "timeStep": 20, - "type": 0, + "source": "string", }, - "id": "QUIZ001", - "questions": Array [ - Object { - "answers": Array [ - Object { - "answerLabel": "86 km", - "isTrue": true, - }, - Object { - "answerLabel": "78 km", - "isTrue": false, - }, - Object { - "answerLabel": "56 km", - "isTrue": false, - }, - ], - "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", - "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "1 point d’eau public pour 800 habitants.", - "isTrue": true, - }, - Object { - "answerLabel": "1 point d’eau public pour 400 habitants.", - "isTrue": false, - }, - Object { - "answerLabel": "1 point d’eau public pour 200 habitants.", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "François Mitterrand", - "isTrue": false, - }, - Object { - "answerLabel": "Napoléon Ier", - "isTrue": true, - }, - Object { - "answerLabel": "Napoléon III", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "Aristide Dumont", - "isTrue": true, - }, - ], - "explanation": "string", - "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", - "result": 0, - "source": "string", - }, - ], - "result": 0, - "startDate": null, - "state": 0, - }, + Object { + "answers": Array [ + Object { + "answerLabel": "1 point d’eau public pour 800 habitants.", + "isTrue": true, + }, + Object { + "answerLabel": "1 point d’eau public pour 400 habitants.", + "isTrue": false, + }, + Object { + "answerLabel": "1 point d’eau public pour 200 habitants.", + "isTrue": false, + }, + ], + "explanation": "string", + "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", + "result": 0, + "source": "string", + }, + Object { + "answers": Array [ + Object { + "answerLabel": "François Mitterrand", + "isTrue": false, + }, + Object { + "answerLabel": "Napoléon Ier", + "isTrue": true, + }, + Object { + "answerLabel": "Napoléon III", + "isTrue": false, + }, + ], + "explanation": "string", + "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", + "result": 0, + "source": "string", + }, + Object { + "answers": Array [ + Object { + "answerLabel": "string", + "isTrue": false, + }, + Object { + "answerLabel": "string", + "isTrue": false, + }, + Object { + "answerLabel": "Aristide Dumont", + "isTrue": true, + }, + ], + "explanation": "string", + "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", + "result": 0, + "source": "string", + }, + ], + "result": 0, "startDate": null, - "state": 2, - "success": 0, - "target": 15, - "title": "Challenge 3", - } + "state": 0, + }, + "startDate": null, + "state": 2, + "success": 0, + "target": 15, + "title": "Challenge 3", } - /> - <mock-challengecard - cardHeight={384} - cardWidth={285} - index={3} - indexSlider={3} - key="3" - moveToSlide={[Function]} - userChallenge={ - Object { - "action": Object { - "ecogesture": null, - "startDate": null, - "state": 0, - }, - "description": "Description challenge 4", - "duel": Object { - "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", - "duration": "P30D", - "fluidTypes": Array [], - "id": "DUEL001", - "startDate": null, - "state": 0, - "threshold": 0, - "title": "Title DUEL001", - "userConsumption": 0, - }, - "endingDate": null, - "exploration": Object { - "complementary_description": "Refaire un tour dans son profil si déjà fait", - "date": null, - "description": "Avoir complété son profil", - "ecogesture_id": "", - "fluid_condition": Array [], - "id": "EXPLORATION001", - "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", - "progress": 0, - "state": 0, - "target": 1, - "type": 1, - }, - "id": "CHALLENGE0004", - "progress": Object { - "actionProgress": 0, - "explorationProgress": 0, - "quizProgress": 0, + } + /> + <ChallengeCard + cardHeight={384} + cardWidth={285} + index={3} + indexSlider={0} + moveToSlide={[Function]} + userChallenge={ + Object { + "action": Object { + "ecogesture": null, + "startDate": null, + "state": 0, + }, + "description": "Description challenge 4", + "duel": Object { + "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", + "duration": "P30D", + "fluidTypes": Array [], + "id": "DUEL001", + "startDate": null, + "state": 0, + "threshold": 0, + "title": "Title DUEL001", + "userConsumption": 0, + }, + "endingDate": null, + "exploration": Object { + "complementary_description": "Refaire un tour dans son profil si déjà fait", + "date": null, + "description": "Avoir complété son profil", + "ecogesture_id": "", + "fluid_condition": Array [], + "id": "EXPLORATION001", + "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", + "progress": 0, + "state": 0, + "target": 1, + "type": 1, + }, + "id": "CHALLENGE0004", + "progress": Object { + "actionProgress": 0, + "explorationProgress": 0, + "quizProgress": 0, + }, + "quiz": Object { + "customQuestion": Object { + "interval": 20, + "period": Object {}, + "questionLabel": "Custom1", + "result": 0, + "singleFluid": false, + "timeStep": 20, + "type": 0, }, - "quiz": Object { - "customQuestion": Object { - "interval": 20, - "period": Object {}, - "questionLabel": "Custom1", + "id": "QUIZ001", + "questions": Array [ + Object { + "answers": Array [ + Object { + "answerLabel": "86 km", + "isTrue": true, + }, + Object { + "answerLabel": "78 km", + "isTrue": false, + }, + Object { + "answerLabel": "56 km", + "isTrue": false, + }, + ], + "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", + "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", "result": 0, - "singleFluid": false, - "timeStep": 20, - "type": 0, + "source": "string", }, - "id": "QUIZ001", - "questions": Array [ - Object { - "answers": Array [ - Object { - "answerLabel": "86 km", - "isTrue": true, - }, - Object { - "answerLabel": "78 km", - "isTrue": false, - }, - Object { - "answerLabel": "56 km", - "isTrue": false, - }, - ], - "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", - "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "1 point d’eau public pour 800 habitants.", - "isTrue": true, - }, - Object { - "answerLabel": "1 point d’eau public pour 400 habitants.", - "isTrue": false, - }, - Object { - "answerLabel": "1 point d’eau public pour 200 habitants.", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "François Mitterrand", - "isTrue": false, - }, - Object { - "answerLabel": "Napoléon Ier", - "isTrue": true, - }, - Object { - "answerLabel": "Napoléon III", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "Aristide Dumont", - "isTrue": true, - }, - ], - "explanation": "string", - "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", - "result": 0, - "source": "string", - }, - ], - "result": 0, - "startDate": null, - "state": 0, - }, + Object { + "answers": Array [ + Object { + "answerLabel": "1 point d’eau public pour 800 habitants.", + "isTrue": true, + }, + Object { + "answerLabel": "1 point d’eau public pour 400 habitants.", + "isTrue": false, + }, + Object { + "answerLabel": "1 point d’eau public pour 200 habitants.", + "isTrue": false, + }, + ], + "explanation": "string", + "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", + "result": 0, + "source": "string", + }, + Object { + "answers": Array [ + Object { + "answerLabel": "François Mitterrand", + "isTrue": false, + }, + Object { + "answerLabel": "Napoléon Ier", + "isTrue": true, + }, + Object { + "answerLabel": "Napoléon III", + "isTrue": false, + }, + ], + "explanation": "string", + "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", + "result": 0, + "source": "string", + }, + Object { + "answers": Array [ + Object { + "answerLabel": "string", + "isTrue": false, + }, + Object { + "answerLabel": "string", + "isTrue": false, + }, + Object { + "answerLabel": "Aristide Dumont", + "isTrue": true, + }, + ], + "explanation": "string", + "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", + "result": 0, + "source": "string", + }, + ], + "result": 0, "startDate": null, - "state": 1, - "success": 0, - "target": 15, - "title": "Challenge 4", - } + "state": 0, + }, + "startDate": null, + "state": 1, + "success": 0, + "target": 15, + "title": "Challenge 4", } - /> - <mock-challengecard - cardHeight={384} - cardWidth={285} - index={4} - indexSlider={3} - key="4" - moveToSlide={[Function]} - userChallenge={ - Object { - "action": Object { - "ecogesture": null, - "startDate": null, - "state": 0, - }, - "description": "Description challenge 5", - "duel": Object { - "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", - "duration": "P30D", - "fluidTypes": Array [], - "id": "DUEL001", - "startDate": null, - "state": 0, - "threshold": 0, - "title": "Title DUEL001", - "userConsumption": 0, - }, - "endingDate": null, - "exploration": Object { - "complementary_description": "Refaire un tour dans son profil si déjà fait", - "date": null, - "description": "Avoir complété son profil", - "ecogesture_id": "", - "fluid_condition": Array [], - "id": "EXPLORATION001", - "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", - "progress": 0, - "state": 0, - "target": 1, - "type": 1, - }, - "id": "CHALLENGE0005", - "progress": Object { - "actionProgress": 0, - "explorationProgress": 0, - "quizProgress": 0, + } + /> + <ChallengeCard + cardHeight={384} + cardWidth={285} + index={4} + indexSlider={0} + moveToSlide={[Function]} + userChallenge={ + Object { + "action": Object { + "ecogesture": null, + "startDate": null, + "state": 0, + }, + "description": "Description challenge 5", + "duel": Object { + "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", + "duration": "P30D", + "fluidTypes": Array [], + "id": "DUEL001", + "startDate": null, + "state": 0, + "threshold": 0, + "title": "Title DUEL001", + "userConsumption": 0, + }, + "endingDate": null, + "exploration": Object { + "complementary_description": "Refaire un tour dans son profil si déjà fait", + "date": null, + "description": "Avoir complété son profil", + "ecogesture_id": "", + "fluid_condition": Array [], + "id": "EXPLORATION001", + "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", + "progress": 0, + "state": 0, + "target": 1, + "type": 1, + }, + "id": "CHALLENGE0005", + "progress": Object { + "actionProgress": 0, + "explorationProgress": 0, + "quizProgress": 0, + }, + "quiz": Object { + "customQuestion": Object { + "interval": 20, + "period": Object {}, + "questionLabel": "Custom1", + "result": 0, + "singleFluid": false, + "timeStep": 20, + "type": 0, }, - "quiz": Object { - "customQuestion": Object { - "interval": 20, - "period": Object {}, - "questionLabel": "Custom1", + "id": "QUIZ001", + "questions": Array [ + Object { + "answers": Array [ + Object { + "answerLabel": "86 km", + "isTrue": true, + }, + Object { + "answerLabel": "78 km", + "isTrue": false, + }, + Object { + "answerLabel": "56 km", + "isTrue": false, + }, + ], + "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", + "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", "result": 0, - "singleFluid": false, - "timeStep": 20, - "type": 0, + "source": "string", }, - "id": "QUIZ001", - "questions": Array [ - Object { - "answers": Array [ - Object { - "answerLabel": "86 km", - "isTrue": true, - }, - Object { - "answerLabel": "78 km", - "isTrue": false, - }, - Object { - "answerLabel": "56 km", - "isTrue": false, - }, - ], - "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", - "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "1 point d’eau public pour 800 habitants.", - "isTrue": true, - }, - Object { - "answerLabel": "1 point d’eau public pour 400 habitants.", - "isTrue": false, - }, - Object { - "answerLabel": "1 point d’eau public pour 200 habitants.", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "François Mitterrand", - "isTrue": false, - }, - Object { - "answerLabel": "Napoléon Ier", - "isTrue": true, - }, - Object { - "answerLabel": "Napoléon III", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "Aristide Dumont", - "isTrue": true, - }, - ], - "explanation": "string", - "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", - "result": 0, - "source": "string", - }, - ], - "result": 0, - "startDate": null, - "state": 0, - }, + Object { + "answers": Array [ + Object { + "answerLabel": "1 point d’eau public pour 800 habitants.", + "isTrue": true, + }, + Object { + "answerLabel": "1 point d’eau public pour 400 habitants.", + "isTrue": false, + }, + Object { + "answerLabel": "1 point d’eau public pour 200 habitants.", + "isTrue": false, + }, + ], + "explanation": "string", + "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", + "result": 0, + "source": "string", + }, + Object { + "answers": Array [ + Object { + "answerLabel": "François Mitterrand", + "isTrue": false, + }, + Object { + "answerLabel": "Napoléon Ier", + "isTrue": true, + }, + Object { + "answerLabel": "Napoléon III", + "isTrue": false, + }, + ], + "explanation": "string", + "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", + "result": 0, + "source": "string", + }, + Object { + "answers": Array [ + Object { + "answerLabel": "string", + "isTrue": false, + }, + Object { + "answerLabel": "string", + "isTrue": false, + }, + Object { + "answerLabel": "Aristide Dumont", + "isTrue": true, + }, + ], + "explanation": "string", + "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", + "result": 0, + "source": "string", + }, + ], + "result": 0, "startDate": null, "state": 0, - "success": 0, - "target": 15, - "title": "Challenge 5", - } + }, + "startDate": null, + "state": 0, + "success": 0, + "target": 15, + "title": "Challenge 5", } - /> - <mock-challengecard - cardHeight={384} - cardWidth={285} - index={5} - indexSlider={3} - key="5" - moveToSlide={[Function]} - userChallenge={ - Object { - "action": Object { - "ecogesture": null, - "startDate": null, - "state": 0, - }, - "description": "Description challenge 6", - "duel": Object { - "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", - "duration": "P30D", - "fluidTypes": Array [], - "id": "DUEL001", - "startDate": null, - "state": 0, - "threshold": 0, - "title": "Title DUEL001", - "userConsumption": 0, - }, - "endingDate": null, - "exploration": Object { - "complementary_description": "Refaire un tour dans son profil si déjà fait", - "date": null, - "description": "Avoir complété son profil", - "ecogesture_id": "", - "fluid_condition": Array [], - "id": "EXPLORATION001", - "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", - "progress": 0, - "state": 0, - "target": 1, - "type": 1, - }, - "id": "CHALLENGE0006", - "progress": Object { - "actionProgress": 0, - "explorationProgress": 0, - "quizProgress": 0, + } + /> + <ChallengeCard + cardHeight={384} + cardWidth={285} + index={5} + indexSlider={0} + moveToSlide={[Function]} + userChallenge={ + Object { + "action": Object { + "ecogesture": null, + "startDate": null, + "state": 0, + }, + "description": "Description challenge 6", + "duel": Object { + "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", + "duration": "P30D", + "fluidTypes": Array [], + "id": "DUEL001", + "startDate": null, + "state": 0, + "threshold": 0, + "title": "Title DUEL001", + "userConsumption": 0, + }, + "endingDate": null, + "exploration": Object { + "complementary_description": "Refaire un tour dans son profil si déjà fait", + "date": null, + "description": "Avoir complété son profil", + "ecogesture_id": "", + "fluid_condition": Array [], + "id": "EXPLORATION001", + "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", + "progress": 0, + "state": 0, + "target": 1, + "type": 1, + }, + "id": "CHALLENGE0006", + "progress": Object { + "actionProgress": 0, + "explorationProgress": 0, + "quizProgress": 0, + }, + "quiz": Object { + "customQuestion": Object { + "interval": 20, + "period": Object {}, + "questionLabel": "Custom1", + "result": 0, + "singleFluid": false, + "timeStep": 20, + "type": 0, }, - "quiz": Object { - "customQuestion": Object { - "interval": 20, - "period": Object {}, - "questionLabel": "Custom1", + "id": "QUIZ001", + "questions": Array [ + Object { + "answers": Array [ + Object { + "answerLabel": "86 km", + "isTrue": true, + }, + Object { + "answerLabel": "78 km", + "isTrue": false, + }, + Object { + "answerLabel": "56 km", + "isTrue": false, + }, + ], + "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", + "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", "result": 0, - "singleFluid": false, - "timeStep": 20, - "type": 0, + "source": "string", }, - "id": "QUIZ001", - "questions": Array [ - Object { - "answers": Array [ - Object { - "answerLabel": "86 km", - "isTrue": true, - }, - Object { - "answerLabel": "78 km", - "isTrue": false, - }, - Object { - "answerLabel": "56 km", - "isTrue": false, - }, - ], - "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", - "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "1 point d’eau public pour 800 habitants.", - "isTrue": true, - }, - Object { - "answerLabel": "1 point d’eau public pour 400 habitants.", - "isTrue": false, - }, - Object { - "answerLabel": "1 point d’eau public pour 200 habitants.", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "François Mitterrand", - "isTrue": false, - }, - Object { - "answerLabel": "Napoléon Ier", - "isTrue": true, - }, - Object { - "answerLabel": "Napoléon III", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "Aristide Dumont", - "isTrue": true, - }, - ], - "explanation": "string", - "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", - "result": 0, - "source": "string", - }, - ], - "result": 0, - "startDate": null, - "state": 0, - }, + Object { + "answers": Array [ + Object { + "answerLabel": "1 point d’eau public pour 800 habitants.", + "isTrue": true, + }, + Object { + "answerLabel": "1 point d’eau public pour 400 habitants.", + "isTrue": false, + }, + Object { + "answerLabel": "1 point d’eau public pour 200 habitants.", + "isTrue": false, + }, + ], + "explanation": "string", + "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", + "result": 0, + "source": "string", + }, + Object { + "answers": Array [ + Object { + "answerLabel": "François Mitterrand", + "isTrue": false, + }, + Object { + "answerLabel": "Napoléon Ier", + "isTrue": true, + }, + Object { + "answerLabel": "Napoléon III", + "isTrue": false, + }, + ], + "explanation": "string", + "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", + "result": 0, + "source": "string", + }, + Object { + "answers": Array [ + Object { + "answerLabel": "string", + "isTrue": false, + }, + Object { + "answerLabel": "string", + "isTrue": false, + }, + Object { + "answerLabel": "Aristide Dumont", + "isTrue": true, + }, + ], + "explanation": "string", + "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", + "result": 0, + "source": "string", + }, + ], + "result": 0, "startDate": null, "state": 0, - "success": 0, - "target": 15, - "title": "Challenge 6", - } + }, + "startDate": null, + "state": 0, + "success": 0, + "target": 15, + "title": "Challenge 6", } - /> - </div> - </div> - <div - className="sliderButtons" - > - <StyledIconButton - aria-label="challenge.accessibility.button_slider_previous" - icon="test-file-stub" - onClick={[Function]} - size={16} - > - <WithStyles(WithStyles(ForwardRef(IconButton))) - aria-label="challenge.accessibility.button_slider_previous" - onClick={[Function]} - > - <WithStyles(ForwardRef(IconButton)) - aria-label="challenge.accessibility.button_slider_previous" - classes={ - Object { - "root": "WithStyles(ForwardRef(IconButton))-root-1", - } - } - onClick={[Function]} - > - <ForwardRef(IconButton) - aria-label="challenge.accessibility.button_slider_previous" - classes={ - Object { - "colorInherit": "MuiIconButton-colorInherit", - "colorPrimary": "MuiIconButton-colorPrimary", - "colorSecondary": "MuiIconButton-colorSecondary", - "disabled": "Mui-disabled", - "edgeEnd": "MuiIconButton-edgeEnd", - "edgeStart": "MuiIconButton-edgeStart", - "label": "MuiIconButton-label", - "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1", - "sizeSmall": "MuiIconButton-sizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="challenge.accessibility.button_slider_previous" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1" - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <ForwardRef(ButtonBase) - aria-label="challenge.accessibility.button_slider_previous" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <button - aria-label="challenge.accessibility.button_slider_previous" - className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <StyledIcon - icon="test-file-stub" - size={16} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={16} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - </span> - <NoSsr> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </NoSsr> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - </WithStyles(WithStyles(ForwardRef(IconButton)))> - </StyledIconButton> - <StyledIconButton - aria-label="challenge.accessibility.button_slider_next" - icon="test-file-stub" - onClick={[Function]} - size={16} - > - <WithStyles(WithStyles(ForwardRef(IconButton))) - aria-label="challenge.accessibility.button_slider_next" - onClick={[Function]} - > - <WithStyles(ForwardRef(IconButton)) - aria-label="challenge.accessibility.button_slider_next" - classes={ - Object { - "root": "WithStyles(ForwardRef(IconButton))-root-1", - } - } - onClick={[Function]} - > - <ForwardRef(IconButton) - aria-label="challenge.accessibility.button_slider_next" - classes={ - Object { - "colorInherit": "MuiIconButton-colorInherit", - "colorPrimary": "MuiIconButton-colorPrimary", - "colorSecondary": "MuiIconButton-colorSecondary", - "disabled": "Mui-disabled", - "edgeEnd": "MuiIconButton-edgeEnd", - "edgeStart": "MuiIconButton-edgeStart", - "label": "MuiIconButton-label", - "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1", - "sizeSmall": "MuiIconButton-sizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="challenge.accessibility.button_slider_next" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1" - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <ForwardRef(ButtonBase) - aria-label="challenge.accessibility.button_slider_next" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <button - aria-label="challenge.accessibility.button_slider_next" - className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <StyledIcon - icon="test-file-stub" - size={16} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={16} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - </span> - <NoSsr> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </NoSsr> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - </WithStyles(WithStyles(ForwardRef(IconButton)))> - </StyledIconButton> + } + /> </div> - </mock-content> - </ChallengeView> -</Provider> + </div> + <div + className="sliderButtons" + > + <StyledIconButton + aria-label="challenge.accessibility.button_slider_previous" + icon="test-file-stub" + onClick={[Function]} + size={16} + /> + <StyledIconButton + aria-label="challenge.accessibility.button_slider_next" + icon="test-file-stub" + onClick={[Function]} + size={16} + /> + </div> + </Content> +</React.Fragment> `; diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index 0df5633eb..6e141e273 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -1,12 +1,13 @@ import React, { useCallback, useEffect } from 'react' import './content.scss' +import { history } from 'components/App' import { useSelector, useDispatch } from 'react-redux' import { AppStore } from 'store' import { changeScreenType } from 'store/global/global.actions' import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions' import { ScreenType } from 'enum/screen.enum' import FeedbackModal from 'components/Feedback/FeedbackModal' -import { useHistory } from 'react-router-dom' + interface ContentProps { children?: React.ReactNode height?: number @@ -19,7 +20,6 @@ const Content: React.FC<ContentProps> = ({ background = 'inherit', }: ContentProps) => { const dispatch = useDispatch() - const history = useHistory() const { screenType } = useSelector((state: AppStore) => state.ecolyo.global) const { isFeedbacksOpen } = useSelector( (state: AppStore) => state.ecolyo.modal @@ -38,10 +38,10 @@ const Content: React.FC<ContentProps> = ({ /** * Handle Desktop scroll */ - const handleWindowScroll = useCallback(() => { + const handleWindowScroll = () => { app && app.scrollTo(0, 0) window.scrollTo(0, 0) - }, [app]) + } // Set listners for scroll useEffect(() => { @@ -50,7 +50,7 @@ const Content: React.FC<ContentProps> = ({ // remove listner subscription listner() } - }, [handleWindowScroll, history]) + }, []) useEffect(() => { function handleResize() { diff --git a/src/components/Duel/DuelView.spec.tsx b/src/components/Duel/DuelView.spec.tsx index f1fa4c7f1..5d6eece3c 100644 --- a/src/components/Duel/DuelView.spec.tsx +++ b/src/components/Duel/DuelView.spec.tsx @@ -10,10 +10,6 @@ import DuelUnlocked from './DuelUnlocked' import DuelOngoing from './DuelOngoing' import { UserDuelState } from 'enum/userDuel.enum' -jest.mock('components/Header/CozyBar', () => 'mock-cozybar') -jest.mock('components/Header/Header', () => 'mock-header') -jest.mock('components/Content/Content', () => 'mock-content') - const mockUseSelector = jest.spyOn(reactRedux, 'useSelector') describe('DuelView component', () => { diff --git a/src/components/Ecogesture/EcogestureView.spec.tsx b/src/components/Ecogesture/EcogestureView.spec.tsx index cc3aa53c2..0c7ab368b 100644 --- a/src/components/Ecogesture/EcogestureView.spec.tsx +++ b/src/components/Ecogesture/EcogestureView.spec.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/display-name */ import React from 'react' import { mount } from 'enzyme' import { Provider } from 'react-redux' diff --git a/src/components/Exploration/ExplorationView.spec.tsx b/src/components/Exploration/ExplorationView.spec.tsx index af8c18175..afc90e310 100644 --- a/src/components/Exploration/ExplorationView.spec.tsx +++ b/src/components/Exploration/ExplorationView.spec.tsx @@ -8,39 +8,19 @@ import { challengeStateData } from '../../../tests/__mocks__/challengeStateData. import ExplorationFinished from './ExplorationFinished' import ExplorationError from './ExplorationError' import ExplorationOngoing from './ExplorationOngoing' -import { UserExplorationState } from 'enum/userExploration.enum' - -jest.mock('components/Header/CozyBar', () => 'mock-cozybar') -jest.mock('components/Header/Header', () => 'mock-header') -jest.mock('components/Content/Content', () => 'mock-content') const mockUseSelector = jest.spyOn(reactRedux, 'useSelector') describe('ExplorationView', () => { - it('should be rendered with ExplorationError component when unknown exploration state', () => { - const updatedUserChallenge = { - ...userChallengeData[0], - exploration: { - ...userChallengeData[0].exploration, - state: 99, - }, - } - const updatedChallengeState = { - ...challengeStateData, - currentChallenge: updatedUserChallenge, - } - mockUseSelector.mockReturnValue(updatedChallengeState) + it('should be rendered with ExplorationView component when no exploration state', () => { + mockUseSelector.mockReturnValue(challengeStateData) const wrapper = shallow(<ExplorationView />) - expect(wrapper.find(ExplorationError).exists()).toBeTruthy() + expect(wrapper.find(ExplorationError).exists()) }) - - it('should be rendered with ExplorationOngoing component when exploration state = unlocked', () => { + it('should be rendered with ExplorationView component when exploration state = unlocked', () => { const updatedUserChallenge = { ...userChallengeData[0], - exploration: { - ...userChallengeData[0].exploration, - state: UserExplorationState.UNLOCKED, - }, + quiz: { ...userChallengeData[0].quiz, state: UserQuizState.UNLOCKED }, } const updatedChallengeState = { ...challengeStateData, @@ -48,16 +28,12 @@ describe('ExplorationView', () => { } mockUseSelector.mockReturnValue(updatedChallengeState) const wrapper = shallow(<ExplorationView />) - expect(wrapper.find(ExplorationOngoing).exists()).toBeTruthy() + expect(wrapper.find(ExplorationOngoing).exists()) }) - - it('should be rendered with ExplorationOngoing component when exploration state = ongoing', () => { + it('should be rendered with ExplorationView component when exploration state = ongoing', () => { const updatedUserChallenge = { ...userChallengeData[0], - exploration: { - ...userChallengeData[0].exploration, - state: UserExplorationState.ONGOING, - }, + quiz: { ...userChallengeData[0].quiz, state: UserQuizState.ONGOING }, } const updatedChallengeState = { ...challengeStateData, @@ -65,16 +41,12 @@ describe('ExplorationView', () => { } mockUseSelector.mockReturnValue(updatedChallengeState) const wrapper = shallow(<ExplorationView />) - expect(wrapper.find(ExplorationOngoing).exists()).toBeTruthy() + expect(wrapper.find(ExplorationOngoing).exists()) }) - - it('should be rendered with ExplorationFinished component when exploration state = Done', () => { + it('should be rendered with ExplorationView component when exploration state = Done', () => { const updatedUserChallenge = { ...userChallengeData[0], - exploration: { - ...userChallengeData[0].exploration, - state: UserExplorationState.DONE, - }, + quiz: { ...userChallengeData[0].quiz, state: UserQuizState.DONE }, } const updatedChallengeState = { ...challengeStateData, @@ -82,6 +54,6 @@ describe('ExplorationView', () => { } mockUseSelector.mockReturnValue(updatedChallengeState) const wrapper = shallow(<ExplorationView />) - expect(wrapper.find(ExplorationFinished).exists()).toBeTruthy() + expect(wrapper.find(ExplorationFinished).exists()) }) }) diff --git a/src/components/FAQ/FAQView.spec.tsx b/src/components/FAQ/FAQView.spec.tsx index 74f74ef60..0cf009bf0 100644 --- a/src/components/FAQ/FAQView.spec.tsx +++ b/src/components/FAQ/FAQView.spec.tsx @@ -11,9 +11,6 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { }), } }) -jest.mock('components/Header/CozyBar', () => 'mock-cozybar') -jest.mock('components/Header/Header', () => 'mock-header') -jest.mock('components/Content/Content', () => 'mock-content') describe('FAQView component', () => { it('should render only the parent component', () => { diff --git a/src/components/FAQ/__snapshots__/FAQView.spec.tsx.snap b/src/components/FAQ/__snapshots__/FAQView.spec.tsx.snap index 285ef8a29..d39d3478b 100644 --- a/src/components/FAQ/__snapshots__/FAQView.spec.tsx.snap +++ b/src/components/FAQ/__snapshots__/FAQView.spec.tsx.snap @@ -1,20 +1,20 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FAQView component should render only the parent component 1`] = ` -<React.Fragment> - <mock-cozybar - displayBackArrow={true} - titleKey="common.title_faq" - /> - <mock-header - desktopTitleKey="common.title_faq" - displayBackArrow={true} - setHeaderHeight={[Function]} - /> - <mock-content - height={0} - > - <FAQContent /> - </mock-content> -</React.Fragment> -`; +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FAQView component should render only the parent component 1`] = ` +<React.Fragment> + <CozyBar + displayBackArrow={true} + titleKey="common.title_faq" + /> + <Header + desktopTitleKey="common.title_faq" + displayBackArrow={true} + setHeaderHeight={[Function]} + /> + <Content + height={0} + > + <FAQContent /> + </Content> +</React.Fragment> +`; diff --git a/src/components/GCU/GCUView.spec.tsx b/src/components/GCU/GCUView.spec.tsx index 6ede9dbdc..809feee5f 100644 --- a/src/components/GCU/GCUView.spec.tsx +++ b/src/components/GCU/GCUView.spec.tsx @@ -2,10 +2,6 @@ import React from 'react' import { shallow } from 'enzyme' import GCUView from 'components/GCU/GCUView' -jest.mock('components/Header/CozyBar', () => 'mock-cozybar') -jest.mock('components/Header/Header', () => 'mock-header') -jest.mock('components/Content/Content', () => 'mock-content') - describe('GCUView component', () => { it('should be rendered correctly', () => { const component = shallow(<GCUView />).getElement() diff --git a/src/components/GCU/__snapshots__/GCUView.spec.tsx.snap b/src/components/GCU/__snapshots__/GCUView.spec.tsx.snap index bcc93b8a7..33e490ab2 100644 --- a/src/components/GCU/__snapshots__/GCUView.spec.tsx.snap +++ b/src/components/GCU/__snapshots__/GCUView.spec.tsx.snap @@ -2,19 +2,19 @@ exports[`GCUView component should be rendered correctly 1`] = ` <React.Fragment> - <mock-cozybar + <CozyBar displayBackArrow={true} titleKey="common.title_gcu" /> - <mock-header + <Header desktopTitleKey="common.title_gcu" displayBackArrow={true} setHeaderHeight={[Function]} /> - <mock-content + <Content height={0} > <GCUContent /> - </mock-content> + </Content> </React.Fragment> `; diff --git a/src/components/Home/ConsumptionView.spec.tsx b/src/components/Home/ConsumptionView.spec.tsx index 1692736e7..a272d2bf2 100644 --- a/src/components/Home/ConsumptionView.spec.tsx +++ b/src/components/Home/ConsumptionView.spec.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/display-name */ import React from 'react' import { mount } from 'enzyme' import { Provider } from 'react-redux' @@ -11,8 +12,6 @@ import * as chartActions from 'store/chart/chart.actions' import { FluidState, FluidType } from 'enum/fluid.enum' import { TimeStep } from 'enum/timeStep.enum' import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner' -import FluidButtons from 'components/Home/FluidButtons' -import KonnectorViewerList from 'components/Konnector/KonnectorViewerList' import ConsumptionView from './ConsumptionView' import { FluidStatus } from 'models' import { mockTestProfile1 } from '../../../tests/__mocks__/profileType.mock' @@ -78,7 +77,6 @@ describe('ConsumptionView component', () => { loading: false, fluidStatus: mockFluidStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, - openPartnersIssueModal: false, }) const wrapper = mount( <Provider store={store}> @@ -102,7 +100,6 @@ describe('ConsumptionView component', () => { loading: true, fluidStatus: mockFluidStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, - openPartnersIssueModal: false, }) const wrapper = mount( <Provider store={store}> @@ -121,7 +118,6 @@ describe('ConsumptionView component', () => { loading: true, fluidStatus: mockInitialEcolyoState.global.fluidStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, - openPartnersIssueModal: false, }) mount( <Provider store={store}> @@ -131,14 +127,12 @@ describe('ConsumptionView component', () => { expect(setCurrentTimeStepSpy).toBeCalledTimes(1) expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.WEEK) }) - it('should render konnector list when no fluid is connected', () => { useSelectorSpy.mockReturnValue({ currentTimeStep: TimeStep.WEEK, loading: true, fluidStatus: mockInitialEcolyoState.global.fluidStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, - openPartnersIssueModal: false, }) const wrapper = mount( <Provider store={store}> @@ -147,7 +141,6 @@ describe('ConsumptionView component', () => { ) expect(wrapper.find('mock-consumptiondetails').exists()).toBeTruthy() }) - it('should render mutlifluid consumption if at least one fluid is connected', () => { const updatedStatus: FluidStatus[] = mockInitialEcolyoState.global.fluidStatus @@ -158,7 +151,6 @@ describe('ConsumptionView component', () => { loading: true, fluidStatus: updatedStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, - openPartnersIssueModal: false, }) const wrapper = mount( <Provider store={store}> @@ -167,7 +159,6 @@ describe('ConsumptionView component', () => { ) expect(wrapper.find('.consumptionview-content').exists()).toBeTruthy() }) - it('should render Electricity when elec is connected', () => { const updatedStatus: FluidStatus[] = mockInitialEcolyoState.global.fluidStatus @@ -177,7 +168,6 @@ describe('ConsumptionView component', () => { loading: true, fluidStatus: updatedStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, - openPartnersIssueModal: false, }) const wrapper = mount( <Provider store={store}> diff --git a/src/components/LegalNotice/LegalNoticeView.spec.tsx b/src/components/LegalNotice/LegalNoticeView.spec.tsx index 2c3c35247..d63efac8a 100644 --- a/src/components/LegalNotice/LegalNoticeView.spec.tsx +++ b/src/components/LegalNotice/LegalNoticeView.spec.tsx @@ -2,10 +2,6 @@ import React from 'react' import { shallow } from 'enzyme' import LegalNoticeView from 'components/LegalNotice/LegalNoticeView' -jest.mock('components/Header/CozyBar', () => 'mock-cozybar') -jest.mock('components/Header/Header', () => 'mock-header') -jest.mock('components/Content/Content', () => 'mock-content') - describe('LegalNoticeView component', () => { it('should be rendered correctly', () => { const component = shallow(<LegalNoticeView />).getElement() diff --git a/src/components/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap b/src/components/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap index 52b42634c..50fb84232 100644 --- a/src/components/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap +++ b/src/components/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap @@ -2,19 +2,19 @@ exports[`LegalNoticeView component should be rendered correctly 1`] = ` <React.Fragment> - <mock-cozybar + <CozyBar displayBackArrow={true} titleKey="common.title_legal_notice" /> - <mock-header + <Header desktopTitleKey="common.title_legal_notice" displayBackArrow={true} setHeaderHeight={[Function]} /> - <mock-content + <Content height={0} > <LegalNoticeContent /> - </mock-content> + </Content> </React.Fragment> `; diff --git a/src/components/Options/OptionsView.spec.tsx b/src/components/Options/OptionsView.spec.tsx index 0f2f73c8d..a1fc5688d 100644 --- a/src/components/Options/OptionsView.spec.tsx +++ b/src/components/Options/OptionsView.spec.tsx @@ -2,12 +2,9 @@ import React from 'react' import { shallow } from 'enzyme' import OptionsView from 'components/Options/OptionsView' -jest.mock('components/Header/CozyBar', () => 'mock-cozybar') -jest.mock('components/Header/Header', () => 'mock-header') -jest.mock('components/Content/Content', () => 'mock-content') jest.mock( 'components/Konnector/KonnectorViewerList', - () => 'mock-konnectorviewerlist' + () => 'KonnectorViewerList' ) describe('OptionsView component', () => { diff --git a/src/components/Options/UnSubscribe.spec.tsx b/src/components/Options/UnSubscribe.spec.tsx index bd7b90d46..e77f60d6a 100644 --- a/src/components/Options/UnSubscribe.spec.tsx +++ b/src/components/Options/UnSubscribe.spec.tsx @@ -1,6 +1,5 @@ import React from 'react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import { Provider } from 'react-redux' import { createMockStore, @@ -19,9 +18,6 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { }), } }) -jest.mock('components/Header/CozyBar', () => 'mock-cozybar') -jest.mock('components/Header/Header', () => 'mock-header') -jest.mock('components/Content/Content', () => 'mock-content') const mockUpdateProfile = jest.fn() jest.mock('services/profile.service', () => { @@ -31,6 +27,7 @@ jest.mock('services/profile.service', () => { } }) }) +// const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch') const updateProfileSpy = jest.spyOn(profileActions, 'updateProfile') describe('UnSubscribe component', () => { @@ -46,8 +43,8 @@ describe('UnSubscribe component', () => { <Provider store={store}> <UnSubscribe /> </Provider> - ) - expect(toJson(wrapper)).toMatchSnapshot() + ).getElement() + expect(wrapper).toMatchSnapshot() }) it('should click on button and deactivate report', () => { diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap index 56c7180ee..a77207e38 100644 --- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap +++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap @@ -2,14 +2,14 @@ exports[`OptionsView component should be rendered correctly 1`] = ` <React.Fragment> - <mock-cozybar + <CozyBar titleKey="common.title_options" /> - <mock-header + <Header desktopTitleKey="common.title_options" setHeaderHeight={[Function]} /> - <mock-content + <Content height={0} > <ProfileTypeOptions /> @@ -26,6 +26,6 @@ exports[`OptionsView component should be rendered correctly 1`] = ` /> </div> <Version /> - </mock-content> + </Content> </React.Fragment> `; diff --git a/src/components/Options/__snapshots__/UnSubscribe.spec.tsx.snap b/src/components/Options/__snapshots__/UnSubscribe.spec.tsx.snap index 850bd8297..fc7a7ac67 100644 --- a/src/components/Options/__snapshots__/UnSubscribe.spec.tsx.snap +++ b/src/components/Options/__snapshots__/UnSubscribe.spec.tsx.snap @@ -13,202 +13,6 @@ exports[`UnSubscribe component should be rendered correctly 1`] = ` } } > - <UnSubscribe> - <mock-cozybar - titleKey="common.title_analysis" - /> - <mock-header - desktopTitleKey="common.title_analysis" - setHeaderHeight={[Function]} - /> - <mock-content - height={0} - > - <div - className="unsubscribe-container" - > - <StyledIcon - className="profile-icon" - icon="test-file-stub" - size={250} - > - <Icon - aria-hidden={true} - className="profile-icon" - icon="test-file-stub" - size={250} - spin={false} - > - <Component - aria-hidden={true} - className="profile-icon styles__icon___23x3R" - height={250} - style={Object {}} - width={250} - > - <svg - aria-hidden={true} - className="profile-icon styles__icon___23x3R" - height={250} - style={Object {}} - width={250} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - <div - className="text-20-bold head" - > - unsubscribe.title - </div> - <div - className="text-16-normal question" - > - unsubscribe.content - </div> - <WithStyles(ForwardRef(Button)) - aria-label="unsubscribe.button_accessibility" - classes={ - Object { - "label": "text-18-bold", - "root": "btn-highlight", - } - } - onClick={[Function]} - type="submit" - variant="contained" - > - <ForwardRef(Button) - aria-label="unsubscribe.button_accessibility" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label text-18-bold", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root btn-highlight", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - type="submit" - variant="contained" - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="unsubscribe.button_accessibility" - className="MuiButton-root btn-highlight MuiButton-contained" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="submit" - > - <ForwardRef(ButtonBase) - aria-label="unsubscribe.button_accessibility" - className="MuiButton-root btn-highlight MuiButton-contained" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="submit" - > - <button - aria-label="unsubscribe.button_accessibility" - className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-contained" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="submit" - > - <span - className="MuiButton-label text-18-bold" - > - unsubscribe.button_text - </span> - <NoSsr> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </NoSsr> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </mock-content> - </UnSubscribe> + <UnSubscribe /> </Provider> `; diff --git a/src/components/ProfileType/ProfileTypeView.spec.tsx b/src/components/ProfileType/ProfileTypeView.spec.tsx index 8c3385e1f..8bc146023 100644 --- a/src/components/ProfileType/ProfileTypeView.spec.tsx +++ b/src/components/ProfileType/ProfileTypeView.spec.tsx @@ -2,6 +2,9 @@ import React from 'react' import { Provider } from 'react-redux' import { mount } from 'enzyme' import ProfileTypeView from 'components/ProfileType/ProfileTypeView' +import CozyBar from 'components/Header/CozyBar' +import Header from 'components/Header/Header' +import Content from 'components/Content/Content' import { createMockStore, mockInitialEcolyoState, @@ -17,10 +20,6 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { } }) -jest.mock('components/Header/CozyBar', () => 'mock-cozybar') -jest.mock('components/Header/Header', () => 'mock-header') -jest.mock('components/Content/Content', () => 'mock-content') - describe('ProfileTypeView component', () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any let store: any @@ -34,9 +33,8 @@ describe('ProfileTypeView component', () => { <ProfileTypeView /> </Provider> ) - expect(wrapper.find('mock-cozybar').exists()).toBeTruthy() - expect(wrapper.find('mock-header').exists()).toBeTruthy() - expect(wrapper.find('mock-content').exists()).toBeTruthy() - expect(wrapper.find('.profile-type-container').exists()).toBeTruthy() + expect(wrapper.find(CozyBar)).toBeTruthy() + expect(wrapper.find(Header)).toBeTruthy() + expect(wrapper.find(Content)).toBeTruthy() }) }) diff --git a/src/components/ProfileType/ProfileTypeView.tsx b/src/components/ProfileType/ProfileTypeView.tsx index bf8c1ec0d..40bfbdef8 100644 --- a/src/components/ProfileType/ProfileTypeView.tsx +++ b/src/components/ProfileType/ProfileTypeView.tsx @@ -16,11 +16,11 @@ import { IndividualOrCollective, OutsideFacingWalls, ProfileTypeFormType, - ProfileTypeStepForm, ThreeChoicesAnswer, WarmingType, } from 'enum/profileType.enum' import { FluidType } from 'enum/fluid.enum' +import { ProfileTypeStepForm } from 'enum/profileType.enum' import ProfileTypeFormMultiChoice from 'components/ProfileType/ProfileTypeFormMultiChoice' import ProfileTypeFormNumber from 'components/ProfileType/ProfileTypeFormNumber' import ProfileTypeFormNumberSelection from 'components/ProfileType/ProfileTypeFormNumberSelection' diff --git a/src/components/Quiz/QuizView.spec.tsx b/src/components/Quiz/QuizView.spec.tsx index fec5d9281..788a3fe49 100644 --- a/src/components/Quiz/QuizView.spec.tsx +++ b/src/components/Quiz/QuizView.spec.tsx @@ -9,9 +9,6 @@ import QuizBegin from './QuizBegin' import QuizQuestion from './QuizQuestion' import QuizFinish from './QuizFinish' -jest.mock('components/Header/CozyBar', () => 'mock-cozybar') -jest.mock('components/Header/Header', () => 'mock-header') -jest.mock('components/Content/Content', () => 'mock-content') const mockUseSelector = jest.spyOn(reactRedux, 'useSelector') describe('QuizView component', () => { @@ -26,7 +23,7 @@ describe('QuizView component', () => { } mockUseSelector.mockReturnValue(updatedChallengeState) const wrapper = shallow(<QuizView />) - expect(wrapper.find(QuizBegin).exists()).toBeTruthy() + expect(wrapper.find(QuizBegin).exists()) }) it('should be rendered with QuizQuestion component when quiz state = ongoing', () => { @@ -40,7 +37,7 @@ describe('QuizView component', () => { } mockUseSelector.mockReturnValue(updatedChallengeState) const wrapper = shallow(<QuizView />) - expect(wrapper.find(QuizQuestion).exists()).toBeTruthy() + expect(wrapper.find(QuizQuestion).exists()) }) it('should be rendered with QuizFinish component when quiz state = done', () => { @@ -54,7 +51,7 @@ describe('QuizView component', () => { } mockUseSelector.mockReturnValue(updatedChallengeState) const wrapper = shallow(<QuizView />) - expect(wrapper.find(QuizFinish).exists()).toBeTruthy() + expect(wrapper.find(QuizFinish).exists()) }) it('should be rendered with QuizBegin component when quiz state = null', () => { @@ -68,6 +65,6 @@ describe('QuizView component', () => { } mockUseSelector.mockReturnValue(updatedChallengeState) const wrapper = shallow(<QuizView />) - expect(wrapper.find(QuizBegin).exists()).toBeTruthy() + expect(wrapper.find(QuizBegin).exists()) }) }) diff --git a/src/services/environment.service.ts b/src/services/environment.service.ts index 4537dc159..0fb89f8f4 100644 --- a/src/services/environment.service.ts +++ b/src/services/environment.service.ts @@ -1,5 +1,4 @@ declare const __IS_ALPHA__: boolean -declare const __DEVELOPMENT__: boolean export default class EnvironmentService { private isAlpha() { @@ -22,8 +21,4 @@ export default class EnvironmentService { return 'https://ecolyo-agent-rec.grandlyon.com' } } - - public isDev() { - return __DEVELOPMENT__ - } } diff --git a/src/targets/browser/index.ejs b/src/targets/browser/index.ejs index a30958e2e..3f5bf59a4 100644 --- a/src/targets/browser/index.ejs +++ b/src/targets/browser/index.ejs @@ -28,19 +28,25 @@ {{.ThemeCSS}} <% if (__TARGET__ === 'mobile') { %> + <meta name="format-detection" content="telephone=no"> <script src="cordova.js" defer></script> <% } else if (__STACK_ASSETS__) { %> {{.CozyBar}} <% } %> - <script src="//{{.Domain}}/assets/js/piwik.js"></script> - </head> <body> <div role="application" class="application" - data-cozy="{{.CozyData}}" + data-cozy-token="{{.Token}}" + data-cozy-domain="{{.Domain}}" + data-cozy-locale="{{.Locale}}" + data-cozy-app-name="{{.AppName}}" + data-cozy-app-slug="{{.AppSlug}}" + data-cozy-app-name-prefix="{{.AppNamePrefix}}" + data-cozy-app-editor="{{.AppEditor}}" + data-cozy-icon-path="{{.IconPath}}" > <% _.forEach(htmlWebpackPlugin.files.js, function(file) { %> <script src="<%- file %>"></script> diff --git a/src/targets/browser/index.tsx b/src/targets/browser/index.tsx index 93fcbc519..8337a39ba 100644 --- a/src/targets/browser/index.tsx +++ b/src/targets/browser/index.tsx @@ -1,91 +1,50 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-var-requires */ /* global cozy */ -declare let cozy: any -declare let __PIWIK_TRACKER_URL__: string -declare let __PIWIK_SITEID__: number -declare let Piwik: any - import '../../styles/index.scss' import React from 'react' import { render } from 'react-dom' -import CozyClient, { Client, CozyProvider } from 'cozy-client' +import { Client, CozyProvider } from 'cozy-client' import { Provider } from 'react-redux' import configureStore from 'store' import { I18n, initTranslation } from 'cozy-ui/transpiled/react/I18n' import { handleOAuthResponse } from 'cozy-harvest-lib/dist/helpers/oauth' import { memoize } from 'lodash' -import manifest from '../../../manifest.webapp' -import schema from 'doctypes' -import { createBrowserHistory, History } from 'history' -import { HashRouter } from 'react-router-dom' -import MatomoTracker from 'utils/matomoTracker' +import { getClient } from '../../utils/client' +import { getValues, initBar } from '../../utils/bar' const setupApp = memoize(() => { - const history: History = createBrowserHistory() - // eslint-disable-next-line @typescript-eslint/no-explicit-any const root: any = document.querySelector('[role=application]') - const data = JSON.parse(root.dataset.cozy) - const protocol = window.location.protocol - const cozyUrl = `${protocol}//${data.domain}` - - const locale = 'fr' - const polyglot: any = initTranslation(locale, lang => + const { lang }: any = getValues(root.dataset) + const polyglot: any = initTranslation(lang, lang => require(`locales/${lang}`) ) - - const client: Client = new CozyClient({ - uri: cozyUrl, - token: data.token, - appMetadata: { - slug: manifest.name, - version: manifest.version, - }, - schema, - }) - + const client: Client = getClient() const persistedState: any = {} const store: any = configureStore(client, persistedState) - cozy.bar.init({ - appName: data.app.name, - appEditor: data.app.editor, - cozyClient: client, - iconPath: data.app.icon, - lang: data.locale, - replaceTitleOnMobile: false, - appSlug: data.app.slug, - appNamePrefix: data.app.prefix, - }) - - let tracker - if (window.Piwik) { - Piwik.getTracker() - tracker = new MatomoTracker({ - cozyUrl: cozyUrl, - url: __PIWIK_TRACKER_URL__, - siteId: __PIWIK_SITEID__, - history: history, - phpFilename: 'matomo.php', - }) - } + /** I don't know why I need to for this... But if I don't it seems that + * we have a race between configureStore and initBar resulting in + * an error from cozy-client "store is already defined" + */ + setTimeout(() => { + initBar(client) + }, 0) - return { root, store, client, locale, polyglot, history, tracker } + return { root, store, client, lang, polyglot } }) const init = () => { - const { root, store, client, locale, polyglot, history, tracker } = setupApp() + const { root, store, client, lang, polyglot } = setupApp() if (handleOAuthResponse()) return const App = require('components/App').default render( <Provider store={store}> <CozyProvider client={client}> - <I18n lang={locale} polyglot={polyglot}> - <HashRouter {...history}> - <App tracker={tracker} /> - </HashRouter> + <I18n lang={lang} polyglot={polyglot}> + <App /> </I18n> </CozyProvider> </Provider>, diff --git a/src/types/cozy-ui.d.ts b/src/types/cozy-ui.d.ts index a13bfbd3f..01a043d29 100644 --- a/src/types/cozy-ui.d.ts +++ b/src/types/cozy-ui.d.ts @@ -3,7 +3,6 @@ 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/helpers/appDataset' declare module 'cozy-ui/transpiled/react/I18n' { interface IPropsIcon { diff --git a/src/types/custom.d.ts b/src/types/custom.d.ts index 7112effa6..0016563a7 100644 --- a/src/types/custom.d.ts +++ b/src/types/custom.d.ts @@ -6,5 +6,3 @@ declare module '*.svg' { const content: string export default content } - -declare module '*.webapp' diff --git a/src/utils/bar.ts b/src/utils/bar.ts new file mode 100644 index 000000000..ef818bc84 --- /dev/null +++ b/src/utils/bar.ts @@ -0,0 +1,59 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +/* global cozy */ + +import { Client } from 'cozy-client' +import manifest from '../../manifest.webapp' + +interface GetValues { + cozyAppName: string + cozyAppNamePrefix: string + cozyIconPath: string + cozyLocale: string +} + +const getDataOrDefault = (data: any, defaultData: any) => + /^\{\{\..*\}\}$/.test(data) ? defaultData : data //NOSONAR + +/** + * default data will allow to display correctly the cozy-bar + * in the standalone (without cozy-stack connexion) + */ +export const getValues = ({ + cozyAppName, + cozyAppNamePrefix, + cozyIconPath, +}: GetValues) => { + const defaultValues = { + appIconDefault: require('../targets/vendor/assets/icon.svg'), + appNamePrefixDefault: manifest.name_prefix, + appNameDefault: manifest.name, + appLocaleDefault: 'fr', + } + return { + appName: getDataOrDefault(cozyAppName, defaultValues.appNameDefault), + appNamePrefix: getDataOrDefault( + cozyAppNamePrefix, + defaultValues.appNamePrefixDefault + ), + iconPath: getDataOrDefault(cozyIconPath, defaultValues.appIconDefault), + lang: defaultValues.appLocaleDefault, + } +} + +/** + * Cozy bar initialization + * @param {object} client - cozy client + */ +export const initBar = (client: Client) => { + const root: any = document.querySelector('[role=application]') + const { appName, appNamePrefix, iconPath, lang } = getValues(root.dataset) + + cozy.bar.init({ + appName, + appNamePrefix, + cozyClient: client, + iconPath, + lang, + replaceTitleOnMobile: false, + }) +} diff --git a/src/utils/client.ts b/src/utils/client.ts new file mode 100644 index 000000000..c5826f38a --- /dev/null +++ b/src/utils/client.ts @@ -0,0 +1,25 @@ +import CozyClient from 'cozy-client' +import manifest from '../../manifest.webapp' +import schema from 'doctypes' + +/** + * Returns cozy client instance + * @returns {object} cozy client instance + */ +export const getClient = () => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const root: any = document.querySelector('[role=application]') + const data = root.dataset + const protocol = window.location.protocol + const cozyUrl = `${protocol}//${data.cozyDomain}` + + return new CozyClient({ + uri: cozyUrl, + token: data.cozyToken, + appMetadata: { + slug: manifest.name, + version: manifest.version, + }, + schema, + }) +} diff --git a/src/utils/matomoTracker.ts b/src/utils/matomoTracker.ts deleted file mode 100644 index 2e43776d5..000000000 --- a/src/utils/matomoTracker.ts +++ /dev/null @@ -1,116 +0,0 @@ -import { History, Location, UnregisterCallback } from 'history' -import { readCozyDataFromDOM } from 'cozy-ui/transpiled/react/helpers/appDataset' -import hash from 'object-hash' - -interface InitSettings { - cozyUrl: string - url: string - siteId: number - history: History - phpFilename?: string -} - -declare global { - interface Window { - _paq: any - Piwik: any - } -} - -export default class MatomoTracker { - cozyUrl: string - url: string - siteId: number - phpFilename: string - history: History - unlistenFromHistory: UnregisterCallback - - constructor({ - cozyUrl, - url, - siteId, - history, - phpFilename = 'matomo.php', - }: InitSettings) { - if (url === undefined || siteId === undefined) { - throw new Error( - 'MatomoTracker cannot be initialized! SiteId and url are mandatory.' - ) - } - this.cozyUrl = cozyUrl - this.url = url - this.siteId = siteId - this.phpFilename = phpFilename - this.history = history - this.unlistenFromHistory = () => null - this.init() - } - - init() { - if (typeof window !== 'undefined') { - window._paq = window._paq || [] - MatomoTracker.push(['enableHeartBeatTimer', 30]) - MatomoTracker.push(['setSiteId', this.siteId]) - MatomoTracker.push(['setReferrerUrl', 'https://ecolyo.com']) - MatomoTracker.push(['setTrackerUrl', `${this.url + this.phpFilename}`]) - MatomoTracker.push(['setUserId', hash(this.cozyUrl)]) - MatomoTracker.push(['enableLinkTracking']) - } - return { - push: MatomoTracker.push, - track: this.track, - connectToHistory: this.connectToHistory, - disconnectFromHistory: this.disconnectFromHistory, - } - } - - static push(args: (number[] | string[] | number | string)[]) { - window._paq.push(args) - } - - configure() { - let cozyDomain - let userId - const root: any = document.querySelector('[role=application]') - if (root && root.dataset) { - cozyDomain = readCozyDataFromDOM('cozyDomain') - } - if (cozyDomain) { - userId = cozyDomain - const indexOfPort = cozyDomain.indexOf(':') - if (indexOfPort >= 0) { - userId = userId.substring(0, indexOfPort) - } - } - - if (userId) { - MatomoTracker.push(['setUserId', userId]) - } - } - - connectToHistory() { - this.unlistenFromHistory = this.history.listen(loc => { - this.track(loc) - }) - } - - disconnectFromHistory() { - if (this.unlistenFromHistory) { - this.unlistenFromHistory() - return true - } - return false - } - - track(loc: Location) { - if (typeof window === 'undefined') { - return - } - const currentPath = loc.hash.substring(1) - - MatomoTracker.push(['setDocumentTitle', currentPath.substring(1)]) - MatomoTracker.push(['setCustomUrl', 'https://ecolyo.com' + currentPath]) - MatomoTracker.push(['setUserId', hash(this.cozyUrl)]) - MatomoTracker.push(['trackPageView']) - } -} -- GitLab