diff --git a/src/atoms/modal.state.ts b/src/atoms/modal.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8bf6adf56bdad5ab134017bc3954ad665adc14bf
--- /dev/null
+++ b/src/atoms/modal.state.ts
@@ -0,0 +1,7 @@
+import { ModalState } from 'models/modal.model'
+import { atom } from 'recoil'
+
+export const modalState = atom<ModalState>({
+ key: 'modalState',
+ default: { feedbackModal: false },
+})
diff --git a/src/atoms/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 61bcd4be56df8def8282ff176027a28ab951ee06..4f6552540b226b5d95b56cc9409c282b68c46bdb 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 8b9f6b9ca0b40ec92db12a6db163fd95ceb56665..41280570933f8b11ca728081a9955f20db5e6f66 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 cbe81713b8cd3328cc8585c6ce63abd08dd0e620..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/FeedbackContainer/FeedbackContainer.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { useContext } from 'react'
-import { AppContext } from 'components/Contexts/AppContextProvider'
-import FeedbackModal from 'components/ContentComponents/Feedback/FeedbackModal'
-
-const FeedbackContainer: React.FC = () => {
- const { feedbackIsOpened, setFeedbackOpened } = useContext(AppContext)
-
- const handleCloseClick = () => {
- setFeedbackOpened(false)
- }
-
- return (
- <FeedbackModal
- opened={feedbackIsOpened}
- handleCloseClick={handleCloseClick}
- />
- )
-}
-
-export default FeedbackContainer
diff --git a/src/components/ContainerComponents/ScrollToTop/ScrollToTop.tsx b/src/components/ContainerComponents/ScrollToTop/ScrollToTop.tsx
index 210526ff663dcc4d9a56c8c8e926f9f00cecc835..546818da11a4d1c2e0a21c8ad0189baed5e55444 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 2b0277187f13c11185a8bf5d488f1623a2076147..59ffb0184132fb2ab248f6d1857544a7a2a05cd7 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 63e5d2b4a35fb5788dc231a509e5b559660a4ef8..136f998f004bfff9c211bc38b68d8804e236e5a9 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 2ea4bfe135ac14f28fd78809e0094754e85df90d..75fda62e4c038eef5f624edbdcea507a5abde2b8 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 70cc776d20d9e01ea9423530d879ff63b0f04d7e..c208d3a8e50fb6813ed9cd7a2615beef52876fe0 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 24065c10015ec2b5dffba338aa812194c2f1c5e4..48094fe480467c0a402ec026493913e40074d780 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 ac17fa31bf2cda767983b26c2f47f1e085828871..398bba1238444c91c2bbf82fc38e911e2b47a05d 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 1352a5308c26a0a028aaee58b87cd82dc86117fb..71b37689e8516735f274c7180786f857186596a8 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 96fbdb4022a797b8e9018c8bd3c427be4566ef65..b659cbd892c6966e779cd7eadc1c5891d251ded9 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 a8cb1fc4e17b834630b811936762a19e59d60b04..64bc7b508ce8fbfa621daff5dfec58ebe5e8afec 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 e6aceefc3b9ecf92703e81be59505f0084eb3382..7ee82f1374ec73ac5a3cf71663c2cc6955b49a52 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 bec27b6b61414ce9218f9cc5310c7124cd5541f6..ecf3eb73a512233e16b9e4d110778395a1af615d 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 989be9fe4515129ec96441ba9c45310e363d3a5c..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React from 'react'
-import { Route, Switch, Redirect, HashRouter } from 'react-router-dom'
-import { createBrowserHistory } from 'history'
-import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
-import { Sprite as IconSprite } from 'cozy-ui/transpiled/react/Icon'
-import { FluidType } from 'enum/fluid.enum'
-
-import AppContextProvider from 'components/Contexts/AppContextProvider'
-import Navbar from 'components/ContentComponents/Navbar/Navbar'
-import ScrollToTop from 'components/ContainerComponents/ScrollToTop/ScrollToTop'
-import HomeViewContainer from 'components/ContainerComponents/ViewContainer/HomeViewContainer'
-import ChallengesViewContainer from 'components/ContainerComponents/ViewContainer/ChallengesViewContainer'
-import SingleFluidViewContainer from './SingleFluidViewContainer'
-import ParametersViewContainer from 'components/ContainerComponents/ViewContainer/ParametersViewContainer'
-import FAQViewContainer from 'components/ContainerComponents/ViewContainer/FAQViewContainer'
-import FinishedChallengeDetailsViewContainer from './FinishedChallengeDetailsViewContainer'
-import OngoingChallengeDetailsViewContainer from './OngoingChallengeDetailsViewContainer'
-import LockedChallengeDetailsViewContainer from './LockedChallengeDetailsViewContainer'
-import AvailableChallengeDetailsViewContainer from './AvailableChallengeDetailsViewContainer'
-import SplashContainer from 'components/ContainerComponents/SplashContainer/SplashContainer'
-import LegalNoticeViewContainer from './LegalNoticeViewContainer'
-import FeedbackContainer from 'components/ContainerComponents/FeedbackContainer/FeedbackContainer'
-import EcogesturesContainer from 'components/ContainerComponents/EcogestureContainer/EcogesturesContainer'
-import ProfileViewContainer from './ProfileViewContainer'
-
-export const history = createBrowserHistory()
-
-export const ViewContainer = () => {
- return (
- <HashRouter {...history}>
- <Layout>
- <AppContextProvider>
- <Navbar />
- <Main>
- <FeedbackContainer />
- <Content className="app-content">
- <ScrollToTop>
- <Switch>
- <Route
- path="/consumption"
- render={({ match: { url } }) => (
- <>
- <Route
- path={`${url}/electricité`}
- component={() => (
- <SingleFluidViewContainer
- fluidTypes={[FluidType.ELECTRICITY]}
- />
- )}
- />
- <Route
- path={`${url}/eau`}
- component={() => (
- <SingleFluidViewContainer
- fluidTypes={[FluidType.WATER]}
- />
- )}
- />
- <Route
- path={`${url}/gaz`}
- component={() => (
- <SingleFluidViewContainer
- fluidTypes={[FluidType.GAS]}
- />
- )}
- />
- <Route
- path={`${url}/`}
- component={HomeViewContainer}
- exact
- />
- </>
- )}
- />
- <Route
- path="/challenges"
- render={({ match: { url } }) => (
- <>
- <Route
- path={`${url}/locked`}
- component={LockedChallengeDetailsViewContainer}
- />
- <Route
- path={`${url}/available`}
- component={AvailableChallengeDetailsViewContainer}
- />
- <Route
- path={`${url}/ongoing`}
- component={OngoingChallengeDetailsViewContainer}
- />
- <Route
- path={`${url}/finished`}
- component={FinishedChallengeDetailsViewContainer}
- />
- <Route
- path={`${url}/`}
- component={ChallengesViewContainer}
- exact
- />
- </>
- )}
- />
- <Route
- path="/parameters"
- render={({ match: { url } }) => (
- <>
- <Route
- path={`${url}/FAQ`}
- component={FAQViewContainer}
- />
- <Route
- path={`${url}/legalnotice`}
- component={LegalNoticeViewContainer}
- />
- <Route
- path={`${url}/`}
- component={ParametersViewContainer}
- exact
- />
- </>
- )}
- />
- <Route path="/ecogestures" component={EcogesturesContainer} />
- <Route path="/profile" component={ProfileViewContainer} />
- <Route path="/splash" component={SplashContainer} />
- <Redirect from="/" to="/consumption" />
- <Redirect from="*" to="/consumption" />
- </Switch>
- </ScrollToTop>
- </Content>
- </Main>
- <IconSprite />
- </AppContextProvider>
- </Layout>
- </HashRouter>
- )
-}
-
-export default ViewContainer
diff --git a/src/components/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 3a9b90d3334602195941afffc8e88cf001b8880e..4f7723c99ac3c5715efb241d1aec4b12316e6c2a 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 191bb7e9cb05896a0b747f716e1f7fc4649c2243..1e9b47bbd80cd664824cb6478d48c5b4bb3e6a2d 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 4a4769f71698f05d007ef75371c52b618c502513..0254fcc3bf251308a3cbb1aa23e079ad5f2b7f7c 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 748daf599f8767e0f4b9c40213118551b8863338..c157becb8e3e0bc886b2c85c95aade23c758c0bc 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 7764d0850a6528f5ac998a68e6eb5999ab0494b3..7196a53c8bb539669a5d2ddc3e38e947ea2b225c 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 913cdf4dadf5abe42b094eca30a8c3f525ec9dd3..88c73990f4f8351e79fc372dbd9774464e174413 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -7,6 +7,7 @@ export * from './ecogesture.model'
export * from './fluid.model'
export * from './indicator.model'
export * from './konnector.model'
+export * from './modal.model'
export * from './timePeriod.model'
export * from './trigger.model'
export * from './userProfile.model'
diff --git a/src/models/modal.model.ts b/src/models/modal.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9eb06e785b45b03a26d9dcbc51a7703a7cbbed60
--- /dev/null
+++ b/src/models/modal.model.ts
@@ -0,0 +1,3 @@
+export interface ModalState {
+ feedbackModal: boolean
+}