2023-07-23 19:30:59 +03:00
|
|
|
import type { Store } from '@reduxjs/toolkit';
|
2023-07-24 10:48:41 +03:00
|
|
|
import type Bottle from 'bottlejs';
|
|
|
|
import type { FC, ReactNode } from 'react';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
2023-07-23 19:30:59 +03:00
|
|
|
import { Provider } from 'react-redux';
|
2023-07-16 23:54:49 +03:00
|
|
|
import type { SemVer } from '../utils/helpers/version';
|
2023-07-24 18:30:58 +03:00
|
|
|
import type { ShlinkApiClient } from './api-contract';
|
2023-07-24 10:48:41 +03:00
|
|
|
import { setUpStore } from './container/store';
|
2023-07-16 23:54:49 +03:00
|
|
|
import { FeaturesProvider, useFeatures } from './utils/features';
|
2023-07-24 18:30:58 +03:00
|
|
|
import { RoutesPrefixProvider } from './utils/routesPrefix';
|
2023-07-23 19:30:59 +03:00
|
|
|
import type { Settings } from './utils/settings';
|
|
|
|
import { SettingsProvider } from './utils/settings';
|
2023-07-16 23:54:49 +03:00
|
|
|
|
|
|
|
type ShlinkWebComponentProps = {
|
|
|
|
routesPrefix?: string;
|
2023-07-23 19:30:59 +03:00
|
|
|
settings?: Settings;
|
2023-07-24 10:48:41 +03:00
|
|
|
serverVersion: SemVer;
|
2023-07-24 18:30:58 +03:00
|
|
|
apiClient: ShlinkApiClient;
|
2023-07-16 23:54:49 +03:00
|
|
|
};
|
|
|
|
|
2023-07-24 10:48:41 +03:00
|
|
|
export const createShlinkWebComponent = (
|
|
|
|
bottle: Bottle,
|
|
|
|
): FC<ShlinkWebComponentProps> => ({ routesPrefix = '', serverVersion, settings, apiClient }) => {
|
2023-07-16 23:54:49 +03:00
|
|
|
const features = useFeatures(serverVersion);
|
2023-07-24 10:48:41 +03:00
|
|
|
const mainContent = useRef<ReactNode>();
|
|
|
|
const [theStore, setStore] = useState<Store | undefined>();
|
2023-07-16 23:54:49 +03:00
|
|
|
|
2023-07-24 10:48:41 +03:00
|
|
|
useEffect(() => {
|
|
|
|
bottle.constant('apiClient', apiClient);
|
2023-07-16 23:54:49 +03:00
|
|
|
|
2023-07-24 10:48:41 +03:00
|
|
|
// It's important to not try to resolve services before the API client has been registered, as many other services
|
|
|
|
// depend on it
|
|
|
|
const { container } = bottle;
|
|
|
|
const { Main } = container;
|
2023-07-24 18:30:58 +03:00
|
|
|
mainContent.current = <Main />;
|
2023-07-24 10:48:41 +03:00
|
|
|
setStore(setUpStore(container));
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return !theStore ? <></> : (
|
|
|
|
<Provider store={theStore}>
|
2023-07-23 19:30:59 +03:00
|
|
|
<SettingsProvider value={settings}>
|
|
|
|
<FeaturesProvider value={features}>
|
2023-07-24 18:30:58 +03:00
|
|
|
<RoutesPrefixProvider value={routesPrefix}>
|
|
|
|
{mainContent.current}
|
|
|
|
</RoutesPrefixProvider>
|
2023-07-23 19:30:59 +03:00
|
|
|
</FeaturesProvider>
|
|
|
|
</SettingsProvider>
|
|
|
|
</Provider>
|
2023-07-16 23:54:49 +03:00
|
|
|
);
|
|
|
|
};
|