call update message api on toggle switch and update ui state

web/pages/chat.tsx

@@ -5,7 +5,8 @@ import format from 'date-fns/format'
 
 import {
   CHAT_HISTORY,
-  fetchDataFromMain,
+  UPDATE_CHAT_MESSGAE_VIZ,
+  fetchData,
 } from "../utils/apis";
 
 const { Title } = Typography;
@@ -21,8 +22,13 @@ interface Message {
   visible: boolean;
 }
 
+interface MessageToggleProps {
+  isVisible: boolean;
+  message: Message;
+  setMessage: (message: Message) => {},
+};
 
-function createUserNameFilters(messages) {
+function createUserNameFilters(messages: Message[]) {
   const filtered = messages.reduce((acc, curItem) => {
     const curAuthor = curItem.author;
     if (!acc.some(item => item.text === curAuthor)) {
@@ -46,23 +52,58 @@ function createUserNameFilters(messages) {
   });
 }
 
+function MessageToggle({ isVisible, message, setMessage }: MessageToggleProps) {
+  const { id: messageId } = message;
+
+  const updateChatMessage = async () => {
+    const result = await fetchData(UPDATE_CHAT_MESSGAE_VIZ, {
+      auth: true,
+      method: 'POST',
+      data: {
+        visible: !isVisible,
+        id: messageId,
+      },
+    });
+
+    if (result.success && result.message === "changed") {
+      setMessage({
+        ...message,
+        visible: !isVisible,
+      });
+    }
+  }
+
+  return (
+    <Switch
+      size="small"
+      onChange={updateChatMessage}
+      defaultChecked={isVisible}
+    />
+  );
+}
+
 export default function Chat() {
   const [messages, setMessages] = useState([]);
 
   const getInfo = async () => {
     try {
-      const result = await fetchDataFromMain(CHAT_HISTORY);
+      const result = await fetchData(CHAT_HISTORY, { auth: false });
       setMessages(result);
     } catch (error) {
       console.log("==== error", error);
     }
   };
 
+  const updateMessage = message => {
+    const messageIndex = messages.findIndex(m => m.id === message.id);
+    messages.splice(messageIndex, 1, message)
+    setMessages([...messages]);
+  };
+
   useEffect(() => {
     getInfo();
   }, []);
 
-  
   const nameFilters = createUserNameFilters(messages);
   const rowSelection = {
     onChange: (selectedRowKeys, selectedRows) => {
@@ -118,13 +159,11 @@ export default function Chat() {
       key: 'visible',
       filters: [{ text: 'visible', value: true }, { text: 'hidden', value: false }],
       onFilter: (value, record) => record.visible === value,
-      render: visible => (
+      render: (visible, record) => (
-        <Switch
+        <MessageToggle
-          size="small"
+          isVisible={visible}
-          onChange={checked => {
+          message={record}
-            console.log(`switch to ${checked}`);
+          setMessage={updateMessage}
-          }}
-          defaultChecked={visible}
         />
       ),
       width: 60,

web/utils/apis.ts

@@ -34,41 +34,41 @@ export const LOGS_ALL = `${API_LOCATION}logs`;
 // Get warnings + errors
 export const LOGS_WARN = `${API_LOCATION}logs/warnings`;
 
-// Chat history
+// Get chat history
 export const CHAT_HISTORY = `${NEXT_PUBLIC_API_HOST}api/chat`;
 
+// Get chat history
+export const UPDATE_CHAT_MESSGAE_VIZ = `${NEXT_PUBLIC_API_HOST}api/admin/chat/updatemessagevisibility`;
+
 
 const GITHUB_RELEASE_URL = "https://api.github.com/repos/owncast/owncast/releases/latest";
 
-export async function fetchData(url) {
+export async function fetchData(url: string, options?: object) {
-  const options: RequestInit = {};
+  const {
+    data,
+    method = 'GET',
+    auth = true,
+  } = options || {};
 
-  if (ADMIN_USERNAME && ADMIN_STREAMKEY) {
+  const requestOptions: RequestInit = {
+    method,
+  };
+
+  if (data) {
+    requestOptions.body = JSON.stringify(data)
+  }
+
+  if (auth && ADMIN_USERNAME && ADMIN_STREAMKEY) {
     const encoded = btoa(`${ADMIN_USERNAME}:${ADMIN_STREAMKEY}`);
-    options.headers = {
+    requestOptions.headers = {
       'Authorization': `Basic ${encoded}`
     }
-    options.mode = 'cors';
+    requestOptions.mode = 'cors';
-    options.credentials = 'include'
+    requestOptions.credentials = 'include';
   }
 
   try {
-    const response = await fetch(url, options);
+    const response = await fetch(url, requestOptions);
-    if (!response.ok) {
-      const message = `An error has occured: ${response.status}`;
-      throw new Error(message);
-    }
-    const json = await response.json();
-    return json;
-  } catch (error) {
-    console.log(error)
-  }
-  return {};
-}
-
-export async function fetchDataFromMain(url) {
-  try {
-    const response = await fetch(url);
     if (!response.ok) {
       const message = `An error has occured: ${response.status}`;
       throw new Error(message);