owncast/web/components/ComposeFederatedPost.tsx
2022-11-01 14:50:23 -07:00

80 lines
2 KiB
TypeScript

import React, { FC, useState } from 'react';
import { Button, Input, Modal } from 'antd';
import { STATUS_ERROR, STATUS_SUCCESS } from '../utils/input-statuses';
import { fetchData, FEDERATION_MESSAGE_SEND } from '../utils/apis';
const { TextArea } = Input;
export type ComposeFederatedPostProps = {
open: boolean;
handleClose: () => void;
};
export const ComposeFederatedPost: FC<ComposeFederatedPostProps> = ({ open, handleClose }) => {
const [content, setContent] = useState('');
const [postPending, setPostPending] = useState(false);
const [postSuccessState, setPostSuccessState] = useState(null);
function handleEditorChange(e) {
setContent(e.target.value);
}
function close() {
setPostPending(false);
setPostSuccessState(null);
handleClose();
}
async function sendButtonClicked() {
setPostPending(true);
const data = {
value: content,
};
try {
await fetchData(FEDERATION_MESSAGE_SEND, {
data,
method: 'POST',
auth: true,
});
setPostSuccessState(STATUS_SUCCESS);
setTimeout(close, 1000);
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
setPostSuccessState(STATUS_ERROR);
}
setPostPending(false);
}
return (
<Modal
destroyOnClose
width={600}
title="Post to Followers"
open={open}
onCancel={handleClose}
footer={[
<Button onClick={() => handleClose()}>Cancel</Button>,
<Button
type="primary"
onClick={sendButtonClicked}
disabled={postPending || postSuccessState}
loading={postPending}
>
{postSuccessState?.toUpperCase() || 'Post'}
</Button>,
]}
>
<TextArea
placeholder="Tell the world about your streaming plans..."
size="large"
showCount
maxLength={500}
style={{ height: '150px', width: '100%' }}
onChange={handleEditorChange}
/>
</Modal>
);
};