Add simple way to reset talent tree

TODO.md

@@ -5,8 +5,6 @@
 
 - [ ] Responsiveness:
   - [ ] Tooltips on mobile need different UX
-- [ ] Talent tree: 
-  - [ ] Reset button per tree (?)
 - [ ] Tooltips: 
   - [ ] Support multiple positions for tooltip (currently only `top-right` with fallbacks based on viewport)
 - [ ] Move icons back under `/src` when https://github.com/facebook/create-react-app/pull/6060 is released as part of 3.0.2

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)

src/store/calculator/actions.ts

@@ -5,6 +5,7 @@ import {
   REMOVE_POINT,
   SET_POINTS,
   Points,
+  RESET_SPEC,
 } from './types'
 
 export const setClass = (classId: number, points?: Points): CalculatorActionTypes => ({
@@ -26,4 +27,9 @@ export const removePoint = (talentId: number): CalculatorActionTypes => ({
 export const setPoints = (points: Points): CalculatorActionTypes => ({
   type: SET_POINTS,
   points
+})
+
+export const resetSpec = (specId: number): CalculatorActionTypes => ({
+  type: RESET_SPEC,
+  specId
 })

src/store/calculator/reducers.ts

@@ -5,10 +5,11 @@ import {
   SET_CLASS, 
   ADD_POINT, 
   REMOVE_POINT, 
-  SET_POINTS
+  SET_POINTS,
+  RESET_SPEC
 } from './types'
 import { canLearnTalent, canUnlearnTalent, encodeKnownTalents } from '../../lib/tree'
-import { talentsById } from '../../data/talents'
+import { talentsById, talentsBySpec } from '../../data/talents'
 
 const initialState: CalculatorState = {
   classId: null,
@@ -70,6 +71,15 @@ export default function(state = initialState, action: CalculatorActionTypes): Ca
       }
     }
 
+    case RESET_SPEC: {
+      const resetIds = Object.values(talentsBySpec[action.specId]).map((t) => t.id)
+      const nextPoints = points.filter((_, id) => resetIds.indexOf(id) === -1)
+      return {
+        ...state,
+        points: nextPoints
+      }
+    }
+
     default: 
       return state
   }

src/store/calculator/types.ts

@@ -12,6 +12,7 @@ export const SET_CLASS = 'SET_CLASS'
 export const ADD_POINT = 'ADD_POINT'
 export const REMOVE_POINT = 'REMOVE_POINT'
 export const SET_POINTS = 'SET_POINTS'
+export const RESET_SPEC = 'RESET_SPEC'
 
 interface SetClassAction {
   type: typeof SET_CLASS
@@ -34,5 +35,10 @@ interface SetPointsAction {
   points: Points
 }
 
+interface ResetSpecAction {
+  type: typeof RESET_SPEC
+  specId: number
+}
+
 export type CalculatorActionTypes = SetClassAction | AddPointAction | RemovePointAction | 
-  SetPointsAction
+  SetPointsAction | ResetSpecAction