Refactor BoardHeader

todoblue/src/app/board/[board]/BoardHeader.module.css

@@ -27,7 +27,7 @@
 	}
 }
 
-.boardButtons {
+.buttonsArea {
 	width: auto;
 	min-width: unset;
 
@@ -35,34 +35,24 @@
 	gap: 4px;
 }
 
-.boardButtonsLeft {
-	grid-area: left;
-	justify-self: start;
-}
-
-.boardButtonsRight {
-	grid-area: right;
-	justify-self: end;
-}
-
-.boardTitle {
+.titleArea {
 	grid-area: title;
 	height: 80px;
 }
 
-.boardTitle div {
+.titleDisplay {
 	padding-top: 0.125em;
 	padding-right: 0.75ex;
 	padding-left: 0.75ex;
 	padding-bottom: calc(0.125em + 2px);
 }
 
-.boardTitle input {
+.titleInput {
 	text-align: center;
 	width: 100%;
 }
 
-.boardButtons button {
+.buttonsArea button {
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
@@ -77,3 +67,13 @@
 	width: 36px;
 	height: 36px;
 }
+
+.leftButtonsArea {
+	grid-area: left;
+	justify-self: start;
+}
+
+.rightButtonsArea {
+	grid-area: right;
+	justify-self: end;
+}

todoblue/src/app/board/[board]/BoardHeader.tsx

@@ -1,3 +1,5 @@
+import {useRouter} from "next/navigation"
+import {ReactNode, useCallback} from "react"
 import style from "./BoardHeader.module.css"
 import {useManagedBoard} from "@/app/board/[board]/BoardManager"
 import {faArrowDownWideShort, faHouse, faPencil, faTableColumns} from "@fortawesome/free-solid-svg-icons"
@@ -6,35 +8,126 @@ import cn from "classnames"
 
 
 export function BoardHeader() {
-	const {title, isEditingTitle, editTitle, setEditTitle, toggleEditingTitle, nextGrouper, nextSorter, websocketState} = useManagedBoard();
-
-	const isReady = websocketState === WebSocket.OPEN
+	const {isEditingTitle} = useManagedBoard();
 
 	return (
 		<header className={style.boardHeader}>
-			<div className={cn(style.boardButtons, style.boardButtonsLeft)}>
-				<button title={"Home"}>
-					<FontAwesomeIcon icon={faHouse}/>
-				</button>
-				<button className={cn({fade: !isReady})} disabled={!isReady} title={"Modifica titolo"} onClick={isReady ? toggleEditingTitle : undefined}>
-					<FontAwesomeIcon icon={faPencil}/>
-				</button>
-			</div>
-			<h1 className={cn({fade: !isReady, [style.boardTitle]: true})}>
-				{isEditingTitle ?
-					<input type={"text"} placeholder={"Titolo"} onChange={(e) => setEditTitle(e.target.value)} value={editTitle}/>
-				:
-					<div>{title}</div>
-				}
-			</h1>
-			<div className={cn(style.boardButtons, style.boardButtonsRight)}>
-				<button title={"Cambia raggruppamento orizzontale"} onClick={nextGrouper}>
-					<FontAwesomeIcon icon={faTableColumns}/>
-				</button>
-				<button title={"Cambia ordinamento verticale"} onClick={nextSorter}>
-					<FontAwesomeIcon icon={faArrowDownWideShort}/>
-				</button>
-			</div>
+			<TitleArea>
+				{isEditingTitle ? <TitleInput/> : <TitleDisplay/>}
+			</TitleArea>
+			<LeftButtonsArea>
+				<HomeButton/>
+				<EditTitleButton/>
+			</LeftButtonsArea>
+			<RightButtonsArea>
+				<CycleGroupButton/>
+				<CycleSortButton/>
+			</RightButtonsArea>
 		</header>
 	)
 }
+
+function TitleArea({children}: {children: ReactNode}) {
+	return (
+		<h1 className={style.titleArea}>
+			{children}
+		</h1>
+	)
+}
+
+function TitleInput() {
+	const {editTitle, setEditTitle} = useManagedBoard()
+
+	return (
+		<input
+			className={style.titleInput}
+			type={"text"}
+			placeholder={"Titolo"}
+			onChange={(e) => setEditTitle(e.target.value)}
+			value={editTitle}
+		/>
+	)
+}
+
+function TitleDisplay() {
+	const {title} = useManagedBoard()
+
+	return (
+		<div
+			className={style.titleDisplay}
+		>
+			{title}
+		</div>
+	)
+}
+
+function LeftButtonsArea({children}: {children: ReactNode}) {
+	return (
+		<div
+			className={cn(style.buttonsArea, style.leftButtonsArea)}
+		>
+			{children}
+		</div>
+	)
+}
+
+function HomeButton() {
+	const router = useRouter()
+	const goHome = useCallback(() => router.push("/"), [router])
+
+	return (
+		<button title={"Pagina principale"} onClick={goHome}>
+			<FontAwesomeIcon icon={faHouse}/>
+		</button>
+	)
+}
+
+function EditTitleButton() {
+	const {websocketState, toggleEditingTitle} = useManagedBoard()
+
+	if(websocketState != WebSocket.OPEN) {
+		return null;
+	}
+
+	return (
+		<button title={"Modifica titolo"} onClick={toggleEditingTitle}>
+			<FontAwesomeIcon icon={faPencil}/>
+		</button>
+	)
+}
+
+function RightButtonsArea({children}: {children: ReactNode}) {
+	return (
+		<div className={cn(style.buttonsArea, style.rightButtonsArea)}>
+			{children}
+		</div>
+	)
+}
+
+function CycleGroupButton() {
+	const {websocketState, nextGrouper} = useManagedBoard()
+
+	if(websocketState != WebSocket.OPEN) {
+		return null;
+	}
+
+	return (
+		<button title={"Cambia raggruppamento"} onClick={nextGrouper}>
+			<FontAwesomeIcon icon={faTableColumns}/>
+		</button>
+	)
+}
+
+function CycleSortButton() {
+	const {websocketState, nextSorter} = useManagedBoard()
+
+	if(websocketState != WebSocket.OPEN) {
+		return null;
+	}
+
+	return (
+		<button title={"Cambia ordinamento"} onClick={nextSorter}>
+			<FontAwesomeIcon icon={faArrowDownWideShort}/>
+		</button>
+	)
+}