refactor: remove withProps and Compose

Author: debater-coder

src/main.tsx

@@ -4,7 +4,6 @@ import { RouterProvider } from "react-router-dom";
 import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
 import themeGen from "./theme";
 import registerSW from "./registerSW";
-import { Compose, withProps } from "./utils/contextualise";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import reportWebVitals from "./reportWebVitals";
@@ -39,28 +38,29 @@ const ChakraWrapper = ({ ...props }) => {
 };
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <Compose
-    components={[
-      StrictMode,
-      withProps(PersistQueryClientProvider, {
-        client: queryClient,
-        persistOptions: {
-          persister,
-          maxAge: Infinity,
-          dehydrateOptions: {
-            shouldDehydrateQuery: () => true,
-          },
+  <StrictMode>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{
+        persister,
+        maxAge: Infinity,
+        dehydrateOptions: {
+          shouldDehydrateQuery: () => true,
         },
-      }),
-      withProps(SettingsProvider, { initialArgs: [] }),
-      ChakraWrapper,
-    ]}
-  >
-    <ColorModeScript initialColorMode={themeGen().config.initialColorMode} />
-    <RouterProvider router={createRouter(queryClient)} />
-    <ToastContainer />
-    <ReactQueryDevtools initialIsOpen={false} />
-  </Compose>
+      }}
+    >
+      <SettingsProvider>
+        <ChakraWrapper>
+          <ColorModeScript
+            initialColorMode={themeGen().config.initialColorMode}
+          />
+          <RouterProvider router={createRouter(queryClient)} />
+          <ToastContainer />
+          <ReactQueryDevtools initialIsOpen={false} />
+        </ChakraWrapper>
+      </SettingsProvider>
+    </PersistQueryClientProvider>
+  </StrictMode>
 );
 
 // =================

src/utils/contextualise.tsx

@@ -4,51 +4,15 @@ import React, { createContext, useContext } from "react";
  * 'Globalises' a hook by wrapping it in a context provider.
  */
 export default <TData, TParameters extends unknown[]>(
-  hook: (...args: TParameters) => TData,
+  hook: () => TData,
   defaultValue?: TData
 ): [() => TData, (props: { children: React.ReactNode }) => JSX.Element] => {
   const Context = createContext(defaultValue);
   const Provider = ({
     children,
-    initialArgs,
   }: {
     children: React.ReactNode;
     initialArgs: TParameters;
-  }) => (
-    <Context.Provider value={hook(...initialArgs)}>{children}</Context.Provider>
-  );
+  }) => <Context.Provider value={hook()}>{children}</Context.Provider>;
   return [() => useContext(Context), Provider];
 };
-
-/** Composes several providers or wrappers into a single wrapper.
- *
- *  Credit to: https://stackoverflow.com/questions/51504506/too-many-react-context-providers
- */
-export function Compose(props: {
-  components: Array<
-    React.JSXElementConstructor<React.PropsWithChildren<unknown>>
-  >;
-  children: React.ReactNode;
-}) {
-  const { components = [], children } = props;
-
-  return (
-    <>
-      {components.reduceRight((acc, Comp) => {
-        return <Comp>{acc}</Comp>;
-      }, children)}
-    </>
-  );
-}
-
-/**
- * Create a new component which adds props to an existing component.
- */
-export function withProps(
-  Component: React.JSXElementConstructor<React.PropsWithChildren<unknown>>,
-  addedProps: Record<string, unknown>
-) {
-  return (props: Record<string, unknown>) => (
-    <Component {...addedProps} {...props} />
-  );
-}