owncast/web/components/message-visiblity-toggle.tsx

93 lines
2.5 KiB
TypeScript
Raw Normal View History

2021-02-04 20:19:16 +03:00
// Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon
import React, { useState, useEffect } from 'react';
import { Button, Tooltip } from 'antd';
import {
EyeOutlined,
EyeInvisibleOutlined,
CheckCircleFilled,
ExclamationCircleFilled,
} from '@ant-design/icons';
import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../utils/apis';
import { MessageType } from '../types/chat';
2021-06-22 06:19:00 +03:00
import { OUTCOME_TIMEOUT } from '../pages/chat/messages';
import { isEmptyObject } from '../utils/format';
2021-01-25 00:09:59 +03:00
interface MessageToggleProps {
isVisible: boolean;
message: MessageType;
2021-02-04 20:19:16 +03:00
setMessage: (message: MessageType) => void;
}
2021-01-25 00:09:59 +03:00
2021-02-04 20:19:16 +03:00
export default function MessageVisiblityToggle({
isVisible,
message,
setMessage,
}: MessageToggleProps) {
2021-01-25 00:09:59 +03:00
if (!message || isEmptyObject(message)) {
return null;
}
let outcomeTimeout = null;
const [outcome, setOutcome] = useState(0);
const { id: messageId } = message || {};
const resetOutcome = () => {
2021-02-04 20:19:16 +03:00
outcomeTimeout = setTimeout(() => {
setOutcome(0);
}, OUTCOME_TIMEOUT);
2021-01-25 00:09:59 +03:00
};
2021-02-04 20:19:16 +03:00
useEffect(() => () => {
clearTimeout(outcomeTimeout);
2021-01-25 00:09:59 +03:00
});
const updateChatMessage = async () => {
clearTimeout(outcomeTimeout);
setOutcome(0);
const result = await fetchData(UPDATE_CHAT_MESSGAE_VIZ, {
auth: true,
method: 'POST',
data: {
visible: !isVisible,
idArray: [messageId],
},
});
2021-02-04 20:19:16 +03:00
if (result.success && result.message === 'changed') {
2021-01-25 00:09:59 +03:00
setMessage({ ...message, visible: !isVisible });
setOutcome(1);
} else {
setMessage({ ...message, visible: isVisible });
setOutcome(-1);
}
resetOutcome();
2021-02-04 20:19:16 +03:00
};
2021-01-25 00:09:59 +03:00
let outcomeIcon = <CheckCircleFilled style={{ color: 'transparent' }} />;
if (outcome) {
2021-02-04 20:19:16 +03:00
outcomeIcon =
outcome > 0 ? (
<CheckCircleFilled style={{ color: 'var(--ant-success)' }} />
) : (
<ExclamationCircleFilled style={{ color: 'var(--ant-warning)' }} />
);
2021-01-25 00:09:59 +03:00
}
const toolTipMessage = `Click to ${isVisible ? 'hide' : 'show'} this message`;
return (
<div className={`toggle-switch ${isVisible ? '' : 'hidden'}`}>
<span className="outcome-icon">{outcomeIcon}</span>
<Tooltip title={toolTipMessage} placement="topRight">
<Button
shape="circle"
size="small"
type="text"
2021-02-04 20:19:16 +03:00
icon={isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined />}
2021-01-25 00:09:59 +03:00
onClick={updateChatMessage}
/>
</Tooltip>
</div>
);
2021-02-04 20:19:16 +03:00
}