Add active/inactive styling to ClassPicker

src/components/ClassPicker.tsx

@@ -1,18 +1,39 @@
 import React from 'react'
-import { NavLink } from 'react-router-dom'
+import { NavLink, Link } from 'react-router-dom'
 import { classByName } from '../data/classes'
+import { Icon } from './Icon'
+import classNames from 'classnames'
 
 interface Props {
+  /** Name of the selected class, lowercase */
+  selected?: string
 }
 
-export const ClassPicker: React.FC<Props> = () => {
-  return (
-    <ul className="class-picker">
+const classNameForItem = (c: ClassData, selected: string) => classNames('class-picker__class', {
+  'class-picker__class--active': c.name.toLowerCase() === selected,
+  'class-picker__class--inactive': !!selected && c.name.toLowerCase() !== selected
+})
+
+export class ClassPicker extends React.PureComponent<Props> {
+  static whyDidYouRender = true
+
+  render() {
+    const { selected } = this.props
+
+    const cn = classNames('class-picker', {
+      'class-picker--has-selection': !!selected
+    })
+  
+    return (
+      <ul className={cn}>
       {Object.values(classByName).map((c) => 
-        <li key={c.id} className="class-picker__class">
-          <NavLink to={`/${c.name.toLowerCase()}`}>{c.name}</NavLink>
+        <li key={c.id} className={classNameForItem(c, selected)}>
+          <Link to={`/${c.name.toLowerCase()}`} title={c.name}>
+            <Icon name={c.icon} />
+          </Link>
         </li>
       )}
     </ul>
-  )
-}
+    )
+  }
+}

src/components/IndexRoute.tsx

@@ -1,33 +1,29 @@
 import React from 'react'
 import { Calculator } from './Calculator'
 import { ClassPicker } from './ClassPicker'
+import { match } from 'react-router-dom'
+import { RouteComponentProps } from 'react-router'
 
-interface Props {
-  pointString?: string // e.g. 2305302300--001
-  match: any
-  history: any
+interface Props extends RouteComponentProps {
+  match: match<{ 
+    selectedClass: string
+    pointString: string
+  }>
 }
 
 export class IndexRoute extends React.PureComponent<Props> {
   static whyDidYouRender = true
 
   render() {
-    const { match, history } = this.props
+    const { match } = this.props
     const { selectedClass, pointString } = match.params
   
-    if (!selectedClass) {
-      history.replace('/warlock')
-      return null
-    }
-  
     return (
       <div className="index">
-        <ClassPicker />
+        <ClassPicker selected={selectedClass} />
   
         {selectedClass && 
-          <Calculator 
-            selectedClass={selectedClass}
-          />
+          <Calculator selectedClass={selectedClass} />
         }
       </div>
     )