refactor: Shared model type factories

Allows customization of stores both in the renderer and in the main
process. Instead of exposing a basic model type from the shared module
(which was be overwritted with more specific props in the main package),
we expose factory function that can create specific model types in
both the renderer and the main process.

Using these package-specific customization to stores, the renderer
package can attach IPC calls directly to store objects, which the main
package can attach the handlers for IPC calls and other internal
actions.

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

12 files changed, 241 insertions, 55 deletions

diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index f436bf0..e6da59f 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -20,11 +20,12 @@
 
 import FilledInput from '@mui/material/FilledInput';
 import { styled } from '@mui/material/styles';
-import { Service } from '@sophie/shared';
 import { autorun } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useState } from 'react';
 
+import Service from '../../stores/Service';
+
 import GoAdornment from './GoAdornment';
 import LocationOverlayInput from './LocationOverlayInput';
 import UrlAdornment from './UrlAdornment';
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index 77b02b6..ce59692 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -26,10 +26,11 @@ import IconRefresh from '@mui/icons-material/Refresh';
 import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
-import { Service } from '@sophie/shared';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
+import Service from '../../stores/Service';
+
 function NavigationButtons({
   service,
 }: {
diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index 144f860..5db8a0c 100644
--- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -20,10 +20,11 @@
 
 import Badge from '@mui/material/Badge';
 import { styled, useTheme } from '@mui/material/styles';
-import { Service } from '@sophie/shared';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 
+import type Service from '../../stores/Service';
+
 const ServiceIconRoot = styled('div', {
   name: 'ServiceIcon',
   slot: 'Root',
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 2241476..eba21b5 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -65,11 +65,8 @@ const ServiceSwitcherTab = styled(Tab, {
 }));
 
 function ServiceSwitcher(): JSX.Element {
-  const store = useStore();
-  const {
-    settings: { selectedService },
-    services,
-  } = store;
+  const { settings, services } = useStore();
+  const { selectedService } = settings;
 
   return (
     <ServiceSwitcherRoot
@@ -77,7 +74,7 @@ function ServiceSwitcher(): JSX.Element {
       orientation="vertical"
       value={selectedService === undefined ? false : selectedService.id}
       onChange={(_event, newValue: string) =>
-        store.setSelectedServiceId(newValue)
+        settings.setSelectedServiceId(newValue)
       }
     >
       {services.map((service) => (
diff --git a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
index 164b066..bacbf07 100644
--- a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
@@ -27,15 +27,13 @@ import React from 'react';
 import { useStore } from '../StoreProvider';
 
 export default observer(() => {
-  const store = useStore();
-  const {
-    shared: { shouldUseDarkColors },
-  } = store;
+  const { shared } = useStore();
+  const { shouldUseDarkColors } = shared;
 
   return (
     <IconButton
       aria-label="Toggle dark mode"
-      onClick={() => store.toggleDarkMode()}
+      onClick={() => shared.toggleDarkMode()}
     >
       {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />}
     </IconButton>
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index 60033b0..d2f0745 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -45,17 +45,15 @@ function ToggleLocationBarIcon({
 }
 
 function ToggleLocationBarButton(): JSX.Element {
-  const store = useStore();
-  const {
-    settings: { selectedService, showLocationBar },
-  } = store;
+  const { settings } = useStore();
+  const { selectedService, showLocationBar } = settings;
 
   return (
     <IconButton
       aria-pressed={showLocationBar}
       aria-controls={LOCATION_BAR_ID}
       aria-label="Show location bar"
-      onClick={() => store.toggleLocationBar()}
+      onClick={() => settings.toggleLocationBar()}
     >
       <ToggleLocationBarIcon
         loading={selectedService?.state === 'loading'}
diff --git a/packages/renderer/src/stores/GlobalSettings.ts b/packages/renderer/src/stores/GlobalSettings.ts
new file mode 100644
index 0000000..79815ba
--- /dev/null
+++ b/packages/renderer/src/stores/GlobalSettings.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { defineGlobalSettingsModel, ThemeSource } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
+
+import getEnv from '../env/getEnv';
+
+import Service from './Service';
+
+const GlobalSettings = defineGlobalSettingsModel(Service).actions((self) => ({
+  setSelectedServiceId(serviceId: string): void {
+    getEnv(self).dispatchMainAction({
+      action: 'set-selected-service-id',
+      serviceId,
+    });
+  },
+  setThemeSource(themeSource: ThemeSource): void {
+    getEnv(self).dispatchMainAction({
+      action: 'set-theme-source',
+      themeSource,
+    });
+  },
+  setShowLocationBar(showLocationBar: boolean): void {
+    getEnv(self).dispatchMainAction({
+      action: 'set-show-location-bar',
+      showLocationBar,
+    });
+  },
+  toggleLocationBar(): void {
+    this.setShowLocationBar(!self.showLocationBar);
+  },
+}));
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+interface GlobalSettings extends Instance<typeof GlobalSettings> {}
+
+export default GlobalSettings;
+
+export type {
+  GlobalSettingsSnapshotIn,
+  GlobalSettingsSnapshotOut,
+} from '@sophie/shared';
diff --git a/packages/renderer/src/stores/Profile.ts b/packages/renderer/src/stores/Profile.ts
new file mode 100644
index 0000000..20a3a17
--- /dev/null
+++ b/packages/renderer/src/stores/Profile.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Profile as ProfileBase } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
+
+const Profile = ProfileBase;
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+interface Profile extends Instance<typeof Profile> {}
+
+export default Profile;
diff --git a/packages/renderer/src/stores/RendererStore.ts b/packages/renderer/src/stores/RendererStore.ts
index 1acc605..8f424f6 100644
--- a/packages/renderer/src/stores/RendererStore.ts
+++ b/packages/renderer/src/stores/RendererStore.ts
@@ -18,20 +18,17 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import {
-  BrowserViewBounds,
-  SharedStore,
-  Service,
-  SophieRenderer,
-  ThemeSource,
-  GlobalSettings,
-} from '@sophie/shared';
+import { BrowserViewBounds, SophieRenderer } from '@sophie/shared';
 import { applySnapshot, applyPatch, Instance, types } from 'mobx-state-tree';
 
 import RendererEnv from '../env/RendererEnv';
 import getEnv from '../env/getEnv';
 import { getLogger } from '../utils/log';
 
+import GlobalSettings from './GlobalSettings';
+import Service from './Service';
+import SharedStore from './SharedStore';
+
 const log = getLogger('RendererStore');
 
 const RendererStore = types
@@ -47,40 +44,12 @@ const RendererStore = types
     },
   }))
   .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',
         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');
-      }
-    },
-    setShowLocationBar(showLocationBar: boolean): void {
-      getEnv(self).dispatchMainAction({
-        action: 'set-show-location-bar',
-        showLocationBar,
-      });
-    },
-    toggleLocationBar(): void {
-      this.setShowLocationBar(!self.settings.showLocationBar);
-    },
   }));
 
 /*
diff --git a/packages/renderer/src/stores/Service.ts b/packages/renderer/src/stores/Service.ts
new file mode 100644
index 0000000..c2c938a
--- /dev/null
+++ b/packages/renderer/src/stores/Service.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { defineServiceModel } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
+
+import ServiceSettings from './ServiceSettings';
+
+const Service = defineServiceModel(ServiceSettings);
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+interface Service extends Instance<typeof Service> {}
+
+export default Service;
diff --git a/packages/renderer/src/stores/ServiceSettings.ts b/packages/renderer/src/stores/ServiceSettings.ts
new file mode 100644
index 0000000..5d37347
--- /dev/null
+++ b/packages/renderer/src/stores/ServiceSettings.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { defineServiceSettingsModel } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
+
+import Profile from './Profile';
+
+const ServiceSettings = defineServiceSettingsModel(Profile);
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+interface ServiceSettings extends Instance<typeof ServiceSettings> {}
+
+export default ServiceSettings;
+
+export type {
+  ServiceSettingsSnapshotIn,
+  ServiceSettingsSnapshotOut,
+} from '@sophie/shared';
diff --git a/packages/renderer/src/stores/SharedStore.ts b/packages/renderer/src/stores/SharedStore.ts
new file mode 100644
index 0000000..062479d
--- /dev/null
+++ b/packages/renderer/src/stores/SharedStore.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { defineSharedStoreModel } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
+
+import GlobalSettings from './GlobalSettings';
+import Profile from './Profile';
+import Service from './Service';
+
+const SharedStore = defineSharedStoreModel(
+  GlobalSettings,
+  Profile,
+  Service,
+).actions((self) => ({
+  toggleDarkMode(): void {
+    if (self.shouldUseDarkColors) {
+      self.settings.setThemeSource('light');
+    } else {
+      self.settings.setThemeSource('dark');
+    }
+  },
+}));
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+interface SharedStore extends Instance<typeof SharedStore> {}
+
+export default SharedStore;
+
+export type {
+  SharedStoreSnapshotIn,
+  SharedStoreSnapshotOut,
+} from '@sophie/shared';