Content.tsx

import FeedbackModal from 'components/Feedback/FeedbackModal'
import { ScreenType } from 'enums'
import React, { useEffect, useRef } 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 currentScreenType = useRef(screenType)

  const cozyBarHeight = 48
  const cozyNavHeight = 56

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

  useEffect(() => {
    function handleResize() {
      let newScreenType: ScreenType
      if (innerWidth <= 768) {
        newScreenType = ScreenType.MOBILE
      } else if (innerWidth <= 1024) {
        newScreenType = ScreenType.TABLET
      } else {
        newScreenType = ScreenType.DESKTOP
      }

      if (currentScreenType.current !== newScreenType) {
        currentScreenType.current = newScreenType
        dispatch(changeScreenType(newScreenType))
      }
    }

    handleResize()
    window.addEventListener('resize', handleResize)

    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [dispatch])

  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