feat: Add selected service field to SharedStore

Lets the main process see which service is currently selected.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

3 files changed, 18 insertions, 8 deletions

diff --git a/packages/renderer/src/components/ServiceSwitcher.tsx b/packages/renderer/src/components/ServiceSwitcher.tsx
index b454451..0786b71 100644
--- a/packages/renderer/src/components/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/ServiceSwitcher.tsx
@@ -22,7 +22,7 @@ import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import { alpha, styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React, { useState } from 'react';
+import React from 'react';
 
 import ServiceIcon from './ServiceIcon';
 import { useStore } from './StoreProvider';
@@ -62,18 +62,17 @@ const ServiceSwitcherTab = styled(Tab, {
 }));
 
 export default observer(() => {
-  const { services } = useStore();
-  // TODO Move this to the `SharedStore`.
-  const [selectedService, setSelectedService] = useState<string | boolean>(
-    false,
-  );
+  const store = useStore();
+  const { selectedService, services } = store;
 
   return (
     <ServiceSwitcherRoot
       variant="scrollable"
       orientation="vertical"
-      value={selectedService}
-      onChange={(_event, newValue: string) => setSelectedService(newValue)}
+      value={selectedService === undefined ? false : selectedService.id}
+      onChange={(_event, newValue: string) =>
+        store.setSelectedServiceId(newValue)
+      }
     >
       {services.map((service) => (
         <ServiceSwitcherTab
diff --git a/packages/renderer/src/stores/RendererStore.ts b/packages/renderer/src/stores/RendererStore.ts
index d0e7843..731ca28 100644
--- a/packages/renderer/src/stores/RendererStore.ts
+++ b/packages/renderer/src/stores/RendererStore.ts
@@ -42,8 +42,17 @@ export const rendererStore = types
     get services(): Service[] {
       return this.config.services;
     },
+    get selectedService(): Service | undefined {
+      return self.shared.selectedService;
+    },
   }))
   .actions((self) => ({
+    setSelectedServiceId(serviceId: string): void {
+      getEnv(self).dispatchMainAction({
+        action: 'set-selected-service-id',
+        serviceId,
+      });
+    },
     setBrowserViewBounds(browserViewBounds: BrowserViewBounds): void {
       getEnv(self).dispatchMainAction({
         action: 'set-browser-view-bounds',
diff --git a/packages/renderer/src/stores/SharedStore.ts b/packages/renderer/src/stores/SharedStore.ts
index baaf061..962f7e2 100644
--- a/packages/renderer/src/stores/SharedStore.ts
+++ b/packages/renderer/src/stores/SharedStore.ts
@@ -22,9 +22,11 @@ import { sharedStore as originalSharedStore } from '@sophie/shared';
 import { Instance, types } from 'mobx-state-tree';
 
 import { config } from './Config';
+import { service } from './Service';
 
 export const sharedStore = originalSharedStore.props({
   config: types.optional(config, {}),
+  selectedService: types.safeReference(service),
 });
 
 export interface SharedStore extends Instance<typeof sharedStore> {}