feat: context factory

src/app/deals/contexts/BoardsContext.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import React, { createContext, FC, useContext, useState } from "react";
+import React, { useState } from "react";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
-import { BoardSchema } from "@/lib/client";
 import { BoardsCrud, useBoardsCrud } from "@/hooks/cruds/useBoardsCrud";
 import useBoardsList from "@/hooks/lists/useBoardsList";
+import { BoardSchema } from "@/lib/client";
+import makeContext from "@/lib/contextFactory/contextFactory";
 
 type BoardsContextState = {
     boards: BoardSchema[];
@@ -15,9 +16,7 @@ type BoardsContextState = {
     boardsCrud: BoardsCrud;
 };
 
-const BoardsContext = createContext<BoardsContextState | undefined>(undefined);
+const useBoardsContextState = (): BoardsContextState => {
-
-const useBoardsContextState = () => {
     const { selectedProject: project } = useProjectsContext();
     const {
         boards,
@@ -50,28 +49,5 @@ const useBoardsContextState = () => {
     };
 };
 
-type BoardsContextProviderProps = {
+export const [BoardsContextProvider, useBoardsContext] =
-    children: React.ReactNode;
+    makeContext<BoardsContextState>(useBoardsContextState, "Boards");
-};
-
-export const BoardsContextProvider: FC<BoardsContextProviderProps> = ({
-    children,
-}) => {
-    const state = useBoardsContextState();
-
-    return (
-        <BoardsContext.Provider value={state}>
-            {children}
-        </BoardsContext.Provider>
-    );
-};
-
-export const useBoardsContext = () => {
-    const context = useContext(BoardsContext);
-    if (!context) {
-        throw new Error(
-            "useBoardsContext must be used within a BoardsContextProvider"
-        );
-    }
-    return context;
-};

src/app/deals/contexts/DealsContext.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import React, { createContext, FC, useContext } from "react";
+import React from "react";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
 import { DealsCrud, useDealsCrud } from "@/hooks/cruds/useDealsCrud";
 import useDealsList from "@/hooks/lists/useDealsList";
 import { DealSchema } from "@/lib/client";
+import makeContext from "@/lib/contextFactory/contextFactory";
 
 type DealsContextState = {
     deals: DealSchema[];
@@ -14,16 +15,16 @@ type DealsContextState = {
     dealsCrud: DealsCrud;
 };
 
-const DealsContext = createContext<DealsContextState | undefined>(undefined);
+const useDealsContextState = (): DealsContextState => {
-
-const useDealsContextState = () => {
     const { selectedBoard } = useBoardsContext();
     const { statuses } = useStatusesContext();
     const {
         deals,
         setDeals,
         refetch: refetchDeals,
-    } = useDealsList({ boardId: selectedBoard?.id });
+    } = useDealsList({
+        boardId: selectedBoard?.id,
+    });
 
     const dealsCrud = useDealsCrud({
         deals,
@@ -33,34 +34,8 @@ const useDealsContextState = () => {
         statuses,
     });
 
-    return {
+    return { deals, setDeals, refetchDeals, dealsCrud };
-        deals,
-        setDeals,
-        refetchDeals,
-        dealsCrud,
-    };
 };
 
-type DealsContextProviderProps = {
+export const [DealsContextProvider, useDealsContext] =
-    children: React.ReactNode;
+    makeContext<DealsContextState>(useDealsContextState, "Deals");
-};
-
-export const DealsContextProvider: FC<DealsContextProviderProps> = ({
-    children,
-}) => {
-    const state = useDealsContextState();
-
-    return (
-        <DealsContext.Provider value={state}>{children}</DealsContext.Provider>
-    );
-};
-
-export const useDealsContext = () => {
-    const context = useContext(DealsContext);
-    if (!context) {
-        throw new Error(
-            "useDealsContext must be used within a DealsContextProvider"
-        );
-    }
-    return context;
-};

src/app/deals/contexts/ProjectsContext.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import React, { createContext, FC, useContext, useState } from "react";
+import React, { useState } from "react";
 import { ProjectsCrud, useProjectsCrud } from "@/hooks/cruds/useProjectsCrud";
 import useProjectsList from "@/hooks/lists/useProjectsList";
 import { ProjectSchema } from "@/lib/client";
+import makeContext from "@/lib/contextFactory/contextFactory";
 
 type ProjectsContextState = {
     selectedProject: ProjectSchema | null;
@@ -13,11 +14,7 @@ type ProjectsContextState = {
     projectsCrud: ProjectsCrud;
 };
 
-const ProjectsContext = createContext<ProjectsContextState | undefined>(
+const useProjectsContextState = (): ProjectsContextState => {
-    undefined
-);
-
-const useProjectsContextState = () => {
     const {
         projects,
         setProjects,
@@ -49,28 +46,5 @@ const useProjectsContextState = () => {
     };
 };
 
-type ProjectsContextProviderProps = {
+export const [ProjectsContextProvider, useProjectsContext] =
-    children: React.ReactNode;
+    makeContext<ProjectsContextState>(useProjectsContextState, "Projects");
-};
-
-export const ProjectsContextProvider: FC<ProjectsContextProviderProps> = ({
-    children,
-}) => {
-    const state = useProjectsContextState();
-
-    return (
-        <ProjectsContext.Provider value={state}>
-            {children}
-        </ProjectsContext.Provider>
-    );
-};
-
-export const useProjectsContext = () => {
-    const context = useContext(ProjectsContext);
-    if (!context) {
-        throw new Error(
-            "useProjectsContext must be used within a ProjectsContextProvider"
-        );
-    }
-    return context;
-};

src/app/deals/contexts/StatusesContext.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import React, { createContext, FC, useContext } from "react";
+import React from "react";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { StatusesCrud, useStatusesCrud } from "@/hooks/cruds/useStatusesCrud";
 import useStatusesList from "@/hooks/lists/useStatusesList";
 import { StatusSchema } from "@/lib/client";
+import makeContext from "@/lib/contextFactory/contextFactory";
 
 type StatusesContextState = {
     statuses: StatusSchema[];
@@ -13,11 +14,7 @@ type StatusesContextState = {
     statusesCrud: StatusesCrud;
 };
 
-const StatusesContext = createContext<StatusesContextState | undefined>(
+const useStatusesContextState = (): StatusesContextState => {
-    undefined
-);
-
-const useStatusesContextState = () => {
     const { selectedBoard } = useBoardsContext();
     const {
         statuses,
@@ -42,28 +39,5 @@ const useStatusesContextState = () => {
     };
 };
 
-type StatusesContextProviderProps = {
+export const [StatusesContextProvider, useStatusesContext] =
-    children: React.ReactNode;
+    makeContext<StatusesContextState>(useStatusesContextState, "Statuses");
-};
-
-export const StatusesContextProvider: FC<StatusesContextProviderProps> = ({
-    children,
-}) => {
-    const state = useStatusesContextState();
-
-    return (
-        <StatusesContext.Provider value={state}>
-            {children}
-        </StatusesContext.Provider>
-    );
-};
-
-export const useStatusesContext = () => {
-    const context = useContext(StatusesContext);
-    if (!context) {
-        throw new Error(
-            "useStatusesContext must be used within a StatusesContextProvider"
-        );
-    }
-    return context;
-};

src/app/deals/drawers/BoardStatusesEditorDrawer/contexts/BoardStatusesContext.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import React, { createContext, FC, useContext } from "react";
+import React from "react";
 import { StatusesCrud, useStatusesCrud } from "@/hooks/cruds/useStatusesCrud";
 import useStatusesList from "@/hooks/lists/useStatusesList";
 import { BoardSchema, StatusSchema } from "@/lib/client";
+import makeContext from "@/lib/contextFactory/contextFactory";
 
 type BoardStatusesContextState = {
     board: BoardSchema;
@@ -13,15 +14,13 @@ type BoardStatusesContextState = {
     statusesCrud: StatusesCrud;
 };
 
-const BoardStatusesContext = createContext<
-    BoardStatusesContextState | undefined
->(undefined);
-
 type Props = {
     board: BoardSchema;
 };
 
-const useBoardStatusesContextState = ({ board }: Props) => {
+const useBoardStatusesContextState = ({
+    board,
+}: Props): BoardStatusesContextState => {
     const {
         statuses,
         setStatuses,
@@ -46,28 +45,8 @@ const useBoardStatusesContextState = ({ board }: Props) => {
     };
 };
 
-type BoardStatusesContextProviderProps = {
+export const [BoardStatusesContextProvider, useBoardStatusesContext] =
-    children: React.ReactNode;
+    makeContext<BoardStatusesContextState, Props>(
-} & Props;
+        useBoardStatusesContextState,
-
+        "BoardStatuses"
-export const BoardStatusesContextProvider: FC<
-    BoardStatusesContextProviderProps
-> = ({ children, ...props }) => {
-    const state = useBoardStatusesContextState(props);
-
-    return (
-        <BoardStatusesContext.Provider value={state}>
-            {children}
-        </BoardStatusesContext.Provider>
     );
-};
-
-export const useBoardStatusesContext = () => {
-    const context = useContext(BoardStatusesContext);
-    if (!context) {
-        throw new Error(
-            "useBoardStatusesContext must be used within a BoardStatusesContextProvider"
-        );
-    }
-    return context;
-};

src/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import React, { createContext, FC, useContext } from "react";
+import React from "react";
 import { BoardsCrud, useBoardsCrud } from "@/hooks/cruds/useBoardsCrud";
 import useBoardsList from "@/hooks/lists/useBoardsList";
 import { BoardSchema, ProjectSchema } from "@/lib/client";
+import makeContext from "@/lib/contextFactory/contextFactory";
 
 type ProjectBoardsContextState = {
     boards: BoardSchema[];
@@ -13,10 +14,6 @@ type ProjectBoardsContextState = {
     boardsCrud: BoardsCrud;
 };
 
-const ProjectBoardsContext = createContext<
-    ProjectBoardsContextState | undefined
->(undefined);
-
 type Props = {
     project: ProjectSchema;
 };
@@ -44,28 +41,8 @@ const useProjectBoardsContextState = ({ project }: Props) => {
     };
 };
 
-type ProjectBoardsContextProviderProps = {
+export const [ProjectBoardsContextProvider, useProjectBoardsContext] =
-    children: React.ReactNode;
+    makeContext<ProjectBoardsContextState, Props>(
-} & Props;
+        useProjectBoardsContextState,
-
+        "ProjectBoards"
-export const ProjectBoardsContextProvider: FC<
-    ProjectBoardsContextProviderProps
-> = ({ children, ...props }) => {
-    const state = useProjectBoardsContextState(props);
-
-    return (
-        <ProjectBoardsContext.Provider value={state}>
-            {children}
-        </ProjectBoardsContext.Provider>
     );
-};
-
-export const useProjectBoardsContext = () => {
-    const context = useContext(ProjectBoardsContext);
-    if (!context) {
-        throw new Error(
-            "useProjectBoardsContext must be used within a ProjectBoardsContextProvider"
-        );
-    }
-    return context;
-};

src/lib/contextFactory/contextFactory.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React, { createContext, FC, PropsWithChildren, useContext } from "react";
+
+export default function makeContext<State, HookArgs = {}>(
+    useValue: (args: HookArgs) => State,
+    displayName?: string
+) {
+    const Context = createContext<State | undefined>(undefined);
+    Context.displayName = displayName ?? "Custom";
+
+    const Provider: FC<PropsWithChildren<HookArgs>> = ({
+        children,
+        ...hookArgs
+    }) => {
+        const value = useValue(hookArgs as HookArgs);
+        return <Context.Provider value={value}>{children}</Context.Provider>;
+    };
+
+    const useContextHook = () => {
+        const context = useContext(Context);
+        if (!context) {
+            throw new Error(
+                `${Context.displayName}Context must be used within ${Context.displayName}ContextProvider`
+            );
+        }
+        return context;
+    };
+
+    return [Provider, useContextHook] as const;
+}