From 09376a82073614908eb35373fc7a29e070136eb2 Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Mon, 8 Jan 2024 11:57:40 +0100 Subject: [PATCH] [Glitch] Upgrade Redux packages Port a0e237a96fca2774d3c9ed43063a45e395bb7f40 to glitch-soc Signed-off-by: Claire --- .../emoji_picker_dropdown_container.js | 3 +- .../containers/language_dropdown_container.js | 3 +- .../containers/announcements_container.js | 3 +- .../glitch/features/getting_started/index.jsx | 2 +- .../glitch/features/home_timeline/index.jsx | 2 +- .../glitch/features/list_adder/index.jsx | 2 +- .../flavours/glitch/features/lists/index.jsx | 2 +- .../glitch/features/notifications/index.jsx | 2 +- .../glitch/features/report/comment.jsx | 2 +- .../flavours/glitch/features/status/index.jsx | 2 +- .../subscribed_languages_modal/index.jsx | 2 +- .../features/ui/components/list_panel.jsx | 2 +- .../ui/containers/status_list_container.js | 2 +- .../flavours/glitch/reducers/accounts.ts | 3 +- .../flavours/glitch/reducers/modal.ts | 3 +- .../flavours/glitch/reducers/relationships.ts | 5 ++- .../flavours/glitch/selectors/accounts.ts | 2 +- .../flavours/glitch/selectors/index.js | 2 +- .../glitch/store/middlewares/errors.ts | 32 ++++++++++++----- .../glitch/store/middlewares/loading_bar.ts | 24 ++++++++++--- .../glitch/store/middlewares/sounds.ts | 35 ++++++++++++++----- .../flavours/glitch/store/typed_functions.ts | 6 ++-- 22 files changed, 95 insertions(+), 46 deletions(-) diff --git a/app/javascript/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container.js b/app/javascript/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container.js index a0e50029df..8cf906b20a 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container.js @@ -1,6 +1,7 @@ +import { createSelector } from '@reduxjs/toolkit'; import { Map as ImmutableMap } from 'immutable'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; + import { useEmoji } from '../../../actions/emojis'; import { changeSetting } from '../../../actions/settings'; diff --git a/app/javascript/flavours/glitch/features/compose/containers/language_dropdown_container.js b/app/javascript/flavours/glitch/features/compose/containers/language_dropdown_container.js index 8a50da4c44..9388cb0059 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/language_dropdown_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/language_dropdown_container.js @@ -1,6 +1,7 @@ +import { createSelector } from '@reduxjs/toolkit'; import { Map as ImmutableMap } from 'immutable'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; + import { changeComposeLanguage } from 'flavours/glitch/actions/compose'; import { useLanguage } from 'flavours/glitch/actions/languages'; diff --git a/app/javascript/flavours/glitch/features/getting_started/containers/announcements_container.js b/app/javascript/flavours/glitch/features/getting_started/containers/announcements_container.js index 893da21df9..2a504a3094 100644 --- a/app/javascript/flavours/glitch/features/getting_started/containers/announcements_container.js +++ b/app/javascript/flavours/glitch/features/getting_started/containers/announcements_container.js @@ -1,6 +1,7 @@ +import { createSelector } from '@reduxjs/toolkit'; import { Map as ImmutableMap } from 'immutable'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; + import { addReaction, removeReaction, dismissAnnouncement } from 'flavours/glitch/actions/announcements'; diff --git a/app/javascript/flavours/glitch/features/getting_started/index.jsx b/app/javascript/flavours/glitch/features/getting_started/index.jsx index ea2537482b..5c40963f2e 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.jsx +++ b/app/javascript/flavours/glitch/features/getting_started/index.jsx @@ -4,11 +4,11 @@ import { defineMessages, injectIntl } from 'react-intl'; import { Helmet } from 'react-helmet'; +import { createSelector } from '@reduxjs/toolkit'; import { List as ImmutableList } from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; import { fetchLists } from 'flavours/glitch/actions/lists'; diff --git a/app/javascript/flavours/glitch/features/home_timeline/index.jsx b/app/javascript/flavours/glitch/features/home_timeline/index.jsx index 20351833a0..bca42ec140 100644 --- a/app/javascript/flavours/glitch/features/home_timeline/index.jsx +++ b/app/javascript/flavours/glitch/features/home_timeline/index.jsx @@ -6,9 +6,9 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import { Helmet } from 'react-helmet'; +import { createSelector } from '@reduxjs/toolkit'; import { List as ImmutableList } from 'immutable'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; import { fetchAnnouncements, toggleShowAnnouncements } from 'flavours/glitch/actions/announcements'; import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge'; diff --git a/app/javascript/flavours/glitch/features/list_adder/index.jsx b/app/javascript/flavours/glitch/features/list_adder/index.jsx index 1ba9972e00..4e7bd46bdf 100644 --- a/app/javascript/flavours/glitch/features/list_adder/index.jsx +++ b/app/javascript/flavours/glitch/features/list_adder/index.jsx @@ -2,10 +2,10 @@ import PropTypes from 'prop-types'; import { injectIntl } from 'react-intl'; +import { createSelector } from '@reduxjs/toolkit'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; import { setupListAdder, resetListAdder } from '../../actions/lists'; import NewListForm from '../lists/components/new_list_form'; diff --git a/app/javascript/flavours/glitch/features/lists/index.jsx b/app/javascript/flavours/glitch/features/lists/index.jsx index e09d517d74..2c393684ec 100644 --- a/app/javascript/flavours/glitch/features/lists/index.jsx +++ b/app/javascript/flavours/glitch/features/lists/index.jsx @@ -4,10 +4,10 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { Helmet } from 'react-helmet'; +import { createSelector } from '@reduxjs/toolkit'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; import { fetchLists } from 'flavours/glitch/actions/lists'; import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; diff --git a/app/javascript/flavours/glitch/features/notifications/index.jsx b/app/javascript/flavours/glitch/features/notifications/index.jsx index 7dc5190f70..dc923fbdf5 100644 --- a/app/javascript/flavours/glitch/features/notifications/index.jsx +++ b/app/javascript/flavours/glitch/features/notifications/index.jsx @@ -6,10 +6,10 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import { Helmet } from 'react-helmet'; +import { createSelector } from '@reduxjs/toolkit'; import { List as ImmutableList } from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; import { debounce } from 'lodash'; diff --git a/app/javascript/flavours/glitch/features/report/comment.jsx b/app/javascript/flavours/glitch/features/report/comment.jsx index 81efa7b5f7..40079b2c68 100644 --- a/app/javascript/flavours/glitch/features/report/comment.jsx +++ b/app/javascript/flavours/glitch/features/report/comment.jsx @@ -3,10 +3,10 @@ import { useCallback, useEffect, useRef } from 'react'; import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; +import { createSelector } from '@reduxjs/toolkit'; import { OrderedSet, List as ImmutableList } from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { shallowEqual } from 'react-redux'; -import { createSelector } from 'reselect'; import Toggle from 'react-toggle'; diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx index 605919f670..36c53b819d 100644 --- a/app/javascript/flavours/glitch/features/status/index.jsx +++ b/app/javascript/flavours/glitch/features/status/index.jsx @@ -6,11 +6,11 @@ import classNames from 'classnames'; import { Helmet } from 'react-helmet'; import { withRouter } from 'react-router-dom'; +import { createSelector } from '@reduxjs/toolkit'; import Immutable from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; import { HotKeys } from 'react-hotkeys'; diff --git a/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx b/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx index c0268fbeb8..1ef4740662 100644 --- a/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx +++ b/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx @@ -2,11 +2,11 @@ import PropTypes from 'prop-types'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; +import { createSelector } from '@reduxjs/toolkit'; import { is, List as ImmutableList, Set as ImmutableSet } from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; import { followAccount } from 'flavours/glitch/actions/accounts'; import { Button } from 'flavours/glitch/components/button'; diff --git a/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx b/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx index 9210bb4f39..abf97a7c54 100644 --- a/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx @@ -1,9 +1,9 @@ import PropTypes from 'prop-types'; +import { createSelector } from '@reduxjs/toolkit'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; import { fetchLists } from 'flavours/glitch/actions/lists'; diff --git a/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js b/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js index f34d099b24..7d31240d8f 100644 --- a/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js +++ b/app/javascript/flavours/glitch/features/ui/containers/status_list_container.js @@ -1,6 +1,6 @@ +import { createSelector } from '@reduxjs/toolkit'; import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; import { debounce } from 'lodash'; diff --git a/app/javascript/flavours/glitch/reducers/accounts.ts b/app/javascript/flavours/glitch/reducers/accounts.ts index c7459d1d5a..345bff06ce 100644 --- a/app/javascript/flavours/glitch/reducers/accounts.ts +++ b/app/javascript/flavours/glitch/reducers/accounts.ts @@ -1,7 +1,6 @@ +import type { Reducer } from '@reduxjs/toolkit'; import { Map as ImmutableMap } from 'immutable'; -import type { Reducer } from 'redux'; - import { followAccountSuccess, unfollowAccountSuccess, diff --git a/app/javascript/flavours/glitch/reducers/modal.ts b/app/javascript/flavours/glitch/reducers/modal.ts index 73a2afb916..368f26542c 100644 --- a/app/javascript/flavours/glitch/reducers/modal.ts +++ b/app/javascript/flavours/glitch/reducers/modal.ts @@ -1,6 +1,5 @@ -import { Record as ImmutableRecord, Stack } from 'immutable'; - import type { Reducer } from '@reduxjs/toolkit'; +import { Record as ImmutableRecord, Stack } from 'immutable'; import { COMPOSE_UPLOAD_CHANGE_SUCCESS } from '../actions/compose'; import type { ModalType } from '../actions/modal'; diff --git a/app/javascript/flavours/glitch/reducers/relationships.ts b/app/javascript/flavours/glitch/reducers/relationships.ts index 5d75529475..6ef84b0bb7 100644 --- a/app/javascript/flavours/glitch/reducers/relationships.ts +++ b/app/javascript/flavours/glitch/reducers/relationships.ts @@ -1,7 +1,6 @@ -import { Map as ImmutableMap } from 'immutable'; - import { isFulfilled } from '@reduxjs/toolkit'; -import type { Reducer } from 'redux'; +import type { Reducer } from '@reduxjs/toolkit'; +import { Map as ImmutableMap } from 'immutable'; import type { ApiRelationshipJSON } from 'flavours/glitch/api_types/relationships'; import type { Account } from 'flavours/glitch/models/account'; diff --git a/app/javascript/flavours/glitch/selectors/accounts.ts b/app/javascript/flavours/glitch/selectors/accounts.ts index 9b375c5b95..159aafd34f 100644 --- a/app/javascript/flavours/glitch/selectors/accounts.ts +++ b/app/javascript/flavours/glitch/selectors/accounts.ts @@ -1,5 +1,5 @@ +import { createSelector } from '@reduxjs/toolkit'; import { Record as ImmutableRecord } from 'immutable'; -import { createSelector } from 'reselect'; import { accountDefaultValues } from 'flavours/glitch/models/account'; import type { Account, AccountShape } from 'flavours/glitch/models/account'; diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js index 98100e1f1b..0bec708116 100644 --- a/app/javascript/flavours/glitch/selectors/index.js +++ b/app/javascript/flavours/glitch/selectors/index.js @@ -1,5 +1,5 @@ +import { createSelector } from '@reduxjs/toolkit'; import { List as ImmutableList, Map as ImmutableMap } from 'immutable'; -import { createSelector } from 'reselect'; import { toServerSideType } from 'flavours/glitch/utils/filters'; diff --git a/app/javascript/flavours/glitch/store/middlewares/errors.ts b/app/javascript/flavours/glitch/store/middlewares/errors.ts index 9f28f5ff53..e11aa78178 100644 --- a/app/javascript/flavours/glitch/store/middlewares/errors.ts +++ b/app/javascript/flavours/glitch/store/middlewares/errors.ts @@ -1,20 +1,34 @@ -import type { AnyAction, Middleware } from 'redux'; +import { isAction } from '@reduxjs/toolkit'; +import type { Action, Middleware } from '@reduxjs/toolkit'; import type { RootState } from '..'; import { showAlertForError } from '../../actions/alerts'; const defaultFailSuffix = 'FAIL'; +const isFailedAction = new RegExp(`${defaultFailSuffix}$`, 'g'); -export const errorsMiddleware: Middleware = +interface ActionWithMaybeAlertParams extends Action { + skipAlert?: boolean; + skipNotFound?: boolean; + error?: unknown; +} + +function isActionWithmaybeAlertParams( + action: unknown, +): action is ActionWithMaybeAlertParams { + return isAction(action); +} + +export const errorsMiddleware: Middleware, RootState> = ({ dispatch }) => (next) => - (action: AnyAction & { skipAlert?: boolean; skipNotFound?: boolean }) => { - if (action.type && !action.skipAlert) { - const isFail = new RegExp(`${defaultFailSuffix}$`, 'g'); - - if (typeof action.type === 'string' && action.type.match(isFail)) { - dispatch(showAlertForError(action.error, action.skipNotFound)); - } + (action) => { + if ( + isActionWithmaybeAlertParams(action) && + !action.skipAlert && + action.type.match(isFailedAction) + ) { + dispatch(showAlertForError(action.error, action.skipNotFound)); } return next(action); diff --git a/app/javascript/flavours/glitch/store/middlewares/loading_bar.ts b/app/javascript/flavours/glitch/store/middlewares/loading_bar.ts index 83056ee49f..d259be899b 100644 --- a/app/javascript/flavours/glitch/store/middlewares/loading_bar.ts +++ b/app/javascript/flavours/glitch/store/middlewares/loading_bar.ts @@ -3,9 +3,11 @@ import { isPending as isThunkActionPending, isFulfilled as isThunkActionFulfilled, isRejected as isThunkActionRejected, + isAction, } from '@reduxjs/toolkit'; +import type { Middleware, UnknownAction } from '@reduxjs/toolkit'; + import { showLoading, hideLoading } from 'react-redux-loading-bar'; -import type { AnyAction, Middleware } from 'redux'; import type { RootState } from '..'; @@ -19,14 +21,28 @@ const defaultTypeSuffixes: Config['promiseTypeSuffixes'] = [ 'REJECTED', ]; +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 = ( config: Config = {}, -): Middleware => { +): Middleware<{ skipLoading?: boolean }, RootState> => { const promiseTypeSuffixes = config.promiseTypeSuffixes ?? defaultTypeSuffixes; return ({ dispatch }) => (next) => - (action: AnyAction) => { + (action) => { let isPending = false; let isFulfilled = false; let isRejected = false; @@ -39,7 +55,7 @@ export const loadingBarMiddleware = ( else if (isThunkActionFulfilled(action)) isFulfilled = true; else if (isThunkActionRejected(action)) isRejected = true; } else if ( - action.type && + isActionWithSkipLoading(action) && !action.skipLoading && typeof action.type === 'string' ) { diff --git a/app/javascript/flavours/glitch/store/middlewares/sounds.ts b/app/javascript/flavours/glitch/store/middlewares/sounds.ts index 3bf7d2a357..52d5f6b507 100644 --- a/app/javascript/flavours/glitch/store/middlewares/sounds.ts +++ b/app/javascript/flavours/glitch/store/middlewares/sounds.ts @@ -1,4 +1,5 @@ -import type { Middleware, AnyAction } from 'redux'; +import { isAction } from '@reduxjs/toolkit'; +import type { Middleware, UnknownAction } from '@reduxjs/toolkit'; import ready from 'flavours/glitch/ready'; import { assetHost } from 'flavours/glitch/utils/config'; @@ -10,6 +11,21 @@ interface AudioSource { type: string; } +interface ActionWithMetaSound extends UnknownAction { + meta: { sound: string }; +} + +function isActionWithMetaSound(action: unknown): action is ActionWithMetaSound { + return ( + isAction(action) && + 'meta' in action && + typeof action.meta === 'object' && + !!action.meta && + 'sound' in action.meta && + typeof action.meta.sound === 'string' + ); +} + const createAudio = (sources: AudioSource[]) => { const audio = new Audio(); sources.forEach(({ type, src }) => { @@ -34,7 +50,10 @@ const play = (audio: HTMLAudioElement) => { void audio.play(); }; -export const soundsMiddleware = (): Middleware => { +export const soundsMiddleware = (): Middleware< + Record, + RootState +> => { const soundCache: Record = {}; void ready(() => { @@ -50,15 +69,15 @@ export const soundsMiddleware = (): Middleware => { ]); }); - return () => - (next) => - (action: AnyAction & { meta?: { sound?: string } }) => { - const sound = action.meta?.sound; + return () => (next) => (action) => { + if (isActionWithMetaSound(action)) { + const sound = action.meta.sound; if (sound && Object.hasOwn(soundCache, sound)) { play(soundCache[sound]); } + } - return next(action); - }; + return next(action); + }; }; diff --git a/app/javascript/flavours/glitch/store/typed_functions.ts b/app/javascript/flavours/glitch/store/typed_functions.ts index f1e71385a8..46a10b8b47 100644 --- a/app/javascript/flavours/glitch/store/typed_functions.ts +++ b/app/javascript/flavours/glitch/store/typed_functions.ts @@ -1,7 +1,7 @@ -import type { TypedUseSelectorHook } from 'react-redux'; -import { useDispatch, useSelector } from 'react-redux'; - import { createAsyncThunk } from '@reduxjs/toolkit'; +import type { TypedUseSelectorHook } from 'react-redux'; +// eslint-disable-next-line @typescript-eslint/no-restricted-imports +import { useDispatch, useSelector } from 'react-redux'; import type { AppDispatch, RootState } from './store';