import React, {useState} from "react" import Head from 'next/head' import PropTypes from "prop-types" import axios from 'axios' import {UserContextProvider} from '~/hooks/useUser' import {CartContextProvider} from '~/hooks/useCart' import Header from '~/components/header' import Footer from '~/components/footer' import AdminNav from '~/components/admin/nav' import ErrorBoundary from '~/components/errorBoundary' import ErrorPage from '~/pages/_error' import "~/styles/layout.css" import 'react-infinite-calendar/styles.css' const errorCodes = { 404: { name: 'Not Found', message: `We couldn't find the item you're looking for. Sorry!` }, 500: { name: 'Error', message: `Our server encountered an unexpected error. Please try again.` } } Layout.getInitialProps = async ({Component, ctx}) => { // Configure axios instance ctx.axios = axios.create({ headers: (ctx.req && ctx.req.headers && ctx.req.headers.cookie) ? {cookie: ctx.req.headers.cookie} : undefined }) ctx.axios.interceptors.response.use(res => res, err => { if(!err.isAxiosError || !err.response || !err.response.data || !err.response.data.error) throw err // Unwrap API error, rethrow that throw { ...err.response.data.error, url: err.request.path } } ) const promises = { user: ctx.axios.get(`/api/auth`), cart: ctx.axios.get(`/api/cart`) } const {data: user} = await promises.user const {data: cart} = await promises.cart let pageProps = {}; let error = null; if(Component.getInitialProps) { try { pageProps = await Component.getInitialProps({ctx, user}) } catch (err) { if(err.status && errorCodes[err.status]) error = errorCodes[err.status] else error = errorCodes[500] console.error(err) } } return {pageProps, error, user, cart} } function Layout({ Component, pageProps, error, user, cart }){ const cartState = useState(cart) const userState = useState(user) let page = error ? : return ( <>

{page}