Use context to conditionally show Delete button in Header

components/Header/index.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'
 import { useRouter } from 'next/router'
 
+import AppContext from '~context/AppContext'
+
 import Button from '~components/Button'
 import HeaderMenu from '~components/HeaderMenu'
 
@@ -10,6 +12,8 @@ import './index.scss'
 interface Props {}
 
 const Header = (props: Props) => {
+    const { editable } = useContext(AppContext)
+
     const [username, setUsername] = useState(undefined)
     const [cookies, _, removeCookie] = useCookies(['user'])
 
@@ -54,10 +58,9 @@ const Header = (props: Props) => {
                 </div>
             </div>
             <div className="push" />
-            <div className="right">
+            <div id="right">
-                {/* { (location.pathname.includes('/p/')) ?
+                { (editable && router.route === '/p/[slug]') ?
                     <Button color="red" type="link" click={() => {}}>Delete</Button> : ''
-                } */}
                 }
                 { (router.route === '/p/[slug]') ? 
                     <Button type="link" click={copyToClipboard}>Copy link</Button> : ''

pages/p/[slug].tsx

@@ -1,6 +1,8 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { withCookies, useCookies } from 'react-cookie'
 import { useRouter } from 'next/router'
+
+import AppContext from '~context/AppContext'
 import api from '~utils/api'
 
 import Party from '~components/Party'
@@ -14,6 +16,8 @@ const PartyRoute: React.FC = () => {
     const router = useRouter()
     const { slug } = router.query
 
+    const { setEditable: setEditableContext } = useContext(AppContext)
+
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
     const [editable, setEditable] = useState(false)
@@ -39,8 +43,10 @@ const PartyRoute: React.FC = () => {
                     const partyUser = (party.user_id) ? party.user_id : undefined
                     const loggedInUser = (cookies.user) ? cookies.user.user_id : ''
     
-                    if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser)
+                    if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) {
                         setEditable(true)
+                        setEditableContext(true)
+                    }
     
                     const characters = populateCharacters(party.characters)
                     const weapons = populateWeapons(party.weapons)