Partial admin

components/errorBoundary/errorBoundary.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import ErrorDisplay from '~/components/errorDisplay'
+
+export default class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super()
+    this.state = {error: null};
+  }
+
+  getDerivedStateFromError(error){
+    return {error}
+  }
+
+  render() {
+    if(this.state.error)
+      return <ErrorDisplay error={this.state.error} />
+
+    return this.props.children;
+  }
+}

components/errorDisplay/errorDisplay.js

@@ -0,0 +1,7 @@
+export default function ErrorDisplay({error}){
+  return (
+    <>
+      <h1>{error.name}</h1>
+    </>
+  )
+}

components/seo.js

@@ -1,88 +0,0 @@
-/**
- * SEO component that queries for data with
- *  Gatsby's useStaticQuery React hook
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-import React from "react"
-import PropTypes from "prop-types"
-import Helmet from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
-
-function SEO({ description, lang, meta, title }) {
-  const { site } = useStaticQuery(
-    graphql`
-      query {
-        site {
-          siteMetadata {
-            title
-            description
-            author
-          }
-        }
-      }
-    `
-  )
-
-  const metaDescription = description || site.siteMetadata.description
-
-  return (
-    <Helmet
-      htmlAttributes={{
-        lang,
-      }}
-      title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
-      meta={[
-        {
-          name: `description`,
-          content: metaDescription,
-        },
-        {
-          property: `og:title`,
-          content: title,
-        },
-        {
-          property: `og:description`,
-          content: metaDescription,
-        },
-        {
-          property: `og:type`,
-          content: `website`,
-        },
-        {
-          name: `twitter:card`,
-          content: `summary`,
-        },
-        {
-          name: `twitter:creator`,
-          content: site.siteMetadata.author,
-        },
-        {
-          name: `twitter:title`,
-          content: title,
-        },
-        {
-          name: `twitter:description`,
-          content: metaDescription,
-        },
-      ].concat(meta)}
-    />
-  )
-}
-
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-}
-
-SEO.propTypes = {
-  description: PropTypes.string,
-  lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string.isRequired,
-}
-
-export default SEO

hooks/useRequireAdmin.js

@@ -0,0 +1,13 @@
+import {useEffect} from 'react'
+import Router from 'next/router'
+import useUser from './useUser'
+
+export default function useAccountRedirect(){
+  const user = useUser()
+
+  if(user && user.is_admin) return;
+
+  const err = new Error("Unauthorized")
+  err.status = 401
+  throw err
+}

pages/_app.js

@@ -6,6 +6,7 @@ import {UserContextProvider} from '../hooks/useUser'
 import {CartContextProvider} from '../hooks/useCart'
 import Header from '~/components/header'
 import Footer from '~/components/footer'
+import ErrorBoundary from '~/components/errorBoundary'
 import "../styles/layout.css"
 
 Layout.getInitialProps = async ({Component, ctx}) => {
@@ -38,7 +39,11 @@ function Layout({ Component, pageProps, user, cart: _cart }){
     <CartContextProvider value={cartState}>
       <UserContextProvider value={user}>
         <Header/>
-        <main><Component {...pageProps} /></main>
+        <main>
+          <ErrorBoundary>
+            <Component {...pageProps} />
+          </ErrorBoundary>
+        </main>
         <Footer/>
       </UserContextProvider>
     </CartContextProvider>

pages/_error.js

@@ -1,14 +1,20 @@
 import React from 'react'
+import ErrorDisplay from '~/components/errorDisplay'
 
-const Error = ({statusCode}) => (
-  <div>
-    <p>This page could not be found.</p>
-  </div>
+const ErrorPage = ({statusCode}) => (
+  <>
+    <ErrorDisplay error={error} />
+  </>
 )
 
-Error.getInitialProps = ({ res, err }) => {
-  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
-  return { statusCode }
+ErrorPage.getInitialProps = ({ res, err }) => {
+  let error = err;
+
+  if(!error)
+    error = new Error('Server Error')
+
+  error.status = err.status || (res ? res.statusCode : (error.statusCode || 404))
+  return { error }
 }
 
-export default Error
+export default ErrorPage

pages/admin/index.js

@@ -0,0 +1,7 @@
+import useRequireAdmin from '../../hooks/useRequireAdmin'
+
+export default function AdminDashboard(){
+  useRequireAdmin()
+
+  return <p>Admin Dashboard</p>
+}