Don't make hydration explode with window calls

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,8 +44,23 @@ export function CreatePrivateBoardPanel() {
 				{" "}
 				Privato
 			</h3>
-			{isSecure ?
+			{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/>
@@ -43,7 +73,11 @@ export function CreatePrivateBoardPanel() {
 			</button>
 			<span/>
 		</label>
-				</> : <>
+	</>
+}
+
+function CannotCreateBoardFormContents() {
+	return <>
 		<p>
 			Questa funzionalità non è disponibile al di fuori di contesti sicuri.
 			<br/>
@@ -51,6 +85,3 @@ export function CreatePrivateBoardPanel() {
 		</p>
 	</>
 }
-		</form>
-	)
-}

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,