Skip to content

Instantly share code, notes, and snippets.

@mpj
Last active March 24, 2020 16:57
Show Gist options
  • Save mpj/4d892410bdf4a922323a66f23c1be985 to your computer and use it in GitHub Desktop.
Save mpj/4d892410bdf4a922323a66f23c1be985 to your computer and use it in GitHub Desktop.
code2.jsx
import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { Map, TileLayer, Marker, Popup, Tooltip } from 'react-leaflet'
import tmi from 'tmi.js'
// https://nominatim.openstreetmap.org/search?format=json&q=stockholm,sweden
// Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app"
import firebaseConfig from "./firebase.secret"
// Add the Firebase products that you want to use
import "firebase/firestore"
firebase.initializeApp(firebaseConfig)
const db = firebase.firestore()
// !<command> <args> ? !register Sweden ?
// !checkin SE I am streaming
// !checkin CZ Hi am working on some graphql code
const client = new tmi.client()
function App() {
const [ viewers, setViewers ] = useState(null)
useEffect(() => {
db.collection("viewers")
.onSnapshot(function(coll) {
let viewers = []
coll.forEach(function(doc) {
viewers.push(doc.data())
});
setViewers(viewers)
});
client.connect().then( () => {
console.log('Connected!!')
client.join('funfunfunction')
.then(x => console.log('channel obj', x))
.catch( err => console.error('tmi fail', err))
client.on('chat', (channel, userstate, message, self) => {
const parsedMessage = message.match(/!checkin (.+) -- (.+)/)
if (!parsedMessage) return
const location = parsedMessage[1]
//
fetch('https://nominatim.openstreetmap.org/search?format=json&q='+location)
.then((res) => {
if (res.ok)
return res.json().then(data => {
console.log('location was', location)
console.log('jsondata', data)
const likelyPlace = data[0]
if (!likelyPlace) return;
db.collection("viewers").doc(userstate.username).set({
username: userstate.username,
locationName: likelyPlace.display_name,
latlng: [ likelyPlace.lat, likelyPlace.lon ],
statusText: parsedMessage[2],
lastCheckin: Number(Date.now())
})
console.log('UPDATE FOR USERNAME', userstate.username, Number(Date.now()))
})
})
})
})
}, [])
if(!viewers) return <div></div>
//console.log(viewers)
let lastCheckin = null
const markerPositions = {}
for (const viewer of viewers) {
const key = viewer.latlng.join(';')
markerPositions[key] = markerPositions[key] || []
markerPositions[key].push(viewer)
if (lastCheckin === null || lastCheckin.lastCheckin < viewer.lastCheckin) {
lastCheckin = {
latlng: viewer.latlng,
lastCheckin: viewer.lastCheckin
}
}
}
return (
<Map center={lastCheckin ? lastCheckin.latlng : [0,0]} zoom={6}>
<TileLayer
attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{Object.entries(markerPositions).map(([latlngKey, viewers]) => {
const viewer = viewers.sort((a, b) => b.lastCheckin - a.lastCheckin)[0]
return <Marker key={viewer.latlng.join(';')} position={viewer.latlng}>
<Tooltip permanent={viewer.lastCheckin && viewer.lastCheckin > (Number(Date.now()) - 900000000)}>
<div>{viewer.locationName}</div>
<div><strong>{viewer.username}:</strong> {viewer.statusText}</div>
</Tooltip>
</Marker>
})}
</Map>
)
}
export default App;
// Connect the client to the server..
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment