You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

80 lines
2.0 KiB
JavaScript

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 "~/styles/layout.css"
import 'react-infinite-calendar/styles.css'
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 = {};
if(Component.getInitialProps)
pageProps = await Component.getInitialProps({ctx, user})
return {pageProps, user, cart}
}
function Layout({ Component, pageProps, user, cart: _cart }){
const cartState = useState(_cart)
return (
<>
<Head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
</Head>
<CartContextProvider value={cartState}>
<UserContextProvider value={user}>
<Header/>
<ErrorBoundary>
<AdminNav>
<Component {...pageProps} />
</AdminNav>
</ErrorBoundary>
<Footer/>
</UserContextProvider>
</CartContextProvider>
</>
)
}
Layout.propTypes = {
pageProps: PropTypes.object
}
export default Layout