Added WeaponModal component

This uses AxSelect, ElementToggle and WeaponKeyDropdown to let users modify their weapons.

components/WeaponModal/index.scss

@@ -1,4 +1,9 @@
 .Weapon.Dialog {
+    .mods {
+        display: flex;
+        flex-direction: column;
+        gap: $unit * 4;
+
         section {
             display: flex;
             flex-direction: column;
@@ -7,6 +12,33 @@
             h3 {
                 color: $grey-50;
                 font-size: $font-small;
+                margin-bottom: $unit;
+            }
+
+            select {
+                background-color: $grey-90;
+            }
+        }
+
+        .Button {
+            font-size: $font-regular;
+            padding: ($unit * 1.5) ($unit * 2);
+            width: 100%;
+    
+            &.btn-disabled {
+                background: $grey-90;
+                color: $grey-70;
+                cursor: not-allowed;
+            }
+    
+            &:not(.btn-disabled) {
+                background: $grey-90;
+                color: $grey-40;
+    
+                &:hover {
+                    background: $grey-80;
+                }
+            }
         }
     }
 }

components/WeaponModal/index.tsx

@@ -1,19 +1,181 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useCookies } from 'react-cookie'
+import { AxiosResponse } from 'axios'
 import * as Dialog from '@radix-ui/react-dialog'
 
+import AXSelect from '~components/AxSelect'
 import ElementToggle from '~components/ElementToggle'
+import WeaponKeyDropdown from '~components/WeaponKeyDropdown'
+import Button from '~components/Button'
+
+import api from '~utils/api'
+import { appState } from '~utils/appState'
 
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
 
