refactor(renderer): window title setting

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

2 files changed, 86 insertions, 43 deletions

diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index b0686a9..86e2a55 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -19,15 +19,31 @@
  */
 
 import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { useCallback } from 'react';
 
 import type RendererStore from '../stores/RendererStore';
 
 import ServicePanel from './ServicePanel';
+import WindowTitle from './WindowTitle';
 import Sidebar from './sidebar/Sidebar';
 
+const AppRoot = styled(Box)({
+  display: 'flex',
+  overflow: 'hidden',
+  flexDirection: 'row',
+  alignItems: 'stretch',
+  height: '100vh',
+  width: '100vw',
+});
+
+const AppServiceArea = styled(Box)({
+  flex: 1,
+  height: '100%',
+  position: 'relative',
+});
+
 function App({
   store,
   devMode,
@@ -35,33 +51,10 @@ function App({
   store: RendererStore;
   devMode: boolean;
 }): JSX.Element {
-  const { ready, t } = useTranslation(undefined, {
-    useSuspense: false,
-  });
   const {
     settings: { selectedService },
     shared: { services },
   } = store;
-  const {
-    settings: { name: serviceName },
-    title: serviceTitle,
-  } = selectedService ?? { settings: { name: undefined }, title: undefined };
-
-  useEffect(() => {
-    if (!ready) {
-      // Only set title once the translations have been loaded.
-      return;
-    }
-    let title: string;
-    if (serviceName === undefined) {
-      title = t('title.noServiceName');
-    } else if (serviceTitle === undefined) {
-      title = t('title.withServiceName', { serviceName });
-    } else {
-      title = t('title.withServiceNameAndTitle', { serviceName, serviceTitle });
-    }
-    document.title = devMode ? t('title.devMode', { title }) : title;
-  }, [devMode, ready, serviceName, serviceTitle, t]);
 
   const handleBackForwardMouseButtons = useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@@ -83,31 +76,18 @@ function App({
   );
 
   return (
-    <Box
+    <AppRoot
       onClick={handleBackForwardMouseButtons}
       onAuxClick={handleBackForwardMouseButtons}
-      sx={{
-        display: 'flex',
-        overflow: 'hidden',
-        flexDirection: 'row',
-        alignItems: 'stretch',
-        height: '100vh',
-        width: '100vw',
-      }}
     >
+      <WindowTitle selectedService={selectedService} devMode={devMode} />
       <Sidebar store={store} />
-      <Box
-        sx={{
-          flex: 1,
-          height: '100%',
-          position: 'relative',
-        }}
-      >
+      <AppServiceArea>
         {services.map((service) => (
           <ServicePanel key={service.id} store={store} service={service} />
         ))}
-      </Box>
-    </Box>
+      </AppServiceArea>
+    </AppRoot>
   );
 }
 
diff --git a/packages/renderer/src/components/WindowTitle.tsx b/packages/renderer/src/components/WindowTitle.tsx
new file mode 100644
index 0000000..95e0fe6
--- /dev/null
+++ b/packages/renderer/src/components/WindowTitle.tsx
@@ -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 { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type Service from '../stores/Service';
+
+function WindowTitle({
+  selectedService,
+  devMode,
+}: {
+  selectedService: Service | undefined;
+  devMode: boolean;
+}): null {
+  const { ready, t } = useTranslation(undefined, {
+    useSuspense: false,
+  });
+
+  const {
+    settings: { name: serviceName },
+    title: serviceTitle,
+  } = selectedService ?? { settings: { name: undefined }, title: undefined };
+
+  useEffect(() => {
+    if (!ready) {
+      // Only set title once the translations have been loaded.
+      return;
+    }
+    let title: string;
+    if (serviceName === undefined) {
+      title = t('title.noServiceName');
+    } else if (serviceTitle === undefined) {
+      title = t('title.withServiceName', { serviceName });
+    } else {
+      title = t('title.withServiceNameAndTitle', { serviceName, serviceTitle });
+    }
+    document.title = devMode ? t('title.devMode', { title }) : title;
+  }, [devMode, ready, serviceName, serviceTitle, t]);
+
+  // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+  return null;
+}
+
+export default observer(WindowTitle);