From 7a50c4bce510265148b0d05ef0cd0957401e8cca Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 1 Feb 2022 05:06:27 -0800 Subject: [PATCH] Pass down GridWeapon instead of Weapon Previously, we stripped the Weapon out of the GridWeapon for simplicity. However, now that we need to display and manipulate data on the GridWeapon (unique data), we need to pass that down instead. --- components/ExtraWeapons/index.tsx | 7 +++--- components/Party/index.tsx | 30 ++++++++++++++--------- components/UncapIndicator/index.tsx | 37 ++++++++++++++++++----------- components/WeaponGrid/index.tsx | 15 ++++++------ components/WeaponUnit/index.tsx | 12 +++++----- pages/p/[party].tsx | 13 ++++------ 6 files changed, 65 insertions(+), 49 deletions(-) diff --git a/components/ExtraWeapons/index.tsx b/components/ExtraWeapons/index.tsx index 97bab025..65792741 100644 --- a/components/ExtraWeapons/index.tsx +++ b/components/ExtraWeapons/index.tsx @@ -13,12 +13,13 @@ export enum GridType { // Props interface Props { - grid: GridArray + grid: GridArray editable: boolean exists: boolean found?: boolean offset: number onClick: (position: number) => void + updateUncap: (id: string, uncap: number) => void } const ExtraWeapons = (props: Props) => { @@ -34,10 +35,10 @@ const ExtraWeapons = (props: Props) => {
  • { props.onClick(props.offset + i)}} position={props.offset + i} unitType={1} - weapon={props.grid[props.offset + i]} + gridWeapon={props.grid[props.offset + i]} + onClick={() => { props.onClick(props.offset + i)}} />
    • ) diff --git a/components/Party/index.tsx b/components/Party/index.tsx index 3499bda4..71c89bc9 100644 --- a/components/Party/index.tsx +++ b/components/Party/index.tsx @@ -23,11 +23,11 @@ import './index.scss' interface Props { partyId?: string - mainWeapon?: Weapon + mainWeapon?: GridWeapon mainSummon?: Summon friendSummon?: Summon characters?: GridArray - weapons?: GridArray + weapons?: GridArray summons?: GridArray extra: boolean editable: boolean @@ -46,10 +46,10 @@ const Party = (props: Props) => { // Grid data const [characters, setCharacters] = useState>({}) - const [weapons, setWeapons] = useState>({}) + const [weapons, setWeapons] = useState>({}) const [summons, setSummons] = useState>({}) - const [mainWeapon, setMainWeapon] = useState() + const [mainWeapon, setMainWeapon] = useState() const [mainSummon, setMainSummon] = useState() const [friendSummon, setFriendSummon] = useState() @@ -178,8 +178,8 @@ const Party = (props: Props) => { case GridType.Weapon: const weapon = item as Weapon saveWeapon(weapon, position, partyId) - .then(() => { - storeWeapon(weapon, position) + .then((response) => { + storeWeapon(response.data.grid_weapon) }) break case GridType.Summon: @@ -193,24 +193,32 @@ const Party = (props: Props) => { } // Weapons - function storeWeapon(weapon: Weapon, position: number) { - if (position == -1) { + function storeWeapon(weapon: GridWeapon) { + if (weapon.position == -1) { setMainWeapon(weapon) } else { // Store the grid unit weapon at the correct position let newWeapons = Object.assign({}, weapons) - newWeapons[position] = weapon + newWeapons[weapon.position!] = weapon setWeapons(newWeapons) } } async function saveWeapon(weapon: Weapon, position: number, party: string) { - await api.endpoints.weapons.create({ + let uncapLevel = 3 + + if (weapon.uncap.ulb) + uncapLevel = 5 + else if (weapon.uncap.flb) + uncapLevel = 4 + + return await api.endpoints.weapons.create({ 'weapon': { 'party_id': party, 'weapon_id': weapon.id, 'position': position, - 'mainhand': (position == -1) + 'mainhand': (position == -1), + 'uncap_level': uncapLevel } }, headers) } diff --git a/components/UncapIndicator/index.tsx b/components/UncapIndicator/index.tsx index ae10bd71..d19fbb40 100644 --- a/components/UncapIndicator/index.tsx +++ b/components/UncapIndicator/index.tsx @@ -10,30 +10,39 @@ interface Props { uncapLevel: number flb: boolean ulb?: boolean + updateUncap: (uncap: number) => void } const UncapIndicator = (props: Props) => { - let numStars - const [uncap, setUncap] = useState(props.uncapLevel) - if (props.type === 'character') { - if (props.flb) { - numStars = 5 + const numStars = setNumStars() + + function setNumStars() { + let numStars + + if (props.type === 'character') { + if (props.flb) { + numStars = 5 + } else { + numStars = 4 + } } else { - numStars = 4 - } - } else { - if (props.ulb) { - numStars = 5 - } else if (props.flb) { - numStars = 4 - } else { - numStars = 3 + if (props.ulb) { + numStars = 5 + } else if (props.flb) { + numStars = 4 + } else { + numStars = 3 + } } + + return numStars } function toggleStar(index: number, empty: boolean) { + console.log("Toggling star!") + if (empty) setUncap(index + 1) else diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index ef7b6a46..cfd01ef8 100644 --- a/components/WeaponGrid/index.tsx +++ b/components/WeaponGrid/index.tsx @@ -19,8 +19,8 @@ export enum GridType { interface Props { userId?: string partyId?: string - mainhand?: Weapon | undefined - grid: GridArray + mainhand?: GridWeapon | undefined + grid: GridArray extra: boolean editable: boolean exists: boolean @@ -33,6 +33,7 @@ const WeaponGrid = (props: Props) => { const [searchPosition, setSearchPosition] = useState(0) const numWeapons: number = 9 + const searchGrid: GridArray = Object.values(props.grid).map((o) => o.weapon) const extraGrid = ( {
    { openSearchModal(-1) }} editable={props.editable} key="grid_mainhand" position={-1} unitType={0} - weapon={props.mainhand} + gridWeapon={props.mainhand} + onClick={() => { openSearchModal(-1) }} />
      @@ -81,11 +82,11 @@ const WeaponGrid = (props: Props) => { return (
    • { openSearchModal(i) }} editable={props.editable} position={i} unitType={1} - weapon={props.grid[i]} + gridWeapon={props.grid[i]} + onClick={() => { openSearchModal(i) }} />
      • ) @@ -102,7 +103,7 @@ const WeaponGrid = (props: Props) => { {open ? ( void - weapon: Weapon | undefined + gridWeapon: GridWeapon | undefined position: number editable: boolean unitType: 0 | 1 @@ -24,10 +24,10 @@ const WeaponUnit = (props: Props) => { 'mainhand': props.unitType == 0, 'grid': props.unitType == 1, 'editable': props.editable, - 'filled': (props.weapon !== undefined) + 'filled': (props.gridWeapon !== undefined) }) - const weapon = props.weapon + const weapon = props.gridWeapon?.weapon useEffect(() => { generateImageUrl() @@ -35,8 +35,8 @@ const WeaponUnit = (props: Props) => { function generateImageUrl() { let imgSrc = "" - if (props.weapon) { - const weapon = props.weapon! + if (props.gridWeapon) { + const weapon = props.gridWeapon.weapon! if (props.unitType == 0) imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}.jpg` @@ -59,7 +59,7 @@ const WeaponUnit = (props: Props) => { type="weapon" ulb={weapon?.uncap.ulb || false} flb={weapon?.uncap.flb || false} - uncapLevel={weapon?.uncap_level!} + uncapLevel={props.gridWeapon?.uncap_level!} />
    diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx index a47a8c12..6d002c8a 100644 --- a/pages/p/[party].tsx +++ b/pages/p/[party].tsx @@ -23,10 +23,10 @@ const PartyRoute: React.FC = () => { const [editable, setEditable] = useState(false) const [characters, setCharacters] = useState>({}) - const [weapons, setWeapons] = useState>({}) + const [weapons, setWeapons] = useState>({}) const [summons, setSummons] = useState>({}) - const [mainWeapon, setMainWeapon] = useState() + const [mainWeapon, setMainWeapon] = useState() const [mainSummon, setMainSummon] = useState() const [friendSummon, setFriendSummon] = useState() @@ -84,16 +84,13 @@ const PartyRoute: React.FC = () => { } function populateWeapons(list: [GridWeapon]) { - let weapons: GridArray = {} + let weapons: GridArray = {} list.forEach((object: GridWeapon) => { - const weapon = object.weapon - weapon.uncap_level = object.uncapLevel - if (object.mainhand) - setMainWeapon(weapon) + setMainWeapon(object) else if (!object.mainhand && object.position != null) - weapons[object.position] = weapon + weapons[object.position] = object }) return weapons