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 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(props) {
  let href = props.route
  const [sidebarOpen, setSidebarOpen] = useState(true)
  const [userId, setUserId] = useState(null)
  const [windowSize, setWindowSize] = useState([100, 200])

  if (href === '/' || href === '') {
    href = 'index'
  }

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

  useEffect(() => {
    fetch(`${constants.apiUrl}infos`, {
      credentials: 'include',
      Accept: 'application/json',
      'Content-Type': 'application/json',
    })
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        setUserId(data.uid)
      })
  }, [])

  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">Frylabs</div>
        </div>
        {sidebarOpen ? (
          <>
            <div id="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>
                )
              })}
              <Link href={`/donate`}>
                <a className="donate" onClick={closeSideBar} target="_blank">
                  Donate
                </a>
              </Link>
            </div>
            <div className="userInfo">User #{userId}</div>
          </>
        ) : null}
      </div>
      <div className="content">{props.children}</div>
      <BB />
    </div>
  )
}