forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-23 15:06:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace local ShlinkApiClient with the one from shlink-js-sdk

Browse Source
This commit is contained in:
Alejandro Celaya
2023-08-29 23:12:25 +02:00
parent ccfedc20e9
commit 9f7ac09fb0
14 changed files with 62 additions and 745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
src/api/services/ShlinkApiClient.ts
View File

@@ -1,186 +0,0 @@
import { orderToString, stringifyQuery } from '@shlinkio/shlink-frontend-kit';
import type {
RegularNotFound,
ShlinkApiClient as BaseShlinkApiClient,
ShlinkCreateShortUrlData,
ShlinkDomainRedirects,
ShlinkDomainsResponse,
ShlinkEditDomainRedirects,
ShlinkEditShortUrlData,
ShlinkHealth,
ShlinkMercureInfo,
ShlinkShortUrl,
ShlinkShortUrlsListNormalizedParams,
ShlinkShortUrlsListParams,
ShlinkShortUrlsResponse,
ShlinkTags,
ShlinkTagsResponse,
ShlinkTagsStatsResponse,
ShlinkVisits,
ShlinkVisitsOverview,
ShlinkVisitsParams,
} from '@shlinkio/shlink-web-component/api-contract';
import {
ErrorTypeV2,
ErrorTypeV3,
} from '@shlinkio/shlink-web-component/api-contract';
import { isEmpty, isNil, reject } from 'ramda';
import type { HttpClient, RequestOptions } from '../../common/services/HttpClient';
import { replaceAuthorityFromUri } from '../../utils/helpers/uri';
import type { OptionalString } from '../../utils/utils';
type ApiVersion = 2 | 3;
type ShlinkRequestOptions = {
url: string;
method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
query?: object;
body?: object;
domain?: string;
};
const buildShlinkBaseUrl = (url: string, version: ApiVersion) => `${url}/rest/v${version}`;
const rejectNilProps = reject(isNil);
const normalizeListParams = (
{ orderBy = {}, excludeMaxVisitsReached, excludePastValidUntil, ...rest }: ShlinkShortUrlsListParams,
): ShlinkShortUrlsListNormalizedParams => ({
...rest,
excludeMaxVisitsReached: excludeMaxVisitsReached === true ? 'true' : undefined,
excludePastValidUntil: excludePastValidUntil === true ? 'true' : undefined,
orderBy: orderToString(orderBy),
});
const isRegularNotFound = (error: unknown): error is RegularNotFound => {
if (error === null || !(typeof error === 'object' && 'type' in error && 'status' in error)) {
return false;
}
return (error.type === ErrorTypeV2.NOT_FOUND || error.type === ErrorTypeV3.NOT_FOUND) && error.status === 404;
};
export class ShlinkApiClient implements BaseShlinkApiClient {
private apiVersion: ApiVersion;
public constructor(
private readonly httpClient: HttpClient,
public readonly baseUrl: string,
public readonly apiKey: string,
) {
this.apiVersion = 3;
}
public readonly listShortUrls = async (params: ShlinkShortUrlsListParams = {}): Promise<ShlinkShortUrlsResponse> =>
this.performRequest<{ shortUrls: ShlinkShortUrlsResponse }>(
{ url: '/short-urls', query: normalizeListParams(params) },
).then(({ shortUrls }) => shortUrls);
public readonly createShortUrl = async (options: ShlinkCreateShortUrlData): Promise<ShlinkShortUrl> => {
const body = reject((value) => isEmpty(value) || isNil(value), options as any);
return this.performRequest<ShlinkShortUrl>({ url: '/short-urls', method: 'POST', body });
};
public readonly getShortUrlVisits = async (shortCode: string, query?: ShlinkVisitsParams): Promise<ShlinkVisits> =>
this.performRequest<{ visits: ShlinkVisits }>({ url: `/short-urls/${shortCode}/visits`, query })
.then(({ visits }) => visits);
public readonly getTagVisits = async (tag: string, query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
this.performRequest<{ visits: ShlinkVisits }>({ url: `/tags/${tag}/visits`, query }).then(({ visits }) => visits);
public readonly getDomainVisits = async (domain: string, query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
this.performRequest<{ visits: ShlinkVisits }>({ url: `/domains/${domain}/visits`, query }).then(({ visits }) => visits);
public readonly getOrphanVisits = async (query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
this.performRequest<{ visits: ShlinkVisits }>({ url: '/visits/orphan', query }).then(({ visits }) => visits);
public readonly getNonOrphanVisits = async (query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
this.performRequest<{ visits: ShlinkVisits }>({ url: '/visits/non-orphan', query }).then(({ visits }) => visits);
public readonly getVisitsOverview = async (): Promise<ShlinkVisitsOverview> =>
this.performRequest<{ visits: ShlinkVisitsOverview }>({ url: '/visits' }).then(({ visits }) => visits);
public readonly getShortUrl = async (shortCode: string, domain?: OptionalString): Promise<ShlinkShortUrl> =>
this.performRequest<ShlinkShortUrl>({ url: `/short-urls/${shortCode}`, query: { domain } });
public readonly deleteShortUrl = async (shortCode: string, domain?: OptionalString): Promise<void> =>
this.performEmptyRequest({ url: `/short-urls/${shortCode}`, method: 'DELETE', query: { domain } });
public readonly updateShortUrl = async (
shortCode: string,
domain: OptionalString,
body: ShlinkEditShortUrlData,
): Promise<ShlinkShortUrl> =>
this.performRequest<ShlinkShortUrl>({ url: `/short-urls/${shortCode}`, method: 'PATCH', query: { domain }, body });
public readonly listTags = async (): Promise<ShlinkTags> =>
this.performRequest<{ tags: ShlinkTagsResponse }>({ url: '/tags', query: { withStats: 'true' } })
.then(({ tags }) => tags)
.then(({ data, stats }) => ({ tags: data, stats }));
public readonly tagsStats = async (): Promise<ShlinkTags> =>
this.performRequest<{ tags: ShlinkTagsStatsResponse }>({ url: '/tags/stats' })
.then(({ tags }) => tags)
.then(({ data }) => ({ tags: data.map(({ tag }) => tag), stats: data }));
public readonly deleteTags = async (tags: string[]): Promise<{ tags: string[] }> =>
this.performEmptyRequest({ url: '/tags', method: 'DELETE', query: { tags } }).then(() => ({ tags }));
public readonly editTag = async (oldName: string, newName: string): Promise<{ oldName: string; newName: string }> =>
this.performEmptyRequest({
url: '/tags',
method: 'PUT',
body: { oldName, newName },
}).then(() => ({ oldName, newName }));
public readonly health = async (domain?: string): Promise<ShlinkHealth> => this.performRequest<ShlinkHealth>(
{ url: '/health', domain },
);
public readonly mercureInfo = async (): Promise<ShlinkMercureInfo> =>
this.performRequest<ShlinkMercureInfo>({ url: '/mercure-info' });
public readonly listDomains = async (): Promise<ShlinkDomainsResponse> =>
this.performRequest<{ domains: ShlinkDomainsResponse }>({ url: '/domains' }).then(({ domains }) => domains);
public readonly editDomainRedirects = async (
domainRedirects: ShlinkEditDomainRedirects,
): Promise<ShlinkDomainRedirects> =>
this.performRequest<ShlinkDomainRedirects>({ url: '/domains/redirects', method: 'PATCH', body: domainRedirects });
private readonly performRequest = async <T>(requestOptions: ShlinkRequestOptions): Promise<T> =>
this.httpClient.fetchJson<T>(...this.toFetchParams(requestOptions)).catch(
this.handleFetchError(() => this.httpClient.fetchJson<T>(...this.toFetchParams(requestOptions))),
);
private readonly performEmptyRequest = async (requestOptions: ShlinkRequestOptions): Promise<void> =>
this.httpClient.fetchEmpty(...this.toFetchParams(requestOptions)).catch(
this.handleFetchError(() => this.httpClient.fetchEmpty(...this.toFetchParams(requestOptions))),
);
private readonly toFetchParams = ({
url,
method = 'GET',
query = {},
body,
domain,
}: ShlinkRequestOptions): [string, RequestOptions] => {
const normalizedQuery = stringifyQuery(rejectNilProps(query));
const stringifiedQuery = isEmpty(normalizedQuery) ? '' : `?${normalizedQuery}`;
const baseUrl = domain ? replaceAuthorityFromUri(this.baseUrl, domain) : this.baseUrl;
return [`${buildShlinkBaseUrl(baseUrl, this.apiVersion)}${url}${stringifiedQuery}`, {
method,
body: body && JSON.stringify(body),
headers: { 'X-Api-Key': this.apiKey },
}];
};
private readonly handleFetchError = (retryFetch: Function) => (e: unknown) => {
if (!isRegularNotFound(e)) {
throw e;
}
// If we capture a not found error, let's assume this Shlink version does not support API v3, so we decrease to
// v2 and retry
this.apiVersion = 2;
return retryFetch();
};
}

15
src/api/services/ShlinkApiClientBuilder.ts
View File

@@ -1,8 +1,8 @@
import type { HttpClient } from '../../common/services/HttpClient';
import type { HttpClient } from '@shlinkio/shlink-js-sdk';
import { ShlinkApiClient } from '@shlinkio/shlink-js-sdk';
import type { GetState } from '../../container/types';
import type { ServerWithId } from '../../servers/data';
import { hasServerData } from '../../servers/data';
import { ShlinkApiClient } from './ShlinkApiClient';
const apiClients: Record<string, ShlinkApiClient> = {};
@@ -18,16 +18,15 @@ const getSelectedServerFromState = (getState: GetState): ServerWithId => {
};
export const buildShlinkApiClient = (httpClient: HttpClient) => (getStateOrSelectedServer: GetState | ServerWithId) => {
const { url, apiKey } = isGetState(getStateOrSelectedServer)
const { url: baseUrl, apiKey } = isGetState(getStateOrSelectedServer)
? getSelectedServerFromState(getStateOrSelectedServer)
: getStateOrSelectedServer;
const clientKey = `${url}_${apiKey}`;
const serverKey = `${apiKey}_${baseUrl}`;
if (!apiClients[clientKey]) {
apiClients[clientKey] = new ShlinkApiClient(httpClient, url, apiKey);
}
const apiClient = apiClients[serverKey] ?? new ShlinkApiClient(httpClient, { apiKey, baseUrl });
apiClients[serverKey] = apiClient;
return apiClients[clientKey];
return apiClient;
};
export type ShlinkApiClientBuilder = ReturnType<typeof buildShlinkApiClient>;

46
src/common/services/HttpClient.ts
View File

@@ -1,46 +0,0 @@
type Fetch = typeof window.fetch;
export type RequestOptions = {
method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
body?: string;
headers?: Record<string, string>;
};
const applicationJsonHeader = { 'Content-Type': 'application/json' };
const withJsonContentType = (options?: RequestOptions): RequestInit | undefined => {
if (!options?.body) {
return options;
}
return options ? {
...options,
headers: {
...(options.headers ?? {}),
...applicationJsonHeader,
},
} : {
headers: applicationJsonHeader,
};
};
export class HttpClient {
constructor(private readonly fetch: Fetch) {}
public readonly fetchJson = <T>(url: string, options?: RequestOptions): Promise<T> =>
this.fetch(url, withJsonContentType(options)).then(async (resp) => {
const json = await resp.json();
if (!resp.ok) {
throw json;
}
return json as T;
});
public readonly fetchEmpty = (url: string, options?: RequestOptions): Promise<void> =>
this.fetch(url, withJsonContentType(options)).then(async (resp) => {
if (!resp.ok) {
throw await resp.json();
}
});
}

4
src/common/services/provideServices.ts
View File

@@ -1,3 +1,4 @@
import { FetchHttpClient } from '@shlinkio/shlink-js-sdk/browser';
import { ShlinkWebComponent } from '@shlinkio/shlink-web-component';
import type Bottle from 'bottlejs';
import type { ConnectDecorator } from '../../container/types';
@@ -8,14 +9,13 @@ import { MainHeader } from '../MainHeader';
import { ScrollToTop } from '../ScrollToTop';
import { ShlinkVersionsContainer } from '../ShlinkVersionsContainer';
import { ShlinkWebComponentContainer } from '../ShlinkWebComponentContainer';
import { HttpClient } from './HttpClient';
export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
// Services
bottle.constant('window', window);
bottle.constant('console', console);
bottle.constant('fetch', window.fetch.bind(window));
bottle.service('HttpClient', HttpClient, 'fetch');
bottle.service('HttpClient', FetchHttpClient, 'fetch');
// Components
bottle.serviceFactory('ScrollToTop', () => ScrollToTop);

4
src/servers/reducers/remoteServers.ts
View File

@@ -1,5 +1,5 @@
import type { HttpClient } from '@shlinkio/shlink-js-sdk';
import pack from '../../../package.json';
import type { HttpClient } from '../../common/services/HttpClient';
import { createAsyncThunk } from '../../utils/helpers/redux';
import type { ServerData } from '../data';
import { hasServerData } from '../data';
@@ -10,7 +10,7 @@ const responseToServersList = (data: any): ServerData[] => (Array.isArray(data)
export const fetchServers = (httpClient: HttpClient) => createAsyncThunk(
'shlink/remoteServers/fetchServers',
async (_: void, { dispatch }): Promise<void> => {
const resp = await httpClient.fetchJson<any>(`${pack.homepage}/servers.json`);
const resp = await httpClient.jsonRequest<any>(`${pack.homepage}/servers.json`);
const result = responseToServersList(resp);
dispatch(createServers(result));

4
src/servers/reducers/selectedServer.ts
View File

@@ -42,8 +42,8 @@ export const selectServer = (buildShlinkApiClient: ShlinkApiClientBuilder) => cr
}
try {
const { health } = buildShlinkApiClient(selectedServer);
const { version, printableVersion } = await getServerVersion(selectedServer, health);
const apiClient = buildShlinkApiClient(selectedServer);
const { version, printableVersion } = await getServerVersion(selectedServer, () => apiClient.health());
return {
...selectedServer,