Decouple shlink-web-component from NotFound component

This commit is contained in:
Alejandro Celaya 2023-07-31 20:52:08 +02:00
parent c73a592fd1
commit 5ec5396da6
4 changed files with 19 additions and 13 deletions

View file

@ -1,15 +1,18 @@
import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import type { FC } from 'react';
import type { FC, ReactNode } from 'react';
import { useEffect } from 'react';
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
import { NotFound } from '../src/common/NotFound';
import { AsideMenu } from './common/AsideMenu';
import { useFeature } from './utils/features';
import { useSwipeable, useToggle } from './utils/helpers/hooks';
import { useRoutesPrefix } from './utils/routesPrefix';
type MainProps = {
createNotFound?: (nonPrefixedHomePath: string) => ReactNode;
};
export const Main = (
TagsList: FC,
ShortUrlsList: FC,
@ -22,7 +25,7 @@ export const Main = (
Overview: FC,
EditShortUrl: FC,
ManageDomains: FC,
): FC => () => {
): FC<MainProps> => ({ createNotFound }) => {
const location = useLocation();
const routesPrefix = useRoutesPrefix();
const [sidebarVisible, toggleSidebar, showSidebar, hideSidebar] = useToggle();
@ -56,10 +59,7 @@ export const Main = (
<Route path="/non-orphan-visits/*" element={<NonOrphanVisits />} />
<Route path="/manage-tags" element={<TagsList />} />
<Route path="/manage-domains" element={<ManageDomains />} />
<Route
path="*"
element={<NotFound to={`${routesPrefix}/list-short-urls/1`}>List short URLs</NotFound>}
/>
{createNotFound && <Route path="*" element={createNotFound('/list-short-urls/1')} />}
</Routes>
</div>
</div>

View file

@ -11,10 +11,11 @@ import type { Settings } from './utils/settings';
import { SettingsProvider } from './utils/settings';
type ShlinkWebComponentProps = {
routesPrefix?: string;
settings?: Settings;
serverVersion: SemVer;
apiClient: ShlinkApiClient;
routesPrefix?: string;
settings?: Settings;
createNotFound?: (nonPrefixedHomePath: string) => ReactNode;
};
// FIXME
@ -24,7 +25,7 @@ let apiClientRef: ShlinkApiClient;
export const createShlinkWebComponent = (
bottle: Bottle,
): FC<ShlinkWebComponentProps> => ({ serverVersion, apiClient, settings, routesPrefix = '' }) => {
): FC<ShlinkWebComponentProps> => ({ serverVersion, apiClient, settings, routesPrefix = '', createNotFound }) => {
const features = useFeatures(serverVersion);
const mainContent = useRef<ReactNode>();
const [theStore, setStore] = useState<Store | undefined>();
@ -37,7 +38,7 @@ export const createShlinkWebComponent = (
// depend on it
const { container } = bottle;
const { Main, store, loadMercureInfo } = container;
mainContent.current = <Main />;
mainContent.current = <Main createNotFound={createNotFound} />;
setStore(store);
// Load mercure info

View file

@ -2,10 +2,10 @@ import classNames from 'classnames';
import type { FC } from 'react';
import { useEffect } from 'react';
import { Route, Routes, useLocation } from 'react-router-dom';
import type { Settings } from '../../shlink-web-component';
import { AppUpdateBanner } from '../common/AppUpdateBanner';
import { NotFound } from '../common/NotFound';
import type { ServersMap } from '../servers/data';
import type { Settings } from '../settings/reducers/settings';
import { forceUpdate } from '../utils/helpers/sw';
import { changeThemeInMarkup } from '../utils/theme';
import './App.scss';

View file

@ -5,6 +5,7 @@ import { ShlinkWebComponent } from '../../shlink-web-component';
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';
interface MenuLayoutProps {
@ -19,6 +20,7 @@ export const MenuLayout = (
ServerError: FC,
) => withSelectedServer<MenuLayoutProps>(({ selectedServer, sidebarNotPresent, sidebarPresent, settings }) => {
const showContent = isReachableServer(selectedServer);
const routesPrefix = showContent ? `/server/${selectedServer.id}` : '';
useEffect(() => {
showContent && sidebarPresent();
@ -34,7 +36,10 @@ export const MenuLayout = (
serverVersion={selectedServer.version}
apiClient={buildShlinkApiClient(selectedServer)}
settings={settings}
routesPrefix={`/server/${selectedServer.id}`}
routesPrefix={routesPrefix}
createNotFound={(nonPrefixedHomePath) => (
<NotFound to={`${routesPrefix}${nonPrefixedHomePath}`}>List short URLs</NotFound>
)}
/>
);
}, ServerError);