[Glitch] Refactor <ActionsModal> to TypeScript (#34559)

Port 926c67c648 to glitch-soc

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

app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx

@@ -1,65 +0,0 @@
-import PropTypes from 'prop-types';
-
-import classNames from 'classnames';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import { IconButton } from '../../../components/icon_button';
-
-export default class ActionsModal extends ImmutablePureComponent {
-
-  static propTypes = {
-    status: ImmutablePropTypes.map,
-    onClick: PropTypes.func,
-    actions: PropTypes.arrayOf(PropTypes.shape({
-      active: PropTypes.bool,
-      href: PropTypes.string,
-      icon: PropTypes.string,
-      meta: PropTypes.string,
-      name: PropTypes.string,
-      text: PropTypes.string,
-    })),
-    renderItemContents: PropTypes.func,
-  };
-
-  renderAction = (action, i) => {
-    if (action === null) {
-      return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
-    }
-
-    const { icon = null, iconComponent = null, text, meta = null, active = false, href = '#' } = action;
-    let contents = this.props.renderItemContents && this.props.renderItemContents(action, i);
-
-    if (!contents) {
-      contents = (
-        <>
-          {icon && <IconButton title={text} icon={icon} iconComponent={iconComponent} role='presentation' tabIndex={-1} inverted />}
-          <div>
-            <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
-            <div>{meta}</div>
-          </div>
-        </>
-      );
-    }
-
-    return (
-      <li key={`${text}-${i}`}>
-        <a href={href} target='_blank' rel='noopener' onClick={this.props.onClick} data-index={i} className={classNames('link', { active })}>
-          {contents}
-        </a>
-      </li>
-    );
-  };
-
-  render () {
-    return (
-      <div className='modal-root__modal actions-modal'>
-        <ul>
-          {this.props.actions.map(this.renderAction)}
-        </ul>
-      </div>
-    );
-  }
-
-}

app/javascript/flavours/glitch/features/ui/components/actions_modal.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+
+import type { MenuItem } from 'flavours/glitch/models/dropdown_menu';
+import {
+  isActionItem,
+  isExternalLinkItem,
+} from 'flavours/glitch/models/dropdown_menu';
+
+export const ActionsModal: React.FC<{
+  actions: MenuItem[];
+  onClick: React.MouseEventHandler;
+}> = ({ actions, onClick }) => (
+  <div className='modal-root__modal actions-modal'>
+    <ul>
+      {actions.map((option, i: number) => {
+        if (option === null) {
+          return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
+        }
+
+        const { text, dangerous } = option;
+
+        let element: React.ReactElement;
+
+        if (isActionItem(option)) {
+          element = (
+            <button onClick={onClick} data-index={i}>
+              {text}
+            </button>
+          );
+        } else if (isExternalLinkItem(option)) {
+          element = (
+            <a
+              href={option.href}
+              target={option.target ?? '_target'}
+              data-method={option.method}
+              rel='noopener'
+              onClick={onClick}
+              data-index={i}
+            >
+              {text}
+            </a>
+          );
+        } else {
+          element = (
+            <Link to={option.to} onClick={onClick} data-index={i}>
+              {text}
+            </Link>
+          );
+        }
+
+        return (
+          <li
+            className={classNames({
+              'dropdown-menu__item--dangerous': dangerous,
+            })}
+            key={`${text}-${i}`}
+          >
+            {element}
+          </li>
+        );
+      })}
+    </ul>
+  </div>
+);

app/javascript/flavours/glitch/features/ui/components/modal_root.jsx

@@ -25,7 +25,7 @@ import { getScrollbarWidth } from 'flavours/glitch/utils/scrollbar';
 
 import BundleContainer from '../containers/bundle_container';
 
-import ActionsModal from './actions_modal';
+import { ActionsModal } from './actions_modal';
 import AudioModal from './audio_modal';
 import { BoostModal } from './boost_modal';
 import {