qmining-page/src/components/layout.js

import React, { useState, useEffect } from 'react'
import Link from 'next/link'
import dynamic from 'next/dynamic'

const Snowfall = dynamic(() => import('react-snowfall'), { ssr: false })

import Modal from './modal.js'
import tabs from '../data/tabs.json'
import constants from '../constants.json'
import BB from './b.js'

import styles from './layout.module.css'

const renderSnow = () => {
  const date = new Date()
  // if its december, and date is more than 5
  return date.getMonth() === 11 && date.getDate() > 5
}

function Donate() {
  return (
    <div>
      <div className={styles.modalHead}>Donate</div>
      <div style={{ textAlign: 'justify', margin: '8px' }}>
        Paypalen és Patreonon látszódik a neved, de Patreonon könnyen meg lehet
        változtatni. Ha név nélkül szeretnél adakozni, akkor írd át egy
        nickname-re. De akárhova adakozol, a neved sehova se lesz kiadva, és nem
        látja 3. személy.
      </div>
      <div className={styles.donateLogoContainer}>
        <a
          href={`${constants.siteUrl}patreon`}
          target="_blank"
          rel="noreferrer"
        >
          <img
            style={{
              border: 'none',
              margin: '15px',
            }}
            src={`${constants.siteUrl}img/patreon-logo.png`}
          />
        </a>
        <a href={`${constants.siteUrl}donate`} target="_blank" rel="noreferrer">
          <img
            style={{
              border: 'none',
              margin: '15px',
            }}
            src={`${constants.siteUrl}img/paypal-logo.png`}
          />
        </a>
      </div>
    </div>
  )
}

function MessageButton({
  userSpecificMotd,
  setShowMotdModal,
  refetchGlobalData,
}) {
  return (
    <div className="msgs">
      <div
        onClick={() => {
          if (!userSpecificMotd) {
            return
          }
          setShowMotdModal(true)
          if (userSpecificMotd.seen) {
            return
          }
          fetch(constants.apiUrl + 'infos', {
            method: 'POST',
            credentials: 'include',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              userSpecificMotdSeen: true,
            }),
          })
            .then((resp) => {
              return resp.json()
            })
            .then(() => {
              refetchGlobalData()
            })
        }}
        style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }}
        title={
          userSpecificMotd && !userSpecificMotd.seen ? 'Új üzeneted van!' : ''
        }
      >
        {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
      </div>
    </div>
  )
}

export default function Layout({
  children,
  router,
  globalData,
  refetchGlobalData,
}) {
  const [sidebarOpen, setSidebarOpen] = useState(true)
  const [windowSize, setWindowSize] = useState([100, 200])
  const [showMotdModal, setShowMotdModal] = useState(false)
  const [donateShowing, setDonateShowing] = useState(false)
  const [showNewMsgModal, setShowNewMsgModal] = useState(true)

  const userId = globalData.userId
  const userSpecificMotd = globalData.userSpecificMotd

  useEffect(
    () => {
      setDonateShowing(!!router.query.donate)
    },
    [router.query.donate]
  )

  let href = router.route
  if (href === '/' || href === '') {
    href = 'index'
  }

  const closeSideBar = () => {
    if (typeof window !== 'undefined') {
      if (window.innerWidth < constants.mobileWindowWidth) {
        setSidebarOpen(false)
      }
    }
  }

  useEffect(() => {
    closeSideBar()
    setWindowSize([window.innerWidth, window.innerHeight])
    window.addEventListener('resize', () => {
      setWindowSize([window.innerWidth, window.innerHeight])
      setSidebarOpen(window.innerWidth >= 700)
    })
  }, [])
  const snowflakeCount = (windowSize[0] + windowSize[1]) / 26

  return (
    <div>
      {renderSnow() && (
        <div
          style={{
            pointerEvents: 'none',
            zIndex: 900,
            position: 'fixed',
            width: `${windowSize[0]}px`,
            height: `${windowSize[1]}px`,
          }}
        >
          <Snowfall snowflakeCount={snowflakeCount} />
        </div>
      )}
      <div className="sidebar">
        <div className="headercontainer">
          <span
            onClick={() => {
              setSidebarOpen(!sidebarOpen)
            }}
            className="menuicon"
          >
            <div />
            <div />
            <div />
          </span>
          <div className="sidebarheader">
            <Link href="/">
              <a>
                <img
                  style={{
                    maxWidth: '100%',
                    border: 'none',
                    margin: '1px',
                  }}
                  src={`${
                    constants.siteUrl
                  }img/frylabs-logo_small_transparent.png`}
                  alt="FryLabs"
                />
              </a>
            </Link>
          </div>
        </div>
        {sidebarOpen ? (
          <>
            <div id="sideBarLinks" className={styles.sidebarLinks}>
              {Object.keys(tabs).map((key) => {
                const item = tabs[key]
                return (
                  <Link href={item.href} key={key}>
                    <a
                      onClick={closeSideBar}
                      className={href.includes(key) ? styles.active : undefined}
                      id={item.id || undefined}
                    >
                      {item.text}
                    </a>
                  </Link>
                )
              })}
              <a
                onClick={() => {
                  closeSideBar()
                  setDonateShowing(true)
                }}
              >
                Donate
              </a>
            </div>
            <div className={'userStatus'}>
              <MessageButton
                userSpecificMotd={userSpecificMotd}
                setShowMotdModal={setShowMotdModal}
                refetchGlobalData={refetchGlobalData}
              />
              <div className={'uid'} title="User ID">
                UID: {userId || '...'}
              </div>
              <div
                className={'logout'}
                title="Kijelentkezés"
                onClick={() => {
                  fetch(constants.apiUrl + 'logout', {
                    method: 'GET',
                    credentials: 'include',
                    headers: {
                      Accept: 'application/json',
                      'Content-Type': 'application/json',
                    },
                  })
                  location.reload()
                }}
              >
                Logout
              </div>
            </div>
          </>
        ) : null}
      </div>
      {donateShowing ? (
        <Modal
          closeClick={() => {
            setDonateShowing(false)
          }}
        >
          <Donate />
        </Modal>
      ) : null}
      {showMotdModal ? (
        <Modal
          closeClick={() => {
            setShowMotdModal(false)
          }}
        >
          <div style={{ textAlign: 'center' }}>Üzenet admintól:</div>
          <div dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }} />
        </Modal>
      ) : null}
      {userSpecificMotd && !userSpecificMotd.seen && showNewMsgModal ? (
        <Modal
          closeClick={() => {
            setShowNewMsgModal(false)
          }}
        >
          Új üzeneted van, kattints a 📬-ra bal alul a megtekintéséhez!
        </Modal>
      ) : null}
      <div className="content">{children}</div>
      <BB />
    </div>
  )
}