Passed
Push — feature/homepage-matches-tsx ( a06bca...c4b45a )
by Kevin Van
04:39
created

MatchTeaser.tsx ➔ getData   B

Complexity

Conditions 6

Size

Total Lines 5
Code Lines 4

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
eloc 4
dl 0
loc 5
rs 8.6666
c 0
b 0
f 0
cc 6
1
import React, { FunctionComponent, useState, useEffect, Fragment } from "react"
2
import { graphql, useStaticQuery } from "gatsby"
3
4
import axios from "axios"
5
import LazyLoad from "react-lazyload"
6
import classNames from "classnames"
7
import Moment from "moment-timezone"
8
import "moment/locale/nl-be"
9
10
import { mapPsdStatus } from "../scripts/helper"
11
12
import "./MatchTeaser.scss"
13
import MiniRanking from "./MiniRanking"
14
15
export const MatchTeaserDetail: FunctionComponent<MatchTeaserDetailProps> = ({
16
  match,
17
  includeRankings = false,
18
}: MatchTeaserDetailProps) => {
19
  Moment.locale(`nl-BE`)
20
  const d = Moment.tz(match.date, `Europe/Brussels`)
21
  const matchPlayed = (match.status === 0 && match.goalsHomeTeam !== null && match.goalsAwayTeam !== null) || false
22
23
  return (
24
    <article className="match__teaser">
25
      <header>
26
        <h3>{match.teamName.replace(`Voetbal : `, ``)}</h3>
27
        <div>
28
          {match.status !== 0 && (
29
            <Fragment>
30
              <time
31
                className="match__teaser__datetime match__teaser__datetime--date"
32
                dateTime={d.format(`YYYY-MM-DD - H:mm`)}
33
              >
34
                {d.format(`dddd DD MMMM - H:mm`)}
35
              </time>
36
              <span className="match__teaser__datetime match__teaser__datetime--status">
37
                {mapPsdStatus(match.status)}
38
              </span>
39
            </Fragment>
40
          )}
41
          {match.status === 0 && (
42
            <Fragment>
43
              <time className="match__teaser__datetime match__teaser__datetime--date" dateTime={d.format(`YYYY-MM-DD`)}>
44
                {d.format(`dddd DD MMMM`)}
45
              </time>
46
              <time className="match__teaser__datetime match__teaser__datetime--time" dateTime={d.format(`H:mm`)}>
47
                {d.format(`H:mm`)}
48
                {` `}
49
              </time>
50
            </Fragment>
51
          )}
52
        </div>
53
      </header>
54
      <main>
55
        <div
56
          className={classNames(`match__teaser__team`, `match__teaser__team--home`, {
57
            "match__teaser__team--winner": matchPlayed && match.goalsHomeTeam > match.goalsAwayTeam,
58
          })}
59
        >
60
          <LazyLoad debounce={false}>
61
            <img
62
              src={match.homeClub.logo}
63
              alt={match.homeClub.name}
64
              className="match__teaser__logo match__teaser__logo--home"
65
            />
66
          </LazyLoad>
67
          {match.homeClub.name}
68
        </div>
69
70
        {matchPlayed || <span className="match__teaser__vs">vs</span>}
71
        {matchPlayed && (
72
          <span className="match__teaser__vs match__teaser__vs--score">
73
            {match.goalsHomeTeam} - {match.goalsAwayTeam}
74
          </span>
75
        )}
76
77
        <div
78
          className={classNames(`match__teaser__team`, `match__teaser__team--away`, {
79
            "match__teaser__team--winner": matchPlayed && match.goalsHomeTeam < match.goalsAwayTeam,
80
          })}
81
        >
82
          <LazyLoad debounce={false}>
83
            <img
84
              src={match.awayClub?.logo}
85
              alt={match.awayClub?.name}
86
              className="match__teaser__logo match__teaser__logo--away"
87
            />
88
          </LazyLoad>
89
          {match.awayClub?.name}
90
        </div>
91
      </main>
92
      {includeRankings && (
93
        <MiniRanking
94
          teamId={match.homeTeamId || match.awayTeamId}
95
          homeTeam={match.homeClub.name}
96
          awayTeam={match.awayClub?.name}
97
        />
98
      )}
99
    </article>
100
  )
101
}
102
103
export const MatchTeaser: FunctionComponent<MatchTeaserProps> = ({
104
  teamId,
105
  action,
106
  includeRankings = false,
107
}: MatchTeaserProps) => {
108
  if (action !== `prev` && action !== `next`) {
109
    throw new Error(`Invalid action provided`)
110
  }
111
112
  const [data, setData] = useState<Match[]>([])
113
114
  const {
115
    site: {
116
      siteMetadata: { kcvvPsdApi },
117
    },
118
  }: MatchesQueryData = useStaticQuery(graphql`
119
    {
120
      site {
121
        siteMetadata {
122
          kcvvPsdApi
123
        }
124
      }
125
    }
126
  `)
127
128
  useEffect(() => {
129
    async function getData() {
130
      const response = await axios.get(`${kcvvPsdApi}/matches/${action}`, {
131
        params: { include: teamId },
132
      })
133
      setData(response.data)
134
    }
135
    getData()
136
  }, [])
137
138
  if (data.length > 0) {
139
    return <MatchTeaserDetail match={data[0]} includeRankings={includeRankings} />
140
  } else {
141
    return <div className="match__teaser__no_match">Geen wedstrijd gevonden</div>
142
  }
143
}
144
145
export const MatchTeasers: FunctionComponent<MatchTeasersProps> = ({
146
  teamId,
147
  includeRankings = false,
148
}: MatchTeasersProps) => (
149
  <div className="match__teasers">
150
    <MatchTeaser teamId={teamId} action="prev" includeRankings={includeRankings} />
151
    <MatchTeaser teamId={teamId} action="next" includeRankings={includeRankings} />
152
  </div>
153
)
154