Code for episode

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



// !<command> <args> ? !register Sweden ?
// !checkin SE I am streaming
// !checkin CZ Hi am working on some graphql code

const state = {
  lat: 51.505,
  lng: -0.09,
  zoom: 2,
}
const client = new tmi.client()

function App() {

  const [ position, setPosition ] = useState(null)
  const [ statusText, setStatusText ] = useState(null) 
  const [ userName, setUserName ] = useState(null)
  const [ countryName, setCountryName ] = useState(null)

  useEffect(() => {
    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 ([A-Z]{2}) (.+)/)
        if (!parsedMessage) return
        
        const countryCode = parsedMessage[1]
        
        //console.log('[CHECKIN]', username, countryCode, statusText)

        fetch('https://restcountries.eu/rest/v2/alpha/'+ countryCode +'?fields=name;latlng')
          .then((res) => {
            if (res.ok)
              return res.json().then(data => { 
                setCountryName(data.name)
                setUserName(userstate.username)
                setStatusText(parsedMessage[2])
                setPosition(data.latlng) 
              })
          })
          
        

      })
    })
  }, [])

  
  if(!position) return <div></div>
  
    return (
      <Map center={position} zoom={state.zoom}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Tooltip permanent>
          <div>{countryName}</div>  
          <div><strong>{userName}:</strong>  {statusText}</div>
          </Tooltip>
        </Marker>
      </Map>
    )
}

export default App;





// Connect the client to the server..