Cleanup and refactoring

components/UncapIndicator/index.tsx

@@ -13,15 +13,9 @@ interface Props {
 }
 
 const UncapIndicator = (props: Props) => {
-    const firstUpdate = useRef(true)
     const [uncap, setUncap] = useState(props.uncapLevel)
 
     useEffect(() => {
-        if (firstUpdate.current) {
-            firstUpdate.current = false
-            return
-        }
-
         props.updateUncap(uncap)
     }, [uncap])
 
@@ -53,18 +47,32 @@ const UncapIndicator = (props: Props) => {
         else setUncap(index)
     }
 
+    const transcendence = (i: number) => {
+        return <UncapStar ulb={true} empty={i >= uncap} key={`star_${i}`} index={i} onClick={toggleStar} />
+    }
+
+    const flb = (i: number) => {
+        return <UncapStar flb={true} empty={i >= uncap} key={`star_${i}`} index={i} onClick={toggleStar} />
+    }
+
+    const mlb = (i: number) => {
+        return <UncapStar empty={i >= uncap} key={`star_${i}`} index={i} onClick={toggleStar} />
+    }
+
+
+
     return (
         <ul className="UncapIndicator">
             {
                 Array.from(Array(numStars)).map((x, i) => {
                     if (props.type === 'character' && i > 4) {
-                        return <UncapStar ulb={true} empty={i >= uncap} key={`star_${i}`} index={i} onClick={toggleStar} />
+                        return transcendence(i)
                     } else if (
                         props.type === 'character' && i == 4 ||
                         props.type !== 'character' && i > 2) {
-                        return <UncapStar flb={true} empty={i >= uncap} key={`star_${i}`} index={i} onClick={toggleStar} />
+                        return flb(i)
                     } else {
-                        return <UncapStar empty={i >= uncap} key={`star_${i}`} index={i} onClick={toggleStar} />
+                        return mlb(i)
                     }
                 })
             }

components/WeaponGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useModal as useModal } from '~utils/useModal'
 
 import debounce from 'lodash.debounce'
@@ -7,9 +7,8 @@ import SearchModal from '~components/SearchModal'
 import WeaponUnit from '~components/WeaponUnit'
 import ExtraWeapons from '~components/ExtraWeapons'
 
-import './index.scss'
-import { delay } from 'lodash'
 import api from '~utils/api'
+import './index.scss'
 
 // GridType
 export enum GridType {
@@ -59,13 +58,9 @@ const WeaponGrid = (props: Props) => {
     }
 
     async function updateUncap(id: string, level: number) {
-        console.log(id, level) 
         await api.updateUncap('weapon', id, level)
-            .then(response => {
-                console.log(response.data)
-            })
             .catch(error => {
-                console.log(error)
+                console.error(error)
             })
     }
 

components/WeaponUnit/index.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from 'react'
-
 import classnames from 'classnames'
 
 import UncapIndicator from '~components/UncapIndicator'
-
 import PlusIcon from '~public/icons/plus.svg'
 
 import './index.scss'
@@ -28,7 +26,8 @@ const WeaponUnit = (props: Props) => {
         'filled': (props.gridWeapon !== undefined)
     })
 
-    const weapon = props.gridWeapon?.weapon
+    const gridWeapon = props.gridWeapon
+    const weapon = gridWeapon?.weapon
 
     useEffect(() => {
         generateImageUrl()
@@ -53,21 +52,27 @@ const WeaponUnit = (props: Props) => {
             props.updateUncap(props.gridWeapon.id, uncap)
     }
 
+    function imageClickHandler() {
+        if (props.editable) props.onClick
+    }
+
     return (
         <div>
             <div className={classes}>
-                <div className="WeaponImage" onClick={ (props.editable) ? props.onClick : () => {} }>
+                <div className="WeaponImage" onClick={imageClickHandler}>
                     <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
                     { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
                 </div>
                 <h3 className="WeaponName">{weapon?.name.en}</h3>
-                <UncapIndicator 
+                { (gridWeapon) ? 
-                    type="weapon"
+                    <UncapIndicator 
-                    ulb={weapon?.uncap.ulb || false} 
+                        type="weapon"
-                    flb={weapon?.uncap.flb || false}
+                        ulb={gridWeapon.weapon.uncap.ulb || false} 
-                    updateUncap={passUncapData}
+                        flb={gridWeapon.weapon.uncap.flb || false}
-                />
                         uncapLevel={gridWeapon.uncap_level}
+                        updateUncap={passUncapData} 
+                    /> : ''
+                }
             </div>
         </div>
     )