add shortcuts for all channel views

src/components/GallerySlider/index.js

@@ -73,6 +73,7 @@ class Gallery extends Component {
       medias.find(media => media.postId) && width > alwaysOpenWidth
     return (
       <Dialog
+        disableAutoFocus
         fullScreen
         open={open}
         onClose={this.handleClose}

src/components/Layout/Classic/style.js

@@ -6,6 +6,7 @@ export default theme => ({
     width: '100%',
     height: '100%',
     overflow: 'hidden',
+    outline: 'none',
     zIndex: 1,
   },
   previewColumn: {

src/components/Layout/Gallery/index.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -10,6 +10,7 @@ import GridListTile from '@material-ui/core/GridListTile'
 import GridListTileBar from '@material-ui/core/GridListTileBar'
 import Button from '@material-ui/core/Button'
 import ReactList from 'react-list'
+import Shortcuts from '../Shortcuts'
 import AuthorAvatar from '../../AuthorAvatar'
 import GallerySlider from '../../GallerySlider'
 import { updatePost, decrementChannelUnread } from '../../../actions'
@@ -281,7 +282,22 @@ class Gallery extends Component {
     } = this.props
     const { medias, selectedMediaIndex } = this.state
     return (
-      <Fragment>
+      <Shortcuts
+        onNext={() => {
+          if (selectedMediaIndex === false) {
+            this.setState({ selectedMediaIndex: 0 })
+          } else {
+            this.setState({ selectedMediaIndex: selectedMediaIndex + 1 })
+          }
+        }}
+        onPrevious={() => {
+          if (selectedMediaIndex > 0) {
+            this.setState({ selectedMediaIndex: selectedMediaIndex - 1 })
+          }
+        }}
+        onMarkRead={() => {}}
+        className={classes.shortcuts}
+      >
         <div className={classes.galleryWrapper}>
           <ReactList
             itemRenderer={this.renderRow}
@@ -312,7 +328,7 @@ class Gallery extends Component {
             open={true}
           />
         )}
-      </Fragment>
+      </Shortcuts>
     )
   }
 }

src/components/Layout/Map/index.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import Map from 'pigeon-maps'
 import Overlay from 'pigeon-overlay'
 import WebMercatorViewport from 'viewport-mercator-project'
+import Shortcuts from '../Shortcuts'
 import MapMarker from '../../Map/Marker'
 
 class CheckinMap extends Component {
@@ -21,7 +22,9 @@ class CheckinMap extends Component {
         height: document.body.clientHeight - 64, // The toolbar is 64px tall,
       }),
       markers: [],
+      focusedPost: null,
     }
+    this.focusPost = this.focusPost.bind(this)
     this.setMarkers = this.setMarkers.bind(this)
     this.zoomToPosts = this.zoomToPosts.bind(this)
   }
@@ -99,7 +102,8 @@ class CheckinMap extends Component {
         const viewport = Object.assign({}, this.state.viewport, {
           latitude: markers[0].lat,
           longitude: markers[0].lng,
-          zoom: this.state.viewport.zoom > 8 ? this.state.viewport.zoom : 11,
+          // zoom: this.state.viewport.zoom > 8 ? this.state.viewport.zoom : 11,
+          zoom: 12,
         })
         this.setState({ viewport: new WebMercatorViewport(viewport) })
       }
@@ -116,8 +120,19 @@ class CheckinMap extends Component {
     }
   }
 
+  focusPost(postId) {
+    const { markers } = this.state
+    const index = markers.findIndex(marker => marker._id === postId)
+    if (index > -1) {
+      this.setState({ focusedPost: postId })
+      this.zoomToPosts([markers[index]])
+    } else {
+      this.setState({ focusedPost: null })
+    }
+  }
+
   render() {
-    const { viewport, markers } = this.state
+    const { viewport, markers, focusedPost } = this.state
     const { theme } = this.props
     const mapProps = {
       center: [viewport.latitude, viewport.longitude],
@@ -132,18 +147,49 @@ class CheckinMap extends Component {
           : `https://a.tile.openstreetmap.se/hydda/full/${z}/${x}/${y}.png`,
     }
     return (
-      <Map {...mapProps}>
-        {markers.map((post, i) => {
-          return (
-            <Overlay
-              anchor={[post.marker.lat, post.marker.lng]}
-              key={`marker-${i}`}
-            >
-              <MapMarker author={post.author} post={post} />
-            </Overlay>
-          )
-        })}
-      </Map>
+      <Shortcuts
+        style={{ display: 'block', overflow: 'hidden' }}
+        onNext={() => {
+          if (focusedPost !== null) {
+            const index = markers.findIndex(
+              marker => marker._id === focusedPost
+            )
+            if (index > -1 && markers[index + 1]) {
+              this.focusPost(markers[index + 1]._id)
+            }
+          } else if (focusedPost === null && markers.length) {
+            this.focusPost(markers[0]._id)
+          }
+        }}
+        onPrevious={() => {
+          if (focusedPost !== null) {
+            const index = markers.findIndex(
+              marker => marker._id === focusedPost
+            )
+            if (index > 0 && markers[index - 1]) {
+              this.focusPost(markers[index - 1]._id)
+            }
+          }
+        }}
+        onMarkRead={() => {}}
+      >
+        <Map {...mapProps}>
+          {markers.map((post, i) => {
+            return (
+              <Overlay
+                anchor={[post.marker.lat, post.marker.lng]}
+                key={`marker-${i}`}
+              >
+                <MapMarker
+                  author={post.author}
+                  post={post}
+                  postOpen={post._id === focusedPost}
+                />
+              </Overlay>
+            )
+          })}
+        </Map>
+      </Shortcuts>
     )
   }
 }

