diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index af2c20a145fed986c4e7719d1df87cb534105ea5..1722a0bd6f7c919a3d11c0b2a39cc848460f9de3 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -1,85 +1,96 @@ -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' - -interface ContentProps { - children?: React.ReactNode - height?: number - background?: string -} - -const Content: React.FC<ContentProps> = ({ - children, - height = 0, - background = 'inherit', -}: ContentProps) => { - const dispatch = useDispatch() - const { screenType } = useSelector((state: AppStore) => state.ecolyo.global) - const { isFeedbacksOpen } = useSelector( - (state: AppStore) => state.ecolyo.modal - ) - - const cozyBarHeight = 48 - const cozyNavHeight = 56 - - const handleFeedbackModalClose = useCallback(() => { - dispatch(updateModalIsFeedbacksOpen(false)) - }, [dispatch]) - - useEffect(() => { - const unlisten = history.listen(() => { - document.querySelector('.app-content')!.scrollTo(0, 0) - }) - return () => { - unlisten() - } - }, [children]) - - useEffect(() => { - function handleResize() { - if (innerWidth <= 768) { - dispatch(changeScreenType(ScreenType.MOBILE)) - } else if (innerWidth <= 1024) { - dispatch(changeScreenType(ScreenType.TABLET)) - } else { - dispatch(changeScreenType(ScreenType.DESKTOP)) - } - } - handleResize() - window.addEventListener('resize', handleResize) - return () => { - window.removeEventListener('resize', handleResize) - } - }, [dispatch]) - - return ( - <> - <FeedbackModal - open={isFeedbacksOpen} - handleCloseClick={handleFeedbackModalClose} - /> - <div - className={'content-view'} - style={{ - marginTop: height, - paddingBottom: 0, - minHeight: - screenType !== ScreenType.DESKTOP - ? `calc(100vh - ${height}px - ${cozyBarHeight}px - ${cozyNavHeight}px)` - : `unset`, - background: background, - }} - > - {children} - </div> - </> - ) -} - -export default Content +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' + +interface ContentProps { + children?: React.ReactNode + height?: number + background?: string +} + +const Content: React.FC<ContentProps> = ({ + children, + height = 0, + background = 'inherit', +}: ContentProps) => { + const dispatch = useDispatch() + const { screenType } = useSelector((state: AppStore) => state.ecolyo.global) + const { isFeedbacksOpen } = useSelector( + (state: AppStore) => state.ecolyo.modal + ) + + const cozyBarHeight = 48 + const cozyNavHeight = 56 + + const handleFeedbackModalClose = useCallback(() => { + dispatch(updateModalIsFeedbacksOpen(false)) + }, [dispatch]) + + // Scroll handling + const app = document.querySelector('.app-content') + + /** + * Handle Desktop scroll + */ + const handleWindowScroll = () => { + app && app.scrollTo(0, 0) + window.scrollTo(0, 0) + } + + // Set listners for scroll + useEffect(() => { + const listner = history.listen(handleWindowScroll) + return () => { + // remove listner subscription + listner() + } + }, []) + + useEffect(() => { + function handleResize() { + if (innerWidth <= 768) { + dispatch(changeScreenType(ScreenType.MOBILE)) + } else if (innerWidth <= 1024) { + dispatch(changeScreenType(ScreenType.TABLET)) + } else { + dispatch(changeScreenType(ScreenType.DESKTOP)) + } + } + handleResize() + window.addEventListener('resize', handleResize) + return () => { + window.removeEventListener('resize', handleResize) + } + }, [dispatch]) + + return ( + <> + <FeedbackModal + open={isFeedbacksOpen} + handleCloseClick={handleFeedbackModalClose} + /> + <div + className={'content-view'} + style={{ + marginTop: height, + paddingBottom: 0, + minHeight: + screenType !== ScreenType.DESKTOP + ? `calc(100vh - ${height}px - ${cozyBarHeight}px - ${cozyNavHeight}px)` + : `unset`, + background: background, + }} + > + {children} + </div> + </> + ) +} + +export default Content