From be6656f9e9ca241eae38b8c8452f2ccad5c26bd2 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 4 Feb 2022 00:15:27 -0800 Subject: [PATCH] Final cleanup, removing old methods and moving Context around --- components/Party/index.tsx | 42 ++---- components/PartySegmentedControl/index.tsx | 10 +- components/WeaponGrid/index.tsx | 20 +-- context/PartyContext.tsx | 6 +- pages/p/[party].tsx | 167 +++------------------ 5 files changed, 49 insertions(+), 196 deletions(-) diff --git a/components/Party/index.tsx b/components/Party/index.tsx index f8c16ecc..6f6dfff8 100644 --- a/components/Party/index.tsx +++ b/components/Party/index.tsx @@ -23,15 +23,7 @@ enum GridType { // Props interface Props { - partyId?: string - mainWeapon?: GridWeapon - mainSummon?: GridSummon - friendSummon?: GridSummon - characters?: GridArray - weapons?: GridArray - summons?: GridArray - extra: boolean - editable: boolean + slug?: string pushHistory?: (path: string) => void } @@ -45,17 +37,13 @@ const Party = (props: Props) => { } : {} // Set up states - const [extra, setExtra] = useState(false) const [currentTab, setCurrentTab] = useState(GridType.Weapon) const [element, setElement] = useState(TeamElement.Any) - - // Set states from props - useEffect(() => { - setExtra(props.extra || false) - }, [props]) + const [editable, setEditable] = useState(false) + const [hasExtra, setHasExtra] = useState(false) // Methods: Creating a new party - async function createParty() { + async function createParty(extra: boolean = false) { let body = { party: { ...(cookies.user) && { user_id: cookies.user.user_id }, @@ -69,7 +57,7 @@ const Party = (props: Props) => { // Methods: Updating the party's extra flag // Note: This doesn't save to the server yet. function checkboxChanged(event: React.ChangeEvent) { - setExtra(event.target.checked) + setHasExtra(event.target.checked) } // Methods: Navigating with segmented control @@ -95,8 +83,6 @@ const Party = (props: Props) => { // Render: JSX components const navigation = ( { const weaponGrid = ( @@ -117,11 +99,7 @@ const Party = (props: Props) => { const summonGrid = ( @@ -129,9 +107,7 @@ const Party = (props: Props) => { const characterGrid = ( @@ -150,7 +126,7 @@ const Party = (props: Props) => { return (
- + { navigation } { currentGrid() } diff --git a/components/PartySegmentedControl/index.tsx b/components/PartySegmentedControl/index.tsx index c9c006c4..3d30e8f4 100644 --- a/components/PartySegmentedControl/index.tsx +++ b/components/PartySegmentedControl/index.tsx @@ -16,15 +16,13 @@ export enum GridType { } interface Props { - editable: boolean - extra: boolean selectedTab: GridType onClick: (event: React.ChangeEvent) => void onCheckboxChange: (event: React.ChangeEvent) => void } const PartySegmentedControl = (props: Props) => { - const { element } = useContext(PartyContext) + const { editable, element, hasExtra } = useContext(PartyContext) function getElement() { switch(element) { @@ -42,8 +40,8 @@ const PartySegmentedControl = (props: Props) => { Extra
@@ -82,7 +80,7 @@ const PartySegmentedControl = (props: Props) => { { (() => { - if (props.editable && props.selectedTab == GridType.Weapon) { + if (editable && props.selectedTab == GridType.Weapon) { return extraToggle } })() diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index 93927231..8c335426 100644 --- a/components/WeaponGrid/index.tsx +++ b/components/WeaponGrid/index.tsx @@ -19,7 +19,7 @@ import './index.scss' // Props interface Props { slug?: string - createParty: () => Promise> + createParty: (extra: boolean) => Promise> pushHistory?: (path: string) => void } @@ -37,15 +37,15 @@ const WeaponGrid = (props: Props) => { // Set up state for party const [partyId, setPartyId] = useState('') - const [extra, setExtra] = useState(false) // Set up state for view management const [found, setFound] = useState(false) const [loading, setLoading] = useState(true) - const [editable, setEditable] = useState(false) - const { setEditable: setEditableContext } = useContext(AppContext) - + // Set up the party context + const { setEditable: setAppEditable } = useContext(AppContext) + const { editable, setEditable } = useContext(PartyContext) + const { hasExtra, setHasExtra } = useContext(PartyContext) const { setElement } = useContext(PartyContext) // Set up states for Grid data @@ -65,7 +65,7 @@ const WeaponGrid = (props: Props) => { // Fetch data from the server useEffect(() => { if (props.slug) fetchGrid(props.slug) - }, []) + }, [props.slug]) // Initialize an array of current uncap values for each weapon useEffect(() => { @@ -102,12 +102,12 @@ const WeaponGrid = (props: Props) => { if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) { setEditable(true) - setEditableContext(true) + setAppEditable(true) } // Store the important party and state-keeping values setPartyId(party.id) - setExtra(party.is_extra) + setHasExtra(party.is_extra) setFound(true) setLoading(false) @@ -152,7 +152,7 @@ const WeaponGrid = (props: Props) => { setElement(weapon.element) if (!partyId) { - props.createParty() + props.createParty(hasExtra) .then(response => { const party = response.data.party setPartyId(party.id) @@ -300,7 +300,7 @@ const WeaponGrid = (props: Props) => {
    { weaponGridElement }
- { (() => { return (extra) ? extraGridElement : '' })() } + { (() => { return (hasExtra) ? extraGridElement : '' })() } {open ? ( {} + setElement: (element: TeamElement) => {}, + editable: false, + setEditable: (editable: boolean) => {}, + hasExtra: false, + setHasExtra: (hasExtra: boolean) => {} }) export default PartyContext \ No newline at end of file diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx index 1ee727cf..a317520c 100644 --- a/pages/p/[party].tsx +++ b/pages/p/[party].tsx @@ -1,159 +1,34 @@ 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' -import Button from '~components/Button' - -interface Props { - hash: string -} const PartyRoute: React.FC = () => { const router = useRouter() const { party: slug } = router.query - const { setEditable: setEditableContext } = useContext(AppContext) + return ( +
+ +
+ ) - const [found, setFound] = useState(false) - const [loading, setLoading] = useState(true) - const [editable, setEditable] = useState(false) + // function renderNotFound() { + // return ( + //
+ //

There's no grid here.

+ // + //
+ // ) + // } - const [characters, setCharacters] = useState>({}) - const [weapons, setWeapons] = useState>({}) - const [summons, setSummons] = useState>({}) - - const [mainWeapon, setMainWeapon] = useState() - const [mainSummon, setMainSummon] = useState() - const [friendSummon, setFriendSummon] = useState() - - const [partyId, setPartyId] = useState('') - const [extra, setExtra] = useState(false) - const [cookies, _] = useCookies(['user']) - - useEffect(() => { - async function fetchGrid(shortcode: string) { - return api.endpoints.parties.getOne({ id: shortcode }) - .then(response => { - const party = response.data.party - - const partyUser = (party.user_id) ? party.user_id : undefined - const loggedInUser = (cookies.user) ? cookies.user.user_id : '' - - if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) { - setEditable(true) - setEditableContext(true) - } - - const characters = populateCharacters(party.characters) - const weapons = populateWeapons(party.weapons) - const summons = populateSummons(party.summons) - - setExtra(response.data.party.is_extra) - setFound(true) - setLoading(false) - setCharacters(characters) - setWeapons(weapons) - setSummons(summons) - setPartyId(party.id) - }) - .catch(error => { - if (error.response != null) { - if (error.response.status == 404) { - setFound(false) - setLoading(false) - } - } else { - console.error(error) - } - }) - } - - function populateCharacters(list: [GridCharacter]) { - let characters: GridArray = {} - - list.forEach((object: GridCharacter) => { - if (object.position != null) - characters[object.position] = object - }) - - return characters - } - - function populateWeapons(list: [GridWeapon]) { - let weapons: GridArray = {} - - list.forEach((object: GridWeapon) => { - if (object.mainhand) - setMainWeapon(object) - else if (!object.mainhand && object.position != null) - weapons[object.position] = object - }) - - return weapons - } - - function populateSummons(list: [GridSummon]) { - let summons: GridArray = {} - - list.forEach((object: GridSummon) => { - if (object.main) - setMainSummon(object) - else if (object.friend) - setFriendSummon(object) - else if (!object.main && !object.friend && object.position != null) - summons[object.position] = object - }) - - return summons - } - - const shortcode: string = slug as string - if (shortcode) - fetchGrid(shortcode) - - }, [slug, cookies.user, setEditableContext]) - - function render() { - return ( -
- -
- ) - } - - function renderNotFound() { - return ( -
-

There's no grid here.

- -
- ) - } - - if (!found && !loading) { - return renderNotFound() - } else if (found && !loading) { - return render() - } else { - return (
) - } + // if (!found && !loading) { + // return renderNotFound() + // } else if (found && !loading) { + // return render() + // } else { + // return (
) + // } } -export default - withCookies( - PartyRoute - ) \ No newline at end of file +export default PartyRoute \ No newline at end of file