Refactor and fix main app tests

src/common/ShlinkWebComponentContainer.tsx

@@ -1,33 +1,34 @@
 import type { FC } from 'react';
 import { useEffect } from 'react';
-import type { Settings } from '../../shlink-web-component/src';
-import { ShlinkWebComponent } from '../../shlink-web-component/src';
+import type { Settings, ShlinkWebComponentType } from '../../shlink-web-component/src';
 import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
 import { isReachableServer } from '../servers/data';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
 import { NotFound } from './NotFound';
-import './MenuLayout.scss';
+import './ShlinkWebComponentContainer.scss';
 
-interface MenuLayoutProps {
+interface ShlinkWebComponentContainerProps {
   sidebarPresent: Function;
   sidebarNotPresent: Function;
   settings: Settings;
 }
 
-// FIXME Rename this to something else
-export const MenuLayout = (
+export const ShlinkWebComponentContainer = (
   buildShlinkApiClient: ShlinkApiClientBuilder,
+  ShlinkWebComponent: ShlinkWebComponentType,
   ServerError: FC,
-) => withSelectedServer<MenuLayoutProps>(({ selectedServer, sidebarNotPresent, sidebarPresent, settings }) => {
-  const showContent = isReachableServer(selectedServer);
-  const routesPrefix = showContent ? `/server/${selectedServer.id}` : '';
+) => withSelectedServer<ShlinkWebComponentContainerProps>((
+  { selectedServer, sidebarNotPresent, sidebarPresent, settings },
+) => {
+  const selectedServerIsReachable = isReachableServer(selectedServer);
+  const routesPrefix = selectedServerIsReachable ? `/server/${selectedServer.id}` : '';
 
   useEffect(() => {
-    showContent && sidebarPresent();
+    selectedServerIsReachable && sidebarPresent();
     return () => sidebarNotPresent();
   }, []);
 
-  if (!showContent) {
+  if (!selectedServerIsReachable) {
     return <ServerError />;
   }
 

src/common/reducers/sidebar.ts

@@ -1,8 +1,8 @@
 import { createSlice } from '@reduxjs/toolkit';
 
-// TODO This is only used for some components to have extra paddings/styles if existing section has a side menu
-//      Now that's basically the route which renders ShlinkWebComponent, so maybe there's some way to re-think this
-//      logic, and perhaps get rid of a reducer just for that
+// FIXME This is only used for some components to have extra paddings/styles if existing section has a side menu
+//       Now that's basically the route which renders ShlinkWebComponent, so maybe there's some way to re-think this
+//       logic, and perhaps get rid of a reducer just for that
 
 export interface Sidebar {
   sidebarPresent: boolean;

src/common/services/provideServices.ts

@@ -1,13 +1,14 @@
 import type Bottle from 'bottlejs';
+import { ShlinkWebComponent } from '../../../shlink-web-component/src';
 import type { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
 import { ErrorHandler } from '../ErrorHandler';
 import { Home } from '../Home';
 import { MainHeader } from '../MainHeader';
-import { MenuLayout } from '../MenuLayout';
 import { sidebarNotPresent, sidebarPresent } from '../reducers/sidebar';
 import { ScrollToTop } from '../ScrollToTop';
 import { ShlinkVersionsContainer } from '../ShlinkVersionsContainer';
+import { ShlinkWebComponentContainer } from '../ShlinkWebComponentContainer';
 import { HttpClient } from './HttpClient';
 
 export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
@@ -26,8 +27,15 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.decorator('Home', withoutSelectedServer);
   bottle.decorator('Home', connect(['servers'], ['resetSelectedServer']));
 
-  bottle.serviceFactory('MenuLayout', MenuLayout, 'buildShlinkApiClient', 'ServerError');
-  bottle.decorator('MenuLayout', connect(
+  bottle.serviceFactory('ShlinkWebComponent', () => ShlinkWebComponent);
+  bottle.serviceFactory(
+    'ShlinkWebComponentContainer',
+    ShlinkWebComponentContainer,
+    'buildShlinkApiClient',
+    'ShlinkWebComponent',
+    'ServerError',
+  );
+  bottle.decorator('ShlinkWebComponentContainer', connect(
     ['selectedServer', 'settings'],
     ['selectServer', 'sidebarPresent', 'sidebarNotPresent'],
   ));