+
+interface GridWeaponObject {
+    weapon: {
+        element?: number
+        weapon_key1_id?: string
+        weapon_key2_id?: string
+        weapon_key3_id?: string
+        ax_modifier1?: number
+        ax_modifier2?: number
+        ax_strength1?: number
+        ax_strength2?: number
+    }
+}
+
 interface Props {
     gridWeapon: GridWeapon
     children: React.ReactNode
 }
 
 const WeaponModal = (props: Props) => {
+    // Cookies
+    const [cookies, _] = useCookies(['user'])
+    const headers = (cookies.user != null) ? {
+        headers: {
+            'Authorization': `Bearer ${cookies.user.access_token}`
+        }
+    } : {}
+    
+    // Refs
+    const weaponKey1Select = React.createRef<HTMLSelectElement>()
+    const weaponKey2Select = React.createRef<HTMLSelectElement>()
+    const weaponKey3Select = React.createRef<HTMLSelectElement>()
+
+    // State
+    const [open, setOpen] = useState(false)
+
+    const [element, setElement] = useState(-1)
+    const [primaryAxModifier, setPrimaryAxModifier] = useState(-1)
+    const [secondaryAxModifier, setSecondaryAxModifier] = useState(-1)
+    const [primaryAxValue, setPrimaryAxValue] = useState(0.0)
+    const [secondaryAxValue, setSecondaryAxValue] = useState(0.0)
+    
+    function receiveAxValues(primaryAxModifier: number, primaryAxValue: number, secondaryAxModifier: number, secondaryAxValue: number) {
+        setPrimaryAxModifier(primaryAxModifier)
+        setSecondaryAxModifier(secondaryAxModifier)
+
+        setPrimaryAxValue(primaryAxValue)
+        setSecondaryAxValue(secondaryAxValue)
+    }
+
+    function receiveElementValue(element: string) {
+        setElement(parseInt(element))
+    }
+
+    function prepareObject() {
+        let object: GridWeaponObject = { weapon: {} }
+
+        if (props.gridWeapon.object.element == 0)
+            object.weapon.element = element
+
+        if ([2, 3, 17, 24].includes(props.gridWeapon.object.series))
+            object.weapon.weapon_key1_id = weaponKey1Select.current?.value
+
+        if ([2, 3, 17].includes(props.gridWeapon.object.series))
+            object.weapon.weapon_key2_id = weaponKey2Select.current?.value
+
+        if (props.gridWeapon.object.series == 17)
+            object.weapon.weapon_key3_id = weaponKey3Select.current?.value
+
+        if (props.gridWeapon.object.ax > 0) {
+            object.weapon.ax_modifier1 = primaryAxModifier
+            object.weapon.ax_modifier2 = secondaryAxModifier
+            object.weapon.ax_strength1 = primaryAxValue
+            object.weapon.ax_strength2 = secondaryAxValue
+        }
+
+        return object
+    }
+
+    async function updateWeapon() {
+        const updateObject = prepareObject()
+        return await api.endpoints.grid_weapons.update(props.gridWeapon.id, updateObject, headers)
+            .then(response => processResult(response))
+            .catch(error => processError(error))
+    }
+
+    function processResult(response: AxiosResponse) {
+        const gridWeapon: GridWeapon = response.data.grid_weapon
+
+        if (gridWeapon.mainhand)
+            appState.grid.weapons.mainWeapon = gridWeapon
+        else
+            appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon
+
+        setOpen(false)
+    }
+
+    function processError(error: any) {
+        console.error(error)
+    }
+
+    const elementSelect = () => {
         return (
-        <Dialog.Root>
+            <section>
+                <h3>Element</h3>
+                <ElementToggle 
+                    currentElement={props.gridWeapon.element} 
+                    sendValue={receiveElementValue}
+                />
+            </section>
+        )
+    }
+
+    const keySelect = () => {
+        return (
+            <section>
+                <h3>Weapon Keys</h3>
+                { ([2, 3, 17, 22].includes(props.gridWeapon.object.series)) ? 
+                    <WeaponKeyDropdown
+                        currentValue={ (props.gridWeapon.weapon_keys) ? props.gridWeapon.weapon_keys[0] : undefined }
+                        series={props.gridWeapon.object.series}
+                        slot={0} 
+                        ref={weaponKey1Select} />
+                        : ''}
+
+                { ([2, 3, 17].includes(props.gridWeapon.object.series)) ? 
+                    <WeaponKeyDropdown 
+                        currentValue={ (props.gridWeapon.weapon_keys) ? props.gridWeapon.weapon_keys[1] : undefined }
+                        series={props.gridWeapon.object.series}
+                        slot={1}
+                        ref={weaponKey2Select} />
+                        : ''}
+
+                { (props.gridWeapon.object.series == 17) ? 
+                    <WeaponKeyDropdown 
+                        currentValue={ (props.gridWeapon.weapon_keys) ? props.gridWeapon.weapon_keys[2] : undefined } 
+                        series={props.gridWeapon.object.series}
+                        slot={2}
+                        ref={weaponKey3Select} />
+                        : ''}
+            </section>
+        )
+    }
+
+    const axSelect = () => {
+        return (
+            <section>
+                <AXSelect 
+                    axType={props.gridWeapon.object.ax}
+                    currentSkills={props.gridWeapon.ax}
+                    sendValues={receiveAxValues}    
+                />
+            </section>
+        )
+    }
+
+    function openChange(open: boolean) {
+        setOpen(open)
+    }
+    
+    return (
+        <Dialog.Root open={open} onOpenChange={openChange}>
             <Dialog.Trigger asChild>
                 { props.children }
             </Dialog.Trigger>
@@ -31,12 +193,12 @@ const WeaponModal = (props: Props) => {
                         </Dialog.Close>
                     </div>
 
-                    <section>
+                    <div className="mods">
-                        { (props.gridWeapon.object.element == 0) ? 
+                        { (props.gridWeapon.object.element == 0) ? elementSelect() : '' }
-                            <ElementToggle 
+                        { ([2, 3, 17, 24].includes(props.gridWeapon.object.series)) ? keySelect() : '' }
-                                currentElement={props.gridWeapon.object.element} /> 
+                        { (props.gridWeapon.object.ax > 0) ? axSelect() : '' }
-                                : ''}
+                        <Button click={updateWeapon}>Save Weapon</Button>
-                    </section>
+                    </div>
                 </Dialog.Content>
                 <Dialog.Overlay className="Overlay" />
             </Dialog.Portal>