6 files changed, 95 insertions, 90 deletions

diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
index 11c09d6..8f055e7 100644
--- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx
+++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
@@ -29,36 +29,37 @@ export default observer(() => {
   const store = useStore();
 
   // eslint-disable-next-line react-hooks/exhaustive-deps -- react-hooks doesn't support `throttle`.
-  const onResize = useCallback(throttle(([entry]: ResizeObserverEntry[]) => {
-    if (entry) {
-      const {
-        x,
-        y,
-        width,
-        height,
-      } = entry.target.getBoundingClientRect();
-      store.setBrowserViewBounds({
-        x,
-        y,
-        width,
-        height,
-      });
-    }
-  }, 100), [store]);
+  const onResize = useCallback(
+    throttle(([entry]: ResizeObserverEntry[]) => {
+      if (entry) {
+        const { x, y, width, height } = entry.target.getBoundingClientRect();
+        store.setBrowserViewBounds({
+          x,
+          y,
+          width,
+          height,
+        });
+      }
+    }, 100),
+    [store],
+  );
 
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
-  const ref = useCallback((element: HTMLElement | null) => {
-    if (resizeObserverRef.current !== null) {
-      resizeObserverRef.current.disconnect();
-    }
-    if (element === null) {
-      resizeObserverRef.current = null;
-      return;
-    }
-    resizeObserverRef.current = new ResizeObserver(onResize);
-    resizeObserverRef.current.observe(element);
-  }, [onResize, resizeObserverRef]);
+  const ref = useCallback(
+    (element: HTMLElement | null) => {
+      if (resizeObserverRef.current !== null) {
+        resizeObserverRef.current.disconnect();
+      }
+      if (element === null) {
+        resizeObserverRef.current = null;
+        return;
+      }
+      resizeObserverRef.current = new ResizeObserver(onResize);
+      resizeObserverRef.current.observe(element);
+    },
+    [onResize, resizeObserverRef],
+  );
 
   return (
     <Box
diff --git a/packages/renderer/src/components/StoreProvider.tsx b/packages/renderer/src/components/StoreProvider.tsx
index cde6a31..bb8495c 100644
--- a/packages/renderer/src/components/StoreProvider.tsx
+++ b/packages/renderer/src/components/StoreProvider.tsx
@@ -32,13 +32,14 @@ export function useStore(): RendererStore {
   return store;
 }
 
-export default function StoreProvider({ children, store }: {
-  children: JSX.Element | JSX.Element[],
-  store: RendererStore,
+export default function StoreProvider({
+  children,
+  store,
+}: {
+  children: JSX.Element | JSX.Element[];
+  store: RendererStore;
 }): JSX.Element {
   return (
-    <StoreContext.Provider value={store}>
-      {children}
-    </StoreContext.Provider>
+    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
   );
 }
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index eacaa52..3943371 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -27,20 +27,18 @@ import React from 'react';
 
 import { useStore } from './StoreProvider';
 
-export default observer(({ children }: {
-  children: JSX.Element | JSX.Element[];
-}) => {
-  const { shared: { shouldUseDarkColors } } = useStore();
+export default observer(
+  ({ children }: { children: JSX.Element | JSX.Element[] }) => {
+    const {
+      shared: { shouldUseDarkColors },
+    } = useStore();
 
-  const theme = createTheme({
-    palette: {
-      mode: shouldUseDarkColors ? 'dark' : 'light',
-    },
-  });
+    const theme = createTheme({
+      palette: {
+        mode: shouldUseDarkColors ? 'dark' : 'light',
+      },
+    });
 
-  return (
-    <MuiThemeProvider theme={theme}>
-      {children}
-    </MuiThemeProvider>
-  );
-});
+    return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+  },
+);
diff --git a/packages/renderer/src/components/ToggleDarkModeButton.tsx b/packages/renderer/src/components/ToggleDarkModeButton.tsx
index c8ffdf0..695756a 100644
--- a/packages/renderer/src/components/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/ToggleDarkModeButton.tsx
@@ -28,7 +28,9 @@ import { useStore } from './StoreProvider';
 
 export default observer(() => {
   const store = useStore();
-  const { shared: { shouldUseDarkColors } } = store;
+  const {
+    shared: { shouldUseDarkColors },
+  } = store;
 
   return (
     <IconButton
diff --git a/packages/renderer/src/devTools.ts b/packages/renderer/src/devTools.ts
index 3d3ba99..cb695c3 100644
--- a/packages/renderer/src/devTools.ts
+++ b/packages/renderer/src/devTools.ts
@@ -35,7 +35,9 @@ import type { IAnyStateTreeNode } from 'mobx-state-tree';
  * @return A promise that resolves when the store was exposed to the devtools.
  * @see https://github.com/SocketCluster/socketcluster-client/issues/118#issuecomment-469064682
  */
-export async function exposeToReduxDevtools(model: IAnyStateTreeNode): Promise<void> {
+export async function exposeToReduxDevtools(
+  model: IAnyStateTreeNode,
+): Promise<void> {
   (window as { global?: unknown }).global = window;
 
   // Hack to load dev dependencies on demand.
diff --git a/packages/renderer/src/stores/RendererStore.ts b/packages/renderer/src/stores/RendererStore.ts
index e684759..0b78ce1 100644
--- a/packages/renderer/src/stores/RendererStore.ts
+++ b/packages/renderer/src/stores/RendererStore.ts
@@ -24,12 +24,7 @@ import {
   SophieRenderer,
   ThemeSource,
 } from '@sophie/shared';
-import {
-  applySnapshot,
-  applyPatch,
-  Instance,
-  types,
-} from 'mobx-state-tree';
+import { applySnapshot, applyPatch, Instance, types } from 'mobx-state-tree';
 
 import { getLogger } from '../utils/log';
 
@@ -38,29 +33,31 @@ import { getEnv } from './RendererEnv';
 
 const log = getLogger('RendererStore');
 
-export const rendererStore = types.model('RendererStore', {
-  shared: types.optional(sharedStore, {}),
-}).actions((self) => ({
-  setBrowserViewBounds(browserViewBounds: BrowserViewBounds): void {
-    getEnv(self).dispatchMainAction({
-      action: 'set-browser-view-bounds',
-      browserViewBounds,
-    });
-  },
-  setThemeSource(themeSource: ThemeSource): void {
-    getEnv(self).dispatchMainAction({
-      action: 'set-theme-source',
-      themeSource,
-    });
-  },
-  toggleDarkMode(): void {
-    if (self.shared.shouldUseDarkColors) {
-      this.setThemeSource('light');
-    } else {
-      this.setThemeSource('dark');
-    }
-  },
-}));
+export const rendererStore = types
+  .model('RendererStore', {
+    shared: types.optional(sharedStore, {}),
+  })
+  .actions((self) => ({
+    setBrowserViewBounds(browserViewBounds: BrowserViewBounds): void {
+      getEnv(self).dispatchMainAction({
+        action: 'set-browser-view-bounds',
+        browserViewBounds,
+      });
+    },
+    setThemeSource(themeSource: ThemeSource): void {
+      getEnv(self).dispatchMainAction({
+        action: 'set-theme-source',
+        themeSource,
+      });
+    },
+    toggleDarkMode(): void {
+      if (self.shared.shouldUseDarkColors) {
+        this.setThemeSource('light');
+      } else {
+        this.setThemeSource('dark');
+      }
+    },
+  }));
 
 export interface RendererStore extends Instance<typeof rendererStore> {}
 
@@ -72,22 +69,26 @@ export interface RendererStore extends Instance<typeof rendererStore> {}
  *
  * @param ipc The `sophieRenderer` context bridge.
  */
-export function createAndConnectRendererStore(ipc: SophieRenderer): RendererStore {
+export function createAndConnectRendererStore(
+  ipc: SophieRenderer,
+): RendererStore {
   const env: RendererEnv = {
     dispatchMainAction: ipc.dispatchAction,
   };
   const store = rendererStore.create({}, env);
 
-  ipc.onSharedStoreChange({
-    onSnapshot(snapshot) {
-      applySnapshot(store.shared, snapshot);
-    },
-    onPatch(patch) {
-      applyPatch(store.shared, patch);
-    },
-  }).catch((err) => {
-    log.error('Failed to connect to shared store', err);
-  });
+  ipc
+    .onSharedStoreChange({
+      onSnapshot(snapshot) {
+        applySnapshot(store.shared, snapshot);
+      },
+      onPatch(patch) {
+        applyPatch(store.shared, patch);
+      },
+    })
+    .catch((err) => {
+      log.error('Failed to connect to shared store', err);
+    });
 
   return store;
 }