From b5d16a8068ed55b784f8e10f19a99cc7f11b8bc7 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Thu, 23 Dec 2021 15:48:58 +0100
Subject: feat: Add react and mobx integration

---
 packages/renderer/src/components/StoreProvider.tsx | 24 ++++++++++++++++++++
 packages/renderer/src/components/ThemeProvider.tsx | 26 ++++++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 packages/renderer/src/components/StoreProvider.tsx
 create mode 100644 packages/renderer/src/components/ThemeProvider.tsx

(limited to 'packages/renderer/src/components')

diff --git a/packages/renderer/src/components/StoreProvider.tsx b/packages/renderer/src/components/StoreProvider.tsx
new file mode 100644
index 0000000..51c39f7
--- /dev/null
+++ b/packages/renderer/src/components/StoreProvider.tsx
@@ -0,0 +1,24 @@
+import React, { createContext, useContext } from 'react';
+
+import type { RootStore } from '../stores/RootStore';
+
+const StoreContext = createContext<RootStore | null>(null);
+
+export function useStore(): RootStore {
+  const store = useContext(StoreContext);
+  if (store === null) {
+    throw new Error('useStore can only be called inside of StoreProvider');
+  }
+  return store;
+}
+
+export function StoreProvider({ children, store }: {
+  children: JSX.Element | JSX.Element[],
+  store: RootStore,
+}): JSX.Element {
+  return (
+    <StoreContext.Provider value={store}>
+      {children}
+    </StoreContext.Provider>
+  );
+}
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
new file mode 100644
index 0000000..8be4f6a
--- /dev/null
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -0,0 +1,26 @@
+import { observer } from 'mobx-react-lite';
+import {
+  unstable_createMuiStrictModeTheme as createTheme,
+  ThemeProvider as MuiThemeProvider,
+} from '@mui/material/styles';
+import React from 'react';
+
+import { useStore } from './StoreProvider';
+
+export const ThemeProvider = observer(({ children }: {
+  children: JSX.Element | JSX.Element[],
+}): JSX.Element => {
+  const { shared: { shouldUseDarkColors } } = useStore();
+
+  const theme = createTheme({
+    palette: {
+      mode: shouldUseDarkColors ? 'dark' : 'light',
+    },
+  });
+
+  return (
+    <MuiThemeProvider theme={theme}>
+      {children}
+    </MuiThemeProvider>
+  );
+});
-- 
cgit v1.2.3-54-g00ecf