Change search to use query params in web UI (#32949)

app/javascript/mastodon/reducers/index.ts

@@ -30,7 +30,7 @@ import { pictureInPictureReducer } from './picture_in_picture';
 import { pollsReducer } from './polls';
 import push_notifications from './push_notifications';
 import { relationshipsReducer } from './relationships';
-import search from './search';
+import { searchReducer } from './search';
 import server from './server';
 import settings from './settings';
 import status_lists from './status_lists';
@@ -60,7 +60,7 @@ const reducers = {
   server,
   contexts,
   compose,
-  search,
+  search: searchReducer,
   media_attachments,
   notifications,
   notificationGroups: notificationGroupsReducer,

app/javascript/mastodon/reducers/search.js

@@ -1,84 +0,0 @@
-import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';
-
-import {
-  COMPOSE_MENTION,
-  COMPOSE_REPLY,
-  COMPOSE_DIRECT,
-} from '../actions/compose';
-import {
-  SEARCH_CHANGE,
-  SEARCH_CLEAR,
-  SEARCH_FETCH_REQUEST,
-  SEARCH_FETCH_FAIL,
-  SEARCH_FETCH_SUCCESS,
-  SEARCH_SHOW,
-  SEARCH_EXPAND_REQUEST,
-  SEARCH_EXPAND_SUCCESS,
-  SEARCH_EXPAND_FAIL,
-  SEARCH_HISTORY_UPDATE,
-} from '../actions/search';
-
-const initialState = ImmutableMap({
-  value: '',
-  submitted: false,
-  hidden: false,
-  results: ImmutableMap(),
-  isLoading: false,
-  searchTerm: '',
-  type: null,
-  recent: ImmutableOrderedSet(),
-});
-
-export default function search(state = initialState, action) {
-  switch(action.type) {
-  case SEARCH_CHANGE:
-    return state.set('value', action.value);
-  case SEARCH_CLEAR:
-    return state.withMutations(map => {
-      map.set('value', '');
-      map.set('results', ImmutableMap());
-      map.set('submitted', false);
-      map.set('hidden', false);
-      map.set('searchTerm', '');
-      map.set('type', null);
-    });
-  case SEARCH_SHOW:
-    return state.set('hidden', false);
-  case COMPOSE_REPLY:
-  case COMPOSE_MENTION:
-  case COMPOSE_DIRECT:
-    return state.set('hidden', true);
-  case SEARCH_FETCH_REQUEST:
-    return state.withMutations(map => {
-      map.set('results', ImmutableMap());
-      map.set('isLoading', true);
-      map.set('submitted', true);
-      map.set('type', action.searchType);
-    });
-  case SEARCH_FETCH_FAIL:
-  case SEARCH_EXPAND_FAIL:
-    return state.set('isLoading', false);
-  case SEARCH_FETCH_SUCCESS:
-    return state.withMutations(map => {
-      map.set('results', ImmutableMap({
-        accounts: ImmutableOrderedSet(action.results.accounts.map(item => item.id)),
-        statuses: ImmutableOrderedSet(action.results.statuses.map(item => item.id)),
-        hashtags: ImmutableOrderedSet(fromJS(action.results.hashtags)),
-      }));
-
-      map.set('searchTerm', action.searchTerm);
-      map.set('type', action.searchType);
-      map.set('isLoading', false);
-    });
-  case SEARCH_EXPAND_REQUEST:
-    return state.set('type', action.searchType).set('isLoading', true);
-  case SEARCH_EXPAND_SUCCESS: {
-    const results = action.searchType === 'hashtags' ? ImmutableOrderedSet(fromJS(action.results.hashtags)) : action.results[action.searchType].map(item => item.id);
-    return state.updateIn(['results', action.searchType], list => list.union(results)).set('isLoading', false);
-  }
-  case SEARCH_HISTORY_UPDATE:
-    return state.set('recent', ImmutableOrderedSet(fromJS(action.recent)));
-  default:
-    return state;
-  }
-}

app/javascript/mastodon/reducers/search.ts

@@ -0,0 +1,74 @@
+import { createReducer, isAnyOf } from '@reduxjs/toolkit';
+
+import type { ApiSearchType } from 'mastodon/api_types/search';
+import type { RecentSearch, SearchResults } from 'mastodon/models/search';
+import { createSearchResults } from 'mastodon/models/search';
+
+import {
+  updateSearchHistory,
+  submitSearch,
+  expandSearch,
+} from '../actions/search';
+
+interface State {
+  recent: RecentSearch[];
+  q: string;
+  type?: ApiSearchType;
+  loading: boolean;
+  results?: SearchResults;
+}
+
+const initialState: State = {
+  recent: [],
+  q: '',
+  type: undefined,
+  loading: false,
+  results: undefined,
+};
+
+export const searchReducer = createReducer(initialState, (builder) => {
+  builder.addCase(submitSearch.fulfilled, (state, action) => {
+    state.q = action.meta.arg.q;
+    state.type = action.meta.arg.type;
+    state.results = createSearchResults(action.payload);
+    state.loading = false;
+  });
+
+  builder.addCase(expandSearch.fulfilled, (state, action) => {
+    const type = action.meta.arg.type;
+    const results = createSearchResults(action.payload);
+
+    state.type = type;
+    state.results = {
+      accounts: state.results
+        ? [...state.results.accounts, ...results.accounts]
+        : results.accounts,
+      statuses: state.results
+        ? [...state.results.statuses, ...results.statuses]
+        : results.statuses,
+      hashtags: state.results
+        ? [...state.results.hashtags, ...results.hashtags]
+        : results.hashtags,
+    };
+    state.loading = false;
+  });
+
+  builder.addCase(updateSearchHistory, (state, action) => {
+    state.recent = action.payload;
+  });
+
+  builder.addMatcher(
+    isAnyOf(expandSearch.pending, submitSearch.pending),
+    (state, action) => {
+      state.type = action.meta.arg.type;
+      state.loading = true;
+    },
+  );
+
+  builder.addMatcher(
+    isAnyOf(expandSearch.rejected, submitSearch.rejected),
+    (state) => {
+      state.loading = false;
+    },
+  );
+});