src/components/Layout/Shortcuts.js

@@ -15,7 +15,6 @@ class LayoutShortcuts extends Component {
   componentWillReceiveProps(newProps) {
     const el = this.ref.current._domNode
     if (newProps.isFocused && el !== document.activeElement) {
-      console.log('Focusing layout on change')
       el.focus()
     }
   }

src/components/Layout/Timeline/index.js

@@ -7,6 +7,7 @@ import 'intersection-observer'
 import Observer from '@researchgate/react-intersection-observer'
 import Button from '@material-ui/core/Button'
 import ReactList from 'react-list'
+import Shortcuts from '../Shortcuts'
 import Post from '../../Post'
 import { updatePost, decrementChannelUnread } from '../../../actions'
 import getChannelSetting from '../../../modules/get-channel-setting'
@@ -17,6 +18,7 @@ class Timeline extends Component {
   constructor(props) {
     super(props)
     this.state = {}
+    this.ref = React.createRef()
     this.handleIntersection = this.handleIntersection.bind(this)
     this.renderItem = this.renderItem.bind(this)
     this.renderLoadMore = this.renderLoadMore.bind(this)
@@ -113,15 +115,22 @@ class Timeline extends Component {
   render() {
     const { classes, posts } = this.props
     return (
-      <div className={classes.timeline}>
-        <ReactList
-          itemRenderer={this.renderItem}
-          length={posts.length}
-          type="simple"
-          minSize={3}
-        />
-        {this.renderLoadMore()}
-      </div>
+      <Shortcuts
+        onNext={() => this.ref.current.scrollBy(0, 50)}
+        onPrevious={() => this.ref.current.scrollBy(0, -50)}
+        onMarkRead={() => {}}
+        className={classes.shortcuts}
+      >
+        <div className={classes.timeline} ref={this.ref}>
+          <ReactList
+            itemRenderer={this.renderItem}
+            length={posts.length}
+            type="simple"
+            minSize={3}
+          />
+          {this.renderLoadMore()}
+        </div>
+      </Shortcuts>
     )
   }
 }

src/components/Layout/Timeline/style.js

@@ -1,16 +1,21 @@
 export default theme => ({
   timeline: {
+    display: 'block',
     boxSizing: 'border-box',
     width: '100%',
     height: '100%',
     padding: theme.spacing.unit * 2,
     paddingTop: 0,
     overflow: 'auto',
     overscrollBehaviorY: 'contain',
+    outline: 'none',
     '& > div': {
       maxWidth: 600,
     },
   },
+  shortcuts: {
+    outline: 'none',
+  },
   loadMore: {
     display: 'block',
     width: '100%',

src/components/Layout/index.js

@@ -132,7 +132,6 @@ class MainPosts extends Component {
       }
       if (timelineAfter) {
         query.after = timelineAfter
-        console.log('getting old posts')
       }
       try {
         const res = await postsService.find({

src/components/Map/Marker/index.js

@@ -17,6 +17,16 @@ class MapMarker extends Component {
     this.renderPost = this.renderPost.bind(this)
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.postOpen !== this.props.postOpen) {
+      if (this.props.postOpen && !this.state.postOpen) {
+        this.setState({ postOpen: true })
+      } else if (!this.props.postOpen && this.state.postOpen) {
+        this.setState({ postOpen: false })
+      }
+    }
+  }
+
   handleClick(e) {
     e.preventDefault()
     this.setState({
@@ -31,6 +41,7 @@ class MapMarker extends Component {
     }
     return (
       <Popover
+        disableAutoFocus
         open={this.state.postOpen}
         className={this.props.classes.popover}
         anchorEl={this.state.anchor}
@@ -77,6 +88,7 @@ MapMarker.defaultProps = {
 
 MapMarker.propTypes = {
   post: PropTypes.object,
+  postOpen: PropTypes.bool,
   author: PropTypes.any.isRequired,
 }