forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-02-28 12:46:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finished migrating remaining reducers to TS

Browse Source
This commit is contained in:
Alejandro Celaya
2020-08-28 18:33:37 +02:00
parent 54290d4c9a
commit dcf72e6818
11 changed files with 274 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/container/types.ts
View File

@@ -12,6 +12,9 @@ import { ShortUrlsList } from '../short-urls/reducers/shortUrlsList';
import { TagDeletion } from '../tags/reducers/tagDelete';
import { TagEdition } from '../tags/reducers/tagEdit';
import { TagsList } from '../tags/reducers/tagsList';
import { ShortUrlDetail } from '../visits/reducers/shortUrlDetail';
import { ShortUrlVisits } from '../visits/reducers/shortUrlVisits';
import { TagVisits } from '../visits/reducers/tagVisits';
export interface ShlinkState {
servers: ServersMap;
@@ -23,9 +26,9 @@ export interface ShlinkState {
shortUrlTags: ShortUrlTags;
shortUrlMeta: ShortUrlMetaEdition;
shortUrlEdition: ShortUrlEdition;
shortUrlVisits: any;
tagVisits: any;
shortUrlDetail: any;
shortUrlVisits: ShortUrlVisits;
tagVisits: TagVisits;
shortUrlDetail: ShortUrlDetail;
tagsList: TagsList;
tagDelete: TagDeletion;
tagEdit: TagEdition;

14
src/utils/services/types.ts
View File

@@ -1,3 +1,5 @@
import { Visit } from '../../visits/types'; // FIXME Should be defined here
export interface ShlinkMercureInfo {
token: string;
mercureHubUrl: string;
@@ -16,7 +18,17 @@ interface ShlinkTagsStats {
export interface ShlinkTags {
tags: string[];
stats?: ShlinkTagsStats[];
stats?: ShlinkTagsStats[]; // TODO Is only optional in old versions
}
export interface ShlinkPaginator {
currentPage: number;
pagesCount: number;
}
export interface ShlinkVisits {
data: Visit[];
pagination?: ShlinkPaginator; // TODO Is only optional in old versions
}
export interface ProblemDetailsError {

67
src/visits/reducers/common.js → src/visits/reducers/common.ts
View File

@@ -1,15 +1,55 @@
import { flatten, prop, range, splitEvery } from 'ramda';
import { Action, Dispatch } from 'redux';
import { ShlinkPaginator, ShlinkVisits } from '../../utils/services/types';
import { GetState } from '../../container/types';
import { Visit } from '../types';
const ITEMS_PER_PAGE = 5000;
const PARALLEL_REQUESTS_COUNT = 4;
const PARALLEL_STARTING_PAGE = 2;
const isLastPage = ({ currentPage, pagesCount }) => currentPage >= pagesCount;
const calcProgress = (total, current) => current * 100 / total;
const isLastPage = ({ currentPage, pagesCount }: ShlinkPaginator): boolean => currentPage >= pagesCount;
const calcProgress = (total: number, current: number): number => current * 100 / total;
export const getVisitsWithLoader = async (visitsLoader, extraFinishActionData, actionMap, dispatch, getState) => {
type VisitsLoader = (page: number, itemsPerPage: number) => Promise<ShlinkVisits>;
interface ActionMap {
start: string;
large: string;
finish: string;
error: string;
progress: string;
}
export const getVisitsWithLoader = async <T extends Action<string> & { visits: Visit[] }>(
visitsLoader: VisitsLoader,
extraFinishActionData: Partial<T>,
actionMap: ActionMap,
dispatch: Dispatch,
getState: GetState,
) => {
dispatch({ type: actionMap.start });
const loadVisitsInParallel = async (pages: number[]): Promise<Visit[]> =>
Promise.all(pages.map(async (page) => visitsLoader(page, ITEMS_PER_PAGE).then(prop('data')))).then(flatten);
const loadPagesBlocks = async (pagesBlocks: number[][], index = 0): Promise<Visit[]> => {
const { shortUrlVisits: { cancelLoad } } = getState();
if (cancelLoad) {
return [];
}
const data = await loadVisitsInParallel(pagesBlocks[index]);
dispatch({ type: actionMap.progress, progress: calcProgress(pagesBlocks.length, index + PARALLEL_STARTING_PAGE) });
if (index < pagesBlocks.length - 1) {
return data.concat(await loadPagesBlocks(pagesBlocks, index + 1));
}
return data;
};
const loadVisits = async (page = 1) => {
const { pagination, data } = await visitsLoader(page, ITEMS_PER_PAGE);
@@ -29,27 +69,6 @@ export const getVisitsWithLoader = async (visitsLoader, extraFinishActionData, a
return data.concat(await loadPagesBlocks(pagesBlocks));
};
const loadPagesBlocks = async (pagesBlocks, index = 0) => {
const { shortUrlVisits: { cancelLoad } } = getState();
if (cancelLoad) {
return [];
}
const data = await loadVisitsInParallel(pagesBlocks[index]);
dispatch({ type: actionMap.progress, progress: calcProgress(pagesBlocks.length, index + PARALLEL_STARTING_PAGE) });
if (index < pagesBlocks.length - 1) {
return data.concat(await loadPagesBlocks(pagesBlocks, index + 1));
}
return data;
};
const loadVisitsInParallel = (pages) =>
Promise.all(pages.map((page) => visitsLoader(page, ITEMS_PER_PAGE).then(prop('data')))).then(flatten);
try {
const visits = await loadVisits();

40
src/visits/reducers/shortUrlDetail.js
View File

@@ -1,40 +0,0 @@
import { handleActions } from 'redux-actions';
import PropTypes from 'prop-types';
import { shortUrlType } from '../../short-urls/reducers/shortUrlsList';
/* eslint-disable padding-line-between-statements */
export const GET_SHORT_URL_DETAIL_START = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_START';
export const GET_SHORT_URL_DETAIL_ERROR = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_ERROR';
export const GET_SHORT_URL_DETAIL = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL';
/* eslint-enable padding-line-between-statements */
export const shortUrlDetailType = PropTypes.shape({
shortUrl: shortUrlType,
loading: PropTypes.bool,
error: PropTypes.bool,
});
const initialState = {
shortUrl: {},
loading: false,
error: false,
};
export default handleActions({
[GET_SHORT_URL_DETAIL_START]: () => ({ ...initialState, loading: true }),
[GET_SHORT_URL_DETAIL_ERROR]: () => ({ ...initialState, loading: false, error: true }),
[GET_SHORT_URL_DETAIL]: (state, { shortUrl }) => ({ ...initialState, shortUrl }),
}, initialState);
export const getShortUrlDetail = (buildShlinkApiClient) => (shortCode, domain) => async (dispatch, getState) => {
dispatch({ type: GET_SHORT_URL_DETAIL_START });
const { getShortUrl } = buildShlinkApiClient(getState);
try {
const shortUrl = await getShortUrl(shortCode, domain);
dispatch({ shortUrl, type: GET_SHORT_URL_DETAIL });
} catch (e) {
dispatch({ type: GET_SHORT_URL_DETAIL_ERROR });
}
};

58
src/visits/reducers/shortUrlDetail.ts Normal file
View File

@@ -0,0 +1,58 @@
import PropTypes from 'prop-types';
import { Action, Dispatch } from 'redux';
import { shortUrlType } from '../../short-urls/reducers/shortUrlsList';
import { ShortUrl } from '../../short-urls/data';
import { buildReducer } from '../../utils/helpers/redux';
import { ShlinkApiClientBuilder } from '../../utils/services/ShlinkApiClientBuilder';
import { OptionalString } from '../../utils/utils';
import { GetState } from '../../container/types';
/* eslint-disable padding-line-between-statements */
export const GET_SHORT_URL_DETAIL_START = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_START';
export const GET_SHORT_URL_DETAIL_ERROR = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_ERROR';
export const GET_SHORT_URL_DETAIL = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL';
/* eslint-enable padding-line-between-statements */
/** @deprecated Use ShortUrlDetail interface instead */
export const shortUrlDetailType = PropTypes.shape({
shortUrl: shortUrlType,
loading: PropTypes.bool,
error: PropTypes.bool,
});
export interface ShortUrlDetail {
shortUrl?: ShortUrl;
loading: boolean;
error: boolean;
}
export interface ShortUrlDetailAction extends Action<string> {
shortUrl: ShortUrl;
}
const initialState: ShortUrlDetail = {
loading: false,
error: false,
};
export default buildReducer<ShortUrlDetail, ShortUrlDetailAction>({
[GET_SHORT_URL_DETAIL_START]: () => ({ loading: true, error: false }),
[GET_SHORT_URL_DETAIL_ERROR]: () => ({ loading: false, error: true }),
[GET_SHORT_URL_DETAIL]: (_, { shortUrl }) => ({ shortUrl, ...initialState }),
}, initialState);
export const getShortUrlDetail = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
shortCode: string,
domain: OptionalString,
) => async (dispatch: Dispatch, getState: GetState) => {
dispatch({ type: GET_SHORT_URL_DETAIL_START });
const { getShortUrl } = buildShlinkApiClient(getState);
try {
const shortUrl = await getShortUrl(shortCode, domain);
dispatch<ShortUrlDetailAction>({ shortUrl, type: GET_SHORT_URL_DETAIL });
} catch (e) {
dispatch({ type: GET_SHORT_URL_DETAIL_ERROR });
}
};

42
src/visits/reducers/shortUrlVisits.js → src/visits/reducers/shortUrlVisits.ts
View File

@@ -1,9 +1,14 @@
import { createAction, handleActions } from 'redux-actions';
import PropTypes from 'prop-types';
import { Action, Dispatch } from 'redux';
import { shortUrlMatches } from '../../short-urls/helpers';
import { VisitType } from '../types';
import { Visit, VisitsInfo, VisitsLoadProgressChangedAction, VisitType } from '../types';
import { ShortUrlIdentifier } from '../../short-urls/data';
import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
import { ShlinkApiClientBuilder } from '../../utils/services/ShlinkApiClientBuilder';
import { GetState } from '../../container/types';
import { OptionalString } from '../../utils/utils';
import { getVisitsWithLoader } from './common';
import { CREATE_VISIT } from './visitCreation';
import { CREATE_VISIT, CreateVisitAction } from './visitCreation';
/* eslint-disable padding-line-between-statements */
export const GET_SHORT_URL_VISITS_START = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_START';
@@ -14,7 +19,8 @@ export const GET_SHORT_URL_VISITS_CANCEL = 'shlink/shortUrlVisits/GET_SHORT_URL_
export const GET_SHORT_URL_VISITS_PROGRESS_CHANGED = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_PROGRESS_CHANGED';
/* eslint-enable padding-line-between-statements */
export const shortUrlVisitsType = PropTypes.shape({ // TODO Should extend from VisitInfoType
/** @deprecated Use ShortUrlVisits interface instead */
export const shortUrlVisitsType = PropTypes.shape({
visits: PropTypes.arrayOf(VisitType),
shortCode: PropTypes.string,
domain: PropTypes.string,
@@ -24,7 +30,15 @@ export const shortUrlVisitsType = PropTypes.shape({ // TODO Should extend from V
progress: PropTypes.number,
});
const initialState = {
export interface ShortUrlVisits extends VisitsInfo, ShortUrlIdentifier {}
interface ShortUrlVisitsAction extends Action<string>, ShortUrlIdentifier {
visits: Visit[];
}
type ShortUrlVisitsCombinedAction = ShortUrlVisitsAction & VisitsLoadProgressChangedAction & CreateVisitAction;
const initialState: ShortUrlVisits = {
visits: [],
shortCode: '',
domain: undefined,
@@ -35,10 +49,10 @@ const initialState = {
progress: 0,
};
export default handleActions({
export default buildReducer<ShortUrlVisits, ShortUrlVisitsCombinedAction>({
[GET_SHORT_URL_VISITS_START]: () => ({ ...initialState, loading: true }),
[GET_SHORT_URL_VISITS_ERROR]: () => ({ ...initialState, error: true }),
[GET_SHORT_URL_VISITS]: (state, { visits, shortCode, domain }) => ({
[GET_SHORT_URL_VISITS]: (_, { visits, shortCode, domain }) => ({
...initialState,
visits,
shortCode,
@@ -58,10 +72,16 @@ export default handleActions({
},
}, initialState);
export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, query = {}) => (dispatch, getState) => {
export const getShortUrlVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
shortCode: string,
query: { domain?: OptionalString } = {},
) => async (dispatch: Dispatch, getState: GetState) => {
const { getShortUrlVisits } = buildShlinkApiClient(getState);
const visitsLoader = (page, itemsPerPage) => getShortUrlVisits(shortCode, { ...query, page, itemsPerPage });
const extraFinishActionData = { shortCode, domain: query.domain };
const visitsLoader = (page: number, itemsPerPage: number) => getShortUrlVisits(
shortCode,
{ ...query, page, itemsPerPage },
);
const extraFinishActionData: Partial<ShortUrlVisitsAction> = { shortCode, domain: query.domain };
const actionMap = {
start: GET_SHORT_URL_VISITS_START,
large: GET_SHORT_URL_VISITS_LARGE,
@@ -73,4 +93,4 @@ export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, query = {
return getVisitsWithLoader(visitsLoader, extraFinishActionData, actionMap, dispatch, getState);
};
export const cancelGetShortUrlVisits = createAction(GET_SHORT_URL_VISITS_CANCEL);
export const cancelGetShortUrlVisits = buildActionCreator(GET_SHORT_URL_VISITS_CANCEL);

38
src/visits/reducers/tagVisits.js → src/visits/reducers/tagVisits.ts
View File

@@ -1,8 +1,11 @@
import { createAction, handleActions } from 'redux-actions';
import PropTypes from 'prop-types';
import { VisitType } from '../types';
import { Action, Dispatch } from 'redux';
import { Visit, VisitsInfo, VisitsLoadProgressChangedAction, VisitType } from '../types';
import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
import { ShlinkApiClientBuilder } from '../../utils/services/ShlinkApiClientBuilder';
import { GetState } from '../../container/types';
import { getVisitsWithLoader } from './common';
import { CREATE_VISIT } from './visitCreation';
import { CREATE_VISIT, CreateVisitAction } from './visitCreation';
/* eslint-disable padding-line-between-statements */
export const GET_TAG_VISITS_START = 'shlink/tagVisits/GET_TAG_VISITS_START';
@@ -13,7 +16,8 @@ export const GET_TAG_VISITS_CANCEL = 'shlink/tagVisits/GET_TAG_VISITS_CANCEL';
export const GET_TAG_VISITS_PROGRESS_CHANGED = 'shlink/tagVisits/GET_TAG_VISITS_PROGRESS_CHANGED';
/* eslint-enable padding-line-between-statements */
export const TagVisitsType = PropTypes.shape({ // TODO Should extend from VisitInfoType
/** @deprecated Use TagVisits interface instead */
export const TagVisitsType = PropTypes.shape({
visits: PropTypes.arrayOf(VisitType),
tag: PropTypes.string,
loading: PropTypes.bool,
@@ -22,7 +26,16 @@ export const TagVisitsType = PropTypes.shape({ // TODO Should extend from VisitI
progress: PropTypes.number,
});
const initialState = {
export interface TagVisits extends VisitsInfo {
tag: string;
}
export interface TagVisitsAction extends Action<string> {
visits: Visit[];
tag: string;
}
const initialState: TagVisits = {
visits: [],
tag: '',
loading: false,
@@ -32,10 +45,10 @@ const initialState = {
progress: 0,
};
export default handleActions({
export default buildReducer<TagVisits, TagVisitsAction & VisitsLoadProgressChangedAction & CreateVisitAction>({
[GET_TAG_VISITS_START]: () => ({ ...initialState, loading: true }),
[GET_TAG_VISITS_ERROR]: () => ({ ...initialState, error: true }),
[GET_TAG_VISITS]: (state, { visits, tag }) => ({ ...initialState, visits, tag }),
[GET_TAG_VISITS]: (_, { visits, tag }) => ({ ...initialState, visits, tag }),
[GET_TAG_VISITS_LARGE]: (state) => ({ ...state, loadingLarge: true }),
[GET_TAG_VISITS_CANCEL]: (state) => ({ ...state, cancelLoad: true }),
[GET_TAG_VISITS_PROGRESS_CHANGED]: (state, { progress }) => ({ ...state, progress }),
@@ -50,10 +63,13 @@ export default handleActions({
},
}, initialState);
export const getTagVisits = (buildShlinkApiClient) => (tag, query = {}) => (dispatch, getState) => {
export const getTagVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => (tag: string, query = {}) => async (
dispatch: Dispatch,
getState: GetState,
) => {
const { getTagVisits } = buildShlinkApiClient(getState);
const visitsLoader = (page, itemsPerPage) => getTagVisits(tag, { ...query, page, itemsPerPage });
const extraFinishActionData = { tag };
const visitsLoader = (page: number, itemsPerPage: number) => getTagVisits(tag, { ...query, page, itemsPerPage });
const extraFinishActionData: Partial<TagVisitsAction> = { tag };
const actionMap = {
start: GET_TAG_VISITS_START,
large: GET_TAG_VISITS_LARGE,
@@ -65,4 +81,4 @@ export const getTagVisits = (buildShlinkApiClient) => (tag, query = {}) => (disp
return getVisitsWithLoader(visitsLoader, extraFinishActionData, actionMap, dispatch, getState);
};
export const cancelGetTagVisits = createAction(GET_TAG_VISITS_CANCEL);
export const cancelGetTagVisits = buildActionCreator(GET_TAG_VISITS_CANCEL);

6
src/visits/types/index.ts
View File

@@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import { ShortUrl } from '../../short-urls/data';
import { Action } from 'redux';
/** @deprecated Use Visit interface instead */
export const VisitType = PropTypes.shape({
@@ -33,6 +34,11 @@ export interface VisitsInfo {
loadingLarge: boolean;
error: boolean;
progress: number;
cancelLoad: boolean;
}
export interface VisitsLoadProgressChangedAction extends Action<string> {
progress: number;
}
interface VisitLocation {