From c9ac415f129046e14156a425d52bd31be91de1d1 Mon Sep 17 00:00:00 2001
From: Luke <39926192+LukeWasTakenn@users.noreply.github.com>
Date: Sat, 11 Feb 2023 14:40:58 +0100
Subject: [PATCH] feat(web): primary colour and shade convars

---
 resource/client.lua                  |  7 ++++++
 web/src/App.tsx                      |  9 ++++++--
 web/src/main.tsx                     |  5 +++--
 web/src/providers/ConfigProvider.tsx | 32 ++++++++++++++++++++++++++++
 4 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 web/src/providers/ConfigProvider.tsx

diff --git a/resource/client.lua b/resource/client.lua
index f94961f..45b5129 100644
--- a/resource/client.lua
+++ b/resource/client.lua
@@ -10,3 +10,10 @@ function RegisterCommand(commandName, callback, restricted)
 		end
 	end)
 end
+
+RegisterNUICallback('getConfig', function(_, cb)
+    cb({
+        primaryColor = GetConvar('ox:primaryColor', 'blue'),
+        primaryShade = GetConvarInt('ox:primaryShade', 8)
+    })
+end)
\ No newline at end of file
diff --git a/web/src/App.tsx b/web/src/App.tsx
index ac0734e..bc6e9f4 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -13,8 +13,13 @@ import Dev from './features/dev';
 import { isEnvBrowser } from './utils/misc';
 import SkillCheck from './features/skillcheck';
 import RadialMenu from './features/menu/radial';
+import { theme } from './theme';
+import { MantineProvider } from '@mantine/core';
+import { useConfig } from './providers/ConfigProvider';
 
 const App: React.FC = () => {
+  const { config } = useConfig();
+
   useNuiEvent('setClipboard', (data: string) => {
     setClipboard(data);
   });
@@ -22,7 +27,7 @@ const App: React.FC = () => {
   fetchNui('init');
 
   return (
-    <>
+    <MantineProvider withNormalizeCSS withGlobalStyles theme={{ ...theme, ...config }}>
       <Progressbar />
       <CircleProgressbar />
       <Notifications />
@@ -34,7 +39,7 @@ const App: React.FC = () => {
       <RadialMenu />
       <SkillCheck />
       {isEnvBrowser() && <Dev />}
-    </>
+    </MantineProvider>
   );
 };
 
diff --git a/web/src/main.tsx b/web/src/main.tsx
index e2939e2..cb94423 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -10,6 +10,7 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { isEnvBrowser } from './utils/misc';
 import LocaleProvider from './providers/LocaleProvider';
 import { MantineProvider } from '@mantine/core';
+import ConfigProvider from './providers/ConfigProvider';
 
 library.add(fas, far, fab);
 
@@ -27,9 +28,9 @@ const root = document.getElementById('root');
 ReactDOM.createRoot(root!).render(
   <React.StrictMode>
     <LocaleProvider>
-      <MantineProvider withNormalizeCSS withGlobalStyles theme={theme}>
+      <ConfigProvider>
         <App />
-      </MantineProvider>
+      </ConfigProvider>
     </LocaleProvider>
   </React.StrictMode>
 );
diff --git a/web/src/providers/ConfigProvider.tsx b/web/src/providers/ConfigProvider.tsx
new file mode 100644
index 0000000..c1219c8
--- /dev/null
+++ b/web/src/providers/ConfigProvider.tsx
@@ -0,0 +1,32 @@
+import { Context, createContext, useContext, useEffect, useState } from 'react';
+import { MantineColor } from '@mantine/core';
+import { fetchNui } from '../utils/fetchNui';
+
+interface Config {
+  primaryColor: MantineColor;
+  primaryShade: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+}
+
+interface ConfigCtxValue {
+  config: Config;
+  setConfig: (config: Config) => void;
+}
+
+const ConfigCtx = createContext<{ config: Config; setConfig: (config: Config) => void } | null>(null);
+
+const ConfigProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [config, setConfig] = useState<Config>({
+    primaryColor: 'blue',
+    primaryShade: 6,
+  });
+
+  useEffect(() => {
+    fetchNui<Config>('getConfig').then((data) => setConfig(data));
+  }, []);
+
+  return <ConfigCtx.Provider value={{ config, setConfig }}>{children}</ConfigCtx.Provider>;
+};
+
+export default ConfigProvider;
+
+export const useConfig = () => useContext<ConfigCtxValue>(ConfigCtx as Context<ConfigCtxValue>);