refactor Headerbar

src/components/HeaderBar.tsx

@@ -1,79 +1,10 @@
 import * as React from "react";
-import { FunctionComponent } from "react";
+import { FunctionComponent } from "react";;
-import { Menu, MenuItem } from "@szhsin/react-menu";
-import { MancalaGame } from "mancala.js";
-import { Context } from "../context/context";
-import { getColorByBrightness } from "../util/ColorUtil";
-import Button from "./Button";
-import "@szhsin/react-menu/dist/index.css";
-import "@szhsin/react-menu/dist/transitions/slide.css";
-import HeaderbarIcon from "./headerbar/HeaderbarIcon";
-import HeaderbarTitle from "./headerbar/HeaderbarTitle";
-import Row from "./Row";
-import ThemeSwitchMenu from "./headerbar/ThemeSwitchMenu";
 
-function renderNewGameButton(
+const HeaderBar: FunctionComponent<{ color?: string }> = ({children, color }) => {
-    context: Context,
-    game: MancalaGame | undefined,
-    onNewGameClick: () => void,
-    userKeyWhoLeave: string | undefined,
-    crashMessage: string | undefined): JSX.Element {
-    const newGame = (
-        <Button
-            context={context}
-            text={context.texts.NewGame}
-            color={context.themeManager.theme.pitColor}
-            onClick={onNewGameClick}
-        />
-    );
-    if (userKeyWhoLeave) {
-        return newGame;
-    }
-    if (crashMessage) {
-        return newGame;
-    }
-    if (!game) {
-        return newGame;
-    } else if (game.state == "ended") {
-        return newGame;
-    }
-    return <></>;
-};
-
-const HeaderBar: FunctionComponent<{
-    context: Context,
-    game?: MancalaGame,
-    userKeyWhoLeave?: string,
-    crashMessage?: string,
-    onNewGameClick: () => void,
-    onLeaveGameClick: () => void
-}> = (props) => {
-    const { context, game, userKeyWhoLeave, crashMessage, onNewGameClick, onLeaveGameClick } = props;
-    const textColor = getColorByBrightness(
-        context.themeManager.theme.appBarBgColor,
-        context.themeManager.theme.textColor,
-        context.themeManager.theme.textLightColor
-    );
     return (
-        <div style={{ background: context.themeManager.theme.appBarBgColor }} className="header-bar">
+        <div style={{ background: color }} className="header-bar">
-            <Row>
+            {children}
-                <HeaderbarIcon />
-                <HeaderbarTitle title={context.texts.Mancala} color={textColor} />
-            </Row>
-            <Row>
-                <ThemeSwitchMenu context={context} textColor={textColor} />
-                {renderNewGameButton(context, game, onNewGameClick, userKeyWhoLeave, crashMessage)}
-                {game &&
-                    !userKeyWhoLeave &&
-                    !crashMessage &&
-                    (game?.state === "playing" || game?.state === "initial") && (
-                        <Button
-                            context={context}
-                            color={context.themeManager.theme.pitColor}
-                            text={context.texts.Leave}
-                            onClick={onLeaveGameClick} />
-                    )}
-            </Row>
             <style jsx>{`
             .header-bar {
                 padding: 0px 4vw;

src/components/headerbar/ThemeSwitchMenu.tsx

@@ -2,6 +2,8 @@ import { Menu, MenuItem } from "@szhsin/react-menu";
 import * as React from "react";
 import { FunctionComponent } from "react";
 import { Context } from "../../context/context";
+import "@szhsin/react-menu/dist/index.css";
+import "@szhsin/react-menu/dist/transitions/slide.css"
 
 const ThemeSwitchMenu: FunctionComponent<{ context: Context, textColor: string }> = (props) => {
     const { context, textColor } = props;

src/routes/Home.tsx

@@ -22,6 +22,11 @@ import { Theme } from "../theme/Theme";
 import HeaderBar from "../components/HeaderBar";
 import FloatingPanel from "../components/FloatingPanel";
 import PageContainer from "../components/PageContainer";
+import Row from "../components/Row";
+import HeaderbarIcon from "../components/headerbar/HeaderbarIcon";
+import HeaderbarTitle from "../components/headerbar/HeaderbarTitle";
+import ThemeSwitchMenu from "../components/headerbar/ThemeSwitchMenu";
+import Button from "../components/Button";
 
 type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
 
@@ -184,19 +189,31 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     context.themeManager.theme.textColor,
     context.themeManager.theme.textLightColor
   );
-
+  const textColorOnAppBar = getColorByBrightness(
+    context.themeManager.theme.appBarBgColor,
+    context.themeManager.theme.textColor,
+    context.themeManager.theme.textLightColor
+  );
+  const renderNewGameBtn = userKeyWhoLeave || !game || (game && game.state == "ended");
   return (
     <PageContainer theme={theme!}>
       <FloatingPanel context={context} color={context.themeManager.theme.boardColor} visible={showConnectionState}>
         <span style={{ color: textColorOnBoard }}>{connectionStateText()}</span>
       </FloatingPanel>
-      <HeaderBar
+      <HeaderBar color={theme?.appBarBgColor}>
+          <Row>
+                <HeaderbarIcon />
+                <HeaderbarTitle title={context.texts.Mancala} color={textColorOnAppBar} />
+            </Row>
+            <Row>
+                <ThemeSwitchMenu context={context} textColor={textColorOnAppBar} />
+                <Button
                     context={context}
-        game={game}
+                    color={context.themeManager.theme.pitColor}
-        userKeyWhoLeave={userKeyWhoLeave}
+                    text={renderNewGameBtn ? context.texts.NewGame : context.texts.Leave}
-        crashMessage={crashMessage}
+                    onClick={renderNewGameBtn ? onNewGameClick : onLeaveGameClick} />
-        onNewGameClick={onNewGameClick}
+            </Row>
-        onLeaveGameClick={onLeaveGameClick} />
+          </HeaderBar>
       <InfoPanel
         context={context}
         game={game}