Do not inject servers state or actions

This commit is contained in:
Alejandro Celaya
2025-11-14 19:23:48 +01:00
parent ae7aea0e2c
commit a7f2d3224b
38 changed files with 292 additions and 375 deletions

View File

@@ -2,19 +2,17 @@ import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Button, Card } from '@shlinkio/shlink-frontend-kit';
import { clsx } from 'clsx';
import type { FC } from 'react';
import { useEffect } from 'react';
import { ExternalLink } from 'react-external-link';
import { useNavigate } from 'react-router';
import type { ServersMap } from '../servers/data';
import { useServers } from '../servers/reducers/servers';
import { ServersListGroup } from '../servers/ServersListGroup';
import { ShlinkLogo } from './img/ShlinkLogo';
export type HomeProps = {
servers: ServersMap;
};
export const Home = ({ servers }: HomeProps) => {
export const Home: FC = () => {
const navigate = useNavigate();
const { servers } = useServers();
const serversList = Object.values(servers);
const hasServers = serversList.length > 0;

View File

@@ -3,16 +3,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { NavBar } from '@shlinkio/shlink-frontend-kit';
import type { FC } from 'react';
import { Link, useLocation } from 'react-router';
import type { FCWithDeps } from '../container/utils';
import { componentFactory, useDependencies } from '../container/utils';
import { ServersDropdown } from '../servers/ServersDropdown';
import { ShlinkLogo } from './img/ShlinkLogo';
type MainHeaderDeps = {
ServersDropdown: FC;
};
const MainHeader: FCWithDeps<unknown, MainHeaderDeps> = () => {
const { ServersDropdown } = useDependencies(MainHeader);
export const MainHeader: FC = () => {
const { pathname } = useLocation();
const settingsPath = '/settings';
@@ -37,5 +31,3 @@ const MainHeader: FCWithDeps<unknown, MainHeaderDeps> = () => {
</NavBar>
);
};
export const MainHeaderFactory = componentFactory(MainHeader, ['ServersDropdown']);

View File

@@ -9,6 +9,7 @@ import { memo } from 'react';
import type { FCWithDeps } from '../container/utils';
import { componentFactory, useDependencies } from '../container/utils';
import { isReachableServer } from '../servers/data';
import { ServerError } from '../servers/helpers/ServerError';
import type { WithSelectedServerPropsDeps } from '../servers/helpers/withSelectedServer';
import { withSelectedServer } from '../servers/helpers/withSelectedServer';
import { useSelectedServer } from '../servers/reducers/selectedServer';
@@ -33,7 +34,6 @@ const ShlinkWebComponentContainer: FCWithDeps<
const {
buildShlinkApiClient,
TagColorsStorage: tagColorsStorage,
ServerError,
} = useDependencies(ShlinkWebComponentContainer);
const { selectedServer } = useSelectedServer();
@@ -63,5 +63,4 @@ const ShlinkWebComponentContainer: FCWithDeps<
export const ShlinkWebComponentContainerFactory = componentFactory(ShlinkWebComponentContainer, [
'buildShlinkApiClient',
'TagColorsStorage',
'ServerError',
]);

View File

@@ -4,9 +4,7 @@ import type { ConnectDecorator } from '../../container/types';
import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
import { ErrorHandler } from '../ErrorHandler';
import { Home } from '../Home';
import { MainHeaderFactory } from '../MainHeader';
import { ScrollToTop } from '../ScrollToTop';
import { ShlinkVersionsContainer } from '../ShlinkVersionsContainer';
import { ShlinkWebComponentContainerFactory } from '../ShlinkWebComponentContainer';
export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
@@ -19,16 +17,11 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
// Components
bottle.serviceFactory('ScrollToTop', () => ScrollToTop);
bottle.factory('MainHeader', MainHeaderFactory);
bottle.serviceFactory('Home', () => Home);
bottle.decorator('Home', withoutSelectedServer);
bottle.decorator('Home', connect(['servers'], []));
bottle.factory('ShlinkWebComponentContainer', ShlinkWebComponentContainerFactory);
bottle.decorator('ShlinkWebComponentContainer', connect(['settings'], ['selectServer']));
bottle.serviceFactory('ShlinkVersionsContainer', () => ShlinkVersionsContainer);
bottle.decorator('ShlinkWebComponentContainer', connect(['settings'], []));
bottle.serviceFactory('ErrorHandler', () => ErrorHandler);
};