Content.tsx

import FeedbackModal from 'components/Feedback/FeedbackModal'
import { ScreenType } from 'enums'
import React, { useEffect } from 'react'
import { changeScreenType } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import './content.scss'

const Content = ({ children }: { children: React.ReactNode }) => {
  const dispatch = useAppDispatch()
  const { screenType, headerHeight } = useAppSelector(
    state => state.ecolyo.global
  )

  const cozyBarHeight = 48
  const cozyNavHeight = 56

  // Set listeners for scroll
  useEffect(() => {
    window.scrollTo(0, 0)
  }, [])

  useEffect(() => {
    function handleResize() {
      if (innerWidth <= 768 && screenType !== ScreenType.MOBILE) {
        dispatch(changeScreenType(ScreenType.MOBILE))
      } else if (innerWidth <= 1024 && screenType !== ScreenType.TABLET) {
        dispatch(changeScreenType(ScreenType.TABLET))
      } else if (innerWidth > 1024 && screenType !== ScreenType.DESKTOP) {
        dispatch(changeScreenType(ScreenType.DESKTOP))
      }
    }
    handleResize()
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [dispatch, screenType])

  return (
    <>
      <FeedbackModal />
      <div
        className="content-view"
        style={{
          marginTop: headerHeight,
          paddingBottom: 0,
          minHeight:
            screenType !== ScreenType.DESKTOP
              ? `calc(100vh - ${headerHeight}px - ${cozyBarHeight}px - ${cozyNavHeight}px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - env(safe-area-inset-bottom))`
              : `unset`,
        }}
      >
        {children}
      </div>
    </>
  )
}

export default Content