Be clear about what actions are doing. Set href on anchor.

Author: Sarah Allen

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItemAnchor.js

@@ -38,24 +38,24 @@ function storeMapper(stores) {
 @inject(storeMapper)
 @observer
 class FieldGuideItemAnchor extends React.Component {
-  onClick (event, item) {
+  onClick (event, itemIndex) {
     const { setActiveItemIndex } = this.props
     event.preventDefault()
-    setActiveItemIndex(item)
+    setActiveItemIndex(itemIndex)
   }
 
   render () {
-    const { className, icons, item } = this.props
+    const { className, icons, item, itemIndex } = this.props
     const label = <AnchorLabel icons={icons} item={item} />
 
     return (
       <Anchor
         a11yTitle={counterpart('FieldGuideItemAnchor.ariaTitle', { title: item.title })}
         className={className}
         color='dark-5'
-        href=''
+        href={`#field-guide-item-${itemIndex}`}
         label={label}
-        onClick={(event) => this.onClick(event, item)}
+        onClick={(event) => this.onClick(event, itemIndex)}
       />
     )
   }

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItemAnchor.spec.js

@@ -15,13 +15,15 @@ const item = {
   icon: medium.id,
   content: 'lorem ipsum'
 }
+const itemIndex = 0
 
 describe('Component > FieldGuideItemAnchor', function () {
   it('should render without crashing', function () {
     const wrapper = shallow(
       <FieldGuideItemAnchor.wrappedComponent
         icons={attachedMedia}
         item={item}
+        itemIndex={itemIndex}
         setActiveItemIndex={() => {}}
       />)
     expect(wrapper).to.be.ok
@@ -32,6 +34,7 @@ describe('Component > FieldGuideItemAnchor', function () {
       <FieldGuideItemAnchor.wrappedComponent
         icons={attachedMedia}
         item={item}
+        itemIndex={itemIndex}
         setActiveItemIndex={() => { }}
       />)
     expect(wrapper.props().label.type).to.equal(AnchorLabel)
@@ -43,11 +46,12 @@ describe('Component > FieldGuideItemAnchor', function () {
       <FieldGuideItemAnchor.wrappedComponent
         icons={attachedMedia}
         item={item}
+        itemIndex={itemIndex}
         setActiveItemIndex={setActiveItemIndexSpy}
       />)
 
     wrapper.simulate('click', { preventDefault: () => {} })
-    expect(setActiveItemIndexSpy).to.have.been.calledOnceWith(item)
+    expect(setActiveItemIndexSpy).to.have.been.calledOnceWith(itemIndex)
   })
 
   describe('Component > AnchorLabel', function () {

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItems.js

@@ -12,7 +12,7 @@ export default function FieldGuideItems({ className, items }) {
       rows='150px'
       width='100%'
     >
-      {items.map(item => <FieldGuideItemAnchor key={item.title} item={item} />)}
+      {items.map((item, index) => <FieldGuideItemAnchor key={item.title} item={item} itemIndex={index} />)}
     </Grid>
   )
 }

packages/lib-classifier/src/store/FieldGuideStore.js

@@ -92,20 +92,14 @@ const FieldGuideStore = types
       self.showModal = boolean
     }
 
-    function setActiveItemIndex (item) {
-      console.log('calling')
+    function setActiveItemIndex (index) {
       const fieldGuide = self.active
-      if (fieldGuide) {
-        const { items } = fieldGuide
-        const index = items.indexOf(item)
-        if (items[index]) {
-          const { icon } = items[index]
-          if (icon) self.activeMedium = icon
-          return self.activeItemIndex = index
-        }
-
-        return self.activeItemIndex = undefined
+      if (fieldGuide && fieldGuide.items.length === index + 1 && fieldGuide.items[index]) {
+        if (fieldGuide.items[index].icon) self.activeMedium = fieldGuide.items[index].icon
+        return self.activeItemIndex = index
       }
+
+      return self.activeItemIndex = undefined
     }
 
     return {

packages/lib-classifier/src/store/FieldGuideStore.spec.js

@@ -364,7 +364,7 @@ describe('Model > FieldGuideStore', function () {
 
       fetchFieldGuide()
         .then(() => {
-          rootStore.fieldGuide.setActiveItemIndex(fieldGuideWithItems.items[0])
+          rootStore.fieldGuide.setActiveItemIndex(0)
           expect(rootStore.fieldGuide.activeItemIndex).to.equal(0)
           expect(rootStore.fieldGuide.activeMedium.toJSON()).to.deep.equal(medium)
         }).then(done, done)
@@ -386,7 +386,7 @@ describe('Model > FieldGuideStore', function () {
         })
 
       fetchFieldGuide().then(() => {
-        rootStore.fieldGuide.setActiveItemIndex(fieldGuideWithoutIcon.items[0])
+        rootStore.fieldGuide.setActiveItemIndex(0)
         expect(rootStore.fieldGuide.activeItemIndex).to.equal(0)
         expect(rootStore.fieldGuide.activeMedium).to.be.undefined
       }).then(done, done)
@@ -411,7 +411,7 @@ describe('Model > FieldGuideStore', function () {
 
       fetchFieldGuide()
         .then(() => {
-          rootStore.fieldGuide.setActiveItemIndex(fieldGuideWithItems.items[0])
+          rootStore.fieldGuide.setActiveItemIndex(0)
           rootStore.fieldGuide.setModalVisibility(true)
         })
         .then(() => {