From 78744d663bc40eccfc2b15dfc830bab88c1b87aa Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 19 Jan 2023 07:25:54 -0800
Subject: [PATCH] Refactor props key out of WeaponSelect

---
 components/WeaponModal/index.tsx | 70 +++++++++++++++-----------------
 1 file changed, 33 insertions(+), 37 deletions(-)

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