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'

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

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

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

  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">
            <img
              style={{ maxWidth: '100%' }}
              src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
              alt="Frylabs"
            />
          </div>
        </div>
        {sidebarOpen ? (
          <>
            <div id="sideBarLinks" className="sidebarLinks">
              {Object.keys(tabs).map((key) => {
                const item = tabs[key]
                return (
                  <Link href={item.href} key={key}>
                    <a
                      onClick={closeSideBar}
                      className={href.includes(key) ? 'active' : undefined}
                      id={item.id || undefined}
                    >
                      {item.text}
                    </a>
                  </Link>
                )
              })}
              <a
                href={`/dataeditor`}
                onClick={closeSideBar}
                target="_blank"
                rel="noreferrer"
                title={
                  'Kérdések szerkesztése, törlése, beküldése, és kitöltetlen tesztek'
                }
              >
                Kérdés szerkesztő / kitöltetlen tesztek
              </a>
              <a
                href={`/donate`}
                className="donate"
                onClick={closeSideBar}
                target="_blank"
                rel="noreferrer"
              >
                Donate
              </a>
            </div>
            <div className="userStatus">
              <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
                      ? "You've got Mail!"
                      : ''
                  }
                >
                  {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
                </div>
                <div title="User ID">UID: {userId || '...'}</div>
              </div>
              <div
                className="logout"
                onClick={() => {
                  fetch(constants.apiUrl + 'logout', {
                    method: 'GET',
                    credentials: 'include',
                    headers: {
                      Accept: 'application/json',
                      'Content-Type': 'application/json',
                    },
                  })
                  location.reload()
                }}
              >
                Logout
              </div>
            </div>
            {showMotdModal ? (
              <Modal
                closeClick={() => {
                  setShowMotdModal(false)
                }}
              >
                <div style={{ textAlign: 'center' }}>Üzenet admintól:</div>
                <div
                  dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }}
                />
              </Modal>
            ) : null}
          </>
        ) : null}
      </div>
      <div className="content">{children}</div>
      {userSpecificMotd && !userSpecificMotd.seen && showNewMsgModal ? (
        <Modal
          closeClick={() => {
            setShowNewMsgModal(false)
          }}
        >
          Új üzeneted van, kattints 📬-ra bal alul megtekintéséhez!
        </Modal>
      ) : null}
      <BB />
    </div>
  )
}