1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- // Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon
- import React, { useState, useEffect, FC } 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';
- import { OUTCOME_TIMEOUT } from '../pages/admin/chat/messages';
- import { isEmptyObject } from '../utils/format';
- export type MessageToggleProps = {
- isVisible: boolean;
- message: MessageType;
- setMessage: (message: MessageType) => void;
- };
- export const MessageVisiblityToggle: FC<MessageToggleProps> = ({
- isVisible,
- message,
- setMessage,
- }) => {
- if (!message || isEmptyObject(message)) {
- return null;
- }
- let outcomeTimeout = null;
- const [outcome, setOutcome] = useState(0);
- const { id: messageId } = message || {};
- const resetOutcome = () => {
- outcomeTimeout = setTimeout(() => {
- setOutcome(0);
- }, OUTCOME_TIMEOUT);
- };
- useEffect(() => () => {
- clearTimeout(outcomeTimeout);
- });
- const updateChatMessage = async () => {
- clearTimeout(outcomeTimeout);
- setOutcome(0);
- const result = await fetchData(UPDATE_CHAT_MESSGAE_VIZ, {
- auth: true,
- method: 'POST',
- data: {
- visible: !isVisible,
- idArray: [messageId],
- },
- });
- if (result.success && result.message === 'changed') {
- setMessage({ ...message, visible: !isVisible });
- setOutcome(1);
- } else {
- setMessage({ ...message, visible: isVisible });
- setOutcome(-1);
- }
- resetOutcome();
- };
- let outcomeIcon = <CheckCircleFilled style={{ color: 'transparent' }} />;
- if (outcome) {
- outcomeIcon =
- outcome > 0 ? (
- <CheckCircleFilled style={{ color: 'var(--ant-success)' }} />
- ) : (
- <ExclamationCircleFilled style={{ color: 'var(--ant-warning)' }} />
- );
- }
- 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"
- icon={isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined />}
- onClick={updateChatMessage}
- />
- </Tooltip>
- </div>
- );
- };
|