mastodon-glitch/app/javascript/mastodon/store/middlewares/loading_bar.ts

86 lines
2.3 KiB
TypeScript
Raw Normal View History

import {
isAsyncThunkAction,
isPending as isThunkActionPending,
isFulfilled as isThunkActionFulfilled,
isRejected as isThunkActionRejected,
2024-01-08 10:57:40 +00:00
isAction,
} from '@reduxjs/toolkit';
2024-01-08 10:57:40 +00:00
import type { Middleware, UnknownAction } from '@reduxjs/toolkit';
2017-01-16 12:27:58 +00:00
import { showLoading, hideLoading } from 'react-redux-loading-bar';
import type { RootState } from '..';
2017-01-16 12:27:58 +00:00
interface Config {
promiseTypeSuffixes?: string[];
}
const defaultTypeSuffixes: Config['promiseTypeSuffixes'] = [
'PENDING',
'FULFILLED',
'REJECTED',
];
2017-01-16 12:27:58 +00:00
2024-01-08 10:57:40 +00:00
interface ActionWithSkipLoading extends UnknownAction {
skipLoading: boolean;
}
function isActionWithSkipLoading(
action: unknown,
): action is ActionWithSkipLoading {
return (
isAction(action) &&
'skipLoading' in action &&
typeof action.skipLoading === 'boolean'
);
}
export const loadingBarMiddleware = (
2023-07-13 09:26:45 +00:00
config: Config = {},
2024-01-08 10:57:40 +00:00
): Middleware<{ skipLoading?: boolean }, RootState> => {
const promiseTypeSuffixes = config.promiseTypeSuffixes ?? defaultTypeSuffixes;
2017-01-16 12:27:58 +00:00
return ({ dispatch }) =>
(next) =>
2024-01-08 10:57:40 +00:00
(action) => {
let isPending = false;
let isFulfilled = false;
let isRejected = false;
if (
isAsyncThunkAction(action)
// TODO: once we get the first use-case for it, add a check for skipLoading
) {
if (isThunkActionPending(action)) isPending = true;
else if (isThunkActionFulfilled(action)) isFulfilled = true;
else if (isThunkActionRejected(action)) isRejected = true;
} else if (
2024-01-08 10:57:40 +00:00
isActionWithSkipLoading(action) &&
!action.skipLoading &&
typeof action.type === 'string'
) {
const [PENDING, FULFILLED, REJECTED] = promiseTypeSuffixes;
2017-01-16 12:27:58 +00:00
const isPendingRegexp = new RegExp(`${PENDING}$`, 'g');
const isFulfilledRegexp = new RegExp(`${FULFILLED}$`, 'g');
const isRejectedRegexp = new RegExp(`${REJECTED}$`, 'g');
if (action.type.match(isPendingRegexp)) {
isPending = true;
} else if (action.type.match(isFulfilledRegexp)) {
isFulfilled = true;
} else if (action.type.match(isRejectedRegexp)) {
isRejected = true;
}
2017-01-16 12:27:58 +00:00
}
if (isPending) {
dispatch(showLoading());
} else if (isFulfilled || isRejected) {
dispatch(hideLoading());
}
return next(action);
};
};