Enable saving to server

components/CharacterModal/index.tsx

@@ -88,6 +88,9 @@ const CharacterModal = ({
     setOpen(modalOpen)
   }, [modalOpen])
 
+  // Character properties: Perpetuity
+  const [perpetuity, setPerpetuity] = useState(false)
+
   // Character properties: Ring
   const [rings, setRings] = useState<CharacterOverMastery>({
     1: { ...emptyExtendedMastery, modifier: 1 },
@@ -128,61 +131,7 @@ const CharacterModal = ({
 
   // Methods: Receive data from components
   function receiveRingValues(overMastery: CharacterOverMastery) {
-    console.log(overMastery)
-
-    setRings({
-      1: {
-        modifier: overMastery[1].modifier,
-        strength: overMastery[1].strength,
-      },
-      2: {
-        modifier: overMastery[2].modifier,
-        strength: overMastery[2].strength,
-      },
-      3: {
-        modifier: overMastery[3].modifier,
-        strength: overMastery[3].strength,
-      },
-      4: {
-    if (overMastery[1]) {
-      setRings({
-        ...rings,
-        1: {
-          modifier: 1,
-          strength: overMastery[1].strength,
-        },
-      })
-    }
-
-    if (overMastery[2]) {
-      setRings({
-        ...rings,
-        2: {
-          modifier: 2,
-          strength: overMastery[1].strength,
-        },
-      })
-    }
-
-    if (overMastery[3]) {
-      setRings({
-        ...rings,
-        3: {
-          modifier: overMastery[3].modifier,
-          strength: overMastery[3].strength,
-        },
-      })
-    }
-
-    if (overMastery[4]) {
-      setRings({
-        ...rings,
-        4: {
-          modifier: overMastery[4].modifier,
-          strength: overMastery[4].strength,
-        },
-      })
-    }
+    setRings(overMastery)
   }
 
   function receiveEarringValues(
@@ -212,22 +161,34 @@ const CharacterModal = ({
 
   // Prepare the GridWeaponObject to send to the server
   function prepareObject() {
-    console.log('Rings:')
-    console.log(rings)
-
     let object: GridCharacterObject = {
       character: {
-        ring_modifier3: rings[3].modifier,
-        ring_modifier4: rings[4].modifier,
-        ring_strength1: rings[1].strength,
-        ring_strength2: rings[2].strength,
-        ring_strength3: rings[3].strength,
-        ring_strength4: rings[4].strength,
-        earring_modifier: earring.modifier,
-        earring_strength: earring.strength,
-        awakening_type: awakeningType,
-        awakening_level: awakeningLevel,
+        ring1: {
+          modifier: rings[1].modifier,
+          strength: rings[1].strength,
+        },
+        ring2: {
+          modifier: rings[2].modifier,
+          strength: rings[2].strength,
+        },
+        ring3: {
+          modifier: rings[3].modifier,
+          strength: rings[3].strength,
+        },
+        ring4: {
+          modifier: rings[4].modifier,
+          strength: rings[4].strength,
+        },
+        earring: {
+          modifier: earring.modifier,
+          strength: earring.strength,
+        },
+        awakening: {
+          type: awakeningType,
+          level: awakeningLevel,
+        },
         transcendence_step: transcendenceStep,
+        perpetuity: perpetuity,
       },
     }
 
@@ -237,11 +198,11 @@ const CharacterModal = ({
   // Send the GridWeaponObject to the server
   async function updateCharacter() {
     const updateObject = prepareObject()
-    console.log(updateObject)
-    // return await api.endpoints.grid_characters
-    //   .update(gridCharacter.id, updateObject)
-    //   .then((response) => processResult(response))
-    //   .catch((error) => processError(error))
+
+    return await api.endpoints.grid_characters
+      .update(gridCharacter.id, updateObject)
+      .then((response) => processResult(response))
+      .catch((error) => processError(error))
   }
 
   // Save the server's response to state

components/RingSelect/index.tsx

@@ -23,7 +23,7 @@ interface Props {
   sendValues: (overMastery: CharacterOverMastery) => void
 }
 
-const RingSelect = (props: Props) => {
+const RingSelect = ({ gridCharacter, sendValues }: Props) => {
   // Ring value states
   const [rings, setRings] = useState<CharacterOverMastery>({
     1: { ...emptyRing, modifier: 1 },
@@ -33,7 +33,16 @@ const RingSelect = (props: Props) => {
   })
 
   useEffect(() => {
-    props.sendValues(rings)
+    setRings({
+      1: gridCharacter.over_mastery[0],
+      2: gridCharacter.over_mastery[1],
+      3: gridCharacter.over_mastery[2],
+      4: gridCharacter.over_mastery[3],
+    })
+  }, [gridCharacter])
+
+  useEffect(() => {
+    sendValues(rings)
   }, [rings])
 
   function dataSet(index: number) {
@@ -66,8 +75,21 @@ const RingSelect = (props: Props) => {
   }
 
   function receiveRingValues(index: number, left: number, right: number) {
+    console.log(`Receiving values from ${index}: ${left} ${right}`)
     if (index == 1 || index == 2) {
       setSyncedRingValues(index, right)
+    } else if (index == 3 && left == 0) {
+      setRings({
+        ...rings,
+        3: {
+          modifier: 0,
+          strength: 0,
+        },
+        4: {
+          modifier: 0,
+          strength: 0,
+        },
+      })
     } else {
       setRings({
         ...rings,
@@ -80,6 +102,7 @@ const RingSelect = (props: Props) => {
   }
 
   function setSyncedRingValues(index: 1 | 2, value: number) {
+    console.log(`Setting synced value for ${index} with value ${value}`)
     const atkValues = (dataSet(1)[0] as ItemSkill).values ?? []
     const hpValues = (dataSet(2)[0] as ItemSkill).values ?? []
 
@@ -88,11 +111,11 @@ const RingSelect = (props: Props) => {
     setRings({
       ...rings,
       1: {
-        modifier: rings[1].modifier,
+        modifier: 1,
         strength: atkValues[found],
       },
       2: {
-        modifier: rings[2].modifier,
+        modifier: 2,
         strength: hpValues[found],
       },
     })
@@ -102,7 +125,7 @@ const RingSelect = (props: Props) => {
     <div className="Rings">
       {[...Array(4)].map((e, i) => {
         const ringIndex = i + 1
-
+        const ringStat = rings[ringIndex]
         return (
           <SelectWithSelect
             name={`ring-${ringIndex}`}
@@ -110,8 +133,8 @@ const RingSelect = (props: Props) => {
             key={`ring-${ringIndex}`}
             dataSet={dataSet(ringIndex)}
             leftSelectDisabled={i === 0 || i === 1}
-            leftSelectValue={rings[ringIndex].modifier}
-            rightSelectValue={rings[ringIndex].strength}
+            leftSelectValue={ringStat.modifier ? ringStat.modifier : 0}
+            rightSelectValue={ringStat.strength ? ringStat.strength : 0}
             sendValues={(left: number, right: number) => {
               receiveRingValues(ringIndex, left, right)
             }}

components/SelectWithSelect/index.tsx

@@ -70,6 +70,9 @@ const SelectWithInput = ({
   function onClose() {
     setLeftSelectOpen(false)
     setRightSelectOpen(false)
+
+    setCurrentItemSkill(undefined)
+    setCurrentItemValue(0)
   }
 
   // Methods: Rendering
@@ -110,13 +113,17 @@ const SelectWithInput = ({
   function handleLeftSelectChange(rawValue: string) {
     const value = parseInt(rawValue)
     const skill = dataSet.find((sk) => sk.id === value)
+
     setCurrentItemSkill(skill)
     setCurrentItemValue(0)
+
+    if (skill) sendValues(skill.id, 0)
   }
 
   function handleRightSelectChange(rawValue: string) {
     const value = parseFloat(rawValue)
     setCurrentItemValue(value)
+
     if (currentItemSkill) sendValues(currentItemSkill.id, value)
   }