From 48290ab5404ae8eadad214f533750f2c78fb1da3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 19 May 2022 15:22:15 +0200
Subject: [PATCH 1/2] Convert import/export data to TypeScript, use FileInput
 component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/export_data.js            | Bin 3759 -> 0 bytes
 app/soapbox/actions/export_data.ts            | 113 ++++++++++++++++++
 .../{import_data.js => import_data.ts}        | Bin 2472 -> 3028 bytes
 app/soapbox/actions/snackbar.js               | Bin 603 -> 0 bytes
 app/soapbox/actions/snackbar.ts               |  39 ++++++
 app/soapbox/components/ui/form/form.tsx       |   2 +
 .../export_data/components/csv_exporter.js    | Bin 1384 -> 0 bytes
 .../export_data/components/csv_exporter.tsx   |  47 ++++++++
 .../export_data/{index.js => index.tsx}       | Bin 2339 -> 1862 bytes
 .../import_data/components/csv_importer.js    | Bin 1919 -> 0 bytes
 .../import_data/components/csv_importer.tsx   |  66 ++++++++++
 .../import_data/{index.js => index.tsx}       | Bin 2355 -> 2045 bytes
 12 files changed, 267 insertions(+)
 delete mode 100644 app/soapbox/actions/export_data.js
 create mode 100644 app/soapbox/actions/export_data.ts
 rename app/soapbox/actions/{import_data.js => import_data.ts} (65%)
 delete mode 100644 app/soapbox/actions/snackbar.js
 create mode 100644 app/soapbox/actions/snackbar.ts
 delete mode 100644 app/soapbox/features/export_data/components/csv_exporter.js
 create mode 100644 app/soapbox/features/export_data/components/csv_exporter.tsx
 rename app/soapbox/features/export_data/{index.js => index.tsx} (60%)
 delete mode 100644 app/soapbox/features/import_data/components/csv_importer.js
 create mode 100644 app/soapbox/features/import_data/components/csv_importer.tsx
 rename app/soapbox/features/import_data/{index.js => index.tsx} (61%)

