Extract header component

peruukki · Dec 28, 2024 · 8a5c972 · 8a5c972
1 parent 390b127
commit 8a5c972
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 48 deletions.
diff --git a/app/src/components/app.ts b/app/src/components/app.ts
@@ -1,4 +1,4 @@
-import { MainDOMSource, VNode, button, div, h1, header, main, span } from '@cycle/dom';
+import { MainDOMSource, VNode, div, main, span } from '@cycle/dom';
 import { HTTPSource, Response } from '@cycle/http';
 import classNames from 'classnames';
 import xs, { Stream } from 'xstream';
@@ -11,14 +11,13 @@ import type {
   GameUpdateGoal,
   Goal,
   Scores,
-  ScoresDate,
 } from '../types';
 import type { Animations } from '../utils/animations';
 import { delayAtLeast } from '../utils/delay';
 import { getGameAnimationIndexes } from '../utils/utils';
 import Clock from './clock';
 import Game from './game';
-import Icon from './icon';
+import Header from './header';
 
 type Sources = {
   DOM: MainDOMSource;
@@ -217,52 +216,12 @@ function view(state$: Stream<State>): Stream<VNode> {
   return state$.map(
     ({ scores, currentGoals, isPlaying, status, clockVtree, event, gameDisplays, gameCount }) =>
       div([
-        header(
-          '.header',
-          renderHeader({
-            clockVtree,
-            event,
-            gameCount,
-            isPlaying,
-            date: scores.date,
-          }),
-        ),
+        Header({ clockVtree, event, date: scores.date, gameCount, isPlaying }),
         main(renderScores({ games: scores.games, currentGoals, status, gameDisplays })),
       ]),
   );
 }
 
-function renderHeader(
-  state: Pick<State, 'event' | 'clockVtree' | 'gameCount' | 'isPlaying'> & { date: Scores['date'] },
-): VNode {
-  const hasNotStarted = !state.event;
-  const isFinished = state.event?.type === 'end';
-  const buttonText = state.isPlaying ? 'Pause' : 'Play';
-  const buttonType = state.isPlaying ? 'pause' : 'play';
-  const showIcon = state.gameCount > 0;
-
-  const dynamicClassNames = {
-    [`button--${buttonType}`]: showIcon,
-    'expand--last': state.gameCount > 0 && hasNotStarted,
-    'button--hidden': isFinished,
-  };
-
-  return div('.header__container', [
-    h1('.header__title', [span('.all-caps', 'NHL'), ' Recap']),
-    button(
-      '.button.play-pause-button',
-      { props: { ariaLive: 'polite' }, class: dynamicClassNames },
-      [
-        span('.visible-button', [
-          showIcon ? Icon(buttonType) : null,
-          span('.visually-hidden', buttonText),
-        ]),
-      ],
-    ),
-    hasNotStarted && state.date ? renderDate(state.date) : state.clockVtree,
-  ]);
-}
-
 function renderScores(
   state: Pick<State, 'currentGoals' | 'gameDisplays' | 'status'> & { games: Scores['games'] },
 ): VNode {
@@ -287,7 +246,3 @@ function renderScores(
         state.status.message,
       ]);
 }
-
-function renderDate(date: ScoresDate): VNode {
-  return span('.date.fade-in-slow', date.pretty);
-}
diff --git a/app/src/components/header.ts b/app/src/components/header.ts
@@ -0,0 +1,44 @@
+import { button, div, h1, header, span, VNode } from '@cycle/dom';
+
+import type { GameEvent, Scores } from '../types';
+import Icon from './icon';
+
+type Props = {
+  clockVtree: VNode;
+  date: Scores['date'];
+  event: GameEvent | null;
+  gameCount: number;
+  isPlaying: boolean;
+};
+
+export default function Header({ clockVtree, date, event, gameCount, isPlaying }: Props) {
+  const hasNotStarted = !event;
+  const isFinished = event?.type === 'end';
+  const buttonText = isPlaying ? 'Pause' : 'Play';
+  const buttonType = isPlaying ? 'pause' : 'play';
+  const showIcon = gameCount > 0;
+
+  const dynamicClassNames = {
+    [`button--${buttonType}`]: showIcon,
+    'expand--last': gameCount > 0 && hasNotStarted,
+    'button--hidden': isFinished,
+  };
+
+  return header(
+    '.header',
+    div('.header__container', [
+      h1('.header__title', [span('.all-caps', 'NHL'), ' Recap']),
+      button(
+        '.button.play-pause-button',
+        { props: { ariaLive: 'polite' }, class: dynamicClassNames },
+        [
+          span('.visible-button', [
+            showIcon ? Icon(buttonType) : null,
+            span('.visually-hidden', buttonText),
+          ]),
+        ],
+      ),
+      hasNotStarted && date ? span('.date.fade-in-slow', date.pretty) : clockVtree,
+    ]),
+  );
+}