From 96ccc666411738efa6bc1315b22437ff8138017c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 2 Apr 2022 13:03:12 -0500
Subject: [PATCH] Convert DropdownMenu to typescript

---
 .../{dropdown_menu.js => dropdown_menu.tsx}   | Bin 9046 -> 10841 bytes
 app/soapbox/components/status_action_bar.tsx  |  15 +++----
 .../components/ui/icon-button/icon-button.tsx |   7 +---
 .../containers/dropdown_menu_container.js     | Bin 1099 -> 0 bytes
 .../containers/dropdown_menu_container.ts     |  38 ++++++++++++++++++
 5 files changed, 45 insertions(+), 15 deletions(-)
 rename app/soapbox/components/{dropdown_menu.js => dropdown_menu.tsx} (56%)
 delete mode 100644 app/soapbox/containers/dropdown_menu_container.js
 create mode 100644 app/soapbox/containers/dropdown_menu_container.ts

diff --git a/app/soapbox/components/dropdown_menu.js b/app/soapbox/components/dropdown_menu.tsx
similarity index 56%
rename from app/soapbox/components/dropdown_menu.js
rename to app/soapbox/components/dropdown_menu.tsx
index c471ac27b85fdcc1fdc3c4cd3a9071457a59c373..7d13d6829f105f2d8b8201a67cbdbb7bdef3732d 100644
GIT binary patch
literal 10841
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
TEV>dP8Maxo=;AK)0>u9THT#1{

