Reconciliation with the rebase

Azure · Apr 14, 2018 · e5e06fd · e5e06fd
1 parent 0cfdd9b
commit e5e06fd
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 94 deletions.
diff --git a/src/components/TopNav/NavMenu.js b/src/components/TopNav/NavMenu.js
@@ -18,42 +18,61 @@ import ClearRecentTickets from 'components/TopNav/ClearRecentTickets'
 export const NavMenu = ({
   dispatch,
   history,
-  ticketIds
+  ticketInfo
 }) => {
   return (<IconMenu
     iconButtonElement={<IconButton><NavigationMenu /></IconButton>}
     anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
     targetOrigin={{horizontal: 'left', vertical: 'top'}}
   >
-    {MenuLink('Incident Search', '/search')}
-    {MenuLink('Events for All Incidents', '/events')}
+    <MenuLink primaryText={'Incident Search'} route={'/search'} />
+    <MenuLink primaryText={'Events for All Incidents'} route={'/events'} />
     <Divider />
-    {MenuLink('Preferences', '/preferences')}
+    <MenuLink primaryText={'Preferences'} route={'/preferences'} />
     <Divider />
     <ClearRecentTickets />
-    {ticketIds && ticketIds.map(id => MenuLink(`Ticket ${id}`, `/tickets/${id}`, <ActionDelete onClick={() => dispatch(removeTicketFromRecent(id))} />)) }
+    { ticketMenuLinks(ticketInfo, dispatch) }
     <Divider />
     <MenuItem onClick={() => dispatch(auth.logOut)} primaryText='LogOut' />
-    {MenuLink('Debug', '/debug')}
+    <MenuLink primaryText={'Debug'} route={'/debug'} />
   </IconMenu>)
 }
 
+export const ticketMenuLinks = (ticketInfo, dispatch) =>
+  ticketInfo &&
+  ticketInfo.map(({id, title}) => {
+    const ticketTitle = `${id} ${title ? '-' : ''} ${title}`
+
+    return <MenuLink
+      route={`/tickets/${id}`}
+      primaryText={ticketTitle}
+      rightIcon={<ActionDelete onClick={() => dispatch(removeTicketFromRecent(id))} />}
+    />
+  })
+
+const ticketTitle = (ticket) =>
+  ticket && ticket.data && ticket.data.title
+    ? ticket.data.title
+    : ''
+
 NavMenu.propTypes = {
   dispatch: PropTypes.func,
-  ticketIds: PropTypes.array
+  ticketInfo: PropTypes.array
 }
 
 export const mapStateToProps = (state, ownProps) => {
   const pathname = ownProps.location.pathname
   const currentId = /\d/.test(pathname) && pathname.match(/(\d+)/)[1]
-  const idContainsANumberAndIsNotCurrent = (id) => id !== currentId && /\d/.test(id)
+  const entryBelongsInHistory = (kvp) =>
+    kvp[1] !== null &&
+    kvp[0] !== currentId &&
+    /\d/.test(kvp[0])
 
   return {
     history: ownProps.history,
-    ticketIds: Object.entries(state.tickets.map)
-      .filter(kvp => kvp[1] !== null)
-      .map(kvp => kvp[0])
-      .filter(idContainsANumberAndIsNotCurrent)
+    ticketInfo: Object.entries(state.tickets.map)
+      .filter(entryBelongsInHistory)
+      .map(kvp => { return { id: kvp[0], title: ticketTitle(kvp[1]) } })
   }
 }
 

