From 1141ec61c84de2e9669cb4932b1ebd5091c3c025 Mon Sep 17 00:00:00 2001
From: Joosep Alviste <joosep.alviste@gmail.com>
Date: Sun, 17 Dec 2023 19:12:32 +0200
Subject: [PATCH] feat(webapp): hide mark as seen button for future episodes

---
 .../components/EpisodeLine/EpisodeLine.test.tsx | 17 +++++++++++++++--
 .../components/EpisodeLine/EpisodeLine.tsx      |  7 ++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/src/features/series/components/EpisodeLine/EpisodeLine.test.tsx b/apps/webapp/src/features/series/components/EpisodeLine/EpisodeLine.test.tsx
index f4a79b94..e6a3559e 100644
--- a/apps/webapp/src/features/series/components/EpisodeLine/EpisodeLine.test.tsx
+++ b/apps/webapp/src/features/series/components/EpisodeLine/EpisodeLine.test.tsx
@@ -1,5 +1,6 @@
 import { screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
+import { addDays, format } from 'date-fns'
 import React from 'react'
 
 import { makeFragmentData } from '#/generated/gql'
@@ -25,11 +26,11 @@ describe('features/series/components/EpisodeLine', () => {
   }: {
     season: Season
     episode: Episode
-    returnedEpisode: Episode
+    returnedEpisode?: Episode
   }) => {
     const [doc, mockResolver] = createMockResolver(ToggleEpisodeSeenDocument, {
       data: {
-        toggleEpisodeSeen: returnedEpisode,
+        toggleEpisodeSeen: returnedEpisode ?? episode,
       },
     })
 
@@ -110,4 +111,16 @@ describe('features/series/components/EpisodeLine', () => {
       },
     })
   })
+
+  it('does not render the mark as seen button if the episode airs in the future', async () => {
+    const episode = episodeFactory.build({
+      releasedAt: format(addDays(new Date(), 1), 'yyyy-MM-dd'),
+    })
+
+    await renderEpisodeLine({ episode, season: episode.season })
+
+    expect(
+      screen.queryByRole('button', { name: 'Mark as seen' }),
+    ).not.toBeInTheDocument()
+  })
 })
diff --git a/apps/webapp/src/features/series/components/EpisodeLine/EpisodeLine.tsx b/apps/webapp/src/features/series/components/EpisodeLine/EpisodeLine.tsx
index 22e4628e..a8a32133 100644
--- a/apps/webapp/src/features/series/components/EpisodeLine/EpisodeLine.tsx
+++ b/apps/webapp/src/features/series/components/EpisodeLine/EpisodeLine.tsx
@@ -1,4 +1,5 @@
 import { useMutation } from '@apollo/client'
+import { isFuture } from 'date-fns/esm'
 import React from 'react'
 
 import { Button, Text } from '#/components'
@@ -87,6 +88,10 @@ export const EpisodeLine = ({
     }
   }
 
+  const isAiringInTheFuture = episode.releasedAt
+    ? isFuture(new Date(episode.releasedAt))
+    : false
+
   return (
     <li className={s.episode}>
       <Text variant="secondary" weight="bold">
@@ -98,7 +103,7 @@ export const EpisodeLine = ({
           {episode.releasedAt ? ` · ${formatDate(episode.releasedAt)}` : ''}
         </Text>
       </Text>
-      {currentUser && (
+      {currentUser && !isAiringInTheFuture && (
         <Button
           variant={episode.isSeen ? 'primary' : 'secondary'}
           size="s"