feat: Add react and mobx integration

1 files changed, 23 insertions, 30 deletions

diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 37daaa6..34b21de 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -2,56 +2,49 @@ import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
-import { applyPatch, applySnapshot } from 'mobx-state-tree';
+import { observer } from 'mobx-react-lite';
 import Button from "@mui/material/Button";
 import CssBaseline from "@mui/material/CssBaseline";
-import {
-  unstable_createMuiStrictModeTheme as createTheme,
-  ThemeProvider,
-} from '@mui/material/styles';
 import React from 'react';
 import { render } from 'react-dom';
-import { sharedStore } from '@sophie/shared';
 
+import { StoreProvider, useStore } from './components/StoreProvider';
+import { ThemeProvider } from './components/ThemeProvider';
 import { exposeToReduxDevtools } from './devTools';
+import { createAndConnectRootStore } from './stores/RootStore';
 
 const isDevelopment = import.meta.env.MODE === 'development';
 
-const store = sharedStore.create();
+const store = createAndConnectRootStore(window.sophieRenderer);
 
 if (isDevelopment) {
   exposeToReduxDevtools(store);
 }
 
-window.sophieRenderer.setSharedStoreListener({
-  onSnapshot(snapshot) {
-    applySnapshot(store, snapshot);
-  },
-  onPatch(patch) {
-    applyPatch(store, patch);
-  },
-});
+const Example = observer(() => {
+  const { shared: { clickCount } } = useStore();
 
-const theme = createTheme({
-  palette: {
-    mode: 'dark',
-  },
+  return (
+    <Button
+      variant="contained"
+      onClick={() => store.buttonClick()}
+    >
+      Hello Sophie! {clickCount}
+    </Button>
+  );
 });
 
-function App() {
+function Root(): JSX.Element {
   return (
     <React.StrictMode>
-      <ThemeProvider theme={theme}>
-        <CssBaseline enableColorScheme />
-        <Button
-          variant="contained"
-          onClick={window.sophieRenderer.buttonClick}
-        >
-          Hello Sophie!
-        </Button>
-      </ThemeProvider>
+      <StoreProvider store={store}>
+        <ThemeProvider>
+          <CssBaseline enableColorScheme />
+          <Example />
+        </ThemeProvider>
+      </StoreProvider>
     </React.StrictMode>
   );
 }
 
-render(<App />, document.querySelector('#app'));
+render(<Root />, document.querySelector('#app'));