diff --git a/src/components/elements/MenuLink.js b/src/components/elements/MenuLink.js
@@ -2,8 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 import MenuItem from 'material-ui/MenuItem'
-import ActionDelete from 'material-ui/svg-icons/action/delete'
-import ActionLabel from 'material-ui/svg-icons/action/label'
 
 const styles = {
   constrainedWidth: {
@@ -13,29 +11,19 @@ const styles = {
   }
 }
 
-export const MenuLink = ({type, id, title, onClick, dispatch}) => {
-  let typeRoute = `/${type}s/${id}`
-  let menuItemKey = `${type}-${id}`
-
+export const MenuLink = ({primaryText, route, onClick, rightIcon}) => {
   return (
-    <div title={title}>
-      <MenuItem
-        key={menuItemKey}
-        containerElement={<Link to={typeRoute} />}
-        primaryText={ticketPrimaryText(id, title)}
-        leftIcon={<ActionLabel />}
-        rightIcon={<ActionDelete onClick={() => dispatch(onClick(id))} />}
-      />
-    </div>
+    <MenuItem
+      key={primaryText + route}
+      containerElement={<Link to={route} />}
+      primaryText={<div style={styles.constrainedWidth}>{primaryText}</div>}
+      onClick={onClick}
+      rightIcon={rightIcon}
+      title={primaryText}
+    />
   )
 }
 
-const ticketPrimaryText = (id, title) => {
-  const ticketText = `${id} ${title ? '-' : ''} ${title}`
-
-  return (<div style={styles.constrainedWidth}>{ticketText}</div>)
-}
-
 MenuLink.propTypes = {
   primaryText: PropTypes.string.isRequired,
   route: PropTypes.string.isRequired,

diff --git a/test/components/TopNav/NavMenuTest.js b/test/components/TopNav/NavMenuTest.js
@@ -2,7 +2,6 @@
 import { expect } from 'chai'
 import React from 'react'
 import { shallow } from 'enzyme'
-
 require('test/helpers/configureEnzyme')
 import { NavMenu, ticketMenuLinks, mapStateToProps } from 'components/TopNav/NavMenu'
 import MenuLink from 'components/elements/MenuLink'
@@ -29,10 +28,9 @@ describe('NavMenu', function test () {
   const testObject = setup()
 
   const expectMenuLink = (testObject, expectedPrimaryText, expectedLink) => {
-    expect(testObject.type).to.equal(MenuItem)
+    expect(testObject.type).to.equal(MenuLink)
     expect(testObject.props.primaryText).to.equal(expectedPrimaryText)
-    expect(testObject.props.containerElement.type).to.equal(Link)
-    expect(testObject.props.containerElement.props.to).to.equal(expectedLink)
+    expect(testObject.props.route).to.equal(expectedLink)
   }
 
   it('Should render an IconMenu with an icon button', function () {
@@ -122,9 +120,8 @@ describe('mapStateToProps', function test () {
     expect(result.history).to.equal(ownProps.history)
   })
 
-
-  it.only('transforms the tickets.map into ticketInfo', () => {
-    expect(this.result.ticketInfo).to.deep.include(
+  it('transforms the tickets.map into ticketInfo', () => {
+    expect(result.ticketInfo).to.deep.include(
       { id: '12345', title: 'title' },
       { id: '67890', title: '' }
     )

diff --git a/test/components/elements/MenuLinkTest.js b/test/components/elements/MenuLinkTest.js
@@ -2,83 +2,46 @@
 import { expect } from 'chai'
 import { Link } from 'react-router-dom'
 import MenuItem from 'material-ui/MenuItem'
-import ActionDelete from 'material-ui/svg-icons/action/delete'
 import MenuLink from 'components/elements/MenuLink'
 
 describe('MenuLink', function() {
   describe('when all input is valid', function() {
-    const mockType = 'ticket'
-    const mockId = 0
     const mockTitle = 'mock title'
+    const mockToolTip = 'mock tool tip'
+    const mockRoute = '/mock/route'
     const mockOnClick = () => 'clicked'
-    const mockDispatch = (input) => input
+    const mockRightIcon = {}
 
     const result = MenuLink({
-      type: mockType,
-      id: mockId,
-      title: mockTitle,
+      primaryText: mockTitle,
+      toolTip: mockToolTip,
+      route: mockRoute,
       onClick: mockOnClick,
-      dispatch: mockDispatch
+      rightIcon: mockRightIcon
     })
 
-    const resultingMenuItem = result.props.children
-
     it('should render a MenuItem', function() {
-      expect(resultingMenuItem.type).to.equal(MenuItem)
+      expect(result.type).to.equal(MenuItem)
     })
 
     it('should not contain a Link in the primaryText', function() {
-      expect(resultingMenuItem.props.primaryText.type).to.not.equal(Link)
-    })
-
-    it('should link to a route composed of type and id', function() {
-      expect(resultingMenuItem.props.containerElement.props.to).to.equal(`/${mockType}s/${mockId}`)
-    })
-
-    describe('primaryText', function() {
-      it('should include the title of the ticket', function () {
-        expect(resultingMenuItem.props.primaryText.props.children).to.have.string(mockTitle)
-      })
-
-      it('should include the id of the ticket', function () {
-        expect(resultingMenuItem.props.primaryText.props.children).to.have.string(mockId)
-      })
-    })
-
-    it('should have a key that is composed of both the type and id', function() {
-      expect(resultingMenuItem.key).to.equal(`${mockType}-${mockId}`)
+      expect(result.props.primaryText.type).to.not.equal(Link)
     })
 
-    it('should contain a rightIcon of type ActionDelete', function() {
-      expect(resultingMenuItem.props.rightIcon.type).to.equal(ActionDelete)
+    it('should link to the provided route', function () {
+      expect(result.props.containerElement.props.to).to.equal(mockRoute)
     })
 
-    it('should contain a rightIcon that sets off a function', function() {
-      expect(typeof(resultingMenuItem.props.rightIcon.props.onClick)).to.equal('function')
+    it('should display the provided text as primaryText', function () {
+      expect(result.props.primaryText.props.children).to.contain(mockTitle)
     })
-  })
-
-  describe('when input is valid and there is no title', function() {
-    const mockType = 'ticket'
-    const mockId = 0
-    const mockTitle = ''
-    const mockOnClick = () => 'clicked'
-    const mockDispatch = (input) => input
 
-    const result = MenuLink({
-      type: mockType,
-      id: mockId,
-      title: mockTitle,
-      onClick: mockOnClick,
-      dispatch: mockDispatch
+    it('should have a key that is composed of both the route and primaryText', function () {
+      expect(result.key).to.equal(mockTitle + mockRoute)
     })
 
-    const resultingMenuItem = result.props.children
-
-    describe('primaryText', function() {
-      it('should include the id of the ticket', function () {
-        expect(resultingMenuItem.props.primaryText.props.children).to.have.string(mockId)
-      })
+    it('should contain the provided rightIcon', function () {
+      expect(result.props.rightIcon).to.equal(mockRightIcon)
     })
   })
 })