Main.tsx

import React, { useState, useEffect } from 'react';
import moment from 'moment';
import { withCookies, Cookies, ReactCookieProps } from 'react-cookie';

import PopUpDC from '../popup/PopUpDC';
import PopUpView from '../popup/PopUpView';
import './Main.css'

interface MainProps extends ReactCookieProps {}

function Main(props: MainProps) {
  const [cookies, setCookies] = useState<Cookies | undefined>(props.cookies);
  const [hasCookies, setHasCookies] = useState<boolean>(false);
  const [showPopUp, setShowPopUp] = useState<boolean>(false);

  useEffect(() => {
    if (cookies) {
      const currentCookies = cookies.get(PopUpDC.COOKIE_VALUE);

      setShowPopUp(!currentCookies);
      setHasCookies(!!currentCookies);
    } else {
      setCookies(props.cookies)
    }
  }, [props.cookies, showPopUp]);

  const closePopUp = (selCheck: boolean): void => {
    if (cookies) {
      if (selCheck) {
        const expires: Date = moment().add(1, 'minutes').toDate();
        cookies.set(PopUpDC.COOKIE_VALUE, true, { path: '/', expires });
      }
    }

    setShowPopUp(false);
  }

  const removeCookies = ():void => {
    if (cookies) {
      cookies.remove(PopUpDC.COOKIE_VALUE);
    }
  }

  return (
    <div className="Main">
      {showPopUp && cookies
        ? <PopUpView closePopUp={closePopUp} />
        : <span>Is Closed</span>
      }
      {hasCookies
        ? <button onClick={removeCookies}>Remove Cookies</button>
        : null
      }
    </div>
  )
}

export default withCookies(Main);