granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use context to conditionally show Delete button in Header

Browse source
This commit is contained in:
Justin Edmund 2022-01-31 23:05:44 -08:00
parent e02c55665e
commit b0fca8138c
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/Header/index.tsx
View file

@ -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">
{/* { (location.pathname.includes('/p/')) ?
<div id="right">
{ (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> : ''

10
pages/p/[slug].tsx
View file

@ -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)