From 50804a6f8a0a2749cde4f9c1037082a6f06852cf Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Tue, 22 Sep 2020 21:38:36 +0200
Subject: [PATCH] feat: replace context from header
---
src/atoms/modal.state.ts | 7 +
...TypeState.state.ts => screenType.state.ts} | 0
src/components/App.jsx | 8 +-
.../EcogesturesContainer.tsx | 6 +-
.../FeedbackContainer/FeedbackContainer.tsx | 20 ---
.../ScrollToTop/ScrollToTop.tsx | 2 +-
...AvailableChallengeDetailsViewContainer.tsx | 8 +-
.../ViewContainer/ChallengesViewContainer.tsx | 6 +-
.../ViewContainer/FAQViewContainer.tsx | 6 +-
.../FinishedChallengeDetailsViewContainer.tsx | 6 +-
.../ViewContainer/HomeViewContainer.tsx | 6 +-
.../LegalNoticeViewContainer.tsx | 6 +-
.../LockedChallengeDetailsViewContainer.tsx | 8 +-
.../OngoingChallengeDetailsViewContainer.tsx | 8 +-
.../ViewContainer/ParametersViewContainer.tsx | 6 +-
.../ViewContainer/ProfileViewContainer.tsx | 6 +-
.../SingleFluidViewContainer.tsx | 6 +-
.../ViewContainer/ViewContainer.tsx | 139 ------------------
.../Content/Content.tsx | 21 ++-
.../Feedback/FeedbackModal.tsx | 6 +-
.../CozyBar => Header}/CozyBar.tsx | 18 ++-
.../Header/Header.tsx | 17 ++-
.../Splash/SplashRoot.tsx | 0
.../Splash/SplashScreen.tsx | 0
.../Splash/SplashScreenError.tsx | 0
.../WelcomeModal.tsx} | 12 +-
src/models/index.ts | 1 +
src/models/modal.model.ts | 3 +
28 files changed, 105 insertions(+), 227 deletions(-)
create mode 100644 src/atoms/modal.state.ts
rename src/atoms/{screenTypeState.state.ts => screenType.state.ts} (100%)
delete mode 100644 src/components/ContainerComponents/FeedbackContainer/FeedbackContainer.tsx
delete mode 100644 src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
rename src/components/{ContainerComponents => }/Content/Content.tsx (75%)
rename src/components/{ContentComponents => }/Feedback/FeedbackModal.tsx (98%)
rename src/components/{ContainerComponents/CozyBar => Header}/CozyBar.tsx (77%)
rename src/components/{ContainerComponents => }/Header/Header.tsx (86%)
rename src/components/{ContentComponents => }/Splash/SplashRoot.tsx (100%)
rename src/components/{ContentComponents => }/Splash/SplashScreen.tsx (100%)
rename src/components/{ContentComponents => }/Splash/SplashScreenError.tsx (100%)
rename src/components/{ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx => Welcome/WelcomeModal.tsx} (88%)
create mode 100644 src/models/modal.model.ts
diff --git a/src/atoms/modal.state.ts b/src/atoms/modal.state.ts
new file mode 100644
index 000000000..8bf6adf56
--- /dev/null
+++ b/src/atoms/modal.state.ts
@@ -0,0 +1,7 @@
+import { ModalState } from 'models/modal.model'
+import { atom } from 'recoil'
+
+export const modalState = atom<ModalState>({
+ key: 'modalState',
+ default: { feedbackModal: false },
+})
diff --git a/src/atoms/screenTypeState.state.ts b/src/atoms/screenType.state.ts
similarity index 100%
rename from src/atoms/screenTypeState.state.ts
rename to src/atoms/screenType.state.ts
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 61bcd4be5..4f6552540 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -9,10 +9,9 @@ import { Sprite as IconSprite } from 'cozy-ui/transpiled/react/Icon'
import Routes from 'components/Routes/Routes'
import Navbar from 'components/ContentComponents/Navbar/Navbar'
import ScrollToTop from 'components/ContainerComponents/ScrollToTop/ScrollToTop'
-import FeedbackContainer from 'components/ContainerComponents/FeedbackContainer/FeedbackContainer'
-import SplashRoot from './ContentComponents/Splash/SplashRoot'
-import SplashScreen from 'components/ContentComponents/Splash/SplashScreen'
-import SplashScreenError from 'components/ContentComponents/Splash/SplashScreenError'
+import SplashRoot from './Splash/SplashRoot'
+import SplashScreen from 'components/Splash/SplashScreen'
+import SplashScreenError from 'components/Splash/SplashScreenError'
export const history = createBrowserHistory()
@@ -27,7 +26,6 @@ export const App = () => {
>
<Navbar />
<Main>
- <FeedbackContainer />
<Content className="app-content">
<ScrollToTop>
<Routes />
diff --git a/src/components/ContainerComponents/EcogestureContainer/EcogesturesContainer.tsx b/src/components/ContainerComponents/EcogestureContainer/EcogesturesContainer.tsx
index 8b9f6b9ca..412805709 100644
--- a/src/components/ContainerComponents/EcogestureContainer/EcogesturesContainer.tsx
+++ b/src/components/ContainerComponents/EcogestureContainer/EcogesturesContainer.tsx
@@ -1,8 +1,8 @@
import React, { useEffect, useState } from 'react'
import EcogesturesList from 'components/ContentComponents/EcogestureList/EcogestureList'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
const EcogesturesContainer: React.FC = () => {
useEffect(() => {
diff --git a/src/components/ContainerComponents/FeedbackContainer/FeedbackContainer.tsx b/src/components/ContainerComponents/FeedbackContainer/FeedbackContainer.tsx
deleted file mode 100644
index cbe81713b..000000000
--- a/src/components/ContainerComponents/FeedbackContainer/FeedbackContainer.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { useContext } from 'react'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-import FeedbackModal from 'components/ContentComponents/Feedback/FeedbackModal'
-
-const FeedbackContainer: React.FC = () => {
- const { feedbackIsOpened, setFeedbackOpened } = useContext(AppContext)
-
- const handleCloseClick = () => {
- setFeedbackOpened(false)
- }
-
- return (
- <FeedbackModal
- opened={feedbackIsOpened}
- handleCloseClick={handleCloseClick}
- />
- )
-}
-
-export default FeedbackContainer
diff --git a/src/components/ContainerComponents/ScrollToTop/ScrollToTop.tsx b/src/components/ContainerComponents/ScrollToTop/ScrollToTop.tsx
index 210526ff6..546818da1 100644
--- a/src/components/ContainerComponents/ScrollToTop/ScrollToTop.tsx
+++ b/src/components/ContainerComponents/ScrollToTop/ScrollToTop.tsx
@@ -1,6 +1,6 @@
import React, { useEffect, Fragment } from 'react'
import { withRouter } from 'react-router-dom'
-import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
+import { history } from 'components/App'
interface ScrollToTopProps {
children?: React.ReactNode
diff --git a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
index 2b0277187..59ffb0184 100644
--- a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
@@ -10,10 +10,10 @@ import { ChallengeType, UserChallenge } from 'models'
import ChallengeService from 'services/challenge.service'
import ConsumptionService from 'services/consumption.service'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
+import { history } from 'components/App'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
import AvailableChallengeIcon from 'assets/png/badges/available-big.png'
diff --git a/src/components/ContainerComponents/ViewContainer/ChallengesViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ChallengesViewContainer.tsx
index 63e5d2b4a..136f998f0 100644
--- a/src/components/ContainerComponents/ViewContainer/ChallengesViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/ChallengesViewContainer.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
import BadgesContainer from 'components/ContainerComponents/BadgesContainer/BadgesContainer'
const ChallengesViewContainer: React.FC = () => {
diff --git a/src/components/ContainerComponents/ViewContainer/FAQViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/FAQViewContainer.tsx
index 2ea4bfe13..75fda62e4 100644
--- a/src/components/ContainerComponents/ViewContainer/FAQViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/FAQViewContainer.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
import FAQ from 'components/ContentComponents/FAQ/FAQ'
const EcoGesturesViewContainer: React.FC = () => {
diff --git a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
index 70cc776d2..c208d3a8e 100644
--- a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
@@ -8,9 +8,9 @@ import { ScreenType } from 'enum/screen.enum'
import { UserChallenge } from 'models'
import { formatNumberValues } from 'utils/utils'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StarIcon from 'assets/png/challenge/star.png'
import EcogestureModal from 'components/ContentComponents/EcogestureModal/EcogestureModal'
diff --git a/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx
index 24065c100..48094fe48 100644
--- a/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx
@@ -3,9 +3,9 @@ import React, { useState, useContext, useEffect } from 'react'
import { TimeStep } from 'enum/timeStep.enum'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
import FluidContainer from 'components/ContainerComponents/FluidChartContainer/FluidChartContainer'
import ConsumptionNavigator from 'components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator'
import { AppContext } from 'components/Contexts/AppContextProvider'
diff --git a/src/components/ContainerComponents/ViewContainer/LegalNoticeViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/LegalNoticeViewContainer.tsx
index ac17fa31b..398bba123 100644
--- a/src/components/ContainerComponents/ViewContainer/LegalNoticeViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/LegalNoticeViewContainer.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
const LegalNoticeViewContainer: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
diff --git a/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx
index 1352a5308..71b37689e 100644
--- a/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx
@@ -6,10 +6,10 @@ import { Client, withClient } from 'cozy-client'
import { ScreenType } from 'enum/screen.enum'
import { ChallengeType } from 'models'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
+import { history } from 'components/App'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
import { AppContext } from 'components/Contexts/AppContextProvider'
diff --git a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
index 96fbdb402..b659cbd89 100644
--- a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
@@ -9,10 +9,10 @@ import { UserChallenge } from 'models'
import ChallengeService from 'services/challenge.service'
import { formatCompareChallengeDate } from 'utils/date'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
-import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
+import { history } from 'components/App'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import EcogestureModal from 'components/ContentComponents/EcogestureModal/EcogestureModal'
import EcogestureCard from 'components/ContentComponents/EcogestureCard/EcogestureCard'
diff --git a/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
index a8cb1fc4e..64bc7b508 100644
--- a/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
import FAQContainer from 'components/ContainerComponents/FAQContainer/FAQContainer'
import LegalNoticeContainer from 'components/ContainerComponents/LegalNoticeContainer/LegalNoticeContainer'
import Version from 'components/ContentComponents/Version/Version'
diff --git a/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx
index e6aceefc3..7ee82f137 100644
--- a/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
import Report from 'components/ContentComponents/Report/Report'
diff --git a/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx
index bec27b6b6..ecf3eb73a 100644
--- a/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx
@@ -1,8 +1,8 @@
import React, { useState, useContext } from 'react'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
-import Header from 'components/ContainerComponents/Header/Header'
-import Content from 'components/ContainerComponents/Content/Content'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
import FluidChartContainer from 'components/ContainerComponents/FluidChartContainer/FluidChartContainer'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
diff --git a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
deleted file mode 100644
index 989be9fe4..000000000
--- a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React from 'react'
-import { Route, Switch, Redirect, HashRouter } from 'react-router-dom'
-import { createBrowserHistory } from 'history'
-import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
-import { Sprite as IconSprite } from 'cozy-ui/transpiled/react/Icon'
-import { FluidType } from 'enum/fluid.enum'
-
-import AppContextProvider from 'components/Contexts/AppContextProvider'
-import Navbar from 'components/ContentComponents/Navbar/Navbar'
-import ScrollToTop from 'components/ContainerComponents/ScrollToTop/ScrollToTop'
-import HomeViewContainer from 'components/ContainerComponents/ViewContainer/HomeViewContainer'
-import ChallengesViewContainer from 'components/ContainerComponents/ViewContainer/ChallengesViewContainer'
-import SingleFluidViewContainer from './SingleFluidViewContainer'
-import ParametersViewContainer from 'components/ContainerComponents/ViewContainer/ParametersViewContainer'
-import FAQViewContainer from 'components/ContainerComponents/ViewContainer/FAQViewContainer'
-import FinishedChallengeDetailsViewContainer from './FinishedChallengeDetailsViewContainer'
-import OngoingChallengeDetailsViewContainer from './OngoingChallengeDetailsViewContainer'
-import LockedChallengeDetailsViewContainer from './LockedChallengeDetailsViewContainer'
-import AvailableChallengeDetailsViewContainer from './AvailableChallengeDetailsViewContainer'
-import SplashContainer from 'components/ContainerComponents/SplashContainer/SplashContainer'
-import LegalNoticeViewContainer from './LegalNoticeViewContainer'
-import FeedbackContainer from 'components/ContainerComponents/FeedbackContainer/FeedbackContainer'
-import EcogesturesContainer from 'components/ContainerComponents/EcogestureContainer/EcogesturesContainer'
-import ProfileViewContainer from './ProfileViewContainer'
-
-export const history = createBrowserHistory()
-
-export const ViewContainer = () => {
- return (
- <HashRouter {...history}>
- <Layout>
- <AppContextProvider>
- <Navbar />
- <Main>
- <FeedbackContainer />
- <Content className="app-content">
- <ScrollToTop>
- <Switch>
- <Route
- path="/consumption"
- render={({ match: { url } }) => (
- <>
- <Route
- path={`${url}/electricité`}
- component={() => (
- <SingleFluidViewContainer
- fluidTypes={[FluidType.ELECTRICITY]}
- />
- )}
- />
- <Route
- path={`${url}/eau`}
- component={() => (
- <SingleFluidViewContainer
- fluidTypes={[FluidType.WATER]}
- />
- )}
- />
- <Route
- path={`${url}/gaz`}
- component={() => (
- <SingleFluidViewContainer
- fluidTypes={[FluidType.GAS]}
- />
- )}
- />
- <Route
- path={`${url}/`}
- component={HomeViewContainer}
- exact
- />
- </>
- )}
- />
- <Route
- path="/challenges"
- render={({ match: { url } }) => (
- <>
- <Route
- path={`${url}/locked`}
- component={LockedChallengeDetailsViewContainer}
- />
- <Route
- path={`${url}/available`}
- component={AvailableChallengeDetailsViewContainer}
- />
- <Route
- path={`${url}/ongoing`}
- component={OngoingChallengeDetailsViewContainer}
- />
- <Route
- path={`${url}/finished`}
- component={FinishedChallengeDetailsViewContainer}
- />
- <Route
- path={`${url}/`}
- component={ChallengesViewContainer}
- exact
- />
- </>
- )}
- />
- <Route
- path="/parameters"
- render={({ match: { url } }) => (
- <>
- <Route
- path={`${url}/FAQ`}
- component={FAQViewContainer}
- />
- <Route
- path={`${url}/legalnotice`}
- component={LegalNoticeViewContainer}
- />
- <Route
- path={`${url}/`}
- component={ParametersViewContainer}
- exact
- />
- </>
- )}
- />
- <Route path="/ecogestures" component={EcogesturesContainer} />
- <Route path="/profile" component={ProfileViewContainer} />
- <Route path="/splash" component={SplashContainer} />
- <Redirect from="/" to="/consumption" />
- <Redirect from="*" to="/consumption" />
- </Switch>
- </ScrollToTop>
- </Content>
- </Main>
- <IconSprite />
- </AppContextProvider>
- </Layout>
- </HashRouter>
- )
-}
-
-export default ViewContainer
diff --git a/src/components/ContainerComponents/Content/Content.tsx b/src/components/Content/Content.tsx
similarity index 75%
rename from src/components/ContainerComponents/Content/Content.tsx
rename to src/components/Content/Content.tsx
index 3a9b90d33..4f7723c99 100644
--- a/src/components/ContainerComponents/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -3,12 +3,14 @@ import { useClient } from 'cozy-client'
import { useRecoilState } from 'recoil'
import { ScreenType } from 'enum/screen.enum'
-import { UserProfile } from 'models'
+import { ModalState, UserProfile } from 'models'
import { userProfileState } from 'atoms/userProfile.state'
-import { screenTypeState } from 'atoms/screenTypeState.state'
+import { screenTypeState } from 'atoms/screenType.state'
+import { modalState } from 'atoms/modal.state'
import UserProfileService from 'services/userProfile.service'
-import WelcomeModalContainer from '../WelcomeModalContainer/WelcomeModalContainer'
+import WelcomeModal from 'components/Welcome/WelcomeModal'
+import FeedbackModal from 'components/Feedback/FeedbackModal'
interface ContentProps {
children?: React.ReactNode
@@ -31,6 +33,7 @@ const Content: React.FC<ContentProps> = ({
const [userProfile, setUserProfile] = useRecoilState<UserProfile>(
userProfileState
)
+ const [modal, setModalState] = useRecoilState<ModalState>(modalState)
const setWelcomeModalViewed = useCallback(() => {
const userProfileService = new UserProfileService(client)
@@ -41,6 +44,10 @@ const Content: React.FC<ContentProps> = ({
})
}, [setUserProfile])
+ const handleFeedbackModalClose = () => {
+ setModalState((prev: ModalState) => ({ ...prev, feedbackModal: false }))
+ }
+
useEffect(() => {
function handleResize() {
if (innerWidth <= 768) {
@@ -60,9 +67,13 @@ const Content: React.FC<ContentProps> = ({
return (
<>
- <WelcomeModalContainer
+ <WelcomeModal
open={!userProfile.haveSeenWelcomeModal}
- handleClose={setWelcomeModalViewed}
+ handleCloseClick={setWelcomeModalViewed}
+ />
+ <FeedbackModal
+ open={modal.feedbackModal}
+ handleCloseClick={handleFeedbackModalClose}
/>
<div
className="content-view"
diff --git a/src/components/ContentComponents/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
similarity index 98%
rename from src/components/ContentComponents/Feedback/FeedbackModal.tsx
rename to src/components/Feedback/FeedbackModal.tsx
index 191bb7e9c..1e9b47bbd 100644
--- a/src/components/ContentComponents/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -21,14 +21,14 @@ const FEEDBACK_EMAIL = 'ecolyo@grandlyon.com'
const browser = detect()
interface FeedbackModalProps {
- opened: boolean
+ open: boolean
handleCloseClick: () => void
t: Function
client: Client
}
const FeedbackModal: React.FC<FeedbackModalProps> = ({
- opened,
+ open,
handleCloseClick,
t,
client,
@@ -159,7 +159,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
}
return (
- <Modal open={opened} yellowBorder={true} handleCloseClick={closeModal}>
+ <Modal open={open} yellowBorder={true} handleCloseClick={closeModal}>
{sent ? (
<div className="fb-root">
<div className="fb-content">
diff --git a/src/components/ContainerComponents/CozyBar/CozyBar.tsx b/src/components/Header/CozyBar.tsx
similarity index 77%
rename from src/components/ContainerComponents/CozyBar/CozyBar.tsx
rename to src/components/Header/CozyBar.tsx
index 4a4769f71..0254fcc3b 100644
--- a/src/components/ContainerComponents/CozyBar/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -1,10 +1,15 @@
-import React, { useContext } from 'react'
-import { ScreenType } from 'enum/screen.enum'
-import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
+import React from 'react'
+import { history } from 'components/App'
import { translate } from 'cozy-ui/react/I18n'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+
+import { ScreenType } from 'enum/screen.enum'
+import { ModalState } from 'models'
+import { modalState } from 'atoms/modal.state'
+import { screenTypeState } from 'atoms/screenType.state'
+
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
-import { AppContext } from 'components/Contexts/AppContextProvider'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
interface CozyBarProps {
@@ -19,14 +24,15 @@ const CozyBar = ({
t,
}: CozyBarProps) => {
const { BarLeft, BarCenter, BarRight } = cozy.bar
- const { screenType, setFeedbackOpened } = useContext(AppContext)
+ const screenType = useRecoilValue(screenTypeState)
+ const setModalState = useSetRecoilState(modalState)
const handleClickBack = () => {
history.goBack()
}
const handleClickFeedbacks = () => {
- setFeedbackOpened(true)
+ setModalState((prev: ModalState) => ({ ...prev, feedbackModal: true }))
}
const cozyBarCustom = (screen?: ScreenType) => {
diff --git a/src/components/ContainerComponents/Header/Header.tsx b/src/components/Header/Header.tsx
similarity index 86%
rename from src/components/ContainerComponents/Header/Header.tsx
rename to src/components/Header/Header.tsx
index 748daf599..c157becb8 100644
--- a/src/components/ContainerComponents/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,8 +1,13 @@
-import React, { useEffect, useRef, useContext } from 'react'
+import React, { useEffect, useRef } from 'react'
import { translate } from 'cozy-ui/react/I18n'
-import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { history } from 'components/App'
+
import { ScreenType } from 'enum/screen.enum'
-import { AppContext } from 'components/Contexts/AppContextProvider'
+import { ModalState } from 'models'
+import { modalState } from 'atoms/modal.state'
+import { screenTypeState } from 'atoms/screenType.state'
+
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
@@ -25,7 +30,9 @@ const Header: React.FC<HeaderProps> = ({
t,
}: HeaderProps) => {
const header = useRef(null)
- const { screenType, setFeedbackOpened } = useContext(AppContext)
+ const screenType = useRecoilValue(screenTypeState)
+ const setModalState = useSetRecoilState(modalState)
+
const cozyBarHeight = 48
const headerBottomHeight = 8
@@ -34,7 +41,7 @@ const Header: React.FC<HeaderProps> = ({
}
const handleClickFeedbacks = () => {
- setFeedbackOpened(true)
+ setModalState((prev: ModalState) => ({ ...prev, feedbackModal: true }))
}
useEffect(() => {
diff --git a/src/components/ContentComponents/Splash/SplashRoot.tsx b/src/components/Splash/SplashRoot.tsx
similarity index 100%
rename from src/components/ContentComponents/Splash/SplashRoot.tsx
rename to src/components/Splash/SplashRoot.tsx
diff --git a/src/components/ContentComponents/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
similarity index 100%
rename from src/components/ContentComponents/Splash/SplashScreen.tsx
rename to src/components/Splash/SplashScreen.tsx
diff --git a/src/components/ContentComponents/Splash/SplashScreenError.tsx b/src/components/Splash/SplashScreenError.tsx
similarity index 100%
rename from src/components/ContentComponents/Splash/SplashScreenError.tsx
rename to src/components/Splash/SplashScreenError.tsx
diff --git a/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx b/src/components/Welcome/WelcomeModal.tsx
similarity index 88%
rename from src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx
rename to src/components/Welcome/WelcomeModal.tsx
index 7764d0850..7196a53c8 100644
--- a/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx
+++ b/src/components/Welcome/WelcomeModal.tsx
@@ -7,14 +7,14 @@ import userInstanceSettings from 'components/Hooks/userInstanceSettings'
interface WelcomeModalContainerProps {
open: boolean
- handleClose: () => void
+ handleCloseClick: () => void
t: Function
client: Client
}
const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({
open,
- handleClose,
+ handleCloseClick,
t,
client,
}: WelcomeModalContainerProps) => {
@@ -22,7 +22,11 @@ const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({
return (
<React.Fragment>
- <Modal open={open} handleCloseClick={handleClose} yellowBorder={true}>
+ <Modal
+ open={open}
+ handleCloseClick={handleCloseClick}
+ yellowBorder={true}
+ >
<div className="wm-header text-24-bold">
{t('COMMON.WELCOME_MODAL_TITLE')}
</div>
@@ -38,7 +42,7 @@ const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({
<div className="wm-connect text-18-bold">
{t('COMMON.WELCOME_MODAL_CONNECT')}
</div>
- <StyledButton className="button-ok" onClick={handleClose}>
+ <StyledButton className="button-ok" onClick={handleCloseClick}>
{t('COMMON.WELCOME_MODAL_OK')}
</StyledButton>
</Modal>
diff --git a/src/models/index.ts b/src/models/index.ts
index 913cdf4da..88c73990f 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -7,6 +7,7 @@ export * from './ecogesture.model'
export * from './fluid.model'
export * from './indicator.model'
export * from './konnector.model'
+export * from './modal.model'
export * from './timePeriod.model'
export * from './trigger.model'
export * from './userProfile.model'
diff --git a/src/models/modal.model.ts b/src/models/modal.model.ts
new file mode 100644
index 000000000..9eb06e785
--- /dev/null
+++ b/src/models/modal.model.ts
@@ -0,0 +1,3 @@
+export interface ModalState {
+ feedbackModal: boolean
+}
--
GitLab