forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-17 21:13:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use apiClient factory to dynamically resolved different values at runtime

Browse Source
This commit is contained in:
Alejandro Celaya
2023-07-26 20:04:50 +02:00
parent 3a0cea1268
commit d49da185d3
33 changed files with 146 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
shlink-web-component/short-urls/helpers/ExportShortUrlsBtn.tsx
View File

@@ -14,7 +14,7 @@ export interface ExportShortUrlsBtnProps {
const itemsPerPage = 20;
export const ExportShortUrlsBtn = (
apiClient: ShlinkApiClient,
apiClientFactory: () => ShlinkApiClient,
{ exportShortUrls }: ReportExporter,
): FC<ExportShortUrlsBtnProps> => ({ amount = 0 }) => {
const [{ tags, search, startDate, endDate, orderBy, tagsMode }] = useShortUrlsQuery();
@@ -22,7 +22,7 @@ export const ExportShortUrlsBtn = (
const exportAllUrls = useCallback(async () => {
const totalPages = amount / itemsPerPage;
const loadAllUrls = async (page = 1): Promise<ShortUrl[]> => {
const { data } = await apiClient.listShortUrls(
const { data } = await apiClientFactory().listShortUrls(
{ page: `${page}`, tags, searchTerm: search, startDate, endDate, orderBy, tagsMode, itemsPerPage },
);

6
shlink-web-component/short-urls/reducers/shortUrlCreation.ts
View File

@@ -1,8 +1,8 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import { createAsyncThunk } from '../../../src/utils/helpers/redux';
import type { ProblemDetailsError, ShlinkApiClient } from '../../api-contract';
import { parseApiError } from '../../api-contract/utils';
import { createAsyncThunk } from '../../utils/redux';
import type { ShortUrl, ShortUrlData } from '../data';
const REDUCER_PREFIX = 'shlink/shortUrlCreation';
@@ -35,9 +35,9 @@ const initialState: ShortUrlCreation = {
error: false,
};
export const createShortUrl = (apiClient: ShlinkApiClient) => createAsyncThunk(
export const createShortUrl = (apiClientFactory: () => ShlinkApiClient) => createAsyncThunk(
`${REDUCER_PREFIX}/createShortUrl`,
(data: ShortUrlData): Promise<ShortUrl> => apiClient.createShortUrl(data),
(data: ShortUrlData): Promise<ShortUrl> => apiClientFactory().createShortUrl(data),
);
export const shortUrlCreationReducerCreator = (createShortUrlThunk: ReturnType<typeof createShortUrl>) => {

6
shlink-web-component/short-urls/reducers/shortUrlDeletion.ts
View File

@@ -1,7 +1,7 @@
import { createAction, createSlice } from '@reduxjs/toolkit';
import { createAsyncThunk } from '../../../src/utils/helpers/redux';
import type { ProblemDetailsError, ShlinkApiClient } from '../../api-contract';
import { parseApiError } from '../../api-contract/utils';
import { createAsyncThunk } from '../../utils/redux';
import type { ShortUrl, ShortUrlIdentifier } from '../data';
const REDUCER_PREFIX = 'shlink/shortUrlDeletion';
@@ -21,10 +21,10 @@ const initialState: ShortUrlDeletion = {
error: false,
};
export const deleteShortUrl = (apiClient: ShlinkApiClient) => createAsyncThunk(
export const deleteShortUrl = (apiClientFactory: () => ShlinkApiClient) => createAsyncThunk(
`${REDUCER_PREFIX}/deleteShortUrl`,
async ({ shortCode, domain }: ShortUrlIdentifier): Promise<ShortUrlIdentifier> => {
await apiClient.deleteShortUrl(shortCode, domain);
await apiClientFactory().deleteShortUrl(shortCode, domain);
return { shortCode, domain };
},
);

6
shlink-web-component/short-urls/reducers/shortUrlDetail.ts
View File

@@ -1,8 +1,8 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import { createAsyncThunk } from '../../../src/utils/helpers/redux';
import type { ProblemDetailsError, ShlinkApiClient } from '../../api-contract';
import { parseApiError } from '../../api-contract/utils';
import { createAsyncThunk } from '../../utils/redux';
import type { ShortUrl, ShortUrlIdentifier } from '../data';
import { shortUrlMatches } from '../helpers';
@@ -22,14 +22,14 @@ const initialState: ShortUrlDetail = {
error: false,
};
export const shortUrlDetailReducerCreator = (apiClient: ShlinkApiClient) => {
export const shortUrlDetailReducerCreator = (apiClientFactory: () => ShlinkApiClient) => {
const getShortUrlDetail = createAsyncThunk(
`${REDUCER_PREFIX}/getShortUrlDetail`,
async ({ shortCode, domain }: ShortUrlIdentifier, { getState }): Promise<ShortUrl> => {
const { shortUrlsList } = getState();
const alreadyLoaded = shortUrlsList?.shortUrls?.data.find((url) => shortUrlMatches(url, shortCode, domain));
return alreadyLoaded ?? await apiClient.getShortUrl(shortCode, domain);
return alreadyLoaded ?? await apiClientFactory().getShortUrl(shortCode, domain);
},
);

6
shlink-web-component/short-urls/reducers/shortUrlEdition.ts
View File

@@ -1,8 +1,8 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import { createAsyncThunk } from '../../../src/utils/helpers/redux';
import type { ProblemDetailsError, ShlinkApiClient } from '../../api-contract';
import { parseApiError } from '../../api-contract/utils';
import { createAsyncThunk } from '../../utils/redux';
import type { EditShortUrlData, ShortUrl, ShortUrlIdentifier } from '../data';
const REDUCER_PREFIX = 'shlink/shortUrlEdition';
@@ -27,10 +27,10 @@ const initialState: ShortUrlEdition = {
error: false,
};
export const editShortUrl = (apiClient: ShlinkApiClient) => createAsyncThunk(
export const editShortUrl = (apiClientFactory: () => ShlinkApiClient) => createAsyncThunk(
`${REDUCER_PREFIX}/editShortUrl`,
({ shortCode, domain, data }: EditShortUrl): Promise<ShortUrl> =>
apiClient.updateShortUrl(shortCode, domain, data as any) // TODO parse dates
apiClientFactory().updateShortUrl(shortCode, domain, data as any) // TODO parse dates
,
);

8
shlink-web-component/short-urls/reducers/shortUrlsList.ts
View File

@@ -1,7 +1,7 @@
import { createSlice } from '@reduxjs/toolkit';
import { assocPath, last, pipe, reject } from 'ramda';
import { createAsyncThunk } from '../../../src/utils/helpers/redux';
import type { ShlinkApiClient, ShlinkShortUrlsListParams, ShlinkShortUrlsResponse } from '../../api-contract';
import { createAsyncThunk } from '../../utils/redux';
import { createNewVisits } from '../../visits/reducers/visitCreation';
import type { ShortUrl } from '../data';
import { shortUrlMatches } from '../helpers';
@@ -23,9 +23,11 @@ const initialState: ShortUrlsList = {
error: false,
};
export const listShortUrls = (apiClient: ShlinkApiClient) => createAsyncThunk(
export const listShortUrls = (apiClientFactory: () => ShlinkApiClient) => createAsyncThunk(
`${REDUCER_PREFIX}/listShortUrls`,
(params: ShlinkShortUrlsListParams | void): Promise<ShlinkShortUrlsResponse> => apiClient.listShortUrls(params ?? {}),
(params: ShlinkShortUrlsListParams | void): Promise<ShlinkShortUrlsResponse> => apiClientFactory().listShortUrls(
params ?? {},
),
);
export const shortUrlsListReducerCreator = (

12
shlink-web-component/short-urls/services/provideServices.ts
View File

@@ -54,7 +54,7 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
bottle.serviceFactory('QrCodeModal', QrCodeModal, 'ImageDownloader');
bottle.serviceFactory('ShortUrlsFilteringBar', ShortUrlsFilteringBar, 'ExportShortUrlsBtn', 'TagsSelector');
bottle.serviceFactory('ExportShortUrlsBtn', ExportShortUrlsBtn, 'apiClient', 'ReportExporter');
bottle.serviceFactory('ExportShortUrlsBtn', ExportShortUrlsBtn, 'apiClientFactory', 'ReportExporter');
// Reducers
bottle.serviceFactory(
@@ -75,20 +75,20 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
bottle.serviceFactory('shortUrlDeletionReducerCreator', shortUrlDeletionReducerCreator, 'deleteShortUrl');
bottle.serviceFactory('shortUrlDeletionReducer', prop('reducer'), 'shortUrlDeletionReducerCreator');
bottle.serviceFactory('shortUrlDetailReducerCreator', shortUrlDetailReducerCreator, 'apiClient');
bottle.serviceFactory('shortUrlDetailReducerCreator', shortUrlDetailReducerCreator, 'apiClientFactory');
bottle.serviceFactory('shortUrlDetailReducer', prop('reducer'), 'shortUrlDetailReducerCreator');
// Actions
bottle.serviceFactory('listShortUrls', listShortUrls, 'apiClient');
bottle.serviceFactory('listShortUrls', listShortUrls, 'apiClientFactory');
bottle.serviceFactory('createShortUrl', createShortUrl, 'apiClient');
bottle.serviceFactory('createShortUrl', createShortUrl, 'apiClientFactory');
bottle.serviceFactory('resetCreateShortUrl', prop('resetCreateShortUrl'), 'shortUrlCreationReducerCreator');
bottle.serviceFactory('deleteShortUrl', deleteShortUrl, 'apiClient');
bottle.serviceFactory('deleteShortUrl', deleteShortUrl, 'apiClientFactory');
bottle.serviceFactory('resetDeleteShortUrl', prop('resetDeleteShortUrl'), 'shortUrlDeletionReducerCreator');
bottle.serviceFactory('shortUrlDeleted', () => shortUrlDeleted);
bottle.serviceFactory('getShortUrlDetail', prop('getShortUrlDetail'), 'shortUrlDetailReducerCreator');
bottle.serviceFactory('editShortUrl', editShortUrl, 'apiClient');
bottle.serviceFactory('editShortUrl', editShortUrl, 'apiClientFactory');
};