diff --git a/components/ExtraWeapons/index.tsx b/components/ExtraWeapons/index.tsx index 65792741..de72c162 100644 --- a/components/ExtraWeapons/index.tsx +++ b/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} /> ) diff --git a/components/UncapIndicator/index.tsx b/components/UncapIndicator/index.tsx index d19fbb40..a0971315 100644 --- a/components/UncapIndicator/index.tsx +++ b/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 ( diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index cfd01ef8..7e1ea5d7 100644 --- a/components/WeaponGrid/index.tsx +++ b/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 (
@@ -74,6 +79,7 @@ const WeaponGrid = (props: Props) => { unitType={0} gridWeapon={props.mainhand} onClick={() => { openSearchModal(-1) }} + updateUncap={updateUncap} />