WIP: Use debounce to intelligently send uncap level to server

We are using debounce to send the uncap level to the server without making a ton of requests if the user is feeling clicky.

This is a WIP because it doesn't send to the server yet. I'm having issues setting the correct initial state from the props.

components/ExtraWeapons/index.tsx

@@ -39,6 +39,7 @@ const ExtraWeapons = (props: Props) => {
                                     unitType={1}
                                     gridWeapon={props.grid[props.offset + i]}
                                     onClick={() => { props.onClick(props.offset + i)}} 
+                                    updateUncap={updateUncap}
                                 />
                             </li>
                         )

components/UncapIndicator/index.tsx

@@ -1,6 +1,8 @@
-import React, { useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import UncapStar from '~components/UncapStar'
 
+import debounce from 'lodash.debounce'
+
 import './index.scss'
 
 
@@ -16,6 +18,15 @@ interface Props {
 const UncapIndicator = (props: Props) => {
     const [uncap, setUncap] = useState(props.uncapLevel)
 
+    const debouncedAction = debounce(() => {
+        console.log("Debouncing...")
+        props.updateUncap(numStars)
+    }, 1000)
+    
+    const delayedAction = useCallback(() => {
+        debouncedAction()
+    }, [])
+
     const numStars = setNumStars()
 
     function setNumStars() {
@@ -47,6 +58,8 @@ const UncapIndicator = (props: Props) => {
             setUncap(index + 1)
         else
             setUncap(index)
+
+        delayedAction()
     }
 
     return (

components/WeaponGrid/index.tsx

@@ -42,6 +42,7 @@ const WeaponGrid = (props: Props) => {
             exists={false}
             offset={numWeapons}
             onClick={openSearchModal}
+            updateUncap={updateUncap}
         />
     )
 
@@ -64,6 +65,10 @@ const WeaponGrid = (props: Props) => {
         openModal()
     }
 
+    function updateUncap(id: string, uncap: number) {
+        console.log(`${id} is now ${uncap} stars`)
+    }
+
     return (
         <div id="weapon_grids">
             <div id="WeaponGrid">
@@ -74,6 +79,7 @@ const WeaponGrid = (props: Props) => {
                     unitType={0}
                     gridWeapon={props.mainhand}
                     onClick={() => { openSearchModal(-1) }}
+                    updateUncap={updateUncap}
                 />
 
                 <ul id="grid_weapons">
@@ -87,6 +93,7 @@ const WeaponGrid = (props: Props) => {
                                         unitType={1}
                                         gridWeapon={props.grid[i]}
                                         onClick={() => { openSearchModal(i) }}
+                                        updateUncap={updateUncap}
                                     />
                                 </li>
                             )

components/WeaponUnit/index.tsx

@@ -10,6 +10,7 @@ import './index.scss'
 
 interface Props {
     onClick: () => void
+    updateUncap: (id: string, uncap: number) => void
     gridWeapon: GridWeapon | undefined
     position: number
     editable: boolean
@@ -47,6 +48,11 @@ const WeaponUnit = (props: Props) => {
         setImageUrl(imgSrc)
     }
 
+    function passUncapData(uncap: number) {
+        if (props.gridWeapon)
+            props.updateUncap(props.gridWeapon.id, uncap)
+    }
+
     return (
         <div>
             <div className={classes}>
@@ -60,6 +66,7 @@ const WeaponUnit = (props: Props) => {
                     ulb={weapon?.uncap.ulb || false} 
                     flb={weapon?.uncap.flb || false}
                     uncapLevel={props.gridWeapon?.uncap_level!}
+                    updateUncap={passUncapData}
                 />
             </div>
         </div>