feat(webapp): hide mark as seen button for future episodes

JoosepAlviste · Dec 17, 2023 · 1141ec6 · 1141ec6
1 parent 01c7fd4
commit 1141ec6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 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
@@ -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
@@ -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"