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" 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}) return {pageProps, user, cart} } function Layout({ Component, pageProps, user, cart: _cart }){ const cartState = useState(_cart) return ( <>