Refactor StarredContext module structure

todoblue/src/app/[lang]/(layout)/(contextStarred)/StarredContext.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import {StarredContextData} from "@/app/[lang]/(layout)/(contextStarred)/StarredContextData"
+import {createContext} from "react"
+
+
+export const StarredContext = createContext<StarredContextData | null>(null)

todoblue/src/app/[lang]/(layout)/(contextStarred)/StarredContextData.ts

@@ -0,0 +1,9 @@
+import {Dispatch, SetStateAction} from "react"
+
+
+export interface StarredContextData {
+	starred: string[],
+	setStarred: Dispatch<SetStateAction<string[] | undefined>>
+	addStarred: (key: string) => void,
+	removeStarred: (key: string) => void,
+}

todoblue/src/app/[lang]/(layout)/(contextStarred)/StarredProvider.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import {StarredContext} from "@/app/[lang]/(layout)/(contextStarred)/StarredContext"
+import {ReactNode, useCallback} from "react"
+import useLocalStorage from "use-local-storage"
+
+
+export function StarredProvider({children}: {children: ReactNode}) {
+	const [starred, setStarred] = useLocalStorage<string[]>("TODOBLUE_STARRED", [])
+
+	const addStarred = useCallback((value: string) => {
+		setStarred(prev => {
+			if(!prev) {
+				return [value]
+			}
+			else {
+				return [...prev, value]
+			}
+		})
+	}, [])
+
+	const removeStarred = useCallback((value: string) => {
+		setStarred(prev => {
+			if(!prev) {
+				return []
+			}
+			else {
+				const result = [...prev]
+				result.splice(result.indexOf(value), 1)
+				return result
+			}
+		})
+	}, [])
+
+	return (
+		<StarredContext.Provider value={{starred, setStarred, addStarred, removeStarred}}>
+			{children}
+		</StarredContext.Provider>
+	)
+}

todoblue/src/app/[lang]/(layout)/(contextStarred)/index.ts

@@ -0,0 +1,4 @@
+export {StarredProvider} from "./StarredProvider"
+export {useStarredConsumer} from "./useStarredConsumer"
+
+export type {StarredContextData} from "./StarredContextData"

todoblue/src/app/[lang]/(layout)/(contextStarred)/useStarredConsumer.ts

@@ -0,0 +1,16 @@
+"use client";
+
+import {StarredContext} from "@/app/[lang]/(layout)/(contextStarred)/StarredContext"
+import {StarredContextData} from "@/app/[lang]/(layout)/(contextStarred)/StarredContextData"
+import {useContext} from "react"
+
+
+export function useStarredConsumer(): StarredContextData {
+	const context = useContext(StarredContext)
+
+	if(context === null) {
+		throw new Error("useStarContext used outside a StarredContext.")
+	}
+
+	return context
+}

todoblue/src/app/[lang]/(layout)/StarredManager.tsx

@@ -1,57 +0,0 @@
-"use client";
-
-import {createContext, Dispatch, ReactNode, SetStateAction, useCallback, useContext} from "react"
-import useLocalStorage from "use-local-storage"
-
-export interface StarContextData {
-	starred: string[],
-	setStarred: Dispatch<SetStateAction<string[] | undefined>>
-	addStarred: (key: string) => void,
-	removeStarred: (key: string) => void,
-}
-
-const StarContext = createContext<StarContextData | null>(null)
-
-export function StarredManager({children}: {children: ReactNode}) {
-	const [starred, setStarred] = useLocalStorage<string[]>("TODOBLUE_STARRED", [])
-
-	const addStarred = useCallback((value: string) => {
-		setStarred(prev => {
-			if(!prev) {
-				return [value]
-			}
-			else {
-				return [...prev, value]
-			}
-		})
-	}, [])
-
-	const removeStarred = useCallback((value: string) => {
-		setStarred(prev => {
-			if(!prev) {
-				return []
-			}
-			else {
-				const result = [...prev]
-				result.splice(result.indexOf(value), 1)
-				return result
-			}
-		})
-	}, [])
-
-	return (
-		<StarContext.Provider value={{starred, setStarred, addStarred, removeStarred}}>
-			{children}
-		</StarContext.Provider>
-	)
-}
-
-export function useManagedStarred(): StarContextData {
-	const context = useContext(StarContext)
-
-	if(context === null) {
-		throw new Error("useStarContext used outside a StarContext.")
-	}
-
-	return context
-}

todoblue/src/app/[lang]/(page)/StarredBoardsPanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import {useClientTranslation} from "@/app/(i18n)/client"
-import {useManagedStarred} from "@/app/[lang]/(layout)/StarredManager"
+import {useStarredConsumer} from "@/app/[lang]/(layout)/(contextStarred)/StarredProvider"
 import {faStar} from "@fortawesome/free-solid-svg-icons"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import cn from "classnames"
@@ -12,7 +12,7 @@ import {useEffect, useState} from "react"
 export function StarredBoardsPanel({lng}: {lng: string}) {
 	const {t} = useClientTranslation(lng, "root")
 	const [isClient, setIsClient] = useState<true | null>(null);
-	const {starred} = useManagedStarred()
+	const {starred} = useStarredConsumer()
 
 	useEffect(() => setIsClient(true), [])
 

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

@@ -1,4 +1,4 @@
-import {useManagedStarred} from "@/app/[lang]/(layout)/StarredManager"
+import {useStarredConsumer} from "../../(layout)/(contextStarred)"
 import {useRouter} from "next/navigation"
 import {ReactNode, useCallback} from "react"
 import style from "./BoardHeader.module.css"
@@ -98,7 +98,7 @@ function HomeButton() {
 
 function StarButton() {
 	const {name} = useManagedBoard()
-	const {starred, addStarred, removeStarred} = useManagedStarred()
+	const {starred, addStarred, removeStarred} = useStarredConsumer()
 	const isStarred = starred.indexOf(name) >= 0
 
 	const toggleStarred = useCallback(() => isStarred ? removeStarred(name) : addStarred(name), [name, isStarred, addStarred, removeStarred])

todoblue/src/app/[lang]/layout.tsx

@@ -2,7 +2,7 @@
 
 import "./layout.css";
 import {Body} from "@/app/[lang]/(layout)/Body"
-import {StarredManager} from "@/app/[lang]/(layout)/StarredManager"
+import {StarredProvider} from "@/app/[lang]/(layout)/(contextStarred)/StarredProvider"
 import type {Metadata as NextMetadata} from "next"
 import {default as React, ReactNode} from "react"
 
@@ -25,9 +25,9 @@ export default function layout({children}: { children: ReactNode }) {
 	return (
 		<html lang="en">
 			<Body>
-				<StarredManager>
+				<StarredProvider>
 					{children}
-				</StarredManager>
+				</StarredProvider>
 			</Body>
 		</html>
 	)