Add team specific pages

gatsby-node.js

@@ -1,7 +1,37 @@
-/**
- * Implement Gatsby's Node APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/node-apis/
- */
+const path = require('path');
+const slug = require('slug');
 
-// You can delete this file if you're not using it
+exports.createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions;
+  const result = await graphql(`
+    {
+      allTorneopalTeam {
+        edges {
+          node {
+            team_id
+            category_name
+            category_id
+            group_id
+          }
+        }
+      }
+    }
+  `);
+
+  if (result.data.allTorneopalTeam) {
+    for (const { node } of result.data.allTorneopalTeam.edges) {
+      const { team_id, category_name, category_id, group_id } = node;
+      const pageSlug = slug(category_name);
+
+      createPage({
+        path: pageSlug,
+        component: path.resolve(`./src/templates/team.tsx`),
+        context: {
+          team_id,
+          category_id,
+          group_id,
+        },
+      });
+    }
+  }
+};

package.json

@@ -8,6 +8,7 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@types/slug": "0.9.1",
     "classnames": "2.2.6",
     "date-fns": "2.14.0",
     "gatsby": "2.22.12",
@@ -29,6 +30,7 @@
     "react-redux": "7.2.0",
     "react-typography": "0.16.19",
     "redux-persist": "6.0.0",
+    "slug": "3.3.2",
     "typescript": "3.9.6",
     "typography": "0.16.19",
     "typography-theme-kirkham": "0.16.19"

plugins/gatsby-source-torneopal/gatsby-node.js

@@ -1,3 +1,5 @@
+/* eslint-disable camelcase */
+
 const crypto = require('crypto');
 const fetch = require('node-fetch');
 const queryString = require('query-string');
@@ -19,16 +21,19 @@ exports.sourceNodes = async ({ actions, createNodeId }, configOptions) => {
       .update(nodeContent)
       .digest('hex');
 
-    const nodeData = Object.assign({}, data, {
-      id,
-      parent: null,
-      children: [],
-      internal: {
-        type,
-        content: nodeContent,
-        contentDigest: nodeContentDigest,
+    const nodeData = {
+      ...data,
+      ...{
+        id,
+        parent: null,
+        children: [],
+        internal: {
+          type,
+          content: nodeContent,
+          contentDigest: nodeContentDigest,
+        },
       },
-    });
+    };
 
     return nodeData;
   };
@@ -38,10 +43,10 @@ exports.sourceNodes = async ({ actions, createNodeId }, configOptions) => {
     const matchId = match.match_id;
     const nodeId = createNodeId(`torneopal-match-${matchId}`);
 
-    const nodeData = Object.assign(
-      { ...injectData },
-      generateNodeData(nodeId, 'TorneopalMatch', match)
-    );
+    const nodeData = generateNodeData(nodeId, 'TorneopalMatch', {
+      ...match,
+      ...injectData,
+    });
 
     return nodeData;
   };
@@ -58,10 +63,27 @@ exports.sourceNodes = async ({ actions, createNodeId }, configOptions) => {
       `torneopal-group-${competitionId}-${categoryId}-${groupId}`
     );
 
-    const nodeData = Object.assign(
-      { ...injectData },
-      generateNodeData(nodeId, 'TorneopalGroup', group)
-    );
+    const nodeData = generateNodeData(nodeId, 'TorneopalGroup', {
+      ...group,
+      ...injectData,
+    });
+
+    return nodeData;
+  };
+
+  // Helper function that processes a team entry to match Gatsby's node structure.
+  const generateTeamNode = (team, injectData = {}) => {
+    const { team_id: teamId, club_id: clubId, players } = team;
+    const nodeId = createNodeId(`torneopal-team-${clubId}-${teamId}`);
+
+    const nodeData = generateNodeData(nodeId, 'TorneopalTeam', {
+      ...team,
+      ...injectData,
+      ...{
+        // filter out players that have not played any games for the team
+        players: players.filter((player) => parseInt(player.matches, 10) > 0),
+      },
+    });
 
     return nodeData;
   };
