steffo/todocolors
steffo/todocolors
1
Fork 0
mirror of https://github.com/Steffo99/todocolors.git synced 2024-11-25 17:54:18 +00:00
Code Activity

Don't make hydration explode with window calls

Browse source
This commit is contained in:
Steffo 2023-08-04 03:19:45 +02:00
parent 4aff80efc8
commit baac11c3ea
Signed by: steffo
GPG key ID: 2A24051445686895
2 changed files with 59 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
todoblue/src/app/CreatePrivateBoardPanel.tsx
View file

@ -4,12 +4,26 @@ import {useBoardCreator} from "@/app/useBoardCreator"
import {faKey} from "@fortawesome/free-solid-svg-icons" import {faKey} from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import classNames from "classnames" import classNames from "classnames"
import {default as React} from "react" import {default as React, useEffect, useState} from "react"
export function CreatePrivateBoardPanel() { export function CreatePrivateBoardPanel() {
const {createBoard} = useBoardCreator(); 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 ( return (
<form <form
@ -17,7 +31,8 @@ export function CreatePrivateBoardPanel() {
"panel": true, "panel": true,
"box": true, "box": true,
"form-flex": true, "form-flex": true,
"red": !isSecure, "fade": canCreate === null,
"red": canCreate === false,
})} })}
onSubmit={e => { onSubmit={e => {
e.preventDefault(); e.preventDefault();
@ -29,28 +44,44 @@ export function CreatePrivateBoardPanel() {
{" "} {" "}
Privato Privato
</h3> </h3>
{isSecure ? {formContents}
<>
<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>
</>
}
</form> </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>
</>
}

4
todoblue/src/app/board/[board]/useBoard.tsx
View file

@ -2,7 +2,7 @@
import {TASK_GROUPERS} from "@/app/board/[board]/doTaskGrouping" import {TASK_GROUPERS} from "@/app/board/[board]/doTaskGrouping"
import {TASK_SORTERS} from "@/app/board/[board]/doTaskSorting" 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 {useBoardWebSocket} from "@/app/board/[board]/useBoardWebSocket"
import {TaskGroup, useBoardTaskArranger} from "@/app/board/[board]/useBoardTaskArranger" import {TaskGroup, useBoardTaskArranger} from "@/app/board/[board]/useBoardTaskArranger"
import {useBoardTitleEditor} from "@/app/board/[board]/useBoardTitleEditor" import {useBoardTitleEditor} from "@/app/board/[board]/useBoardTitleEditor"
@ -11,6 +11,7 @@ import {Dispatch, SetStateAction} from "react"
export interface UseBoardReturns { export interface UseBoardReturns {
title: string, title: string,
tasksById: {[id: string]: Task},
taskGroups: TaskGroup[], taskGroups: TaskGroup[],
websocketState: number, websocketState: number,
isEditingTitle: boolean, isEditingTitle: boolean,
@ -39,6 +40,7 @@ export function useBoard(name: string): UseBoardReturns {
return { return {
title, title,
tasksById,
taskGroups, taskGroups,
websocketState, websocketState,
isEditingTitle, isEditingTitle,