From 6b02139dea5a0bb27fb709b2e30b0a552c7191d8 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Mon, 29 Jun 2020 18:51:39 +0200
Subject: [PATCH] feat: implement feedbacks modal logic
---
.../ContainerComponents/CozyBar/CozyBar.tsx | 8 +++++--
.../Feedbacks/Feedbacks.tsx | 20 ++++++++++++++++
.../ContainerComponents/Header/Header.tsx | 8 +++++--
.../ViewContainer/ViewContainer.tsx | 2 ++
.../FeedbacksModal/FeedbacksModal.tsx | 23 +++++++++++++++++++
.../Contexts/AppContextProvider.tsx | 7 ++++++
6 files changed, 64 insertions(+), 4 deletions(-)
create mode 100644 src/components/ContainerComponents/Feedbacks/Feedbacks.tsx
create mode 100644 src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx
diff --git a/src/components/ContainerComponents/CozyBar/CozyBar.tsx b/src/components/ContainerComponents/CozyBar/CozyBar.tsx
index c9232c0a6..0a455f242 100644
--- a/src/components/ContainerComponents/CozyBar/CozyBar.tsx
+++ b/src/components/ContainerComponents/CozyBar/CozyBar.tsx
@@ -19,12 +19,16 @@ const CozyBar = ({
t,
}: CozyBarProps) => {
const { BarLeft, BarCenter, BarRight } = cozy.bar
- const { screenType } = useContext(AppContext)
+ const { screenType, setFeedbacksOpened } = useContext(AppContext)
const handleClickBack = () => {
history.goBack()
}
+ const handleClickFeedbacks = () => {
+ setFeedbacksOpened(true)
+ }
+
const cozyBarCustom = (screen?: ScreenType) => {
if (screen === ScreenType.MOBILE) {
return (
@@ -48,7 +52,7 @@ const CozyBar = ({
className="cv-button"
icon={FeedbacksIcon}
size={40}
- onClick={() => handleClickBack()}
+ onClick={() => handleClickFeedbacks()}
/>
</BarRight>
</React.Fragment>
diff --git a/src/components/ContainerComponents/Feedbacks/Feedbacks.tsx b/src/components/ContainerComponents/Feedbacks/Feedbacks.tsx
new file mode 100644
index 000000000..83075762f
--- /dev/null
+++ b/src/components/ContainerComponents/Feedbacks/Feedbacks.tsx
@@ -0,0 +1,20 @@
+import React, { useContext } from 'react'
+import { AppContext } from 'components/Contexts/AppContextProvider'
+import FeedbacksModal from 'components/ContentComponents/FeedbacksModal/FeedbacksModal'
+
+const Feedbacks: React.FC = () => {
+ const { feedbacksIsOpened, setFeedbacksOpened } = useContext(AppContext)
+
+ const handleCloseClick = () => {
+ setFeedbacksOpened(false)
+ }
+
+ return (
+ <FeedbacksModal
+ opened={feedbacksIsOpened}
+ handleCloseClick={handleCloseClick}
+ />
+ )
+}
+
+export default Feedbacks
diff --git a/src/components/ContainerComponents/Header/Header.tsx b/src/components/ContainerComponents/Header/Header.tsx
index cad87eb16..5d342bd66 100644
--- a/src/components/ContainerComponents/Header/Header.tsx
+++ b/src/components/ContainerComponents/Header/Header.tsx
@@ -28,7 +28,7 @@ const Header: React.FC<HeaderProps> = ({
t,
}: HeaderProps) => {
const header = useRef(null)
- const { screenType } = useContext(AppContext)
+ const { screenType, setFeedbacksOpened } = useContext(AppContext)
const cozyBarHeight = 48
const headerBottomHeight = 8
@@ -36,6 +36,10 @@ const Header: React.FC<HeaderProps> = ({
history.goBack()
}
+ const handleClickFeedbacks = () => {
+ setFeedbacksOpened(true)
+ }
+
useEffect(() => {
if (screenType === ScreenType.MOBILE) {
setHeaderHeight(
@@ -88,7 +92,7 @@ const Header: React.FC<HeaderProps> = ({
className="header-feedbacks-button"
icon={FeedbacksIcon}
size={40}
- onClick={() => handleClickBack()}
+ onClick={() => handleClickFeedbacks()}
/>
</div>
{children}
diff --git a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
index 500f05b0f..9f0704db9 100644
--- a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
@@ -19,6 +19,7 @@ import LockedChallengeDetailsViewContainer from './LockedChallengeDetailsViewCon
import AvailableChallengeDetailsViewContainer from './AvailableChallengeDetailsViewContainer'
import SplashContainer from 'components/ContainerComponents/SplashContainer/SplashContainer'
import LegalNoticeViewContainer from './LegalNoticeViewContainer'
+import Feedbacks from 'components/ContainerComponents/Feedbacks/Feedbacks'
export const history = createBrowserHistory()
@@ -29,6 +30,7 @@ export const ViewContainer = () => {
<AppContextProvider>
<Navbar />
<Main>
+ <Feedbacks />
<Content className="app-content">
<ScrollToTop>
<Switch>
diff --git a/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx b/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx
new file mode 100644
index 000000000..46bc1c2a6
--- /dev/null
+++ b/src/components/ContentComponents/FeedbacksModal/FeedbacksModal.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { translate } from 'cozy-ui/react/I18n'
+import Modal from 'components/CommonKit/Modal/Modal'
+
+interface FeedbacksModalProps {
+ opened: boolean
+ t: Function
+ handleCloseClick: () => void
+}
+
+const FeedbacksModal: React.FC<FeedbacksModalProps> = ({
+ opened,
+ t,
+ handleCloseClick,
+}: FeedbacksModalProps) => {
+ return (
+ <Modal open={opened} handleCloseClick={handleCloseClick}>
+ <div>TEST</div>
+ </Modal>
+ )
+}
+
+export default translate()(FeedbacksModal)
diff --git a/src/components/Contexts/AppContextProvider.tsx b/src/components/Contexts/AppContextProvider.tsx
index 55efeda0c..45ea66fca 100644
--- a/src/components/Contexts/AppContextProvider.tsx
+++ b/src/components/Contexts/AppContextProvider.tsx
@@ -31,6 +31,8 @@ interface AppContextProps {
setWelcomeModalViewed: Function
chartIsLoaded: boolean
setChartIsLoaded: Function
+ feedbacksIsOpened: boolean
+ setFeedbacksOpened: Function
}
export const AppContext = React.createContext<AppContextProps>({
@@ -56,6 +58,8 @@ export const AppContext = React.createContext<AppContextProps>({
setWelcomeModalViewed: () => null,
chartIsLoaded: false,
setChartIsLoaded: () => null,
+ feedbacksIsOpened: false,
+ setFeedbacksOpened: () => null,
})
interface AppContextProviderProps {
@@ -68,6 +72,7 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
client,
}: AppContextProviderProps) => {
const [chartIsLoaded, setChartIsLoaded] = useState<boolean>(false)
+ const [feedbacksIsOpened, setFeedbacksOpened] = useState<boolean>(false)
const [isIndexesLoading, setIndexesLoading] = useState<boolean>(false)
const [isIndexesLoadingSuccess, setIndexesLoadingSuccess] = useState<
boolean | null
@@ -325,6 +330,8 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
setWelcomeModalViewed,
setChartIsLoaded,
chartIsLoaded,
+ feedbacksIsOpened,
+ setFeedbacksOpened,
}}
>
{children}
--
GitLab