@@ -88,15 +110,28 @@ exports.sourceNodes = async ({ actions, createNodeId }, configOptions) => {
   const matches = matchesData.matches || [];
   matches.forEach((match) => createNode(generateMatchNode(match)));
 
-  const groups = uniqBy(
-    matches.map(({ category_id, group_id }) => ({
-      category_id,
-      group_id,
-    })),
+  // Pluck team specific data from matches
+  const teams = uniqBy(
+    matches.map(
+      ({
+        club_A_id,
+        team_A_id,
+        team_B_id,
+        category_id,
+        category_name,
+        group_id,
+      }) => ({
+        team_id: club_A_id === club_id ? team_A_id : team_B_id,
+        category_id,
+        category_name,
+        group_id,
+      })
+    ),
     JSON.stringify
   );
 
-  for (const { category_id, group_id } of groups) {
+  // Fetch all groups
+  for (const { category_id, group_id } of teams) {
     const groupData = await fetchQuery({
       method: 'getGroup',
       options: {
@@ -109,4 +144,24 @@ exports.sourceNodes = async ({ actions, createNodeId }, configOptions) => {
 
     createNode(generateGroupNode(groupData.group));
   }
+
+  for (const { category_id, team_id, category_name, group_id } of teams) {
+    const teamsData = await fetchQuery({
+      method: 'getTeam',
+      options: {
+        competition_id,
+        category_id,
+        team_id,
+      },
+    });
+
+    createNode(
+      generateTeamNode(teamsData.team, {
+        competition_id,
+        category_id,
+        category_name,
+        group_id,
+      })
+    );
+  }
 };

src/components/CompetitionsTables/CompetitionsTableGroup.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { Team } from '../../types';
+import { TeamStats } from '../../types';
 import Table from '../layout/Table';
 
 import styles from './CompetitionsTableGroup.module.css';
 
 type Props = {
   title: string;
-  teams: Team[];
+  teams: TeamStats[];
 };
 
 const Group = ({ title, teams }: Props) => (
@@ -18,19 +18,33 @@ const Group = ({ title, teams }: Props) => (
     </div>
     <Table
       className={styles.table}
-      columnTitles={[
-        <div key={`${title}-coltitle-1`} />,
-        <div key={`${title}-coltitle-2`} />,
-        <div key={`${title}-coltitle-3`}>O</div>,
-        <div key={`${title}-coltitle-4`}>V</div>,
-        <div key={`${title}-coltitle-5`}>T</div>,
-        <div key={`${title}-coltitle-6`}>H</div>,
-        <div key={`${title}-coltitle-7`} className={styles.hideSmall}>
-          M
-        </div>,
-        <div key={`${title}-coltitle-8`}>+/-</div>,
-        <div key={`${title}-coltitle-9`}>Pst</div>,
-      ]}
+      columnTitles={
+        <>
+          <div />
+          <div />
+          <div>
+            <abbr title="Pelatut ottelut">O</abbr>
+          </div>
+          <div>
+            <abbr title="Voitot">V</abbr>
+          </div>
+          <div>
+            <abbr title="Tasapelit">T</abbr>
+          </div>
+          <div>
+            <abbr title="Häviöt">H</abbr>
+          </div>
+          <div className="hideSmall">
+            <abbr title="Maalit (tehdyt-päästetyt)">M</abbr>
+          </div>
+          <div>
+            <abbr title="Maaliero">+/-</abbr>
+          </div>
+          <div>
+            <abbr title="Pisteet">Pst</abbr>
+          </div>
+        </>
+      }
       rows={teams.map((team) => {
         const goalsTotal = team.goalsFor - team.goalsAgainst;
         return (
@@ -46,7 +60,7 @@ const Group = ({ title, teams }: Props) => (
             <div>{team.matchesWon}</div>
             <div>{team.matchesTied}</div>
             <div>{team.matchesLost}</div>
-            <div className={styles.hideSmall}>
+            <div className="hideSmall">
               {team.goalsFor}-{team.goalsAgainst}
             </div>
             <div>{`${goalsTotal > 0 ? '+' : ''}${goalsTotal}`}</div>

src/components/FixturesList/FixtureListEntry.tsx

@@ -24,11 +24,11 @@ const FixtureListEntry = ({
       <div className={styles.subject}>
         <span className={styles.competition}> {competition}: </span>
         <span className={winner > 0 ? styles.winner : null}>
-          {homeTeam} {homeScore}
+          {homeTeam} {isCompleted && homeScore}
         </span>{' '}
         -{' '}
         <span className={winner < 0 ? styles.winner : null}>
-          {awayScore} {awayTeam}
+          {isCompleted && awayScore} {awayTeam}
         </span>
       </div>
       <div className={styles.info}>

src/components/FixturesList/FixturesList.tsx

@@ -10,7 +10,7 @@ type Props = {
 };
 
 const FixturesList = ({ fixtures = [] }: Props) => {
-  let currentDate: Date;
+  let currentDate: string;
 
   return (
     <>

src/components/FixturesList/__tests__/FixtureListEntry.test.tsx

@@ -15,7 +15,7 @@ describe('Fixture', () => {
     isCompleted = true,
     time = '15:00:00',
     venue = 'Riihimäki Keskuskenttä TN',
-    date = new Date('2020-06-06'),
+    date = '2020-06-06',
   }) => (
     <FixtureListEntry
       {...{

src/components/FixturesList/__tests__/FixturesList.test.tsx

@@ -12,12 +12,11 @@ describe('FixturesList', () => {
         awayScore: 0,
         awayTeam: 'Kullervo/Überkleber',
         competition: 'Regions Cup',
-        date: new Date('2020-06-06'),
+        date: '2020-06-06',
         homeScore: 8,
         homeTeam: 'RiPS',
         isCompleted: true,
         time: '15:00:00',
-        timecode: '2018-04-15-15:00:00',
         venue: 'Riihimäki Keskuskenttä TN',
       },
     ],

src/components/Header/Header.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import { Link } from 'gatsby';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
-import { Location } from '@reach/router';
 
 import styles from './Header.module.css';
 import Logo from '../layout/Logo';
 
-const Header = () => (
+export type Props = {
+  anchorLinks?: {
+    anchor: string;
+    label: string;
+  }[];
+};
+
+const Header = ({ anchorLinks }: Props) => (
   <nav className={styles.root}>
     <span>
       <Link
@@ -22,22 +28,15 @@ const Header = () => (
         <h4 className={styles.siteName}>Helsingin Kullervo</h4>
       </Link>
     </span>
-    <span className={styles.anchorLinks}>
-      <Location>
-        {({ location }) =>
-          location.pathname === '/' ? (
-            <React.Fragment>
-              <AnchorLink offset="100" href="#otteluohjelma">
-                Otteluohjelma
-              </AnchorLink>
-              <AnchorLink offset="100" href="#sarjataulukot">
-                Sarjataulukot
-              </AnchorLink>
-            </React.Fragment>
-          ) : null
-        }
-      </Location>
-    </span>
+    {anchorLinks && (
+      <span className={styles.anchorLinks}>
+        {anchorLinks.map(({ anchor, label }) => (
+          <AnchorLink key={anchor} offset="100" href={anchor}>
+            {label}
+          </AnchorLink>
+        ))}
+      </span>
+    )}
   </nav>
 );
 

src/components/PlayersStatsTable/PlayersStatsTable.module.css

@@ -0,0 +1,5 @@
+.nameCell.nameCell {
+  text-align: left;
+  word-break: break-word;
+  white-space: normal;
+}