style: improve code formatting and structure in ChannelsTable and render helpers

Author: songquanpeng

web/default/src/components/ChannelsTable.js

@@ -1,7 +1,17 @@
-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,
@@ -13,8 +23,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)}</>;
@@ -108,7 +118,7 @@ const ChannelsTable = () => {
 
   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(processChannelData);
       if (startIdx === 0) {
@@ -588,7 +598,15 @@ const ChannelsTable = () => {
                     />
                   </Table.Cell>
                   <Table.Cell>
-                    <div>
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexWrap: 'wrap',
+                        gap: '2px',
+                        rowGap: '6px',
+                      }}
+                    >
                       <Button
                         size={'tiny'}
                         positive

web/default/src/helpers/render.js

@@ -1,5 +1,5 @@
-import {Label, Message} from 'semantic-ui-react';
-import {getChannelOption} from './helper';
+import { Label, Message } from 'semantic-ui-react';
+import { getChannelOption } from './helper';
 import React from 'react';
 
 export function renderText(text, limit) {
@@ -16,7 +16,15 @@ export function renderGroup(group) {
   let groups = group.split(',');
   groups.sort();
   return (
-    <>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: '2px',
+        rowGap: '6px',
+      }}
+    >
       {groups.map((group) => {
         if (group === 'vip' || group === 'pro') {
           return <Label color='yellow'>{group}</Label>;
@@ -25,7 +33,7 @@ export function renderGroup(group) {
         }
         return <Label>{group}</Label>;
       })}
-    </>
+    </div>
   );
 }
 
@@ -106,8 +114,8 @@ export function renderChannelTip(channelId) {
     return <></>;
   }
   return (
-      <Message>
-        <div dangerouslySetInnerHTML={{__html: channel.tip}}></div>
-      </Message>
+    <Message>
+      <div dangerouslySetInnerHTML={{ __html: channel.tip }}></div>
+    </Message>
   );
 }