Use context for user object

components/header/header.js

@@ -2,11 +2,13 @@ import Link from "next/link"
 import PropTypes from "prop-types"
 import React from "react"
 
+import useUser from '../../hooks/useUser'
 import useCart from '../../hooks/useCart'
 import logo from './sos-logo.png'
 import styles from './style.module.css'
 
-const Header = ({user}) => {
+const Header = () => {
+  const user = useUser()
   const [cart] = useCart()
   const cartSize = (cart && cart.items.length) ? cart.items.map(item => item.count).reduce((sum, current) => (sum + current)) : 0
 
@@ -31,6 +33,7 @@ const Header = ({user}) => {
           ):(
             <>
               <li><Link href="/account"><a>Account</a></Link></li>
+              {user.admin && <li><Link href="/admin"><a>Admin</a></Link></li>}
               <li><Link href="/api/auth/logout"><a>Log out</a></Link></li>
             </>
           )

hooks/useAccountRedirect.js

@@ -1,6 +1,10 @@
 import {useEffect} from 'react'
+import Router from 'next/router'
+import useUser from './useUser'
+
+export default function useAccountRedirect(){
+  const user = useUser()
 
-export default function useAccountRedirect(user){
   useEffect(()=>{
     if(user) Router.push('/account')
   }, [user])

hooks/useUser.js

@@ -0,0 +1,6 @@
+import React, {useContext} from 'react'
+
+const UserContext = React.createContext(null);
+
+export const UserContextProvider = UserContext.Provider;
+export default () => useContext(UserContext)

pages/_app.js

@@ -2,6 +2,7 @@ import React, {useState} from "react"
 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'
@@ -35,9 +36,11 @@ function Layout({ Component, pageProps, user, cart: _cart }){
 
   return (
     <CartContextProvider value={cartState}>
-      <Header user={user} />
-      <main><Component {...{user, ...pageProps}} /></main>
-      <Footer/>
+      <UserContextProvider value={user}>
+        <Header/>
+        <main><Component {...pageProps} /></main>
+        <Footer/>
+      </UserContextProvider>
     </CartContextProvider>
   )
 }

pages/login.js

@@ -6,8 +6,8 @@ import isEmail from 'validator/lib/isEmail'
 import {FormController, Input, Button} from '~/components/form'
 import useAccountRedirect from '../hooks/useAccountRedirect'
 
-export default function Login({user}){
-  useAccountRedirect(user)
+export default function Login(){
+  useAccountRedirect()
 
   return (
     <FormController url="/api/auth" afterSubmit={()=>Router.push('/account')}>

pages/register.js

@@ -6,8 +6,8 @@ import isEmail from 'validator/lib/isEmail'
 import {FormController, Input, Button} from '~/components/form'
 import useAccountRedirect from '../hooks/useAccountRedirect'
 
-export default function Register({user}){
-  useAccountRedirect(user)
+export default function Register(){
+  useAccountRedirect()
 
   return (
     <FormController url="/api/users" afterSubmit={()=>Router.push('/account')}>