From a4a728b01dea4ea3ca7f592deacc8b023d3137ed Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Tue, 19 Dec 2023 00:19:27 +0100 Subject: [PATCH] [Glitch] Fix the loading bar with the new Redux actions Port 8b1eeb2f90a9a76c2f3738a44b63e3893c123a44 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/actions/accounts_typed.ts | 30 +++++------ .../glitch/actions/domain_blocks_typed.ts | 4 +- .../glitch/store/middlewares/loading_bar.ts | 50 ++++++++++++++----- 3 files changed, 54 insertions(+), 30 deletions(-) diff --git a/app/javascript/flavours/glitch/actions/accounts_typed.ts b/app/javascript/flavours/glitch/actions/accounts_typed.ts index c50c4f803a..22aaa48a0d 100644 --- a/app/javascript/flavours/glitch/actions/accounts_typed.ts +++ b/app/javascript/flavours/glitch/actions/accounts_typed.ts @@ -21,7 +21,7 @@ function actionWithSkipLoadingTrue(args: Args) { } export const followAccountSuccess = createAction( - 'accounts/followAccountSuccess', + 'accounts/followAccount/SUCCESS', actionWithSkipLoadingTrue<{ relationship: ApiRelationshipJSON; alreadyFollowing: boolean; @@ -29,7 +29,7 @@ export const followAccountSuccess = createAction( ); export const unfollowAccountSuccess = createAction( - 'accounts/unfollowAccountSuccess', + 'accounts/unfollowAccount/SUCCESS', actionWithSkipLoadingTrue<{ relationship: ApiRelationshipJSON; statuses: unknown; @@ -38,60 +38,60 @@ export const unfollowAccountSuccess = createAction( ); export const authorizeFollowRequestSuccess = createAction<{ id: string }>( - 'accounts/followRequestAuthorizeSuccess', + 'accounts/followRequestAuthorize/SUCCESS', ); export const rejectFollowRequestSuccess = createAction<{ id: string }>( - 'accounts/followRequestRejectSuccess', + 'accounts/followRequestReject/SUCCESS', ); export const followAccountRequest = createAction( - 'accounts/followRequest', + 'accounts/follow/REQUEST', actionWithSkipLoadingTrue<{ id: string; locked: boolean }>, ); export const followAccountFail = createAction( - 'accounts/followFail', + 'accounts/follow/FAIL', actionWithSkipLoadingTrue<{ id: string; error: string; locked: boolean }>, ); export const unfollowAccountRequest = createAction( - 'accounts/unfollowRequest', + 'accounts/unfollow/REQUEST', actionWithSkipLoadingTrue<{ id: string }>, ); export const unfollowAccountFail = createAction( - 'accounts/unfollowFail', + 'accounts/unfollow/FAIL', actionWithSkipLoadingTrue<{ id: string; error: string }>, ); export const blockAccountSuccess = createAction<{ relationship: ApiRelationshipJSON; statuses: unknown; -}>('accounts/blockSuccess'); +}>('accounts/block/SUCCESS'); export const unblockAccountSuccess = createAction<{ relationship: ApiRelationshipJSON; -}>('accounts/unblockSuccess'); +}>('accounts/unblock/SUCCESS'); export const muteAccountSuccess = createAction<{ relationship: ApiRelationshipJSON; statuses: unknown; -}>('accounts/muteSuccess'); +}>('accounts/mute/SUCCESS'); export const unmuteAccountSuccess = createAction<{ relationship: ApiRelationshipJSON; -}>('accounts/unmuteSuccess'); +}>('accounts/unmute/SUCCESS'); export const pinAccountSuccess = createAction<{ relationship: ApiRelationshipJSON; -}>('accounts/pinSuccess'); +}>('accounts/pin/SUCCESS'); export const unpinAccountSuccess = createAction<{ relationship: ApiRelationshipJSON; -}>('accounts/unpinSuccess'); +}>('accounts/unpin/SUCCESS'); export const fetchRelationshipsSuccess = createAction( - 'relationships/fetchSuccess', + 'relationships/fetch/SUCCESS', actionWithSkipLoadingTrue<{ relationships: ApiRelationshipJSON[] }>, ); diff --git a/app/javascript/flavours/glitch/actions/domain_blocks_typed.ts b/app/javascript/flavours/glitch/actions/domain_blocks_typed.ts index 11a81f23f4..c5c4a76ba6 100644 --- a/app/javascript/flavours/glitch/actions/domain_blocks_typed.ts +++ b/app/javascript/flavours/glitch/actions/domain_blocks_typed.ts @@ -5,9 +5,9 @@ import type { Account } from 'flavours/glitch/models/account'; export const blockDomainSuccess = createAction<{ domain: string; accounts: Account[]; -}>('domain_blocks/blockSuccess'); +}>('domain_blocks/block/SUCCESS'); export const unblockDomainSuccess = createAction<{ domain: string; accounts: Account[]; -}>('domain_blocks/unblockSuccess'); +}>('domain_blocks/unblock/SUCCESS'); diff --git a/app/javascript/flavours/glitch/store/middlewares/loading_bar.ts b/app/javascript/flavours/glitch/store/middlewares/loading_bar.ts index 5fe8000731..83056ee49f 100644 --- a/app/javascript/flavours/glitch/store/middlewares/loading_bar.ts +++ b/app/javascript/flavours/glitch/store/middlewares/loading_bar.ts @@ -1,3 +1,9 @@ +import { + isAsyncThunkAction, + isPending as isThunkActionPending, + isFulfilled as isThunkActionFulfilled, + isRejected as isThunkActionRejected, +} from '@reduxjs/toolkit'; import { showLoading, hideLoading } from 'react-redux-loading-bar'; import type { AnyAction, Middleware } from 'redux'; @@ -21,25 +27,43 @@ export const loadingBarMiddleware = ( return ({ dispatch }) => (next) => (action: AnyAction) => { - if (action.type && !action.skipLoading) { + 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 ( + action.type && + !action.skipLoading && + typeof action.type === 'string' + ) { const [PENDING, FULFILLED, REJECTED] = promiseTypeSuffixes; - const isPending = new RegExp(`${PENDING}$`, 'g'); - const isFulfilled = new RegExp(`${FULFILLED}$`, 'g'); - const isRejected = new RegExp(`${REJECTED}$`, 'g'); + const isPendingRegexp = new RegExp(`${PENDING}$`, 'g'); + const isFulfilledRegexp = new RegExp(`${FULFILLED}$`, 'g'); + const isRejectedRegexp = new RegExp(`${REJECTED}$`, 'g'); - if (typeof action.type === 'string') { - if (action.type.match(isPending)) { - dispatch(showLoading()); - } else if ( - action.type.match(isFulfilled) ?? - action.type.match(isRejected) - ) { - dispatch(hideLoading()); - } + if (action.type.match(isPendingRegexp)) { + isPending = true; + } else if (action.type.match(isFulfilledRegexp)) { + isFulfilled = true; + } else if (action.type.match(isRejectedRegexp)) { + isRejected = true; } } + if (isPending) { + dispatch(showLoading()); + } else if (isFulfilled || isRejected) { + dispatch(hideLoading()); + } + return next(action); }; };