fix: fix cannot select test model when searching

Author: songquanpeng

web/default/src/components/ChannelsTable.js

@@ -1,17 +1,7 @@
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Button,
-  Dropdown,
-  Form,
-  Input,
-  Label,
-  Message,
-  Pagination,
-  Popup,
-  Table,
-} from 'semantic-ui-react';
-import { Link } from 'react-router-dom';
+import React, {useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Button, Dropdown, Form, Input, Label, Message, Pagination, Popup, Table,} from 'semantic-ui-react';
+import {Link} from 'react-router-dom';
 import {
   API,
   loadChannelModels,
@@ -23,8 +13,8 @@ import {
   timestamp2string,
 } from '../helpers';
 
-import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../constants';
-import { renderGroup, renderNumber } from '../helpers/render';
+import {CHANNEL_OPTIONS, ITEMS_PER_PAGE} from '../constants';
+import {renderGroup, renderNumber} from '../helpers/render';
 
 function renderTimestamp(timestamp) {
   return <>{timestamp2string(timestamp)}</>;
@@ -93,30 +83,32 @@ const ChannelsTable = () => {
   const [showPrompt, setShowPrompt] = useState(shouldShowPrompt(promptID));
   const [showDetail, setShowDetail] = useState(isShowDetail());
 
+  const processChannelData = (channel) => {
+    if (channel.models === '') {
+      channel.models = [];
+      channel.test_model = '';
+    } else {
+      channel.models = channel.models.split(',');
+      if (channel.models.length > 0) {
+        channel.test_model = channel.models[0];
+      }
+      channel.model_options = channel.models.map((model) => {
+        return {
+          key: model,
+          text: model,
+          value: model,
+        };
+      });
+      console.log('channel', channel);
+    }
+    return channel;
+  };
+
   const loadChannels = async (startIdx) => {
     const res = await API.get(`/api/channel/?p=${startIdx}`);
-    const { success, message, data } = res.data;
+    const {success, message, data} = res.data;
     if (success) {
-      let localChannels = data.map((channel) => {
-        if (channel.models === '') {
-          channel.models = [];
-          channel.test_model = '';
-        } else {
-          channel.models = channel.models.split(',');
-          if (channel.models.length > 0) {
-            channel.test_model = channel.models[0];
-          }
-          channel.model_options = channel.models.map((model) => {
-            return {
-              key: model,
-              text: model,
-              value: model,
-            };
-          });
-          console.log('channel', channel);
-        }
-        return channel;
-      });
+      let localChannels = data.map(processChannelData);
       if (startIdx === 0) {
         setChannels(localChannels);
       } else {
@@ -301,7 +293,8 @@ const ChannelsTable = () => {
     const res = await API.get(`/api/channel/search?keyword=${searchKeyword}`);
     const { success, message, data } = res.data;
     if (success) {
-      setChannels(data);
+      let localChannels = data.map(processChannelData);
+      setChannels(localChannels);
       setActivePage(1);
     } else {
       showError(message);