46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import React, { 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, RootState } from 'soapbox/store';
|
|
|
|
interface ICSVExporter {
|
|
messages: {
|
|
input_label: MessageDescriptor,
|
|
input_hint: MessageDescriptor,
|
|
submit: MessageDescriptor,
|
|
},
|
|
action: () => (dispatch: AppDispatch, getState: () => RootState) => 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;
|