bunnyleaderboard/pages/index.js

import axios from 'axios'
import { useEffect, useState } from 'react'
import Tabs from 'react-bootstrap/Tabs'
import Tab from 'react-bootstrap/Tab'
import ToggleButtonGroup from 'react-bootstrap/ButtonGroup'
import ToggleButton from 'react-bootstrap/Button'
import useSWR from 'swr'
import Table from 'react-bootstrap/Table'

import 'bootstrap/dist/css/bootstrap.min.css';

const fetcher = url => axios.get(url).then(res => res.data)

var RABI_RIBI_GAME_ID = "o6g0o8d2"

function VariableSelector(p) {

  const {values} = p

  const displayValues = Object.keys(values.values.values).map((key)=>[values.values.values[key],key])
  const [selected,setSelected] = useState(Object.keys(values.values.values)[0])

  const handleChange=(e)=>{
    setSelected(e.target.id)
    var arr = {...p.selectionValues}
    arr[p.category.id][p.selectionID]=values.id+","+e.target.id
    p.setSelectionValues(arr)
  }

  return <>
    <ToggleButtonGroup type="radio" className="mb-2">
      {displayValues.map((value,i)=><ToggleButton key={i} variant={selected===value[1]?"primary":"outline-primary"} onClick={handleChange} id={value[1]}>{value[0].label}</ToggleButton>)}
    </ToggleButtonGroup><br/>
  </>
}

function getLeaderboard(categoryID,variables) {
  const { data,error } = useSWR("https://www.speedrun.com/api/v1/leaderboards/"+RABI_RIBI_GAME_ID+"/category/"+categoryID+variables,fetcher)

  return {
    data: data,
    isLoading: !error && !data,
    isError: error
  }
}

function Leaderboard(p) {
  const {data} = p
  return <Table striped bordered hover size="sm">
    <thead>
      <tr>
        <th>#</th>
        <th>Player</th>
        <th>Time without loads</th>
        <th>Time with loads</th>
        <th>Platform</th>
        <th>Version</th>
        <th>Date</th>
        <th>Video</th>
      </tr>
    </thead>
    <tbody>
    {data?.data.runs.map((run)=><tr key={run.run.id}>
      <td>{run.place}</td>{/*#*/}
      <td>{run.run.players[0].id??run.run.players[0]?.name}</td>{/*Player*/}
      <td>{run.run.times.realtime_noloads_t??""}</td>{/*Time without loads*/}
      <td>{run.run.times.realtime_t}</td>{/*Time with loads*/}
      <td>{run.run.system.platform}</td>{/*Platform*/}
      <td>{run.run.values.p85me3lg}</td>{/*Version*/}
      <td>{run.run.date}</td>{/*Date*/}
      <td>{run.run.videos?.links[0].uri}</td>{/*Video*/}
    </tr>)}
    </tbody>
  </Table>
}

export default function Home(p) {
  var {CATEGORIES,VARIABLES}= p

  const [selectedTab,setSelectedTab] = useState("")
  const [selectionValues,setSelectionValues] = useState({})
  const [appendStr,setAppendStr] = useState("")

  const {data} = getLeaderboard(selectedTab,appendStr)

  useEffect(()=>{
    var arr = {...p.selectionValues}
    CATEGORIES.forEach((cat,i)=>{
      if (i==0) {
        setSelectedTab(cat.id)
      }
      arr[cat.id]={}
      VARIABLES.filter((v)=>(v.category===cat.id||v.category===null)&&v["is-subcategory"]).forEach((v,i)=>{
        arr[cat.id][i]=(v.id+","+Object.keys(v.values.values)[0])
      })
    })
    setSelectionValues(arr)
  },[])

  useEffect(()=>{
    var appendStr = ""
    //console.log(selectionValues[selectedTab])
    for (var val in selectionValues[selectedTab]) {
      //console.log(selectionValues[selectedTab][val])
        var split = selectionValues[selectedTab][val].split(",")
      if (appendStr.length===0) {
        appendStr="?"
      } else {
        appendStr+="&"
      }
      appendStr+="var-"+split[0]+"="+split[1]
    }
    setAppendStr(appendStr)
  },[selectedTab,selectionValues])

  return <><Tabs className="mb-3" onSelect={(e)=>{setSelectedTab(e)}}>
    {CATEGORIES.map((cat)=><Tab key={cat.id} eventKey={cat.id} title={cat.name} id={cat.name}>
      {/*cat.rules*/}
      {VARIABLES.filter((v)=>(v.category===cat.id||v.category===null)&&v["is-subcategory"]).map((v,i)=><VariableSelector key={v.id} category={cat} selectionID={i} selectionValues={selectionValues} setSelectionValues={setSelectionValues} values={v}/>)}
    </Tab>)}
  </Tabs>
  {<Leaderboard data={data}/>}
  </>
}

export async function getStaticProps() {
  var CATEGORIES = {}
  var RUN_DATA = {}
  var VARIABLES = {}

  await axios.get("https://www.speedrun.com/api/v1/games/"+RABI_RIBI_GAME_ID+"/categories").then((data)=>{
    CATEGORIES = data.data.data
  })
  await axios.get("https://www.speedrun.com/api/v1/games/"+RABI_RIBI_GAME_ID+"/variables").then((data)=>{
    VARIABLES = data.data.data
  })

  return {
    props: {
      RUN_DATA,
      CATEGORIES,
      VARIABLES
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  }
}