import breakpoints , { pageGutter , size } from 'components/core/breakpoints' ; import Page from 'components/core/Page/Page' ; import styled from 'styled-components' ; import detectMobileDevice from 'utils/detectMobileDevice' ; import { useToastActions } from 'contexts/toast/ToastContext' ; import { useCallback , useEffect , useMemo } from 'react' ; import usePersistedState from 'hooks/usePersistedState' ; import { useBreakpoint } from 'hooks/useWindowSize' ; import usePrevious from 'hooks/usePrevious' ; import UserGallery from './UserGallery' ; import UserGalleryPageErrorBoundary from './UserGalleryPageErrorBoundary' ; import Head from 'next/head' ; function useSuggestion ( ) { const screenWidth = useBreakpoint ( ) ; const { pushToast , dismissToast : removeToastFromView } = useToastActions ( ) ; const [ dismissed , setDismissed ] = usePersistedState ( 'dismissed_mobile_landscape_suggestion' , false ) ; const markToastAsDismissedInLocalStorage = useCallback ( ( ) => { setDismissed ( true ) ; } , [ setDismissed ] ) ; const previousWidth = usePrevious < size > ( screenWidth ) ; const rotationDetected = useMemo ( ( ) => previousWidth === size . mobile && screenWidth !== size . mobile , [ previousWidth , screenWidth ] ) ; useEffect ( ( ) => { if ( ! dismissed && detectMobileDevice ( ) && screenWidth === size . mobile ) { pushToast ( 'Rotate your phone to view in landscape mode' , markToastAsDismissedInLocalStorage ) ; } if ( rotationDetected ) { removeToastFromView ( ) ; } } , [ pushToast , dismissed , markToastAsDismissedInLocalStorage , screenWidth , rotationDetected , removeToastFromView , ] ) ; } type UserGalleryPageProps = { username : string ; } ; function UserGalleryPage ( { username } ) { useSuggestion ( ) ; const headTitle = `${ username } | Gallery` ; return ( < UserGalleryPageErrorBoundary > < Head > < title > { headTitle } < /title> < meta property = "og:title" content = { headTitle } key = "og:title" / > < meta name = "twitter:title" content = { headTitle } key = "twitter:title" / > < /Head> < Page > < StyledUserGalleryWrapper > < UserGallery username = { username } /> < /StyledUserGalleryWrapper> < /Page> < /UserGalleryPageErrorBoundary>); } const StyledUserGalleryWrapper = styled . div `
  display: flex;
  justify-content: center;
  margin: 0 ${ pageGutter . mobile }px;

  @media only screen and ${ breakpoints . tablet } {
    margin: 0 ${ pageGutter . tablet }px;
  }
` ; export default UserGalleryPage ;