Content tags point player, team or game if applicable

Author: stephenyeargin

src/app/components/ContentTag.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import Link from 'next/link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHockeyPuck, faPeopleGroup, faTag, faUser } from '@fortawesome/free-solid-svg-icons';
+
+const ContentTag = ({ tag }) => {
+  let url = `/news/topic/${tag.slug}`;
+  let icon = faTag;
+
+  if (tag.externalSourceName === 'player') {
+    url = `/player/${tag.extraData.playerId}`;
+    icon = faUser;
+  }
+
+  if (tag.externalSourceName === 'team') {
+    url = `/team/${tag.extraData.abbreviation}`;
+    icon = faPeopleGroup;
+  }
+
+  if (tag.externalSourceName === 'game') {
+    url = `/game/${tag.extraData.gameId}`;
+    icon = faHockeyPuck;
+  }
+
+  return (
+    <Link href={url} key={tag._entityId} className="inline-block rounded p-1 border text-xs m-1">
+      <FontAwesomeIcon icon={icon} fixedWidth className="mr-1" /> {tag.title}
+    </Link>
+  );
+};
+
+ContentTag.propTypes = {
+  tag: PropTypes.shape({
+    _entityId: PropTypes.string.isRequired,
+    extraData: PropTypes.object,
+    externalSourceName: PropTypes.string,
+    slug: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default ContentTag;

src/app/contexts/StoryContext.js

@@ -48,6 +48,7 @@ const fetchGameData = async (gameId) => {
 export const StoryProvider = ({ storyId, children }) => {
   const [story, setStory] = useState({});
   const [game, setGame] = useState({});
+  const [players, setPlayers] = useState([]);
   const [sidebarStories, setSidebarStories] = useState([]);
   const [pageError, setPageError] = useState(null);
 
@@ -70,6 +71,11 @@ export const StoryProvider = ({ storyId, children }) => {
           setGame(gameResponse);
         }
 
+        const playerTags = storyResponse.tags.filter((t) => t.externalSourceName === 'player');
+        if (playerTags.length) {
+          setPlayers(playerTags);
+        }
+
         setSidebarStories(topStories);
         setStory(storyResponse);
 
@@ -85,7 +91,7 @@ export const StoryProvider = ({ storyId, children }) => {
   }, [storyId]); // only re-run if story/storyId changes
 
   return (
-    <StoryContext.Provider value={{ story, game, sidebarStories, pageError }}>
+    <StoryContext.Provider value={{ story, game, players, sidebarStories, pageError }}>
       {children}
     </StoryContext.Provider>
   );

src/app/news/[slug]/page.js

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import { notFound } from 'next/navigation';
-import Link from 'next/link';
 import { useStoryContext } from '@/app/contexts/StoryContext';
 import GameBodySkeleton from '@/app/components/GameBodySkeleton';
 import ContentPhoto from '@/app/components/ContentPhoto';
@@ -11,6 +10,7 @@ import ContentExternal from '@/app/components/ContentExternal';
 import ContentMarkdown from '@/app/components/ContentMarkdown';
 import ContentByline from '@/app/components/ContentByline';
 import PageError from '@/app/components/PageError';
+import ContentTag from '@/app/components/ContentTag';
 
 const NewsArticle = () => {
   const { story, pageError } = useStoryContext();
@@ -80,9 +80,7 @@ const NewsArticle = () => {
           Tags:
         </span>
         {story.tags.filter((t) => !t.extraData?.hideOnSite).map((tag) => (
-          <Link href={`/news/topic/${tag.slug}`} key={tag._entityId} className="inline-block rounded p-1 border text-xs m-1">
-            {tag.title}
-          </Link>
+          <ContentTag tag={tag} key={tag._entityId} />
         ))}
       </div>
     </div>

src/app/player/[id]/page.js

@@ -17,6 +17,7 @@ import StoryCard from '@/app/components/StoryCard';
 import PlayerDropdown from '@/app/components/PlayerDropdown';
 import '@/app/components/StatsTable.scss';
 import ContentCustomEntity from '@/app/components/ContentCustomEntity';
+import { STAT_CONTEXT } from '@/app/utils/constants';
 
 export default function PlayerPage() {
   const { id } = useParams();
@@ -101,7 +102,7 @@ export default function PlayerPage() {
 
   const statHeaders = [
     { key: 'gamesPlayed', label: 'GP', title: 'Games Played' },
-    { key: 'gamesStarted', label: 'GS', title: 'Games Started' },
+    { key: 'gamesStarted', label: 'GS', title: 'Games Started', unit: 'start' },
     { key: 'decision', label: 'D', title: 'Decision' },
     { key: 'wins', label: 'W', title: 'Wins' },
     { key: 'losses', label: 'L', title: 'Losses' },
@@ -389,7 +390,7 @@ export default function PlayerPage() {
 
       {last5Games && (
         <div className="my-5">
-          <div className="text-3xl font-bold my-3">Last Five Games</div>
+          <div className="text-3xl font-bold my-3">{STAT_CONTEXT['last_5_games']}</div>
           <div className="overflow-x-auto">
             <table className="text-sm w-full">
               <thead>
@@ -428,13 +429,13 @@ export default function PlayerPage() {
                       </div>
                     </td>
                     {statHeaders.map(
-                      ({ key, altKey, precision }) =>
+                      ({ key, altKey, precision, unit }) =>
                         (Object.keys(last5Games[0]).includes(key) || (altKey && Object.keys(last5Games[0]).includes(altKey))) && (
                           <td key={key} className="p-2 border text-center text-xs">
                             {g[key] !== undefined ? (
-                              <>{formatStat(g[key], precision)}</>
+                              <>{formatStat(g[key], precision, unit)}</>
                             ) : (
-                              <>{formatStat(g[altKey], precision)}</>
+                              <>{formatStat(g[altKey], precision, unit)}</>
                             )}
                           </td>
                         )

src/app/utils/formatters.js

@@ -46,6 +46,10 @@ export const formatLocalizedTime = (timeString) => {
 };
 
 export const formatStat = (value, precision, unit) => {
+  if (unit === 'start') {
+    return value ? 'Yes' : 'No';
+  }
+
   if (unit === 'time') {
     return formatSecondsToGameTime(value);
   }