diff --git a/app/soapbox/actions/export_data.js b/app/soapbox/actions/export_data.js
deleted file mode 100644
index 12e0bd58b35e2b5a8e188ae3afca3e6630bce18a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3759
zcmb_e+iv4F5Pi>A%tHZ5STEfIeJB!m3vcQGizdxBPOt^GMV6MRn2kiLBo)U9{O=uJ
zBununZkoI};@r;69L|uJl~e|vAY(Zf?1E`c@0f-a<VuzhDMnNCo(oe%Cr3xzYimK%
z`x#Y1M@w4G<l_)ExfFWXh&vXv;sXqF$ILkw_iOir3{hki*`ouJq5}hyKR#bxUEiKv
zo}XWSnciMae!rPauVDnyb_qJzXFt6;J)KOaTkM161^ct{r*pu+&G=Tb3;oCQ%hO-C
zf$s};#12ZE(EEb@)|<eC^*-DeH`kMGuzTk_;(DD;(7p4$wwsW>ZG+eoq-=OPdPdy%
z=?Gv}$n;)M>oi5RW8@vrjv?|4xy`7dM0*+Wn$f^|p><&b|55v+^8wz7We_a#x+s<r
ztOgh+mqj5LOdS-dRo)ittnsurURfJ<P%NjoEzX7YuqVbU!JC-Z!d+y@dBG;`TE<v)
z!-N^Qv)^dR60n8#&9Hjc@)x-fg`^qYl1!#`iRvW9@nP7cVD>AHXk`6k;d%x{Gcz_u
z@fo6vqq$-^VvlT}jtzS>!&E<<q;slJZ&aK7{ZE4k-T@P-%-GG<r&EbjN!S1ZWr9&&
z2$BV`7|4Qg8ErE%%Yu=N>#Cqjd;J9lLi)lw#hJ{OgjN+3+3B1YS=>)<8<e!*>3!@Z
zZKa$W#Y*|WcDPw}I#Y0M#%U^RVRWnw*4Xz$F;go6R4+veI9RWk#?oj8qYtiMZO0tn
zxVY1pR7a24qTBQU3TA+Y5UBL^ul2FOrr=RC%;S!OgkbkH!BvvQ1x|V!*#6>i0i%(v
zAR1d5*cb~e7=zdzdHnXU<IRFwP>w(<9?~Qj)ftdl@!$sF%@6^Mm7+^hDQToxR*Y1&
zp4<Kw%h+FGTeU$Kr7K#1f=zNctP8g`A|<WjP*Pi$@Gr^#5y3jN?<*k$Q(C|jb8UK%
zxCX3Fjxa>nb?rs<-+qYb*e>fH9b!vhYSQ_@_H63u(lVkE#!p}qKHjx_?QF2QH3Qf)
zz<G-k*OsVcO=lY-V&B@3&Kkg}ezR+T`0xY189a-J-#wLVHEgT(bHPh)Mn8W4Eotn`
zoCzdVhxx7RzD}o6$(s2Vd+Xlve*NJ(gKe<N_U9c$1EcCTo4zTjg`V>q=h@hU2byIH
zH_c!=mkXFlsf}(5;Y^X`VUBiU{w=wPqd!HI;IQ)@yzPi_=!I!%UEsh8J&c>zRkOof
zzez4tNt^W*H|r6P`ztE(v+<eB9i4C1c++`+RYForq?josRll|^z#ZP~0v~`k?0U4U
z+DB`@h~J9U{kIn;<VpP!U!#Vv{=v|)GwL(%Aa;5e&zZUAh?kRX{BR=jHq`K8!XxP*
zUi4p{ZS7u1i_SyzHLP$inYSWE?`7NObucH~bL)Rm!g<)u2q)f32rqdXLO5Ulg%7<)
QeOtEI(P90_-^+%70kPG+^8f$<

diff --git a/app/soapbox/actions/export_data.ts b/app/soapbox/actions/export_data.ts
new file mode 100644
index 0000000000..de81215dda
--- /dev/null
+++ b/app/soapbox/actions/export_data.ts
@@ -0,0 +1,113 @@
+import { defineMessages } from 'react-intl';
+
+import api, { getLinks } from '../api';
+
+import snackbar from './snackbar';
+
+import type { SnackbarAction } from './snackbar';
+import type { AxiosResponse } from 'axios';
+import type { RootState } from 'soapbox/store';
+
+export const EXPORT_FOLLOWS_REQUEST = 'EXPORT_FOLLOWS_REQUEST';
+export const EXPORT_FOLLOWS_SUCCESS = 'EXPORT_FOLLOWS_SUCCESS';
+export const EXPORT_FOLLOWS_FAIL    = 'EXPORT_FOLLOWS_FAIL';
+
+export const EXPORT_BLOCKS_REQUEST = 'EXPORT_BLOCKS_REQUEST';
+export const EXPORT_BLOCKS_SUCCESS = 'EXPORT_BLOCKS_SUCCESS';
+export const EXPORT_BLOCKS_FAIL    = 'EXPORT_BLOCKS_FAIL';
+
+export const EXPORT_MUTES_REQUEST = 'EXPORT_MUTES_REQUEST';
+export const EXPORT_MUTES_SUCCESS = 'EXPORT_MUTES_SUCCESS';
+export const EXPORT_MUTES_FAIL    = 'EXPORT_MUTES_FAIL';
+
+const messages = defineMessages({
+  blocksSuccess: { id: 'export_data.success.blocks', defaultMessage: 'Blocks exported successfully' },
+  followersSuccess: { id: 'export_data.success.followers', defaultMessage: 'Followers exported successfully' },
+  mutesSuccess: { id: 'export_data.success.mutes', defaultMessage: 'Mutes exported successfully' },
+});
+
+type ExportDataActions = {
+  type: typeof EXPORT_FOLLOWS_REQUEST
+  | typeof EXPORT_FOLLOWS_SUCCESS
+  | typeof EXPORT_FOLLOWS_FAIL
+  | typeof EXPORT_BLOCKS_REQUEST
+  | typeof EXPORT_BLOCKS_SUCCESS
+  | typeof EXPORT_BLOCKS_FAIL
+  | typeof EXPORT_MUTES_REQUEST
+  | typeof EXPORT_MUTES_SUCCESS
+  | typeof EXPORT_MUTES_FAIL,
+  error?: any,
+} | SnackbarAction
+
+function fileExport(content: string, fileName: string) {
+  const fileToDownload = document.createElement('a');
+
+  fileToDownload.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
+  fileToDownload.setAttribute('download', fileName);
+  fileToDownload.style.display = 'none';
+  document.body.appendChild(fileToDownload);
+  fileToDownload.click();
+  document.body.removeChild(fileToDownload);
+}
+
+const listAccounts = (getState: () => RootState) => async(apiResponse: AxiosResponse<any, any>) => {
+  const followings = apiResponse.data;
+  let accounts = [];
+  let next = getLinks(apiResponse).refs.find(link => link.rel === 'next');
+  while (next) {
+    apiResponse = await api(getState).get(next.uri);
+    next = getLinks(apiResponse).refs.find(link => link.rel === 'next');
+    Array.prototype.push.apply(followings, apiResponse.data);
+  }
+
+  accounts = followings.map((account: { fqn: string }) => account.fqn);
+  return Array.from(new Set(accounts));
+};
+
+export const exportFollows = () => (dispatch: React.Dispatch<ExportDataActions>, getState: () => RootState) => {
+  dispatch({ type: EXPORT_FOLLOWS_REQUEST });
+  const me = getState().me;
+  return api(getState)
+    .get(`/api/v1/accounts/${me}/following?limit=40`)
+    .then(listAccounts(getState))
+    .then((followings) => {
+      followings = followings.map(fqn => fqn + ',true');
+      followings.unshift('Account address,Show boosts');
+      fileExport(followings.join('\n'), 'export_followings.csv');
+
+      dispatch(snackbar.success(messages.followersSuccess));
+      dispatch({ type: EXPORT_FOLLOWS_SUCCESS });
+    }).catch(error => {
+      dispatch({ type: EXPORT_FOLLOWS_FAIL, error });
+    });
+};
+
+export const exportBlocks = () => (dispatch: React.Dispatch<ExportDataActions>, getState: () => RootState) => {
+  dispatch({ type: EXPORT_BLOCKS_REQUEST });
+  return api(getState)
+    .get('/api/v1/blocks?limit=40')
+    .then(listAccounts(getState))
+    .then((blocks) => {
+      fileExport(blocks.join('\n'), 'export_block.csv');
+
+      dispatch(snackbar.success(messages.blocksSuccess));
+      dispatch({ type: EXPORT_BLOCKS_SUCCESS });
+    }).catch(error => {
+      dispatch({ type: EXPORT_BLOCKS_FAIL, error });
+    });
+};
+
+export const exportMutes = () => (dispatch: React.Dispatch<ExportDataActions>, getState: () => RootState) => {
+  dispatch({ type: EXPORT_MUTES_REQUEST });
+  return api(getState)
+    .get('/api/v1/mutes?limit=40')
+    .then(listAccounts(getState))
+    .then((mutes) => {
+      fileExport(mutes.join('\n'), 'export_mutes.csv');
+
+      dispatch(snackbar.success(messages.mutesSuccess));
+      dispatch({ type: EXPORT_MUTES_SUCCESS });
+    }).catch(error => {
+      dispatch({ type: EXPORT_MUTES_FAIL, error });
+    });
+};
diff --git a/app/soapbox/actions/import_data.js b/app/soapbox/actions/import_data.ts
similarity index 65%
rename from app/soapbox/actions/import_data.js
rename to app/soapbox/actions/import_data.ts
index 7bde21a4abe0e8e2b1157875838dcd7328bcb722..43de9f85c69580daefe331a8b615f0fee429bdb3 100644
GIT binary patch
literal 3028
zcmd5--*4J55Pr{Jac>C{3-8(J)KZYpKy0LFkH`dvMor?#Hd+zmf1e#YS=_`~nS@jx
z5azzS`|fv=6@+p)!yd;;j+dA*bifQQ5L1$YOEHT0rzGd8``K|4g=RU5UUrCT3?r!6
zk=KzxCM0L0O5D&uMWVsJKN63Ih@T29{D<1+eQBij?>DV!_gZ632oE{pxCU257$+1<
z7x=Y|E)uLb%$MI+>!<B(wOFivhTHY@$7UKn!5G|bi7?QoA8sa-X&83sYso+KXZQ03
zh)>(Ul-SrmELM|mUF1!H#kU5vshfg+?KW|(-N$>md75_7HvYHxRhTwu<NsdWHf5z-
zF)ll5UN-k5;z;!%6Qwyj08$u~-z2s)kwE>nAT;eBge1`+HVbM8*c~*=(xGl--YU0S
z|C_;~(8iP!`ZWNQpX5_aT$~)ln{k@t2j?R4V@|l^sHx1VjWd3;f;^e~T}q-C79OKW
zzyh%*l6?TK+5_9YD3#BY%vVTvD6ODl%Jn7_=!en<C?&iHtq~v7^yI=t(v3-)l3$p<
z%To>RayF|h_4><>9KXv~3GDK-loon?Tn2B~pNe1cldbI)h@wm+bw+3=yM6%UJCO@-
zpRfY)=sAG3T>k!}et&5V$lVYQSnc2dJgE=$QZ8SzgaDO6@2qF3d*6cOEb$ccBh5ja
z39m9gC<Oq1K^XU3c|t}-ip7aSBUO*BicjQ9#Z_zYXPkQ!vqBsJEGa5d2C?d5Ro&!O
zUFp}w);&1T91V3#TzYnfdKv-|m}23}&aJ}*@ym~7#=UZiEF3LP<n|b<@iQ#SR9?D!
zKo7)6XaRG{)d5`D0c!Sd)B(!)73J44-L(3R)qZ91)#CUFwKopX|CYX7kT<G)Y5R)8
OtAK7=_r}q+&-@?LlgeQL

delta 429
zcmca2zCw6H_2dvHk;&%F{F@mWS(!Fhvt%;brj_O;mt^MWDP-mr<QJ8=<>%z&mltbf
z=9T2=C=?_XCFT}uDpYeRC={iZlosVFXryEo7bKP>XXq%Tr%n#z(41VuHd_~@TrVxZ
zC^xahH?_DpF+Eiy7eW^Ug+WH978M7VCMN?0H76UeZ*Z&S;!3Rm*{Fc#0;in(<ZKcg
za99hU<w;=EkZe|&T+hKinU9HmawK;cn7xlv-W8{7d`nAGNpOtj<n`Qalk=E3CU<gm
WY2tHOF34aMcY$;UaW^s5asdF}sh8UT

diff --git a/app/soapbox/actions/snackbar.js b/app/soapbox/actions/snackbar.js
deleted file mode 100644
index 47fd11137cb4302d403c4749b2c059da73fd99f0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 603
zcmbV~!3x4K42JK0irlur(7QvygWzExsNhlR%(S?*l6LBly}NC7Q*XLkQu61^pGK5t
zMF#FLO=rvXb~RsYpn;rJ3Bh2<3nZh1gfYDNx=cxJKp)i=#t>?}APG~)P@>lSfHCmQ
z2qja#!=g)sJVh{`KzL^Wrat57gBIJjR&B#i{X4ZCTwTXwP4u2AucU{9khu!mUSFNs
z#82X;AT$+8ZzK$yF8IMi!kTUo9aL9YX3h8EzNEd;NTjF_*bD!~?lI?8VNb=b&uz?q
R$kV(FeNX>pk0WMH!XAm+%rXD~

diff --git a/app/soapbox/actions/snackbar.ts b/app/soapbox/actions/snackbar.ts
new file mode 100644
index 0000000000..d1cda0d943
--- /dev/null
+++ b/app/soapbox/actions/snackbar.ts
@@ -0,0 +1,39 @@
+import { ALERT_SHOW } from './alerts';
+
+import type { MessageDescriptor } from 'react-intl';
+
+type SnackbarActionSeverity = 'info' | 'success' | 'error'
+
+type SnackbarMessage = string | MessageDescriptor
+
+export type SnackbarAction = {
+  type: typeof ALERT_SHOW
+  message: SnackbarMessage
+  actionLabel?: string
+  actionLink?: string
+  severity: SnackbarActionSeverity
+}
+
+export const show = (severity: SnackbarActionSeverity, message: SnackbarMessage, actionLabel?: string, actionLink?: string): SnackbarAction => ({
+  type: ALERT_SHOW,
+  message,
+  actionLabel,
+  actionLink,
+  severity,
+});
+
+export const info = (message: SnackbarMessage, actionLabel?: string, actionLink?: string) =>
+  show('info', message, actionLabel, actionLink);
+
+export const success = (message: SnackbarMessage, actionLabel?: string, actionLink?: string) =>
+  show('success', message, actionLabel, actionLink);
+
+export const error = (message: SnackbarMessage, actionLabel?: string, actionLink?: string) =>
+  show('error', message, actionLabel, actionLink);
+
+export default {
+  info,
+  success,
+  error,
+  show,
+};
diff --git a/app/soapbox/components/ui/form/form.tsx b/app/soapbox/components/ui/form/form.tsx
index 59ca180b1f..3b02634fac 100644
--- a/app/soapbox/components/ui/form/form.tsx
+++ b/app/soapbox/components/ui/form/form.tsx
@@ -5,6 +5,8 @@ interface IForm {
   onSubmit?: (event: React.FormEvent) => void,
   /** Class name override for the <form> element. */
   className?: string,
+  /** Prevent the form from being submitted. */
+  disabled?: boolean,
 }
 
 /** Form element with custom styles. */
diff --git a/app/soapbox/features/export_data/components/csv_exporter.js b/app/soapbox/features/export_data/components/csv_exporter.js
deleted file mode 100644
index bd47b83fbd0bbe98d984c642af535c0538992dda..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1384
zcmbVMU2mK)5PauX>>D6)@SYq|(o-u%YNaTN`dS&-JKTaz{n1{E`0rgCI7sgrReeEb
zJ)WH%5Ae2=%D{t?-SbO_8um)I5O(ywF|H6^2YkdlA}h_buiSdsx^G)+Skd5vRk)Lc
z7bsp~H++U{I>Kzq8MKh}z{OWA&Al)U4C_W4PNg-lltK{l50t{n9tk!J?%|y^Mv4SJ
zNY#$dyV7tebOO(KT+VCBx<VealPaBA?wIiC?Wu6jY-8YdY8=JE?IJcP8>Thvo<6_#
za8y9#C@KwqF{Td!0BxAzB{-``>vQO-3_#YB#;fI0(!CXB%Jn0Dx16R-Jgh~n*#Y$$
zC=2J{8MNZMW2UUv(2JbT=r!mf-$2HU@)2guTz{0T;^J@xd)8=l5(fvXnW!4vHN5;r
z;0S+EFk;AWrdi2QZJ>u)VKPmhP#Am+axgX5sdGvDzAzRvnkO<4BZ|$^+bD}L#Mj=S
znKK#<jT~bfr=~^`MJo+&GWuywltY}B&d4Z2rKI{_5~t6*qbMb)NX&Tivl~un0`mn^
z%rCg0&{!oP@}mN5Z>9w;UEG&fD)_K#{tNT)*o5#C`Jpy>SjeUdZ+h1)-P0LnK8=}*
z=GG|}oi$$?R$vnk+sqN2Gn1n&QPV#F|BbJvmJ8iU_#}P$M%R64XZ)7w@_nyP@s_EV
z5Tx+g%6lJ^RoaHv=K<cFQ`@5Dq-mvvdS+wOHPbe8?w&~;%QJABjVm8Sy67SJ4Tkf)
A00000

diff --git a/app/soapbox/features/export_data/components/csv_exporter.tsx b/app/soapbox/features/export_data/components/csv_exporter.tsx
new file mode 100644
index 0000000000..f44aaa4243
--- /dev/null
+++ b/app/soapbox/features/export_data/components/csv_exporter.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { useState } from 'react';
+import { MessageDescriptor, useIntl } from 'react-intl';
+
+import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+import { AppDispatch } from 'soapbox/store';
+
+interface ICSVExporter {
+  messages: {
+    input_label: MessageDescriptor,
+    input_hint: MessageDescriptor,
+    submit: MessageDescriptor,
+  },
+  action: () => (dispatch: AppDispatch, getState: any) => Promise<void>,
+}
+
+const CSVExporter: React.FC<ICSVExporter> = ({ messages, action }) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick: React.MouseEventHandler = (event) => {
+    setIsLoading(true);
+    dispatch(action()).then(() => {
+      setIsLoading(false);
+    }).catch(() => {
+      setIsLoading(false);
+    });
+  };
+
+  return (
+    <Form>
+      <Text size='xl' weight='bold'>{intl.formatMessage(messages.input_label)}</Text>
+      <Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>
+
+      <FormActions>
+        <Button theme='primary' onClick={handleClick} disabled={isLoading}>
+          {intl.formatMessage(messages.submit)}
+        </Button>
+      </FormActions>
+    </Form>
+  );
+};
+
+export default CSVExporter;
diff --git a/app/soapbox/features/export_data/index.js b/app/soapbox/features/export_data/index.tsx
similarity index 60%
rename from app/soapbox/features/export_data/index.js
rename to app/soapbox/features/export_data/index.tsx
index 4a73f700b6108611a0db491e587cfc10fb739cae..3a00b6051be1966c7663ba06a0f9c7f630854fc0 100644
GIT binary patch
delta 176
zcmZ21bc}DJiqgbxA*s^hRL{JU9EDniw4(f61@)rT#N-m)OrX%jhsm3(7+G1ZT`LOm
zi%MJ)OA-}q6*M#zZ0!`PxfB$V^Ye;J6hJD0!cb#0G_ARSQbnmHrA2uP8eEg_ut!a9
z<dB{m%%KCMUBT?f9BO(t`p)?|rMY=_K-EA!wLopDU~3doQqvMkb4nBtwpw!m03>TU
ADF6Tf

delta 636
zcmZ{h&q~8U5XMgy*@Fi!f>0PlNFx1n@K&u9S_Lmsv?njJO((jN?8fW_BBl5WmOg@K
z1z*B9@Iib7XJhJLJT0^PoBh7|=4I_+eOo1|$q0s-Nk_LST8J`}fR}RJBzNKMiTkb2
zagyXD$1x7`4Eu(gG-|5g3}r}7wM3dJGtIDq<{R~a($^T$v8EViKYRF!1u7F$2#wZE
z{-QFR<i-3X-2LP(k&aLj>)21$8kvqw(auT5wjEW^&rho>cZp2TND_{Wo6|xUtSg~=
z0RB_}Ea47(``9m;7T@@u(p=~ey&!0aS+FMr7G-V|jAR}Y^eX56FR4KEl)hU|FTz+_
z3x{RzK#~M32=&CmKlx4tyK_EN2yP`GE9!zX4WKx^&e!T%X6%Go%AVp)t~j+uiA5Jx
z7Jpd>%y=4rjBQ}%2i4a+jwP6u5}a@s=t|j^vtUcyHE{eIeC}Pmt(-4jYxPA`Yn10>
ZZHLePCcu8XZ{j@B2c;7Zj`f6?iFfpI+u#5I

diff --git a/app/soapbox/features/import_data/components/csv_importer.js b/app/soapbox/features/import_data/components/csv_importer.js
deleted file mode 100644
index ff17cade40b579ccceedceb6d304215711039e65..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1919
zcmbVNQBT`25Pt8kxVI!yo4l6>v4N0~wg~~+3qr_EuB}I6XSM@nA^&}6J82TuO=u5o
z6Z`Ysci(ru^0Jc3z_pUq-D`y!HcFNdRP??ub|E;KagVt{mYHr}+2>*Fsw`{6)&*YI
z3eP3s1&RrF!F$M}BFrM|K|_!RxcGsYxe}&;cARLzX=x11q!5IBhf<i=dxG_Z8~9us
zBgGspr7HdRr_69E^c?PRKb+T+RcpCV4y<%ia~lcwPM#b$tS$_kb&11hb~ccmWd+k3
z&Tqe8Ii*km1xJx<_=_;jYzCkWGdu$;wU<7HhL!<HTH?4IOo=zO$YQQ<@Mq1b%DID;
zs5RT79s}jtD)<L9=elAh+l`?|V_Kodpri3x62{X<=s9nAflCl|QFwA(e~~QbV!MP5
zD>T~G)*jn2kr#MduS;&|bcoN?DG{WnUGb!_Hqby%dEUt}r|xilk%HNA9b4J7BLd*h
zR7|l_Q%r#`&hZOoSQwo+vHWJts)~FGgMw=l%zY&51ID%h!aA@^pwZmgosjx+D8{H7
zq3we997FF|Xc^AIr;4K3>`;W^s5a;l9*yi|I)rYcIJ1t0Au1)+{|4y_aw3yt?)Sns
zvsY&1$t5XpPWEiAtMr*Va&HBCusg9~YKz7xrs3@k?jO9y?`5+mx`JF9Mbe`pL42F{
zPJ7k*Zl*hZ#9@V|Rsuq255US^Xpq9UQQEl7<IZYr|JZ?)cbneigOTlN7l~rINuc>J
zOoM$9zzg#2&ZNOw7I^@MZPTD&Yb=7(#xjjJl$x2Z{_=%A?U;+IHjfS&wX4Ji9p%XR
z^YBJF9r{4QUV1k}zOj;67&^OH7c6^%oT;a!dw<z+gTds8ozH1tRi3W1EW^sA&3zDO
z`kC6?MNI7TLpzBeg*SYn;LrzCu<EAIC_*wR$_YtLZ)>3c1I#}p*^X2_qF6GK%o*Oz
z?nzER;lWFx-BcmdJcmm0lBw6=<Go;w_@~Q0Lo^m<m3R&VtyN;%^Br5i=s|9L(3NOs
FzX9?~V!HqU

diff --git a/app/soapbox/features/import_data/components/csv_importer.tsx b/app/soapbox/features/import_data/components/csv_importer.tsx
new file mode 100644
index 0000000000..95ae99aba2
--- /dev/null
+++ b/app/soapbox/features/import_data/components/csv_importer.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { useState } from 'react';
+import { MessageDescriptor, useIntl } from 'react-intl';
+
+import { Button, FileInput, Form, FormActions, FormGroup, Text } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+import { AppDispatch } from 'soapbox/store';
+
+interface ICSVImporter {
+  messages: {
+    input_label: MessageDescriptor,
+    input_hint: MessageDescriptor,
+    submit: MessageDescriptor,
+  },
+  action: (params: FormData) => (dispatch: AppDispatch, getState: any) => Promise<void>,
+}
+
+const CSVImporter: React.FC<ICSVImporter> = ({ messages, action }) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [file, setFile] = useState<File | null | undefined>(null);
+
+
+  const handleSubmit: React.FormEventHandler = (event) => {
+    const params = new FormData();
+    params.append('list', file!);
+
+    setIsLoading(true);
+    dispatch(action(params)).then(() => {
+      setIsLoading(false);
+    }).catch(() => {
+      setIsLoading(false);
+    });
+
+    event.preventDefault();
+  };
+
+  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = e => {
+    const file = e.target.files?.item(0);
+    setFile(file);
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} disabled={isLoading}>
+      <Text size='xl' weight='bold' tag='label'>{intl.formatMessage(messages.input_label)}</Text>
+      <FormGroup
+        hintText={<Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>}
+      >
+        <FileInput
+          accept='.csv,text/csv'
+          onChange={handleFileChange}
+          required
+        />
+      </FormGroup>
+      <FormActions>
+        <Button type='submit' theme='primary' disabled={isLoading}>
+          {intl.formatMessage(messages.submit)}
+        </Button>
+      </FormActions>
+    </Form>
+  );
+};
+
+export default CSVImporter;
diff --git a/app/soapbox/features/import_data/index.js b/app/soapbox/features/import_data/index.tsx
similarity index 61%
rename from app/soapbox/features/import_data/index.js
rename to app/soapbox/features/import_data/index.tsx
index 6a3a267e292c15dfd562b21ab01196ad0e4fb474..b03b20f292f296a7d0a9549934e8d3fd7e9b71d9 100644
GIT binary patch
delta 285
zcmdli^p}64iqgbxA*s^hRL{JU9EDniw4(f61@)rT#N-m)OrX%jhdC-hS;vBc;MAPd
z<dXa%xT50x#Db*!3jK`y{Osb*j*L32^`5x}`9&ozi6w~&wh9`W3bu9%)m#b+$@zK3
zB?=(pfWlC_G&HT@GHI!aC8b5F#X#Bg)Dkx+PXpCn4UOWG#FA97p<tF?CeYNxyyR3(
zpiw}xic;BursOGTa816#9x=I`Lwd3&hYpZ-oxG1DTF*w`IX|Z~H_r~J6sVyVs3)}o
T<XnZ6)U?FXoDv0u>#ex}fqP(i

delta 590
zcmZvZ!AiqG5QYz;g}n$~1fej9kOY!=Z%rw*D7{G09=v$irc+%>cH`~_Dy8%lTKXj7
zTlo%xvoWn$JS{W)v;RNed>wzBT!_3-+QLw)V)Ry^fvHwGcm>swbq%l0R_Cojo|l%7
zGaQy0dy0l6N?VIH^3+CRD~SryL}@KrpEmnKzF=wx(q^#uJ3}ops6)&lRZ^02Po;5E
z&epft`zIVOb6(tAZgHesW&;TrS3=SOf6f4=$SwJs7CfQ7t_#1?#MJRUA*qlldO;Af
zMbKspXBC49PI;MG=+-IxJ*$9qg<NhoVQI#VfkDNu&n*X>S(Fpk`j^$5Q974Hq~P%W
z;7-7W1`tG|^?Qa`jh#^}%pJa#f(V3_Y$|r^?M_x}onS%R0BDMV+7IflX&qx>URi`Y
zKEyZy`z%cC!kB8%jS@TwKK-&;9X)KKMsst}2<g4q=*Ht2z}00>Wo0fqRUX1eu8b|%
EH%Xhw=>Px#


From 86c17682e9827665bf409418fe2cb60e410ad7f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 19 May 2022 16:46:32 +0200
Subject: [PATCH 2/2] forms can't be disabled, actually
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/ui/form/form.tsx                      | 2 --
 app/soapbox/features/import_data/components/csv_importer.tsx | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/soapbox/components/ui/form/form.tsx b/app/soapbox/components/ui/form/form.tsx
index 3b02634fac..59ca180b1f 100644
--- a/app/soapbox/components/ui/form/form.tsx
+++ b/app/soapbox/components/ui/form/form.tsx
@@ -5,8 +5,6 @@ interface IForm {
   onSubmit?: (event: React.FormEvent) => void,
   /** Class name override for the <form> element. */
   className?: string,
-  /** Prevent the form from being submitted. */
-  disabled?: boolean,
 }
 
 /** Form element with custom styles. */
diff --git a/app/soapbox/features/import_data/components/csv_importer.tsx b/app/soapbox/features/import_data/components/csv_importer.tsx
index 95ae99aba2..aa5937af90 100644
--- a/app/soapbox/features/import_data/components/csv_importer.tsx
+++ b/app/soapbox/features/import_data/components/csv_importer.tsx
@@ -43,7 +43,7 @@ const CSVImporter: React.FC<ICSVImporter> = ({ messages, action }) => {
   };
 
   return (
-    <Form onSubmit={handleSubmit} disabled={isLoading}>
+    <Form onSubmit={handleSubmit}>
       <Text size='xl' weight='bold' tag='label'>{intl.formatMessage(messages.input_label)}</Text>
       <FormGroup
         hintText={<Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>}