code2.jsx

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..