moved settings hook into the context

src/API/contexts/actions.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState, createContext, ReactNode, useContext } from "react";
 import ActionManager, { ActionHandler, ConfigManager } from "./managers";
 import { Events } from "csgogsi";
 import { GSI } from "../HUD";
-import type { AllActions, GetInputsFromSection, Sections } from "./settings";
+import type { AllActions, AllInputs, GetInputsFromSection, Sections } from "./settings";
 
 export const actions = new ActionManager();
 export const configs = new ConfigManager();
@@ -50,13 +50,38 @@ export function onGSI<T extends BaseEvents>(event: T, callback: Callback<T>, dep
   }, deps ? [event, ...deps] : [event, callback])
 }
 
-export function useConfig<K extends keyof Sections, T extends { [K: string]: any } = {}>(section: K){
-  const [ data, setData ] = useState<{ [L in keyof (K extends keyof Sections ? GetInputsFromSection<Sections[K]> : T)]?: (K extends keyof Sections ? GetInputsFromSection<Sections[K]> : T)[L] } | null>(configs.data?.[section] || null);
+const SettingsContext = createContext<AllInputs | null>({} as AllInputs);
+export const SettingsProvider = ({ children }: { children: ReactNode }) => {
+  const [ data, setData ] = useState<AllInputs | null>(configs.data as AllInputs || null);
 
-  const onDataChanged = useCallback((sectionData: any) => {
-    setData(sectionData || null);
-  }, [section]);
 
-  useOnConfigChange(section, onDataChanged);
-  return data;
+
+  useEffect(() => {
+    const onDataChanged = (data: any) => {
+      setData(data);
+    };
+
+    configs.onChange(onDataChanged);
+    onDataChanged(configs.data);
+
+    return () => {
+      configs.off(onDataChanged);
+    }
+  }, [])
+
+  return (
+    <SettingsContext.Provider
+      value={data}
+    >
+      {children}
+    </SettingsContext.Provider>
+  );
+};
+
+export function useConfig<K extends keyof Sections>(section: K){
+  const context = useContext(SettingsContext);
+  if (context === undefined) {
+    throw new Error('generic Hook must be used within a Generic Provider');
+  }
+  return context?.[section];
 }

src/API/contexts/settings.ts

@@ -42,6 +42,8 @@ type ValueMapper<T extends Settings[number]["inputs"]> = { [K in T[number] as K[
 export type GetInputsFromSection<T extends Settings[number]["inputs"]> = { [K in NonNeverKeys<ValueMapper<T>>]: ValueMapper<T>[K]};
 export type Sections = { [K in Settings[number] as K["name"]]: K["inputs"]}
 
+export type AllInputs = { [K in keyof Sections]: GetInputsFromSection<Sections[K]> };
+
 type ActionValueMapper<T extends Settings[number]["inputs"]> = { [K in T[number] as K["name"]]: K extends { type: "action" } ? K["values"][number]["name"] : never }
 
 type GetActionsFromSection<T extends Settings[number]["inputs"]> = { [K in NonNeverKeys<ActionValueMapper<T>>]: ActionValueMapper<T>[K]};

src/App.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import './App.css'
 import { CSGO } from 'csgogsi'
-import { onGSI } from './API/contexts/actions'
+import { SettingsProvider, onGSI } from './API/contexts/actions'
 import Layout from './HUD/Layout/Layout';
 import './API/socket';
 import { Match } from './API/types';
@@ -74,7 +74,9 @@ function App() {
 
   if (!game) return null;
   return (
+    <SettingsProvider>
       <Layout game={game} match={match} />
+    </SettingsProvider>
   );
 }