refactor: Create withModalOnError helper function

src/features/mass_privater/index.js

@@ -1,6 +1,6 @@
 import { dom } from '../../utils/dom.js';
 import { megaEdit } from '../../utils/mega_editor.js';
-import { showModal, modalCancelButton, modalCompleteButton, hideModal, showErrorModal, createTagSpan, createBlogSpan } from '../../utils/modals.js';
+import { showModal, modalCancelButton, modalCompleteButton, hideModal, showErrorModal, createTagSpan, createBlogSpan, withModalOnError } from '../../utils/modals.js';
 import { addSidebarItem, removeSidebarItem } from '../../utils/sidebar.js';
 import { dateTimeFormat, elementsAsList } from '../../utils/text_format.js';
 import { apiFetch } from '../../utils/tumblr_helpers.js';
@@ -26,7 +26,7 @@ const createNowString = () => {
 };
 
 const showInitialPrompt = async () => {
-  const initialForm = dom('form', { id: getPostsFormId }, { submit: event => confirmInitialPrompt(event).catch(showErrorModal) }, [
+  const initialForm = dom('form', { id: getPostsFormId }, { submit: withModalOnError(confirmInitialPrompt) }, [
     dom('label', null, null, [
       'Posts on blog:',
       dom('select', { name: 'blog', required: true }, null, userBlogs.map(createBlogOption)),

src/features/tag_replacer/index.js

@@ -1,6 +1,6 @@
 import { dom } from '../../utils/dom.js';
 import { megaEdit } from '../../utils/mega_editor.js';
-import { showModal, modalCancelButton, modalCompleteButton, showErrorModal, createTagSpan, createBlogSpan } from '../../utils/modals.js';
+import { showModal, modalCancelButton, modalCompleteButton, showErrorModal, createTagSpan, createBlogSpan, withModalOnError } from '../../utils/modals.js';
 import { addSidebarItem, removeSidebarItem } from '../../utils/sidebar.js';
 import { apiFetch } from '../../utils/tumblr_helpers.js';
 import { userBlogs } from '../../utils/user.js';
@@ -11,7 +11,7 @@ const createBlogOption = ({ name, title, uuid }) => dom('option', { value: uuid,
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 const showInitialPrompt = async () => {
-  const initialForm = dom('form', { id: getPostsFormId }, { submit: event => confirmReplaceTag(event).catch(showErrorModal) }, [
+  const initialForm = dom('form', { id: getPostsFormId }, { submit: withModalOnError(confirmReplaceTag) }, [
     dom('label', null, null, [
       'Replace tags on:',
       dom('select', { name: 'blog', required: true }, null, userBlogs.map(createBlogOption)),

src/features/trim_reblogs/index.js

@@ -2,7 +2,7 @@ import { createControlButtonTemplate, cloneControlButton, insertControlButton }
 import { keyToCss } from '../../utils/css_map.js';
 import { dom } from '../../utils/dom.js';
 import { filterPostElements, postSelector } from '../../utils/interface.js';
-import { showModal, hideModal, modalCancelButton, showErrorModal } from '../../utils/modals.js';
+import { showModal, hideModal, modalCancelButton, showErrorModal, withModalOnError } from '../../utils/modals.js';
 import { onNewPosts } from '../../utils/mutations.js';
 import { notify } from '../../utils/notifications.js';
 import { timelineObject } from '../../utils/react_props.js';
@@ -160,7 +160,7 @@ const processPosts = postElements => filterPostElements(postElements).forEach(as
   const items = trail.length + (content.length ? 1 : 0);
 
   if (canEdit && ['ask', 'submission'].includes(state) === false) {
-    const clonedControlButton = cloneControlButton(controlButtonTemplate, { click: event => onButtonClicked(event).catch(showErrorModal) }, items < 2);
+    const clonedControlButton = cloneControlButton(controlButtonTemplate, { click: withModalOnError(onButtonClicked) }, items < 2);
     insertControlButton(postElement, clonedControlButton, buttonClass);
   }
 });

src/utils/modals.js

@@ -63,5 +63,14 @@ export const showErrorModal = exception => {
   });
 };
 
+export const withModalOnError = func =>
+  async (...args) => {
+    try {
+      return await func(...args);
+    } catch (exception) {
+      showErrorModal(exception);
+    }
+  };
+
 export const createTagSpan = tag => dom('span', { class: 'xkit-modal-tag' }, null, [tag]);
 export const createBlogSpan = name => dom('span', { class: 'xkit-modal-blog' }, null, [name]);