Content.tsx

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