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

Refactor props key out of WeaponSelect

Browse source
This commit is contained in:
Justin Edmund 2023-01-19 07:25:54 -08:00
parent 6064d726ce
commit 78744d663b
1 changed files with 33 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
components/WeaponModal/index.tsx
View file

@ -43,7 +43,7 @@ interface Props {
children: React.ReactNode children: React.ReactNode
} }
const WeaponModal = (props: Props) => { const WeaponModal = ({ gridWeapon, children }: Props) => {
const router = useRouter() const router = useRouter()
const locale = const locale =
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
@ -88,10 +88,10 @@ const WeaponModal = (props: Props) => {
const [awakeningOpen, setAwakeningOpen] = useState(false) const [awakeningOpen, setAwakeningOpen] = useState(false)
useEffect(() => { useEffect(() => {
setElement(props.gridWeapon.element) setElement(gridWeapon.element)
if (props.gridWeapon.weapon_keys) { if (gridWeapon.weapon_keys) {
props.gridWeapon.weapon_keys.forEach((key) => { gridWeapon.weapon_keys.forEach((key) => {
if (key.slot + 1 === 1) { if (key.slot + 1 === 1) {
setWeaponKey1(key) setWeaponKey1(key)
} else if (key.slot + 1 === 2) { } else if (key.slot + 1 === 2) {
@ -101,7 +101,7 @@ const WeaponModal = (props: Props) => {
} }
}) })
} }
}, [props]) }, [gridWeapon])
function receiveAxValues( function receiveAxValues(
primaryAxModifier: number, primaryAxModifier: number,
@ -132,29 +132,26 @@ const WeaponModal = (props: Props) => {
function prepareObject() { function prepareObject() {
let object: GridWeaponObject = { weapon: {} } let object: GridWeaponObject = { weapon: {} }
if (props.gridWeapon.object.element == 0) object.weapon.element = element if (gridWeapon.object.element == 0) object.weapon.element = element
if ( if ([2, 3, 17, 24].includes(gridWeapon.object.series) && weaponKey1Id) {
[2, 3, 17, 24].includes(props.gridWeapon.object.series) &&
weaponKey1Id
) {
object.weapon.weapon_key1_id = weaponKey1Id object.weapon.weapon_key1_id = weaponKey1Id
} }
if ([2, 3, 17].includes(props.gridWeapon.object.series) && weaponKey2Id) if ([2, 3, 17].includes(gridWeapon.object.series) && weaponKey2Id)
object.weapon.weapon_key2_id = weaponKey2Id object.weapon.weapon_key2_id = weaponKey2Id
if (props.gridWeapon.object.series == 17 && weaponKey3Id) if (gridWeapon.object.series == 17 && weaponKey3Id)
object.weapon.weapon_key3_id = weaponKey3Id object.weapon.weapon_key3_id = weaponKey3Id
if (props.gridWeapon.object.ax && props.gridWeapon.object.ax_type > 0) { if (gridWeapon.object.ax && gridWeapon.object.ax_type > 0) {
object.weapon.ax_modifier1 = primaryAxModifier object.weapon.ax_modifier1 = primaryAxModifier
object.weapon.ax_modifier2 = secondaryAxModifier object.weapon.ax_modifier2 = secondaryAxModifier
object.weapon.ax_strength1 = primaryAxValue object.weapon.ax_strength1 = primaryAxValue
object.weapon.ax_strength2 = secondaryAxValue object.weapon.ax_strength2 = secondaryAxValue
} }
if (props.gridWeapon.object.awakening) { if (gridWeapon.object.awakening) {
object.weapon.awakening_type = awakeningType object.weapon.awakening_type = awakeningType
object.weapon.awakening_level = awakeningLevel object.weapon.awakening_level = awakeningLevel
} }
@ -165,7 +162,7 @@ const WeaponModal = (props: Props) => {
async function updateWeapon() { async function updateWeapon() {
const updateObject = prepareObject() const updateObject = prepareObject()
return await api.endpoints.grid_weapons return await api.endpoints.grid_weapons
.update(props.gridWeapon.id, updateObject, headers) .update(gridWeapon.id, updateObject, headers)
.then((response) => processResult(response)) .then((response) => processResult(response))
.catch((error) => processError(error)) .catch((error) => processError(error))
} }
@ -221,11 +218,11 @@ const WeaponModal = (props: Props) => {
return ( return (
<section> <section>
<h3>{t('modals.weapon.subtitles.weapon_keys')}</h3> <h3>{t('modals.weapon.subtitles.weapon_keys')}</h3>
{[2, 3, 17, 22].includes(props.gridWeapon.object.series) ? ( {[2, 3, 17, 22].includes(gridWeapon.object.series) ? (
<WeaponKeySelect <WeaponKeySelect
open={weaponKey1Open} open={weaponKey1Open}
currentValue={weaponKey1 != null ? weaponKey1 : undefined} currentValue={weaponKey1 != null ? weaponKey1 : undefined}
series={props.gridWeapon.object.series} series={gridWeapon.object.series}
slot={0} slot={0}
onOpenChange={() => openSelect(1)} onOpenChange={() => openSelect(1)}
onChange={receiveWeaponKey} onChange={receiveWeaponKey}
@ -235,11 +232,11 @@ const WeaponModal = (props: Props) => {
'' ''
)} )}
{[2, 3, 17].includes(props.gridWeapon.object.series) ? ( {[2, 3, 17].includes(gridWeapon.object.series) ? (
<WeaponKeySelect <WeaponKeySelect
open={weaponKey2Open} open={weaponKey2Open}
currentValue={weaponKey2 != null ? weaponKey2 : undefined} currentValue={weaponKey2 != null ? weaponKey2 : undefined}
series={props.gridWeapon.object.series} series={gridWeapon.object.series}
slot={1} slot={1}
onOpenChange={() => openSelect(2)} onOpenChange={() => openSelect(2)}
onChange={receiveWeaponKey} onChange={receiveWeaponKey}
@ -249,11 +246,11 @@ const WeaponModal = (props: Props) => {
'' ''
)} )}
{props.gridWeapon.object.series == 17 ? ( {gridWeapon.object.series == 17 ? (
<WeaponKeySelect <WeaponKeySelect
open={weaponKey3Open} open={weaponKey3Open}
currentValue={weaponKey3 != null ? weaponKey3 : undefined} currentValue={weaponKey3 != null ? weaponKey3 : undefined}
series={props.gridWeapon.object.series} series={gridWeapon.object.series}
slot={2} slot={2}
onOpenChange={() => openSelect(3)} onOpenChange={() => openSelect(3)}
onChange={receiveWeaponKey} onChange={receiveWeaponKey}
@ -263,12 +260,11 @@ const WeaponModal = (props: Props) => {
'' ''
)} )}
{props.gridWeapon.object.series == 24 && {gridWeapon.object.series == 24 && gridWeapon.object.uncap.ulb ? (
props.gridWeapon.object.uncap.ulb ? (
<WeaponKeySelect <WeaponKeySelect
open={weaponKey4Open} open={weaponKey4Open}
currentValue={weaponKey1 != null ? weaponKey1 : undefined} currentValue={weaponKey1 != null ? weaponKey1 : undefined}
series={props.gridWeapon.object.series} series={gridWeapon.object.series}
slot={0} slot={0}
onOpenChange={() => openSelect(4)} onOpenChange={() => openSelect(4)}
onChange={receiveWeaponKey} onChange={receiveWeaponKey}
@ -286,8 +282,8 @@ const WeaponModal = (props: Props) => {
<section> <section>
<h3>{t('modals.weapon.subtitles.ax_skills')}</h3> <h3>{t('modals.weapon.subtitles.ax_skills')}</h3>
<AXSelect <AXSelect
axType={props.gridWeapon.object.ax_type} axType={gridWeapon.object.ax_type}
currentSkills={props.gridWeapon.ax} currentSkills={gridWeapon.ax}
onOpenChange={receiveAxOpen} onOpenChange={receiveAxOpen}
sendValidity={receiveValidity} sendValidity={receiveValidity}
sendValues={receiveAxValues} sendValues={receiveAxValues}
@ -302,8 +298,8 @@ const WeaponModal = (props: Props) => {
<h3>{t('modals.weapon.subtitles.awakening')}</h3> <h3>{t('modals.weapon.subtitles.awakening')}</h3>
<AwakeningSelect <AwakeningSelect
object="weapon" object="weapon"
awakeningType={props.gridWeapon.awakening?.type} awakeningType={gridWeapon.awakening?.type}
awakeningLevel={props.gridWeapon.awakening?.level} awakeningLevel={gridWeapon.awakening?.level}
onOpenChange={receiveAwakeningOpen} onOpenChange={receiveAwakeningOpen}
sendValidity={receiveValidity} sendValidity={receiveValidity}
sendValues={receiveAwakeningValues} sendValues={receiveAwakeningValues}
@ -313,7 +309,7 @@ const WeaponModal = (props: Props) => {
} }
function openChange(open: boolean) { function openChange(open: boolean) {
if (props.gridWeapon.object.ax || props.gridWeapon.object.awakening) { if (gridWeapon.object.ax || gridWeapon.object.awakening) {
setFormValid(false) setFormValid(false)
} else { } else {
setFormValid(true) setFormValid(true)
@ -341,7 +337,7 @@ const WeaponModal = (props: Props) => {
return ( return (
// TODO: Refactor into Dialog component // TODO: Refactor into Dialog component
<Dialog open={open} onOpenChange={openChange}> <Dialog open={open} onOpenChange={openChange}>
<DialogTrigger asChild>{props.children}</DialogTrigger> <DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent <DialogContent
className="Weapon" className="Weapon"
onOpenAutoFocus={(event) => event.preventDefault()} onOpenAutoFocus={(event) => event.preventDefault()}
@ -353,7 +349,7 @@ const WeaponModal = (props: Props) => {
{t('modals.weapon.title')} {t('modals.weapon.title')}
</DialogTitle> </DialogTitle>
<DialogTitle className="DialogTitle"> <DialogTitle className="DialogTitle">
{props.gridWeapon.object.name[locale]} {gridWeapon.object.name[locale]}
</DialogTitle> </DialogTitle>
</div> </div>
<DialogClose className="DialogClose" asChild> <DialogClose className="DialogClose" asChild>
@ -364,12 +360,12 @@ const WeaponModal = (props: Props) => {
</div> </div>
<div className="mods"> <div className="mods">
{props.gridWeapon.object.element == 0 ? elementSelect() : ''} {gridWeapon.object.element == 0 ? elementSelect() : ''}
{[2, 3, 17, 24].includes(props.gridWeapon.object.series) {[2, 3, 17, 24].includes(gridWeapon.object.series) ? keySelect() : ''}
? keySelect() {gridWeapon.object.ax ? axSelect() : ''}
: ''} {gridWeapon.awakening ? awakeningSelect() : ''}
{props.gridWeapon.object.ax ? axSelect() : ''} </div>
{props.gridWeapon.awakening ? awakeningSelect() : ''} <div className="DialogFooter">
<Button <Button
contained={true} contained={true}
onClick={updateWeapon} onClick={updateWeapon}