Commit 31cd5587 authored by Hugo SUBTIL's avatar Hugo SUBTIL
Browse files

Merge branch 'fix/US647-scroll-to-top' into 'dev'

fix: Scroll to top on every page navigation

See merge request web-et-numerique/llle_project/ecolyo!484
parents f516e89c b718bc7d
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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment