Derrick branch 2

package.json

@@ -7,6 +7,7 @@
     "object-path-immutable": "^1.0.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-geolocated": "^2.4.0",
     "react-linkify": "^0.2.2",
     "react-scripts": "next",
     "vuid": "^1.0.0"

src/components/UserList/index.js

@@ -2,17 +2,22 @@ import React from 'react'
 import style from './index.module.css'
 
 export const UserList = ({ room, current, createConvo, removeUser }) => (
-  <ul className={style.component}>
-    {room.users.map(user => (
-      <li
-        key={user.id}
-        className={user.presence.state === 'online' ? style.online : null}
-        onClick={e => createConvo({ user })}
-        style={{ order: user.presence.state === 'online' && -1 }}
-      >
-        <img src={user.avatarURL} alt={user.name} />
-        <p>{user.name}</p>
-      </li>
-    ))}
-  </ul>
+	<div>
+	  <button onClick={e => removeUser(room)}>
+		  <span>Leave Room</span>
+	  </button>
+	  <ul className={style.component}>
+		{room.users.map(user => (
+		  <li
+			key={user.id}
+			className={user.presence.state === 'online' ? style.online : null}
+			onClick={e => createConvo({ user })}
+			style={{ order: user.presence.state === 'online' && -1 }}
+		  >
+			<img src={user.avatarURL} alt={user.name} />
+			<p>{user.name}</p>
+		  </li>
+		))}
+	  </ul>
+  </div>
 )

src/index.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { geolocated } from 'react-geolocated';
 import { set, del } from 'object-path-immutable'
 import { version } from '../package.json'
 import './index.css'
@@ -249,6 +250,23 @@ class View extends React.Component {
                 />
                 <TypingIndicator typing={typing[room.id]} />
                 <CreateMessageForm state={this.state} actions={this.actions} />
+					{
+						!this.props.isGeolocationAvailable
+						  ? <div>Your browser does not support Geolocation</div>
+						  : !this.props.isGeolocationEnabled
+							? <div>Geolocation is not enabled</div>
+							: this.props.coords
+							  ? <table>
+								<tbody>
+								  <tr><td>latitude</td><td>{this.props.coords.latitude}</td></tr>
+								  <tr><td>longitude</td><td>{this.props.coords.longitude}</td></tr>
+								  <tr><td>altitude</td><td>{this.props.coords.altitude}</td></tr>
+								  <tr><td>heading</td><td>{this.props.coords.heading}</td></tr>
+								  <tr><td>speed</td><td>{this.props.coords.speed}</td></tr>
+								</tbody>
+							  </table>
+							: <div>Getting the location data&hellip; </div>
+					}
               </col->
               {userListOpen && (
                 <UserList
@@ -293,3 +311,10 @@ const githubAuthRedirect = () => {
 !existingUser && !authCode
   ? githubAuthRedirect()
   : ReactDOM.render(<View />, document.querySelector('#root'))
+
+ export default geolocated({
+  positionOptions: {
+    enableHighAccuracy: false,
+  },
+  userDecisionTimeout: 5000,
+})(View);