mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-09 01:37:24 +03:00
Decouple shlink-web-component from NotFound component
This commit is contained in:
parent
c73a592fd1
commit
5ec5396da6
4 changed files with 19 additions and 13 deletions
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue