pl-fe: Migrate some reducers off immutable

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/actions/history.ts

@@ -11,7 +11,7 @@ const HISTORY_FETCH_FAIL = 'HISTORY_FETCH_FAIL' as const;
 
 const fetchHistory = (statusId: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
-    const loading = getState().history.getIn([statusId, 'loading']);
+    const loading = getState().history[statusId]?.loading;
 
     if (loading) return;
 

packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx

@@ -22,8 +22,8 @@ interface CompareHistoryModalProps {
 const CompareHistoryModal: React.FC<BaseModalProps & CompareHistoryModalProps> = ({ onClose, statusId }) => {
   const dispatch = useAppDispatch();
 
-  const loading = useAppSelector(state => state.history.getIn([statusId, 'loading']));
+  const loading = useAppSelector(state => state.history[statusId]?.loading);
-  const versions = useAppSelector(state => state.history.get(statusId)?.items);
+  const versions = useAppSelector(state => state.history[statusId]?.items);
 
   const status = useAppSelector(state => state.statuses[statusId]);
 

packages/pl-fe/src/reducers/domain-lists.ts

@@ -1,4 +1,4 @@
-import { OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord } from 'immutable';
+import { create } from 'mutative';
 
 import {
   DOMAIN_BLOCKS_FETCH_SUCCESS,
@@ -9,25 +9,36 @@ import {
 
 import type { PaginatedResponse } from 'pl-api';
 
-const BlocksRecord = ImmutableRecord({
+interface State {
-  items: ImmutableOrderedSet<string>(),
+  blocks: {
-  next: null as (() => Promise<PaginatedResponse<string>>) | null,
+    items: Array<string>;
-});
+    next: (() => Promise<PaginatedResponse<string>>) | null;
+  };
+}
 
-const ReducerRecord = ImmutableRecord({
+const initialState: State = {
-  blocks: BlocksRecord(),
+  blocks: {
-});
+    items: [],
+    next: null,
+  },
+};
 
-type State = ReturnType<typeof ReducerRecord>;
+const domainLists = (state: State = initialState, action: DomainBlocksAction): State => {
-
-const domainLists = (state: State = ReducerRecord(), action: DomainBlocksAction) => {
   switch (action.type) {
     case DOMAIN_BLOCKS_FETCH_SUCCESS:
-      return state.setIn(['blocks', 'items'], ImmutableOrderedSet(action.domains)).setIn(['blocks', 'next'], action.next);
+      return create(state, (draft) => {
+        draft.blocks.items = action.domains;
+        draft.blocks.next = action.next;
+      });
     case DOMAIN_BLOCKS_EXPAND_SUCCESS:
-      return state.updateIn(['blocks', 'items'], set => (set as ImmutableOrderedSet<string>).union(action.domains)).setIn(['blocks', 'next'], action.next);
+      return create(state, (draft) => {
+        draft.blocks.items = [...new Set([...draft.blocks.items, ...action.domains])];
+        draft.blocks.next = action.next;
+      });
     case DOMAIN_UNBLOCK_SUCCESS:
-      return state.updateIn(['blocks', 'items'], set => (set as ImmutableOrderedSet<string>).delete(action.domain));
+      return create(state, (draft) => {
+        draft.blocks.items = draft.blocks.items.filter(item => item !== action.domain);
+      });
     default:
       return state;
   }

packages/pl-fe/src/reducers/followed-tags.ts

@@ -1,4 +1,4 @@
-import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
+import { create } from 'mutative';
 
 import {
   FOLLOWED_HASHTAGS_FETCH_REQUEST,
@@ -12,34 +12,42 @@ import {
 
 import type { PaginatedResponse, Tag } from 'pl-api';
 
-const ReducerRecord = ImmutableRecord({
+interface State {
-  items: ImmutableList<Tag>(),
+  items: Array<Tag>;
-  isLoading: false,
+  isLoading: boolean;
-  next: null as (() => Promise<PaginatedResponse<Tag>>) | null,
+  next: (() => Promise<PaginatedResponse<Tag>>) | null;
-});
+}
 
-const followed_tags = (state = ReducerRecord(), action: TagsAction) => {
+const initalState: State = {
+  items: [],
+  isLoading: false,
+  next: null,
+};
+
+const followed_tags = (state = initalState, action: TagsAction): State => {
   switch (action.type) {
     case FOLLOWED_HASHTAGS_FETCH_REQUEST:
-      return state.set('isLoading', true);
+    case FOLLOWED_HASHTAGS_EXPAND_REQUEST:
+      return create(state, draft => {
+        draft.isLoading = true;
+      });
     case FOLLOWED_HASHTAGS_FETCH_SUCCESS:
-      return state.withMutations(map => {
+      return create(state, draft => {
-        map.set('items', ImmutableList(action.followed_tags));
+        draft.items = action.followed_tags;
-        map.set('isLoading', false);
+        draft.isLoading = true;
-        map.set('next', action.next);
+        draft.next = action.next;
       });
     case FOLLOWED_HASHTAGS_FETCH_FAIL:
-      return state.set('isLoading', false);
-    case FOLLOWED_HASHTAGS_EXPAND_REQUEST:
-      return state.set('isLoading', true);
-    case FOLLOWED_HASHTAGS_EXPAND_SUCCESS:
-      return state.withMutations(map => {
-        map.update('items', list => list.concat(action.followed_tags));
-        map.set('isLoading', false);
-        map.set('next', action.next);
-      });
     case FOLLOWED_HASHTAGS_EXPAND_FAIL:
-      return state.set('isLoading', false);
+      return create(state, draft => {
+        draft.isLoading = false;
+      });
+    case FOLLOWED_HASHTAGS_EXPAND_SUCCESS:
+      return create(state, draft => {
+        draft.items = [...draft.items, ...action.followed_tags];
+        draft.isLoading = true;
+        draft.next = action.next;
+      });
     default:
       return state;
   }

packages/pl-fe/src/reducers/history.ts

@@ -1,17 +1,17 @@
-import { Map as ImmutableMap, Record as ImmutableRecord } from 'immutable';
+import { create } from 'mutative';
 
 import { HISTORY_FETCH_REQUEST, HISTORY_FETCH_SUCCESS, HISTORY_FETCH_FAIL, type HistoryAction } from 'pl-fe/actions/history';
 
 import type { StatusEdit } from 'pl-api';
 
-const HistoryRecord = ImmutableRecord({
+interface History {
-  loading: false,
+  loading: boolean;
-  items: [] as Array<ReturnType<typeof minifyStatusEdit>>,
+  items: Array<ReturnType<typeof minifyStatusEdit>>;
-});
+}
 
-type State = ImmutableMap<string, ReturnType<typeof HistoryRecord>>;
+type State = Record<string, History>;
 
-const initialState: State = ImmutableMap();
+const initialState: State = {};
 
 const minifyStatusEdit = ({ account, ...statusEdit }: StatusEdit, i: number) => ({
   ...statusEdit, account_id: account.id, original: i === 0,
@@ -20,17 +20,23 @@ const minifyStatusEdit = ({ account, ...statusEdit }: StatusEdit, i: number) =>
 const history = (state: State = initialState, action: HistoryAction) => {
   switch (action.type) {
     case HISTORY_FETCH_REQUEST:
-      return state.update(action.statusId, HistoryRecord(), history => history!.withMutations(map => {
+      return create(state, (draft) => {
-        map.set('loading', true);
+        draft[action.statusId] = {
-        map.set('items', []);
+          loading: true,
-      }));
+          items: [],
+        };
+      });
     case HISTORY_FETCH_SUCCESS:
-      return state.update(action.statusId, HistoryRecord(), history => history!.withMutations(map => {
+      return create(state, (draft) => {
-        map.set('loading', false);
+        draft[action.statusId] = {
-        map.set('items', action.history.map(minifyStatusEdit).toReversed());
+          loading: false,
-      }));
+          items: action.history.map(minifyStatusEdit).toReversed(),
+        };
+      });
     case HISTORY_FETCH_FAIL:
-      return state.update(action.statusId, HistoryRecord(), history => history!.set('loading', false));
+      return create(state, (draft) => {
+        if (draft[action.statusId]) draft[action.statusId].loading = false;
+      });
     default:
       return state;
   }

packages/pl-fe/src/reducers/meta.ts

@@ -1,17 +1,15 @@
-import { Record as ImmutableRecord } from 'immutable';
-
 import { INSTANCE_FETCH_FAIL, type InstanceAction } from 'pl-fe/actions/instance';
 
-const ReducerRecord = ImmutableRecord({
+const initialState = {
   /** Whether /api/v1/instance 404'd (and we should display the external auth form). */
   instance_fetch_failed: false,
-});
+};
 
-const meta = (state = ReducerRecord(), action: InstanceAction) => {
+const meta = (state = initialState, action: InstanceAction): typeof initialState => {
   switch (action.type) {
     case INSTANCE_FETCH_FAIL:
       if (action.error?.response?.status === 404) {
-        return state.set('instance_fetch_failed', true);
+        return { instance_fetch_failed: true };
       }
       return state;
     default: