don't pluralize video count label when track only has one video

CodingTrain · Oct 1, 2023 · 11d5bbc · 11d5bbc
1 parent 9a5ad06
commit 11d5bbc
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/components/tracks/Card.js b/src/components/tracks/Card.js
@@ -18,10 +18,12 @@ const FilteredVideosSection = ({ videos: allVideos, trackSlug }) => {
   const [expanded, setExpanded] = useState(false);
   const canExpand = allVideos.length > 6;
   const videos = expanded || !canExpand ? allVideos : allVideos.slice(0, 6);
+
   return (
     <section>
       <div className={css.filterHeading}>
-        {allVideos.length} videos within this track match the filter.
+        {allVideos.length} video{allVideos.length > 1 ? 's' : ''} within this
+        track match the filter.
       </div>
       <div className={css.filteredResults}>
         {videos.map((v, i) => (
@@ -113,7 +115,9 @@ const Card = ({
             <h3 className={css.smallTitle}>{title}</h3>
             <div className={css.icon}>👁</div>
             <div className={css.trackType}>{trackType}</div>
-            <div className={css.numVideos}>{numVideos} videos</div>
+            <div className={css.numVideos}>
+              {numVideos} video{numVideos > 1 ? 's' : ''}
+            </div>
           </div>
           <Image
             image={image}

diff --git a/src/components/tracks/Header.js b/src/components/tracks/Header.js
@@ -31,7 +31,7 @@ const Header = ({ track }) => {
                     }`
                   ]
                 : []),
-              `${numVideos} videos`
+              `${numVideos} video${numVideos > 1 ? 's' : ''}`
             ]}
             singleLine={false}
           />

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -31,7 +31,9 @@ const TrackCard = ({ track, placeholderImage }) => {
           <Link to={`tracks/${slug}`}>{title}</Link>
         </h3>
 
-        <div className={css.numVideos}>{numVideos} videos</div>
+        <div className={css.numVideos}>
+          {numVideos} video{numVideos > 1 ? 's' : ''}
+        </div>
       </div>
       <Link to={`tracks/${slug}`}>
         <Image