Port buildContext to TS

Unclutter dropdown-context

Author: RoyEJohnson

src/app/components/jsx-helpers/build-context.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export default function buildContext<P, V>({
+    defaultValue = {} as V,
+    useContextValue
+}: {
+    defaultValue?: V;
+    useContextValue: (p: P) => V;
+}) {
+    const Context = React.createContext(defaultValue);
+
+    function useContext() {
+        return React.useContext(Context);
+    }
+
+    function ContextProvider({
+        children,
+        contextValueParameters = undefined as P
+    }: React.PropsWithChildren<{
+        contextValueParameters?: P;
+    }>) {
+        const value = useContextValue(contextValueParameters);
+
+        if (value === undefined) {
+            return null;
+        }
+
+        return <Context.Provider value={value}>{children}</Context.Provider>;
+    }
+
+    return {useContext, ContextProvider};
+}

src/app/components/jsx-helpers/build-context.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import buildContext from '~/components/jsx-helpers/build-context';
+import {useState} from 'react';
 
 function useContextValue({prefix} = {prefix: 'menulabel'}) {
-    const [activeDropdown, setActiveDropdown] = React.useState({});
-    const [submenuLabel, setSubmenuLabel] = React.useState();
+    const [activeDropdown, setActiveDropdown] = useState({});
+    const [submenuLabel, setSubmenuLabel] = useState();
 
     return {
         activeDropdown,
@@ -16,14 +16,4 @@ function useContextValue({prefix} = {prefix: 'menulabel'}) {
 
 const {useContext, ContextProvider} = buildContext({useContextValue});
 
-type Arg = {
-    prefix: string;
-};
-type DDCPArgs = React.PropsWithChildren<{
-    contextValueParameters?: Arg;
-}>;
-const DropdownContextProvider = ContextProvider as (
-    args: DDCPArgs
-) => JSX.Element;
-
-export {useContext as default, DropdownContextProvider};
+export {useContext as default, ContextProvider as DropdownContextProvider};