delta 1581
zcma)+O-vI(6vwm3hZN+?@?Go}ltP47qeMdkfj}@s2n8z#z{KtDl#Xn7)|pwM5Yohx
z@gzPkdg5fFiC%gzns~s2F)>Et!Nf$PN3I^c=*9h@bO8zU(9X>Jzc=r_dB1**eHpp8
z&={pekEM0Q!~`WNF{qpSZf+i|U2l(%rcwr%;wsv$qDYc?H_n;6EicQ71tT7u(h21v
z(<#>Gx1u`w6yca?VHL;2jx`ur`#l0tVYEKyHEv6`yh0(^6uMwts4WbI4GaSXb7cdI
zm?x)*!4ZYZqHsoB@pwd$afxGDw9;^j=`+to^Mg4`v0iaI|Bytfln!Awg>D*{BBjfg
z5p75%47r5~LzDOD7*DG^R2dS#fn@GP(N#%CDWq|C9LB9aI0Ex>vN(}QFvQ1D;xMup
z(f12Rbflp{Wg1JDQ94c}s<@SLLR9C{Bxan@wA+|ZdNl$<OFi5#nuX!wIst)Fd_m}h
zjzCLxqqwX9+Dq!8rL-0%O3s<T7vV)oUD>MLam1%k0`8QC;d^PM7>RxT;tGs;ma`u`
z?+ak#*a9Rgrr~czHSnrhsHyy6@1IuH*!wqCk4=piHml0vdG%0Xmxw#F%{8}$Bf&F4
zSU>)&P%~5&9(lv|BKz4pbHrKoH1r5fXvv;21tlay<)V8iUiwZSI21C`-0g5b5u@^c
zrbEsW!<pqBGol%(IHFq<Aai_chc*9DIz^13eO{4czH{>2Nh_FHl;&JB7Kx#JV2cjJ
zq+l=3A&O)|w;;gmDnm3z3^{2|th);q3r_x+jT1#uC(PM%3#_~Hutc}1+O7L9R0qQc
z{^rI^o?&<C76rp5_6k|lMsp3Y>vy-^X60a1I9l2l%0Z%CN#X<_Qn9??u07wJ!;se1
z(p$Y6u?R{^nxY~*T(<v&SAc8&CV@l7e;(fYU&E(>559?KAr$EJ+Qd2fabhquY!(a8
z0?QC>orU$bHu%_j)Lc)3r=kLA+l(7M!2@Bx4_=*o0PiXr%FVx?m_+9tdLN$pQ^@c#
fg0=Qb*`Mum0t|NeJl09yiuIkH?3fbZN$1^vnw1>=

diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index b98f017a95..558d96bb78 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -24,6 +24,7 @@ import { IconButton, Hoverable } from './ui';
 
 import type { History } from 'history';
 import type { AnyAction, Dispatch } from 'redux';
+import type { Menu } from 'soapbox/components/dropdown_menu';
 import type { RootState } from 'soapbox/store';
 import type { Status } from 'soapbox/types/entities';
 import type { Features } from 'soapbox/utils/features';
@@ -367,7 +368,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     const ownAccount = status.getIn(['account', 'id']) === me;
     const username = String(status.getIn(['account', 'username']));
 
-    const menu = [];
+    const menu: Menu = [];
 
     menu.push({
       text: intl.formatMessage(messages.open),
@@ -487,13 +488,13 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
           text: intl.formatMessage(messages.admin_account, { name: username }),
           href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
           icon: require('@tabler/icons/icons/gavel.svg'),
-          action: (event: Event) => event.stopPropagation(),
+          action: (event) => event.stopPropagation(),
         });
         menu.push({
           text: intl.formatMessage(messages.admin_status),
           href: `/pleroma/admin/#/statuses/${status.get('id')}/`,
           icon: require('@tabler/icons/icons/pencil.svg'),
-          action: (event: Event) => event.stopPropagation(),
+          action: (event) => event.stopPropagation(),
         });
       }
 
@@ -607,13 +608,11 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       reblogButton = (
         <DropdownMenuContainer
           items={reblogMenu}
-          // @ts-ignore
           disabled={!publicStatus}
-          active={status.get('reblogged')}
-          pressed={status.get('reblogged')}
+          active={status.reblogged}
+          pressed={status.reblogged}
           title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
           src={reblogIcon}
-          direction='right'
           onShiftClick={this.handleReblogClick}
         />
       );
@@ -714,11 +713,9 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         <StatusAction>
           <DropdownMenuContainer
             items={menu}
-            // @ts-ignore
             title={intl.formatMessage(messages.more)}
             status={status}
             src={require('@tabler/icons/icons/dots.svg')}
-            direction='right'
           />
         </StatusAction>
       </div>
diff --git a/app/soapbox/components/ui/icon-button/icon-button.tsx b/app/soapbox/components/ui/icon-button/icon-button.tsx
index 2d8c27b7f3..291b0b4f8a 100644
--- a/app/soapbox/components/ui/icon-button/icon-button.tsx
+++ b/app/soapbox/components/ui/icon-button/icon-button.tsx
@@ -4,15 +4,10 @@ import InlineSVG from 'react-inlinesvg';
 
 import Text from '../text/text';
 
-interface IIconButton {
-  alt?: string,
-  className?: string,
+interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   iconClassName?: string,
-  disabled?: boolean,
   src: string,
-  onClick?: React.EventHandler<React.MouseEvent>,
   text?: string,
-  title?: string,
   transparent?: boolean
 }
 
diff --git a/app/soapbox/containers/dropdown_menu_container.js b/app/soapbox/containers/dropdown_menu_container.js
deleted file mode 100644
index 57f4d5468b54fda0ac24c31f8a863bf248c556f3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1099
zcmah}O>f&U487-9@Kj5H=H63eL)Tu6q8~uhU524hCAJl6i-skmU&wzSrPzs+469GJ
z#P|64NZK_mbrC+nkoRaJtl+Vu28s@~iQhW3{abM|o4GNLTJ+}~wU%D}CHh{0sVU&}
zXv0yK$4uhLhhsZH?i<E1;SS#=SzQlA`TbuEO$rKI=uXD9X3l4bg?jYyKPg?f3)n5G
zH_y&LO>?<$-_V1rF_p}Ygb0mpZ=;U5q#G_Fzyd=0gvECdpECd#vf^vDWez`yYSdoj
zkn#zmC<fWG4DJKr=x7b!yQ_7GLY6sp`Q9@7VgbeJ*|NI6x-F#QJfnd(wKm8m#`%`1
z^5S<f2CN-cP_$!Y@h3A(J6G8+;VHbb6D-<aPG8{r1L^K-_{$KO3089I=eY~5j^=r5
zsj$P5;z>;A^+AD)*aTR~jn(9n%feX&<SV{CtDSjKht?<<vr9-lV)q7qvD<qg;RmEb
za}UMFah8!`Fp3$zhH0L!wWYSChkO<?-%*wCSUjIH|8!V$0b{o|?VM<4vjA3!Ju&lg
xG2)<*ymfoBWkyb_Jy^}eG}7m$;9K5*i;udm<M<a4dsDB{8tk=AifK_y`WO54bNT=P

diff --git a/app/soapbox/containers/dropdown_menu_container.ts b/app/soapbox/containers/dropdown_menu_container.ts
new file mode 100644
index 0000000000..fa149d0f44
--- /dev/null
+++ b/app/soapbox/containers/dropdown_menu_container.ts
@@ -0,0 +1,38 @@
+import { connect } from 'react-redux';
+
+import { openDropdownMenu, closeDropdownMenu } from '../actions/dropdown_menu';
+import { openModal, closeModal } from '../actions/modals';
+import DropdownMenu from '../components/dropdown_menu';
+import { isUserTouching } from '../is_mobile';
+
+import type { Dispatch } from 'redux';
+import type { DropdownPlacement, IDropdown } from 'soapbox/components/dropdown_menu';
+import type { RootState } from 'soapbox/store';
+
+const mapStateToProps = (state: RootState) => ({
+  isModalOpen: Boolean(state.modals.size && state.modals.last().modalType === 'ACTIONS'),
+  dropdownPlacement: state.dropdown_menu.get('placement'),
+  openDropdownId: state.dropdown_menu.get('openId'),
+  openedViaKeyboard: state.dropdown_menu.get('keyboard'),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch, { status, items }: Partial<IDropdown>) => ({
+  onOpen(
+    id: number,
+    onItemClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
+    dropdownPlacement: DropdownPlacement,
+    keyboard: boolean,
+  ) {
+    dispatch(isUserTouching() ? openModal('ACTIONS', {
+      status,
+      actions: items,
+      onClick: onItemClick,
+    }) : openDropdownMenu(id, dropdownPlacement, keyboard));
+  },
+  onClose(id: number) {
+    dispatch(closeModal('ACTIONS'));
+    dispatch(closeDropdownMenu(id));
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DropdownMenu);