import React, { Component } from 'react'

import { GetLeaderboard } from 'koji-react-leaderboard'

class YourComponent extends Component {
  render () {
    return (
      <GetLeaderboard kojiLeaderboardBackendUri="http://localhost:3333">
        {(data, isLoading, isError) => {
          if (data.scores && !isLoading && !isError) {
            return (
              <div className="container">
                { data.scores.map(({ name, score }, index) => (
                  <li key={index}>
                    Name: { name } | Score: { score }
                  </li>
                )) }
              </div>
            )
          }

          if (data.error && !isLoading && isError) {
            return <h2>Error occured. {data.error.message}</h2>
          }

          return <h2>Loading...</h2>
        }}
      </GetLeaderboard>
    )
  }
}

import React, { Component } from 'react'

import { SaveToLeaderboard } from 'koji-react-leaderboard'

class YourComponent extends Component {
  state = { data: null }
  
  submitData = async (e, saveData) => {
    e.preventDefault()

    const response = await saveData({
      name: 'ScreamerPlays',
      score: 890,
    })

    this.setState({ data: response })
  }

  render() {
    return (
      <SaveToLeaderboard kojiLeaderboardBackendUri="http://localhost:3333">
        {(saveData, isLoading, isError) => {
          return (
            <React.Fragment>
              <button onClick={e => this.submitData(e, saveData)}>Submit data</button>
              {isLoading && <h2>Loading...</h2>}
              {isError && <h2>Error</h2>}
            </React.Fragment>
          )
        }}
      </SaveToLeaderboard>
    )
  }
}