From baac11c3ead84e0365bf9100a34502e8da8a1794 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Fri, 4 Aug 2023 03:19:45 +0200
Subject: [PATCH] Don't make hydration explode with `window` calls

---
 todoblue/src/app/CreatePrivateBoardPanel.tsx | 81 ++++++++++++++------
 todoblue/src/app/board/[board]/useBoard.tsx  |  4 +-
 2 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/todoblue/src/app/CreatePrivateBoardPanel.tsx b/todoblue/src/app/CreatePrivateBoardPanel.tsx
index bf05568..dbdd63b 100644
--- a/todoblue/src/app/CreatePrivateBoardPanel.tsx
+++ b/todoblue/src/app/CreatePrivateBoardPanel.tsx
@@ -4,12 +4,26 @@ import {useBoardCreator} from "@/app/useBoardCreator"
 import {faKey} from "@fortawesome/free-solid-svg-icons"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import classNames from "classnames"
-import {default as React} from "react"
+import {default as React, useEffect, useState} from "react"
 
 export function CreatePrivateBoardPanel() {
 	const {createBoard} = useBoardCreator();
+	const [canCreate, setCanCreate] = useState<boolean | null>(null);
 
-	const isSecure = typeof window !== "undefined" && window.isSecureContext;
+	useEffect(() => {
+		setCanCreate(window.isSecureContext)
+	}, [])
+
+	let formContents;
+	if(canCreate === null) {
+		formContents = <MightCreateBoardFormContents/>
+	}
+	else if(!canCreate) {
+		formContents = <CannotCreateBoardFormContents/>
+	}
+	else {
+		formContents = <CanCreateBoardFormContents/>
+	}
 
 	return (
 		<form
@@ -17,7 +31,8 @@ export function CreatePrivateBoardPanel() {
 				"panel": true,
 				"box": true,
 				"form-flex": true,
-				"red": !isSecure,
+				"fade": canCreate === null,
+				"red": canCreate === false,
 			})}
 			onSubmit={e => {
 				e.preventDefault();
@@ -29,28 +44,44 @@ export function CreatePrivateBoardPanel() {
 				{" "}
 				Privato
 			</h3>
-			{isSecure ?
-			 	<>
-					<p>
-						Crea un nuovo tabellone privato utilizzando un codice segreto autogenerato!
-						<br/>
-						<small>Esso sarà accessibile solo da chi ne conosce il link.</small>
-					</p>
-					<label className={"float-bottom"}>
-						<span/>
-							<button>
-								Crea
-							</button>
-						<span/>
-					</label>
-				</> : <>
-					<p>
-						Questa funzionalità non è disponibile al di fuori di contesti sicuri.
-						<br/>
-						<small>Assicurati di stare usando HTTPS!</small>
-					</p>
-				</>
-			}
+			{formContents}
 		</form>
 	)
 }
+
+function MightCreateBoardFormContents() {
+	return <>
+		<p>
+			Sto verificando se è possibile creare un tabellone privato sul tuo browser...
+			<br/>
+			<small>Attendi un attimo...</small>
+		</p>
+	</>
+}
+
+function CanCreateBoardFormContents() {
+	return <>
+		<p>
+			Crea un nuovo tabellone privato utilizzando un codice segreto autogenerato!
+			<br/>
+			<small>Esso sarà accessibile solo da chi ne conosce il link.</small>
+		</p>
+		<label className={"float-bottom"}>
+			<span/>
+			<button>
+				Crea
+			</button>
+			<span/>
+		</label>
+	</>
+}
+
+function CannotCreateBoardFormContents() {
+	return <>
+		<p>
+			Questa funzionalità non è disponibile al di fuori di contesti sicuri.
+			<br/>
+			<small>Assicurati di stare usando HTTPS!</small>
+		</p>
+	</>
+}
diff --git a/todoblue/src/app/board/[board]/useBoard.tsx b/todoblue/src/app/board/[board]/useBoard.tsx
index daf3823..f582fdf 100644
--- a/todoblue/src/app/board/[board]/useBoard.tsx
+++ b/todoblue/src/app/board/[board]/useBoard.tsx
@@ -2,7 +2,7 @@
 
 import {TASK_GROUPERS} from "@/app/board/[board]/doTaskGrouping"
 import {TASK_SORTERS} from "@/app/board/[board]/doTaskSorting"
-import {BoardAction} from "@/app/board/[board]/Types"
+import {BoardAction, Task} from "@/app/board/[board]/Types"
 import {useBoardWebSocket} from "@/app/board/[board]/useBoardWebSocket"
 import {TaskGroup, useBoardTaskArranger} from "@/app/board/[board]/useBoardTaskArranger"
 import {useBoardTitleEditor} from "@/app/board/[board]/useBoardTitleEditor"
@@ -11,6 +11,7 @@ import {Dispatch, SetStateAction} from "react"
 
 export interface UseBoardReturns {
 	title: string,
+	tasksById: {[id: string]: Task},
 	taskGroups: TaskGroup[],
 	websocketState: number,
 	isEditingTitle: boolean,
@@ -39,6 +40,7 @@ export function useBoard(name: string): UseBoardReturns {
 
     return {
 		title,
+		tasksById,
 		taskGroups,
 		websocketState,
 		isEditingTitle,