Remove sidebar reducer, which couple web-client with web-component

src/common/ShlinkVersionsContainer.tsx

@@ -1,17 +1,22 @@
 import classNames from 'classnames';
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
 import type { SelectedServer } from '../servers/data';
-import type { Sidebar } from './reducers/sidebar';
 import { ShlinkVersions } from './ShlinkVersions';
 import './ShlinkVersionsContainer.scss';
 
-export interface ShlinkVersionsContainerProps {
+export type ShlinkVersionsContainerProps = {
   selectedServer: SelectedServer;
-  sidebar: Sidebar;
-}
+};
+
+const SHLINK_CONTAINER_PATH_PATTERN = /^\/server\/[a-zA-Z0-9-]*\/(?!edit)/;
+
+export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => {
+  const { pathname } = useLocation();
+  const withPadding = useMemo(() => SHLINK_CONTAINER_PATH_PATTERN.test(pathname), [pathname]);
 
-export const ShlinkVersionsContainer = ({ selectedServer, sidebar }: ShlinkVersionsContainerProps) => {
   const classes = classNames('text-center', {
-    'shlink-versions-container--with-sidebar': sidebar.sidebarPresent,
+    'shlink-versions-container--with-sidebar': withPadding,
   });
 
   return (

src/common/ShlinkWebComponentContainer.tsx

@@ -1,6 +1,5 @@
 import type { Settings, ShlinkWebComponentType, TagColorsStorage } from '@shlinkio/shlink-web-component';
 import type { FC } from 'react';
-import { useEffect } from 'react';
 import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
 import { isReachableServer } from '../servers/data';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
@@ -8,8 +7,6 @@ import { NotFound } from './NotFound';
 import './ShlinkWebComponentContainer.scss';
 
 interface ShlinkWebComponentContainerProps {
-  sidebarPresent: Function;
-  sidebarNotPresent: Function;
   settings: Settings;
 }
 
@@ -18,17 +15,10 @@ export const ShlinkWebComponentContainer = (
   tagColorsStorage: TagColorsStorage,
   ShlinkWebComponent: ShlinkWebComponentType,
   ServerError: FC,
-) => withSelectedServer<ShlinkWebComponentContainerProps>((
-  { selectedServer, sidebarNotPresent, sidebarPresent, settings },
-) => {
+) => withSelectedServer<ShlinkWebComponentContainerProps>(({ selectedServer, settings }) => {
   const selectedServerIsReachable = isReachableServer(selectedServer);
   const routesPrefix = selectedServerIsReachable ? `/server/${selectedServer.id}` : '';
 
-  useEffect(() => {
-    selectedServerIsReachable && sidebarPresent();
-    return () => sidebarNotPresent();
-  }, []);
-
   if (!selectedServerIsReachable) {
     return <ServerError />;
   }

src/common/reducers/sidebar.ts

@@ -1,26 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-// 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;
-}
-
-const initialState: Sidebar = {
-  sidebarPresent: false,
-};
-
-const { actions, reducer } = createSlice({
-  name: 'shlink/sidebar',
-  initialState,
-  reducers: {
-    sidebarPresent: () => ({ sidebarPresent: true }),
-    sidebarNotPresent: () => ({ sidebarPresent: false }),
-  },
-});
-
-export const { sidebarPresent, sidebarNotPresent } = actions;
-
-export const sidebarReducer = reducer;

src/common/services/provideServices.ts

@@ -5,7 +5,6 @@ import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServ
 import { ErrorHandler } from '../ErrorHandler';
 import { Home } from '../Home';
 import { MainHeader } from '../MainHeader';
-import { sidebarNotPresent, sidebarPresent } from '../reducers/sidebar';
 import { ScrollToTop } from '../ScrollToTop';
 import { ShlinkVersionsContainer } from '../ShlinkVersionsContainer';
 import { ShlinkWebComponentContainer } from '../ShlinkWebComponentContainer';
@@ -36,17 +35,10 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
     'ShlinkWebComponent',
     'ServerError',
   );
-  bottle.decorator('ShlinkWebComponentContainer', connect(
-    ['selectedServer', 'settings'],
-    ['selectServer', 'sidebarPresent', 'sidebarNotPresent'],
-  ));
+  bottle.decorator('ShlinkWebComponentContainer', connect(['selectedServer', 'settings'], ['selectServer']));
 
   bottle.serviceFactory('ShlinkVersionsContainer', () => ShlinkVersionsContainer);
-  bottle.decorator('ShlinkVersionsContainer', connect(['selectedServer', 'sidebar']));
+  bottle.decorator('ShlinkVersionsContainer', connect(['selectedServer']));
 
   bottle.serviceFactory('ErrorHandler', ErrorHandler, 'window', 'console');
-
-  // Actions
-  bottle.serviceFactory('sidebarPresent', () => sidebarPresent);
-  bottle.serviceFactory('sidebarNotPresent', () => sidebarNotPresent);
 };

src/container/types.ts

@@ -1,5 +1,4 @@
 import type { Settings } from '@shlinkio/shlink-web-component';
-import type { Sidebar } from '../common/reducers/sidebar';
 import type { SelectedServer, ServersMap } from '../servers/data';
 
 export interface ShlinkState {
@@ -7,7 +6,6 @@ export interface ShlinkState {
   selectedServer: SelectedServer;
   settings: Settings;
   appUpdated: boolean;
-  sidebar: Sidebar;
 }
 
 export type ConnectDecorator = (props: string[] | null, actions?: string[]) => any;

src/reducers/index.ts

@@ -1,7 +1,6 @@
 import { combineReducers } from '@reduxjs/toolkit';
 import type { IContainer } from 'bottlejs';
 import { appUpdatesReducer } from '../app/reducers/appUpdates';
-import { sidebarReducer } from '../common/reducers/sidebar';
 import type { ShlinkState } from '../container/types';
 import { serversReducer } from '../servers/reducers/servers';
 import { settingsReducer } from '../settings/reducers/settings';
@@ -11,5 +10,4 @@ export const initReducers = (container: IContainer) => combineReducers<ShlinkSta
   servers: serversReducer,
   selectedServer: container.selectedServerReducer,
   settings: settingsReducer,
-  sidebar: sidebarReducer,
 });