[Glitch] Upgrade Redux packages

Port a0e237a96f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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';

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';

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';
 

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';

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';

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';

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';

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';
 

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';
 

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';
 

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';

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';
 

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';
 

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,

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';

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';

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';

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';
 

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<unknown, RootState> =
+interface ActionWithMaybeAlertParams extends Action {
+  skipAlert?: boolean;
+  skipNotFound?: boolean;
+  error?: unknown;
+}
+
+function isActionWithmaybeAlertParams(
+  action: unknown,
+): action is ActionWithMaybeAlertParams {
+  return isAction(action);
+}
+
+export const errorsMiddleware: Middleware<Record<string, never>, RootState> =
   ({ dispatch }) =>
   (next) =>
-  (action: AnyAction & { skipAlert?: boolean; skipNotFound?: boolean }) => {
+  (action) => {
-    if (action.type && !action.skipAlert) {
+    if (
-      const isFail = new RegExp(`${defaultFailSuffix}$`, 'g');
+      isActionWithmaybeAlertParams(action) &&
-
+      !action.skipAlert &&
-      if (typeof action.type === 'string' && action.type.match(isFail)) {
+      action.type.match(isFailedAction)
-        dispatch(showAlertForError(action.error, action.skipNotFound));
+    ) {
-      }
+      dispatch(showAlertForError(action.error, action.skipNotFound));
     }
 
     return next(action);

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<unknown, RootState> => {
+): 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'
       ) {

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<unknown, RootState> => {
+export const soundsMiddleware = (): Middleware<
+  Record<string, never>,
+  RootState
+> => {
   const soundCache: Record<string, HTMLAudioElement> = {};
 
   void ready(() => {
@@ -50,15 +69,15 @@ export const soundsMiddleware = (): Middleware<unknown, RootState> => {
     ]);
   });
 
-  return () =>
+  return () => (next) => (action) => {
-    (next) =>
+    if (isActionWithMetaSound(action)) {
-    (action: AnyAction & { meta?: { sound?: string } }) => {
+      const sound = action.meta.sound;
-      const sound = action.meta?.sound;
 
       if (sound && Object.hasOwn(soundCache, sound)) {
         play(soundCache[sound]);
       }
+    }
 
-      return next(action);
+    return next(action);
-    };
+  };
 };

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';