Rewrite actions/modal and reducers/modal with typescript (#24833)

app/javascript/mastodon/actions/blocks.js

@@ -95,6 +95,6 @@ export function initBlockModal(account) {
       account,
     });
 
-    dispatch(openModal('BLOCK'));
+    dispatch(openModal({ modalType: 'BLOCK' }));
   };
 }

app/javascript/mastodon/actions/boosts.js

@@ -14,7 +14,10 @@ export function initBoostModal(props) {
       privacy,
     });
 
-    dispatch(openModal('BOOST', props));
+    dispatch(openModal({
+      modalType: 'BOOST',
+      modalProps: props,
+    }));
   };
 }
 

app/javascript/mastodon/actions/compose.js

@@ -381,7 +381,10 @@ export function initMediaEditModal(id) {
       id,
     });
 
-    dispatch(openModal('FOCAL_POINT', { id }));
+    dispatch(openModal({
+      modalType: 'FOCAL_POINT',
+      modalProps: { id },
+    }));
   };
 }
 

app/javascript/mastodon/actions/filters.js

@@ -15,9 +15,12 @@ export const FILTERS_CREATE_SUCCESS = 'FILTERS_CREATE_SUCCESS';
 export const FILTERS_CREATE_FAIL    = 'FILTERS_CREATE_FAIL';
 
 export const initAddFilter = (status, { contextType }) => dispatch =>
-  dispatch(openModal('FILTER', {
-    statusId: status?.get('id'),
-    contextType: contextType,
+  dispatch(openModal({
+    modalType: 'FILTER',
+    modalProps: {
+      statusId: status?.get('id'),
+      contextType: contextType,
+    },
   }));
 
 export const fetchFilters = () => (dispatch, getState) => {

app/javascript/mastodon/actions/modal.js

@@ -1,18 +0,0 @@
-export const MODAL_OPEN  = 'MODAL_OPEN';
-export const MODAL_CLOSE = 'MODAL_CLOSE';
-
-export function openModal(type, props) {
-  return {
-    type: MODAL_OPEN,
-    modalType: type,
-    modalProps: props,
-  };
-}
-
-export function closeModal(type, options = { ignoreFocus: false }) {
-  return {
-    type: MODAL_CLOSE,
-    modalType: type,
-    ignoreFocus: options.ignoreFocus,
-  };
-}

app/javascript/mastodon/actions/modal.ts

@@ -0,0 +1,17 @@
+import { createAction } from '@reduxjs/toolkit';
+
+import type { MODAL_COMPONENTS } from '../features/ui/components/modal_root';
+
+export type ModalType = keyof typeof MODAL_COMPONENTS;
+
+interface OpenModalPayload {
+  modalType: ModalType;
+  modalProps: unknown;
+}
+export const openModal = createAction<OpenModalPayload>('MODAL_OPEN');
+
+interface CloseModalPayload {
+  modalType: ModalType | undefined;
+  ignoreFocus: boolean;
+}
+export const closeModal = createAction<CloseModalPayload>('MODAL_CLOSE');

app/javascript/mastodon/actions/mutes.js

@@ -97,7 +97,7 @@ export function initMuteModal(account) {
       account,
     });
 
-    dispatch(openModal('MUTE'));
+    dispatch(openModal({ modalType: 'MUTE' }));
   };
 }
 

app/javascript/mastodon/actions/reports.js

@@ -7,9 +7,12 @@ export const REPORT_SUBMIT_SUCCESS = 'REPORT_SUBMIT_SUCCESS';
 export const REPORT_SUBMIT_FAIL    = 'REPORT_SUBMIT_FAIL';
 
 export const initReport = (account, status) => dispatch =>
-  dispatch(openModal('REPORT', {
-    accountId: account.get('id'),
-    statusId: status?.get('id'),
+  dispatch(openModal({
+    modalType: 'REPORT',
+    modalProps: {
+      accountId: account.get('id'),
+      statusId: status?.get('id'),
+    },
   }));
 
 export const submitReport = (params, onSuccess, onFail) => (dispatch, getState) => {