Added paging buttons for event timeline. Can't do filters yet as the paginated module does not support complex filtering; may need to fork it to add that in for our use case.

src/components/Timeline/EventFooter.js

@@ -1,19 +1,34 @@
 import React from 'react'
 import RaisedButtonStyled from '../elements/RaisedButtonStyled'
+import * as eventActions from '../../actions/eventActions'
 
-const EventFooter = () => {
+const EventFooter = ({pagination, dispatch}) => {
+    const linkRange = 2
+    const maxPagesToLinkTo = 2 * linkRange + 1
+    const pagesForDirectLink = []
+    for( var i = 0; i < maxPagesToLinkTo; i++) {
+        pagesForDirectLink.push(pagination.page - linkRange + i)
+    }
+    const existingPagesForDirectLink = pagesForDirectLink.filter((page) => page > 1 && page < pagination.total)
+    const needsLeadingDots = !pagesForDirectLink.includes(1)
+    const needsFollowingDots = !pagesForDirectLink.includes(pagination.total)
   return (
       <div className="incident-EventFooter">
-          <RaisedButtonStyled label="Prev" />&nbsp;
-          <RaisedButtonStyled label="1" primary={true} />&nbsp;
-          <RaisedButtonStyled label="2" />&nbsp;
-          <RaisedButtonStyled label="3" />&nbsp;
-          <RaisedButtonStyled label="4" />&nbsp;
-          &nbsp; . . . &nbsp;&nbsp;
-          <RaisedButtonStyled label="10" />&nbsp;
-          <RaisedButtonStyled label="next" />
+        {<RaisedButtonStyled label="1" primary={pagination.page === 1} onTouchTap={() => dispatch(eventActions.pagination.goToPage(1))} />}  
+        {needsLeadingDots ? <span>. . .</span> : null}
+        {
+            existingPagesForDirectLink.map(pageNumber => 
+                <RaisedButtonStyled
+                    label={pageNumber.toString()}
+                    primary={pageNumber === pagination.page }
+                    onTouchTap={() => dispatch(eventActions.pagination.goToPage(pageNumber))}
+                />)
+        }
+        {needsFollowingDots ? <span>. . .</span> : null}
+        <RaisedButtonStyled label={pagination.total} primary={pagination.page === pagination.total} onTouchTap={() => dispatch(eventActions.pagination.goToPage(pagination.total))} />
       </div>
   )
 }
 
+
 export default EventFooter

src/components/Timeline/Timeline.js

@@ -11,7 +11,7 @@ import * as eventActions from '../../actions/eventActions'
 
 class Timeline extends Component {
   static propTypes = {
-    events: PropTypes.array.isRequired,
+    events: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired
   }
 
@@ -21,12 +21,12 @@ class Timeline extends Component {
   }
 
   render() {
-    const { events } = this.props
+    const { events, dispatch } = this.props
     return (
       <div>
-        <Filter/>
-        {Events(events)}
-        <Footer/>
+        <Filter pagination={events} dispatch={dispatch}/>
+        {Events(events.pageList)}
+        <Footer pagination={events} dispatch={dispatch}/>
       </div>
     )
   }
@@ -69,7 +69,7 @@ const mapStateToProps = (state, ownProps) => {
   const sortedEvents = Array.from(unsortedEvents).sort(chronologically)*/
   return {
     ...ownProps,
-    events: events.pageList
+    events: events
   }
 }
 

src/components/elements/RaisedButtonStyled.js

@@ -6,7 +6,8 @@ const styles = {
         fontSize: 12,
         minWidth: '10%',
         height: 28,
-        textTransform: 'lowercase'
+        textTransform: 'lowercase',
+        padding: '1px'
     }
 }