From ae396544a713dd27d684c3dd8eb93e1d91ef2057 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 11 Apr 2022 23:02:37 +0200
Subject: [PATCH] Typescript, FC
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../components/account_authorize.js           | Bin 2049 -> 0 bytes
 .../components/account_authorize.tsx          |  61 ++++++++++++++++++
 .../containers/account_authorize_container.js | Bin 714 -> 0 bytes
 app/soapbox/features/follow_requests/index.js | Bin 2295 -> 0 bytes
 .../features/follow_requests/index.tsx        |  60 +++++++++++++++++
 app/soapbox/features/mutes/index.tsx          |   2 +-
 app/soapbox/utils/timelines.ts                |   6 +-
 7 files changed, 125 insertions(+), 4 deletions(-)
 delete mode 100644 app/soapbox/features/follow_requests/components/account_authorize.js
 create mode 100644 app/soapbox/features/follow_requests/components/account_authorize.tsx
 delete mode 100644 app/soapbox/features/follow_requests/containers/account_authorize_container.js
 delete mode 100644 app/soapbox/features/follow_requests/index.js
 create mode 100644 app/soapbox/features/follow_requests/index.tsx

diff --git a/app/soapbox/features/follow_requests/components/account_authorize.js b/app/soapbox/features/follow_requests/components/account_authorize.js
deleted file mode 100644
index 56aac382af192b94524bccb9290abb7414885cfe..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2049
zcmbVN$!^;)5WV{==1@R3U`dxA3db^%riTV-iXhEhVWhFmL?Ts^%2Gl9-l0S-c5FAO
zVF;%9X6DVC#XK*hGH|10araiBhP9G8cm<t(V_$e@6W(HOktN36EBkx6y2|s?u!juy
z{WLhAch|o4yXSVWEfro$iX~9&#2MQY#!ouXK%jyY*IeK=YRxvN=fK4yCgw_*4C*my
zpVKQc?6SIeW`-$;2!gQv_91l08o&_h8`nj~-hQ$iPgtcbDi#DAY_Ae2zLv&Fal(`n
zD1K;AgXImXoMl`*oiHpqj7^W6Xal*^1EM{Frqu+1m1Zjy|APytfTs)a)-ucFORVsB
ziP{7`z?)lpR%XU2OxTOg+Jkyd-V|EJkGX1Z5Ba%m>>4NajF{tV(~>S8oDY?pBpK5h
zE|Nr+!u0V0Uk!>>!;x01Cd5t~W_SX&0oz88z)C<OwB8mY>kbnrOr%N!u5U>Yt}wNE
z0!Y!vUJRoXtV@v`z_$7Q6KMN#43ZC4&OLuM>0^}^DXQtrWzd$IDo7sYT|V<MOM7T(
z&@e<`wp<5R34PY&(>kCh$!O@lf;irqoai`lf(@FfC#1m`bNR^E98+%wEgQ?nluE#~
zaR#tV`7<=7vO^Mi&WYc5Qyjl2R#3ZoD`)ZnqY;+S!#r#iuA}NcJpWYfu%(0XX7zmy
zMxMSOQBBb>o?+_Sb}4lnyE*ooIUd;BF8Dy2Zg;GfZp%1=QOC3fP16@upTE=)u9hJQ
zw-;l)ZQfglWArlYMOoP{={`qzQi+jK8^y6Jyay>08&tB?+1oFq-6>Fgzq|esRSscE
z_KqFf;e4d(e!&E0yVW}hjl1QyT8{Rm;U*)cY>x+PNz1U?MAL4^4clr)x~e3q>>8t~
zoqFfZpOXshYSr$UY%zHX^z(+AgvR4C<H=K0jYj)mNsfr=w^{x-^>#aci1+IO&h2a;
SAiUF3qXX?(fO;~iCw~D|Fu3>t

diff --git a/app/soapbox/features/follow_requests/components/account_authorize.tsx b/app/soapbox/features/follow_requests/components/account_authorize.tsx
new file mode 100644
index 0000000000..cd46f78174
--- /dev/null
+++ b/app/soapbox/features/follow_requests/components/account_authorize.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/accounts';
+import Avatar from 'soapbox/components/avatar';
+import DisplayName from 'soapbox/components/display_name';
+import IconButton from 'soapbox/components/icon_button';
+import Permalink from 'soapbox/components/permalink';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+
+const messages = defineMessages({
+  authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
+  reject: { id: 'follow_request.reject', defaultMessage: 'Reject' },
+});
+
+const getAccount = makeGetAccount();
+
+interface IAccountAuthorize {
+  id: string,
+}
+
+const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const account = useAppSelector((state) => getAccount(state, id));
+
+  const onAuthorize = () => {
+    dispatch(authorizeFollowRequest(id));
+  };
+
+  const onReject = () => {
+    dispatch(rejectFollowRequest(id));
+  };
+
+  if (!account) return null;
+
+  const content = { __html: account.note_emojified };
+
+  return (
+    <div className='account-authorize__wrapper'>
+      <div className='account-authorize'>
+        <Permalink href={`/@${account.acct}`} to={`/@${account.acct}`} className='detailed-status__display-name'>
+          <div className='account-authorize__avatar'><Avatar account={account} size={48} /></div>
+          <DisplayName account={account} />
+        </Permalink>
+
+        <div className='account__header__content' dangerouslySetInnerHTML={content} />
+      </div>
+
+      <div className='account--panel'>
+        <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} src={require('@tabler/icons/icons/check.svg')} onClick={onAuthorize} /></div>
+        <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/icons/x.svg')} onClick={onReject} /></div>
+      </div>
+    </div>
+  );
+};
+
+export default AccountAuthorize;
diff --git a/app/soapbox/features/follow_requests/containers/account_authorize_container.js b/app/soapbox/features/follow_requests/containers/account_authorize_container.js
deleted file mode 100644
index cf38b3c692b66a62d6f0eb17198ba17795b3151e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 714
zcmZvaPfx=z48`yL6uvE$%64Ze(j){YBs93ADD_yNjZ5N+iD};*r~lTilX^;@pMTG`
zt!nZNM=<0Z8io_>JXNsps14tFESke&og{Y9>4x{@?H@i-S<>$oe;N#&fyXZ?zjz$I
zmdjQ5iKQhMR@xY990ze8jVt|)&&ZqZ*St1hDGkU^ihAv4K<d$@mm%SGC@qFwA0v2-
zBWVLeZ26+=H`a{r^y;Y&kb_Dge}H2GaVDbrJVWJe$(d56;x*{1xl@SF8Pw6abyd+8
zpwE9l@m5pq(iUkZ%2Vg>ksI%%_XX-YIZcw(k2chr&3+Q3=$|s#uPwwa25S+>jYE^T
z9n_#!<D@ROsf0;z1S*S}$!*(>&&zLI!nC%{gopO*3f$?Y<l*?#jfG?}_Eol2U2k5%
F{sESt^9}$2

diff --git a/app/soapbox/features/follow_requests/index.js b/app/soapbox/features/follow_requests/index.js
deleted file mode 100644
index 3c3f8f75ecb8081b5347e17291c0043bef7af562..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2295
zcma)7ZEM>+6#brGal0>eAaMr!)+a728-ubH#yS{djH1{#jW%2IBzbKf<Nv-ZOS0vp
zgOx%O>*&6md(Jhl8>tL*P~uLuqCn_juVf8LB}=9c$$ty(ARm=%J|7#@{=A{zYhxcw
zm`}(G<Ik1-J{{fEb!*tJ!qYedZq38-+QvNzJKb#+zL8XqKrzb`-zUtv2%xC|+v1)J
zyhW|q1L_rU@dFEUBTTh|cT&~N7%ctqNP{nrKyj!-3PE>IPzuZTiC}@U4(=LGKsDmD
zWX(=KZN~carscC6do;!2ovbSP_z8cts0~$$PYo00{OK4o%Qo~+WOFGreHJuF6Ak6A
zP!!Hm|AFhkn!6O0p-0qxMX;&aH?nGL;fG4sS{_$l45v{C*Dn8cYYtNJ|7l#pFrr<B
z2z1*&8H>GV0ewFn+K}{v3a<UYAU~O4+ARPM$Vx6AE=j_?yoAIRl<fxw@0F)8S=qa+
zt&E>9AswACLZDwQ`sI|CHFt&?{4A|vHD%ZKC*)T!B=$t#l={-0WDiJUO1~woMm3PA
zDQ$9INx}`*I{Cg_+4`Bjl?pH6;$n#Z?@<IknIXtfG)cr7*>?%Ai94&%w4S%IT)duS
zzbGoEHEF+!)J9@6C`t`~ab35ds%@#f0P9t^6LPS_0BD$EH8C=}Jd-=?vW#mhXHFKe
zT?3R{H;kknL-(|R&VVC9Q^=i^m5UM&VX8M&l}S}1WxPY<;GAq6Cw#WHo+JP;TH`G*
zZ>^)!rEk$3xXx_nItxvt&$u>Sl9m8^8|*;tCHqN6p%h7o#^knbN>NErj=SdqKj-`q
zc?GXtzFd*;tKb2nT3X;%!$7(g)cjbr^Aee4Sa%a|tDr#ICpk<d3^4%s9@2{m9XPPz
zO{)Z?l*#>V-J-Y}9{_B_`rAxTx0^X`Aj#8YS+|bIn%)3m5$CWyTh6@9lL18g!fvNC
zy9XcmAo+{0vV~HL#8A7x5tulFGv?@jIHJkm%K-%(39PU{PDpyy(3`@*Bd;pZ2l)tX
zLrX_t_5wCno~08qJQcvHoqSja>!xaT0<?wEu41h6&JKd=wyzyuWm@}9m-(f(>?7Xh
zYdm7vZSMDY%+GdBgpwl2FYksa&o$XcQ17_B^Izh#cr<wz|C&%!(E#0~os3pd%1hFF
ql#4`i{nt0fPwJ`TWlx*keQvItkDcO{Q_AgTPESZNS6eV-zxV@U=m4w$

diff --git a/app/soapbox/features/follow_requests/index.tsx b/app/soapbox/features/follow_requests/index.tsx
new file mode 100644
index 0000000000..ef82d1aef1
--- /dev/null
+++ b/app/soapbox/features/follow_requests/index.tsx
@@ -0,0 +1,60 @@
+import { debounce } from 'lodash';
+import React from 'react';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { fetchFollowRequests, expandFollowRequests } from 'soapbox/actions/accounts';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { Spinner } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+import Column from '../ui/components/column';
+
+import AccountAuthorize from './components/account_authorize';
+
+const messages = defineMessages({
+  heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' },
+});
+
+const handleLoadMore = debounce((dispatch) => {
+  dispatch(expandFollowRequests());
+}, 300, { leading: true });
+
+const FollowRequests: React.FC = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+
+  const accountIds = useAppSelector<string[]>((state) => state.user_lists.getIn(['follow_requests', 'items']));
+  const hasMore = useAppSelector((state) => !!state.user_lists.getIn(['follow_requests', 'next']));
+
+  React.useEffect(() => {
+    dispatch(fetchFollowRequests());
+  }, []);
+
+  if (!accountIds) {
+    return (
+      <Column>
+        <Spinner />
+      </Column>
+    );
+  }
+
+  const emptyMessage = <FormattedMessage id='empty_column.follow_requests' defaultMessage="You don't have any follow requests yet. When you receive one, it will show up here." />;
+
+  return (
+    <Column icon='user-plus' label={intl.formatMessage(messages.heading)}>
+      <ScrollableList
+        scrollKey='follow_requests'
+        onLoadMore={() => handleLoadMore(dispatch)}
+        hasMore={hasMore}
+        emptyMessage={emptyMessage}
+      >
+        {accountIds.map(id =>
+          <AccountAuthorize key={id} id={id} />,
+        )}
+      </ScrollableList>
+    </Column>
+  );
+};
+
+export default FollowRequests;
diff --git a/app/soapbox/features/mutes/index.tsx b/app/soapbox/features/mutes/index.tsx
index 8e27c06d20..c1f306c240 100644
--- a/app/soapbox/features/mutes/index.tsx
+++ b/app/soapbox/features/mutes/index.tsx
@@ -47,7 +47,7 @@ const Mutes: React.FC = () => {
         emptyMessage={emptyMessage}
         className='space-y-4'
       >
-        {accountIds.map(id =>
+        {accountIds.map((id: string) =>
           <AccountContainer key={id} id={id} />,
         )}
       </ScrollableList>
diff --git a/app/soapbox/utils/timelines.ts b/app/soapbox/utils/timelines.ts
index 03ba960442..9f901b1255 100644
--- a/app/soapbox/utils/timelines.ts
+++ b/app/soapbox/utils/timelines.ts
@@ -4,9 +4,9 @@ import type { Status as StatusEntity } from 'soapbox/types/entities';
 
 export const shouldFilter = (status: StatusEntity, columnSettings: any) => {
   const shows = ImmutableMap({
-    reblog: status.reblog !== null,
-    reply: status.in_reply_to_id !== null,
-    direct: status.visibility === 'direct',
+    reblog: status.get('reblog') !== null,
+    reply: status.get('in_reply_to_id') !== null,
+    direct: status.get('visibility') === 'direct',
   });
 
   return shows.some((value, key) => {