Better prototype with functioning dependencies and right-clicking

src/components/TalentTree.tsx

@@ -1,38 +1,45 @@
-import React, { MouseEvent } from 'react'
-import { List, Map }  from 'immutable'
+import React, { MouseEvent, useCallback } from 'react'
+import { Map }  from 'immutable'
 import { TalentSlot } from './TalentSlot';
-import { getTreePointCount } from '../lib/tree';
+import { getPointsInSpec } from '../lib/tree';
 import { talentsBySpec, specNames } from '../data/talents';
 
 interface Props {
   specId: number
-  spentPoints: List<number>
+  availablePoints: number
   knownTalents: Map<number, number>
   onTalentPress: TalentClickHandler
 }
 
-export const TalentTree: React.FC<Props> = ({ specId, spentPoints, knownTalents, onTalentPress }) => {
+export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoints, onTalentPress }) => {
   const talents = Object.values(talentsBySpec[specId])
 
-  const handleTalentPress = (talentId: number) => {
+  const handleTalentPress = useCallback((talentId: number, modifier: 1 | -1) => {
     return (e: MouseEvent) => {
-      onTalentPress(specId, talentId, e.shiftKey ? -1 : 1)
+      onTalentPress(specId, talentId, modifier)
     }
+  }, [specId, onTalentPress])
+
+  const style = { 
+    backgroundImage: `url("https://wow.zamimg.com/images/wow/talents/backgrounds/classic/${specId}.jpg")`
   }
 
   return (
-    <div className="tree">
-      <h2>{specNames[specId]}</h2>
+    <div className="tree" style={style}>
+      <h2>{specNames[specId]} ({getPointsInSpec(specId, knownTalents)})</h2>
       {talents.map((talent, index) => 
         <TalentSlot 
           key={talent.id}
+          specId={specId}
           talent={talent}
-          points={knownTalents.get(talent.id, 0)}
-          onClick={handleTalentPress(talent.id)}
+          availablePoints={availablePoints}
+          knownTalents={knownTalents}
+          onClick={handleTalentPress(talent.id, 1)}
+          onRightClick={handleTalentPress(talent.id, -1)}
         />
       )}
-
-      Spent: {getTreePointCount(spentPoints)}
     </div>
   )
-}
+}
+
+(TalentTree as any).whyDidYouRender = true