Skip to content

Instantly share code, notes, and snippets.

@mpj mpj/code2.jsx
Last active Mar 24, 2020

Embed
What would you like to do?
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
You can’t perform that action at this time.