From cef77aea85d3e7d85f14eb269a0ee4e9825125de Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Thu, 3 Aug 2023 18:44:17 +0200 Subject: [PATCH] Refactor BoardManager and other things --- .../src/app/board/[board]/BoardContext.tsx | 4 --- .../src/app/board/[board]/BoardHeader.tsx | 4 +-- todoblue/src/app/board/[board]/BoardMain.tsx | 4 +-- .../app/board/[board]/BoardMainTaskGroups.tsx | 4 +-- .../src/app/board/[board]/BoardManager.tsx | 31 +++++++++++++++++-- .../src/app/board/[board]/TaskDiv.module.css | 11 +++++++ todoblue/src/app/board/[board]/TaskDiv.tsx | 8 ++--- .../src/app/board/[board]/useBoardContext.ts | 14 --------- .../app/board/[board]/useBoardTaskEditor.ts | 19 ++++++++++++ 9 files changed, 68 insertions(+), 31 deletions(-) delete mode 100644 todoblue/src/app/board/[board]/BoardContext.tsx delete mode 100644 todoblue/src/app/board/[board]/useBoardContext.ts create mode 100644 todoblue/src/app/board/[board]/useBoardTaskEditor.ts diff --git a/todoblue/src/app/board/[board]/BoardContext.tsx b/todoblue/src/app/board/[board]/BoardContext.tsx deleted file mode 100644 index fc3ba0c..0000000 --- a/todoblue/src/app/board/[board]/BoardContext.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import {UseBoardReturns} from "@/app/board/[board]/useBoard" -import {createContext, useContext} from "react" - -export const BoardContext = createContext(null); diff --git a/todoblue/src/app/board/[board]/BoardHeader.tsx b/todoblue/src/app/board/[board]/BoardHeader.tsx index bcc1fbe..4099187 100644 --- a/todoblue/src/app/board/[board]/BoardHeader.tsx +++ b/todoblue/src/app/board/[board]/BoardHeader.tsx @@ -1,12 +1,12 @@ import style from "./BoardHeader.module.css" -import {useBoardContext} from "@/app/board/[board]/useBoardContext" +import {useManagedBoard} from "@/app/board/[board]/BoardManager" import {faArrowDownWideShort, faHouse, faPencil, faTableColumns} from "@fortawesome/free-solid-svg-icons" import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" import cn from "classnames" export function BoardHeader() { - const {title, isEditingTitle, editTitle, setEditTitle, toggleEditingTitle, nextGrouper, nextSorter, websocketState} = useBoardContext(); + const {title, isEditingTitle, editTitle, setEditTitle, toggleEditingTitle, nextGrouper, nextSorter, websocketState} = useManagedBoard(); const isReady = websocketState === WebSocket.OPEN diff --git a/todoblue/src/app/board/[board]/BoardMain.tsx b/todoblue/src/app/board/[board]/BoardMain.tsx index 928137a..a7d6486 100644 --- a/todoblue/src/app/board/[board]/BoardMain.tsx +++ b/todoblue/src/app/board/[board]/BoardMain.tsx @@ -1,12 +1,12 @@ import {BoardMainTaskGroups} from "@/app/board/[board]/BoardMainTaskGroups" import {BoardMainIcon} from "@/app/board/[board]/BoardMainIcon" -import {useBoardContext} from "@/app/board/[board]/useBoardContext" +import {useManagedBoard} from "@/app/board/[board]/BoardManager" import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" import {faGear, faArrowsSpin, faExclamationCircle} from "@fortawesome/free-solid-svg-icons" export function BoardMain() { - const {websocketState} = useBoardContext() + const {websocketState} = useManagedBoard() switch(websocketState) { case undefined: diff --git a/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx b/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx index cea6fae..c7118f3 100644 --- a/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx +++ b/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx @@ -1,10 +1,10 @@ import {TaskGroupColumn} from "@/app/board/[board]/TaskGroupColumn" -import {useBoardContext} from "@/app/board/[board]/useBoardContext" +import {useManagedBoard} from "@/app/board/[board]/BoardManager" import style from "./BoardMainTaskGroups.module.css" export function BoardMainTaskGroups() { - const {taskGroups} = useBoardContext() + const {taskGroups} = useManagedBoard() return (
diff --git a/todoblue/src/app/board/[board]/BoardManager.tsx b/todoblue/src/app/board/[board]/BoardManager.tsx index ef0e0a0..83a9407 100644 --- a/todoblue/src/app/board/[board]/BoardManager.tsx +++ b/todoblue/src/app/board/[board]/BoardManager.tsx @@ -1,8 +1,19 @@ -import {BoardContext} from "@/app/board/[board]/BoardContext" -import {useBoard} from "@/app/board/[board]/useBoard" -import {ReactNode} from "react" +import {useBoard, UseBoardReturns} from "@/app/board/[board]/useBoard" +import {createContext, ReactNode, useContext} from "react" +/** + * **Context** where {@link UseBoardReturns} are stored in. + */ +const BoardContext = createContext(null); + +/** + * **Component** handling everything displayed in a board's page and allowing children to access it via {@link useManagedBoard}. + * + * @param name The name of the board to connect to. + * @param children The nodes to which provide access to {@link useManagedBoard}. + * @constructor + */ export function BoardManager({name, children}: {name: string, children: ReactNode}) { const context = useBoard(name); @@ -12,3 +23,17 @@ export function BoardManager({name, children}: {name: string, children: ReactNod ) } + +/** + * **Hook** allowing components to access values managed by {@link useBoard}. + */ +export function useManagedBoard(): UseBoardReturns { + const context = useContext(BoardContext); + + if(context === null) { + console.error("[useBoardManager] Was used outside of a BoardContext!") + throw Error() + } + + return context +} diff --git a/todoblue/src/app/board/[board]/TaskDiv.module.css b/todoblue/src/app/board/[board]/TaskDiv.module.css index 1595db8..0e11fcb 100644 --- a/todoblue/src/app/board/[board]/TaskDiv.module.css +++ b/todoblue/src/app/board/[board]/TaskDiv.module.css @@ -25,12 +25,23 @@ .taskIcon { grid-area: icon; justify-self: start; + + display: flex; + width: 28px; + height: 100%; + flex-direction: column; + justify-content: center; } .taskDescription { grid-area: description; justify-self: start; width: 100%; + + display: flex; + height: 100%; + flex-direction: column; + justify-content: center; } .taskDescriptionComplete { diff --git a/todoblue/src/app/board/[board]/TaskDiv.tsx b/todoblue/src/app/board/[board]/TaskDiv.tsx index 2789087..0354f9b 100644 --- a/todoblue/src/app/board/[board]/TaskDiv.tsx +++ b/todoblue/src/app/board/[board]/TaskDiv.tsx @@ -1,14 +1,14 @@ import {TaskIconEl} from "@/app/board/[board]/TaskIconEl" -import {Task, TaskWithId} from "@/app/board/[board]/Types" -import {useBoardContext} from "@/app/board/[board]/useBoardContext" +import {TaskWithId} from "@/app/board/[board]/Types" +import {useManagedBoard} from "@/app/board/[board]/BoardManager" import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" import {useCallback, useState, MouseEvent} from "react" -import {faArrowTurnRight, faTrashCanArrowUp} from "@fortawesome/free-solid-svg-icons" +import {faTrashCanArrowUp} from "@fortawesome/free-solid-svg-icons" import style from "./TaskDiv.module.css" import cn from "classnames" export function TaskDiv({task}: {task: TaskWithId}) { - const {send} = useBoardContext() + const {send} = useManagedBoard() const [isDisplayingActions, setDisplayingActions] = useState(false) const toggleStatus = useCallback((e: MouseEvent) => { diff --git a/todoblue/src/app/board/[board]/useBoardContext.ts b/todoblue/src/app/board/[board]/useBoardContext.ts deleted file mode 100644 index e547b75..0000000 --- a/todoblue/src/app/board/[board]/useBoardContext.ts +++ /dev/null @@ -1,14 +0,0 @@ -import {BoardContext} from "@/app/board/[board]/BoardContext" -import {UseBoardReturns} from "@/app/board/[board]/useBoard" -import {useContext} from "react" - - -export function useBoardContext(): UseBoardReturns { - const context = useContext(BoardContext); - - if(context === null) { - throw Error() - } - - return context -} diff --git a/todoblue/src/app/board/[board]/useBoardTaskEditor.ts b/todoblue/src/app/board/[board]/useBoardTaskEditor.ts new file mode 100644 index 0000000..8672ae3 --- /dev/null +++ b/todoblue/src/app/board/[board]/useBoardTaskEditor.ts @@ -0,0 +1,19 @@ +import {Task} from "@/app/board/[board]/Types" +import {useState} from "react" + + +const PRIORITY_RE = /[^][1-5]\b/ +const IMPORTANCE_RE = /[!][1-5]\b/ +const ICON_RE = /\[[A-Za-z]+]\b/ + + +export function rawToEvent(raw: string): Task { + return { + + } +} + + +export function useBoardTaskEditor() { + const [raw, setRaw] = useState(); +}