Add simple way to reset talent tree

src/components/Calculator.tsx

@@ -1,7 +1,7 @@
 import './Calculator.scss'
 import React from 'react'
 import { Map } from 'immutable'
-import { TalentTree } from './TalentTree'
+import TalentTree from './TalentTree'
 import { calcAvailablePoints } from '../lib/tree'
 import { classById } from '../data/classes'
 import { Link } from 'react-router-dom';

src/components/TalentTree.scss

@@ -43,6 +43,14 @@
     }
   }
 
+  &__reset {
+    position: absolute;
+    top: 1em;
+    right: .5em;
+    cursor: pointer;
+    color: lighten(red, 20%)
+  }
+
   &__body {
     position: relative;
     height: 520px;

src/components/TalentTree.tsx

@@ -5,15 +5,18 @@ import { Talent } from './Talent';
 import { getPointsInSpec, canLearnTalent, SORT_TALENTS_DESC, getUnmetRequirements } from '../lib/tree';
 import { talentsBySpec, specNames, talentsById } from '../data/talents'
 import { Arrow } from './Arrow'
+import { resetSpec } from '../store/calculator/actions'
+import { connect } from 'react-redux';
 
 interface Props {
   specId: number
   availablePoints: number
   knownTalents: Map<number, number>
   onTalentPress: TalentClickHandler
+  resetSpec?: typeof resetSpec
 }
 
-export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoints, onTalentPress }) => {
+export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoints, onTalentPress, resetSpec }) => {
   const talents = Object.values(talentsBySpec[specId]).sort(SORT_TALENTS_DESC)
   const pointsInSpec = getPointsInSpec(specId, knownTalents)
 
@@ -25,11 +28,18 @@ export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoi
     (talentId) => onTalentPress(specId, talentId, -1), 
     [specId, onTalentPress]
   )
+  const handleResetSpec = useCallback(
+    resetSpec ? () => resetSpec(specId) : () => {},
+    [resetSpec, specId]
+  )
 
   return (
     <div className="tree">
       <div className="tree__header">
         <h3>{specNames[specId]} ({pointsInSpec})</h3>
+        {pointsInSpec > 0 && 
+          <div className="tree__reset" onClick={handleResetSpec}>x</div>
+        }
       </div>
 
       <div className="tree__body" style={{ backgroundImage: `url(${require(`../images/specs/${specId}.jpg`)})` }}>
@@ -62,4 +72,9 @@ export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoi
   )
 }
 
-;(TalentTree as any).whyDidYouRender = true
+;(TalentTree as any).whyDidYouRender = true
+
+export default connect(
+  null,
+  { resetSpec }
+)(TalentTree)