Change onboarding flow in web UI (#32998)

app/javascript/mastodon/reducers/index.ts

@@ -35,7 +35,7 @@ import server from './server';
 import settings from './settings';
 import status_lists from './status_lists';
 import statuses from './statuses';
-import suggestions from './suggestions';
+import { suggestionsReducer } from './suggestions';
 import tags from './tags';
 import timelines from './timelines';
 import trends from './trends';
@@ -70,7 +70,7 @@ const reducers = {
   lists: listsReducer,
   filters,
   conversations,
-  suggestions,
+  suggestions: suggestionsReducer,
   polls,
   trends,
   markers: markersReducer,

app/javascript/mastodon/reducers/suggestions.js

@@ -1,40 +0,0 @@
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
-
-import { blockAccountSuccess, muteAccountSuccess } from 'mastodon/actions/accounts';
-import { blockDomainSuccess } from 'mastodon/actions/domain_blocks';
-
-import {
-  SUGGESTIONS_FETCH_REQUEST,
-  SUGGESTIONS_FETCH_SUCCESS,
-  SUGGESTIONS_FETCH_FAIL,
-  SUGGESTIONS_DISMISS,
-} from '../actions/suggestions';
-
-
-const initialState = ImmutableMap({
-  items: ImmutableList(),
-  isLoading: false,
-});
-
-export default function suggestionsReducer(state = initialState, action) {
-  switch(action.type) {
-  case SUGGESTIONS_FETCH_REQUEST:
-    return state.set('isLoading', true);
-  case SUGGESTIONS_FETCH_SUCCESS:
-    return state.withMutations(map => {
-      map.set('items', fromJS(action.suggestions.map(x => ({ ...x, account: x.account.id }))));
-      map.set('isLoading', false);
-    });
-  case SUGGESTIONS_FETCH_FAIL:
-    return state.set('isLoading', false);
-  case SUGGESTIONS_DISMISS:
-    return state.update('items', list => list.filterNot(x => x.get('account') === action.id));
-  case blockAccountSuccess.type:
-  case muteAccountSuccess.type:
-    return state.update('items', list => list.filterNot(x => x.get('account') === action.payload.relationship.id));
-  case blockDomainSuccess.type:
-    return state.update('items', list => list.filterNot(x => action.payload.accounts.includes(x.get('account'))));
-  default:
-    return state;
-  }
-}

app/javascript/mastodon/reducers/suggestions.ts

@@ -0,0 +1,60 @@
+import { createReducer, isAnyOf } from '@reduxjs/toolkit';
+
+import {
+  blockAccountSuccess,
+  muteAccountSuccess,
+} from 'mastodon/actions/accounts';
+import { blockDomainSuccess } from 'mastodon/actions/domain_blocks';
+import {
+  fetchSuggestions,
+  dismissSuggestion,
+} from 'mastodon/actions/suggestions';
+import { createSuggestion } from 'mastodon/models/suggestion';
+import type { Suggestion } from 'mastodon/models/suggestion';
+
+interface State {
+  items: Suggestion[];
+  isLoading: boolean;
+}
+
+const initialState: State = {
+  items: [],
+  isLoading: false,
+};
+
+export const suggestionsReducer = createReducer(initialState, (builder) => {
+  builder.addCase(fetchSuggestions.pending, (state) => {
+    state.isLoading = true;
+  });
+
+  builder.addCase(fetchSuggestions.fulfilled, (state, action) => {
+    state.items = action.payload.map(createSuggestion);
+    state.isLoading = false;
+  });
+
+  builder.addCase(fetchSuggestions.rejected, (state) => {
+    state.isLoading = false;
+  });
+
+  builder.addCase(dismissSuggestion.pending, (state, action) => {
+    state.items = state.items.filter(
+      (x) => x.account_id !== action.meta.arg.accountId,
+    );
+  });
+
+  builder.addCase(blockDomainSuccess, (state, action) => {
+    state.items = state.items.filter(
+      (x) =>
+        !action.payload.accounts.some((account) => account.id === x.account_id),
+    );
+  });
+
+  builder.addMatcher(
+    isAnyOf(blockAccountSuccess, muteAccountSuccess),
+    (state, action) => {
+      state.items = state.items.filter(
+        (x) => x.account_id !== action.payload.relationship.id,
+      );
+    },
+  );
+});