soniCaH / KCVV-Elewijt-Gatsby

import { graphql, useStaticQuery } from "gatsby"

import React, { Fragment, FunctionComponent, useEffect, useState } from "react"

import { sortRankings } from "../scripts/helper"

import "./Ranking.scss"

import Spinner from "./Spinner"

const Ranking: FunctionComponent<RankingProps> = ({ teamId }: RankingProps) => {

  const [data, setData] = useState<RankingDataObject[]>([])

  const {

    site: {

      siteMetadata: { kcvvPsdApi },

    },

  }: RankingData = useStaticQuery(graphql`

    {

      site {

        siteMetadata {

          kcvvPsdApi

        }

      }

    }

  `)

  useEffect(() => {

    getData()

  }, [kcvvPsdApi, teamId])

  return (

    <section className={`ranking__wrapper`}>

      {data.length > 0 || <Spinner />}

      {data && renderRankings(data)}

    </section>

  )

}

const renderRanking = (ranking: RankingDataObject, i: number): JSX.Element => {

  return (

    <div className={`ranking`} key={i}>

      <h4>{ranking.name.replace(`Voetbal : `, ``)}</h4>

      <table>

        <thead>

          <tr>

            <th className={`table__column__number`}>#</th>

            <th className={`table__column__string`}>Team</th>

            <th className={`table__column__number show-for-medium`}>P</th>

            <th className={`table__column__number`}>W</th>

            <th className={`table__column__number`}>D</th>

            <th className={`table__column__number`}>L</th>

            <th className={`table__column__number show-for-medium`}>G+</th>

            <th className={`table__column__number show-for-medium`}>G-</th>

            <th className={`table__column__number`}>+/-</th>

            <th className={`table__column__number`}>Pts</th>

          </tr>

        </thead>

        <tbody>

          {ranking.teams.sort(sortRankings).map((team: RankingDataTeamObject, j: number) => (

            <tr key={j}>

              <td className={`table__column__number`}>{team.rank || `-`}</td>

              <td

                className={`table__column__string ${

                  team.team?.club?.localName?.toLowerCase().includes(`elewijt`) ? `table__column--highlight` : ``

                }`}

              >

                {team.team?.club?.localName || ``}

              </td>

              <td className={`table__column__number show-for-medium`}>{team.matchesPlayed || `0`}</td>

              <td className={`table__column__number`}>{team.wins || `0`}</td>

              <td className={`table__column__number`}>{team.draws || `0`}</td>

              <td className={`table__column__number`}>{team.losses || `0`}</td>

              <td className={`table__column__number show-for-medium`}>{team.goalsScored || `0`}</td>

              <td className={`table__column__number show-for-medium`}>{team.goalsConceded || `0`}</td>

              <td className={`table__column__number`}>{team.goalsScored - team.goalsConceded || `0`}</td>

              <td className={`table__column__number`}>{team.points || `0`}</td>

            </tr>

          ))}

        </tbody>

      </table>

    </div>

  )

}

const renderRankings = (rankings: RankingDataObject[]): JSX.Element => {

  return (

    <Fragment>

      {rankings

        .filter((ranking: RankingDataObject) => ranking.teams.length > 0)

        .sort((a, b) => a.name.localeCompare(b.name))

        .map((ranking: RankingDataObject, i: number) => {

          return renderRanking(ranking, i)

        })}

    </Fragment>

  )

}

export default Ranking