Reorganize admin components to help bundling

web/components/admin/MessageVisiblityToggle.tsx

@@ -0,0 +1,96 @@
+// 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 } from 'antd';
+import {
+  EyeOutlined,
+  EyeInvisibleOutlined,
+  CheckCircleFilled,
+  ExclamationCircleFilled,
+} from '@ant-design/icons';
+import dynamic from 'next/dynamic';
+import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../../utils/apis';
+import { MessageType } from '../../types/chat';
+import { isEmptyObject } from '../../utils/format';
+
+// Lazy loaded components
+
+const Tooltip = dynamic(() => import('antd').then(mod => mod.Tooltip));
+
+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);
+    }, 3000);
+  };
+
+  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>
+  );
+};