[Glitch] Rewrite actions/modal and reducers/modal with typescript

Port 38c6216082 to glitch-soc

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

app/javascript/flavours/glitch/reducers/index.ts

@@ -26,7 +26,7 @@ import local_settings from './local_settings';
 import markers from './markers';
 import media_attachments from './media_attachments';
 import meta from './meta';
-import modal from './modal';
+import { modalReducer } from './modal';
 import mutes from './mutes';
 import notifications from './notifications';
 import picture_in_picture from './picture_in_picture';
@@ -52,7 +52,7 @@ const reducers = {
   meta,
   alerts,
   loadingBar: loadingBarReducer,
-  modal,
+  modal: modalReducer,
   user_lists,
   domain_lists,
   status_lists,

app/javascript/flavours/glitch/reducers/modal.js

@@ -1,40 +0,0 @@
-import { Stack as ImmutableStack, Map as ImmutableMap } from 'immutable';
-
-import { COMPOSE_UPLOAD_CHANGE_SUCCESS } from 'flavours/glitch/actions/compose';
-import { MODAL_OPEN, MODAL_CLOSE } from 'flavours/glitch/actions/modal';
-import { TIMELINE_DELETE } from 'flavours/glitch/actions/timelines';
-
-const initialState = ImmutableMap({
-  ignoreFocus: false,
-  stack: ImmutableStack(),
-});
-
-const popModal = (state, { modalType, ignoreFocus }) => {
-  if (modalType === undefined || modalType === state.getIn(['stack', 0, 'modalType'])) {
-    return state.set('ignoreFocus', !!ignoreFocus).update('stack', stack => stack.shift());
-  } else {
-    return state;
-  }
-};
-
-const pushModal = (state, modalType, modalProps) => {
-  return state.withMutations(map => {
-    map.set('ignoreFocus', false);
-    map.update('stack', stack => stack.unshift(ImmutableMap({ modalType, modalProps })));
-  });
-};
-
-export default function modal(state = initialState, action) {
-  switch(action.type) {
-  case MODAL_OPEN:
-    return pushModal(state, action.modalType, action.modalProps);
-  case MODAL_CLOSE:
-    return popModal(state, action);
-  case COMPOSE_UPLOAD_CHANGE_SUCCESS:
-    return popModal(state, { modalType: 'FOCAL_POINT', ignoreFocus: false });
-  case TIMELINE_DELETE:
-    return state.update('stack', stack => stack.filterNot((modal) => modal.get('modalProps').statusId === action.id));
-  default:
-    return state;
-  }
-}

app/javascript/flavours/glitch/reducers/modal.ts

@@ -0,0 +1,94 @@
+import { Record as ImmutableRecord, Stack } from 'immutable';
+
+import type { PayloadAction } from '@reduxjs/toolkit';
+
+import { COMPOSE_UPLOAD_CHANGE_SUCCESS } from '../actions/compose';
+import type { ModalType } from '../actions/modal';
+import { openModal, closeModal } from '../actions/modal';
+import { TIMELINE_DELETE } from '../actions/timelines';
+
+type ModalProps = Record<string, unknown>;
+interface Modal {
+  modalType: ModalType;
+  modalProps: ModalProps;
+}
+
+const Modal = ImmutableRecord<Modal>({
+  modalType: 'ACTIONS',
+  modalProps: ImmutableRecord({})(),
+});
+
+interface ModalState {
+  ignoreFocus: boolean;
+  stack: Stack<ImmutableRecord<Modal>>;
+}
+
+const initialState = ImmutableRecord<ModalState>({
+  ignoreFocus: false,
+  stack: Stack(),
+})();
+type State = typeof initialState;
+
+interface PopModalOption {
+  modalType: ModalType | undefined;
+  ignoreFocus: boolean;
+}
+const popModal = (
+  state: State,
+  { modalType, ignoreFocus }: PopModalOption
+): State => {
+  if (
+    modalType === undefined ||
+    modalType === state.get('stack').get(0)?.get('modalType')
+  ) {
+    return state
+      .set('ignoreFocus', !!ignoreFocus)
+      .update('stack', (stack) => stack.shift());
+  } else {
+    return state;
+  }
+};
+
+const pushModal = (
+  state: State,
+  modalType: ModalType,
+  modalProps: ModalProps
+): State => {
+  return state.withMutations((record) => {
+    record.set('ignoreFocus', false);
+    record.update('stack', (stack) =>
+      stack.unshift(Modal({ modalType, modalProps }))
+    );
+  });
+};
+
+export function modalReducer(
+  state: State = initialState,
+  action: PayloadAction<{
+    modalType: ModalType;
+    ignoreFocus: boolean;
+    modalProps: Record<string, unknown>;
+  }>
+) {
+  switch (action.type) {
+    case openModal.type:
+      return pushModal(
+        state,
+        action.payload.modalType,
+        action.payload.modalProps
+      );
+    case closeModal.type:
+      return popModal(state, action.payload);
+    case COMPOSE_UPLOAD_CHANGE_SUCCESS:
+      return popModal(state, { modalType: 'FOCAL_POINT', ignoreFocus: false });
+    case TIMELINE_DELETE:
+      return state.update('stack', (stack) =>
+        stack.filterNot(
+          // @ts-expect-error TIMELINE_DELETE action is not typed yet.
+          (modal) => modal.get('modalProps').statusId === action.id
+        )
+      );
+    default:
+      return state;
+  }
+}