rmeove switches;update styles;

web/pages/chat.tsx

@@ -1,16 +1,14 @@
 import React, { useState, useEffect } from "react";
-import { Table, Typography, Tooltip, Switch, Button } from "antd";
+import { Table, Typography, Tooltip, Button } from "antd";
-import { CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons";
+import { CheckCircleFilled, ExclamationCircleFilled, StopOutlined } from "@ant-design/icons";
+import classNames from 'classnames';
 import { RowSelectionType } from "antd/es/table/interface";
 import { ColumnsType } from 'antd/es/table';
 import format from 'date-fns/format'
 
-import MessageVisiblityToggle from './components/message-visiblity-toggle';
-
 import { CHAT_HISTORY, fetchData, UPDATE_CHAT_MESSGAE_VIZ } from "../utils/apis";
 import { MessageType } from '../types/chat';
 
-
 const { Title } = Typography;
 
 function createUserNameFilters(messages: MessageType[]) {
@@ -41,9 +39,9 @@ export const OUTCOME_TIMEOUT = 3000;
 export default function Chat() {
   const [messages, setMessages] = useState([]);
   const [selectedRowKeys, setSelectedRows] = useState([]);
-  const [bulkVisibility, setBulkVisibility] = useState(false);
   const [bulkProcessing, setBulkProcessing] = useState(false);
   const [bulkOutcome, setBulkOutcome] = useState(null);
+  const [bulkAction, setBulkAction] = useState('');
   let outcomeTimeout = null;
 
   const getInfo = async () => {
@@ -55,12 +53,6 @@ export default function Chat() {
     }
   };
 
-  const updateMessage = message => {
-    const messageIndex = messages.findIndex(m => m.id === message.id);
-    messages.splice(messageIndex, 1, message)
-    setMessages([...messages]);
-  };
-
   useEffect(() => {
     getInfo();
     return () => {
@@ -77,13 +69,14 @@ export default function Chat() {
     },
   };
 
-  const handleBulkToggle = checked => {
+
-    setBulkVisibility(checked);
-  };
   const resetBulkOutcome = () => {
-    outcomeTimeout = setTimeout(() => { setBulkOutcome(null)}, OUTCOME_TIMEOUT);
+    outcomeTimeout = setTimeout(() => {
+      setBulkOutcome(null);
+      setBulkAction('');
+    }, OUTCOME_TIMEOUT);
   };
-  const handleSubmitBulk = async () => {
+  const handleSubmitBulk = async (bulkVisibility) => {
     setBulkProcessing(true);
     const result = await fetchData(UPDATE_CHAT_MESSGAE_VIZ, {
       auth: true,
@@ -113,9 +106,15 @@ export default function Chat() {
       resetBulkOutcome();
     }
     setBulkProcessing(false);
-    
   }
-
+  const handleSubmitBulkShow = () => {
+    setBulkAction('show');
+    handleSubmitBulk(true);
+  }
+  const handleSubmitBulkHide = () => {
+    setBulkAction('hide');
+    handleSubmitBulk(false);
+  }
 
   const chatColumns: ColumnsType<MessageType> = [
     {
@@ -129,7 +128,7 @@ export default function Chat() {
         return format(dateObject, 'PP pp');
       },
       sorter: (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
-      width: 80,
+      width: 90,
     },
     {
       title: 'User',
@@ -146,57 +145,61 @@ export default function Chat() {
           {author}
         </Tooltip>
       ),
-      width: 80,
+      width: 110,
     },
     {
       title: 'Message',
       dataIndex: 'body',
       key: 'body',
       className: 'message-col',
-      width: 230,
+      width: 320,
     },
     {
-      title: 'Show / Hide',
+      title: '',
       dataIndex: 'visible',
       key: 'visible',
-      filters: [{ text: 'visible', value: true }, { text: 'hidden', value: false }],
+      className: 'toggle-col',
+      filters: [{ text: 'Visible messages', value: true }, { text: 'Hidden messages', value: false }],
       onFilter: (value, record) => record.visible === value,
-      render: (visible, record) => (
+      render: visible => visible ? null : <StopOutlined />,
-        <MessageVisiblityToggle
+      width: 30,
-          isVisible={visible}
-          message={record}
-          setMessage={updateMessage}
-        />
-      ),
-      width: 60,
     },
   ];
 
+  const bulkDivClasses = classNames({
+    'bulk-editor': true,
+    active: selectedRowKeys.length,
+  });
   
   return (
     <div className="chat-messages">
       <Title level={2}>Chat Messages</Title>
-      <div className="bulk-editor">
+      <div className={bulkDivClasses}>
         <span className="label">Check multiple messages to change their visibility to: </span>
 
-        <Switch
-          className="toggler"
-          disabled={!selectedRowKeys.length}
-          checkedChildren="show"
-          unCheckedChildren="hide"
-          onChange={handleBulkToggle}
-          checked={bulkVisibility}
-        />
-
         <Button
           type="primary"
           size="small"
-          loading={bulkProcessing}
+          shape="round"
-          disabled={!selectedRowKeys.length}
+          className="button"
-          icon={bulkOutcome}
+          loading={bulkAction === 'show' && bulkProcessing}
-          onClick={handleSubmitBulk}
+          icon={bulkAction === 'show' && bulkOutcome}
+          disabled={!selectedRowKeys.length || (bulkAction && bulkAction !== 'show')}
+          onClick={handleSubmitBulkShow}
         >
-          Go
+          Show
+        </Button>
+        <Button
+          type="primary"
+          size="small"
+          shape="round"
+          className="button"
+          loading={bulkAction === 'hide' && bulkProcessing}
+          icon={bulkAction === 'hide' && bulkOutcome}
+          disabled={!selectedRowKeys.length || (bulkAction && bulkAction !== 'hide')}
+          onClick={handleSubmitBulkHide}
+        >
+          Hide
         </Button>
       </div>
       <Table

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

@@ -1,74 +0,0 @@
-// Wrapper for AntDesign Switch that makes an api call, then displays a confirmation icon upon 
-
-import React, { useState, useEffect } from "react";
-import { Switch } from "antd";
-import { CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons";
-import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from "../../utils/apis";
-import { MessageType } from '../../types/chat';
-import { OUTCOME_TIMEOUT } from "../chat";
-
-interface MessageToggleProps {
-  isVisible: boolean;
-  message: MessageType;
-  setMessage: (message: MessageType) => void,
-};
-
-
-export default function MessageVisiblityToggle({ isVisible, message, setMessage }: MessageToggleProps) {
-  let outcomeTimeout = null;
-  const [outcome, setOutcome] = useState(0);
-
-  const { id: messageId } = message;
-
-  const resetOutcome = () => {
-    outcomeTimeout = setTimeout(() => { setOutcome(0)}, OUTCOME_TIMEOUT);
-  };
-  
-  useEffect(() => {
-    return () => {
-      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)' }} />;
-  }
-
-  return (
-    <div className="toggle-switch">
-      <span className="outcome-icon">{outcomeIcon}</span>
-      <Switch
-        size="small"
-        onChange={updateChatMessage}
-        checked={isVisible}
-      />
-    </div>
-  );
-}

web/styles/chat.scss

@@ -6,6 +6,12 @@
   .ant-table-tbody > tr > td {
     transition: background 0.15s;
   }
+  .ant-table-row.hidden {
+    .ant-table-cell {
+      color: #444450; 
+    }
+
+  }
   .ant-table-cell {
     font-size: 12px;
 
@@ -13,6 +19,11 @@
       text-overflow: ellipsis;
       overflow: hidden;
     }
+    &.toggle-col {
+      label {
+        font-size: 11px;
+      }
+    }
   }
 
   .bulk-editor {
@@ -23,14 +34,23 @@
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
+    border-radius: 4px;
+
+    &.active {
+      .label {
+        color: #ccc;
+      }
+    }
 
     .label {
       font-size: .75rem;
       color: #666;
+      margin-right: .5rem;
     }
 
-    .toggler {
+    button {
-      margin: 0 1rem 0 .5rem;
+      margin: 0 .2rem;
+      font-size: .75rem;
     }
 
   }