format frontend code

admin-frontend/src/pages/admin/configPage/index.tsx

@@ -1,56 +1,73 @@
-import {Button, Collapse, Empty, Row} from 'antd';
-import React, {ReactElement, useEffect, useState} from "react";
-import {useDispatch, useSelector} from 'react-redux';
-import {AddModal} from 'src/component/addSubsModal';
-import {SubscribeCard} from 'src/component/subscribeCard';
-import {groupConfigSelector, updateGroupSubs} from 'src/store/groupConfigSlice';
+import { Button, Collapse, Empty, Row } from "antd";
+import React, { ReactElement, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { AddModal } from "src/component/addSubsModal";
+import { SubscribeCard } from "src/component/subscribeCard";
+import {
+  groupConfigSelector,
+  updateGroupSubs,
+} from "src/store/groupConfigSlice";
 
 interface ConfigPageProp {
-  tab: string
+  tab: string;
 }
 export function ConfigPage(prop: ConfigPageProp) {
-  const [ showModal, setShowModal ] = useState<boolean>(false);
-  const [ currentAddingGroupNumber, setCurrentAddingGroupNumber ] = useState('');
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [currentAddingGroupNumber, setCurrentAddingGroupNumber] = useState("");
   const configData = useSelector(groupConfigSelector);
   const dispatcher = useDispatch();
   useEffect(() => {
-    dispatcher(updateGroupSubs())
+    dispatcher(updateGroupSubs());
   }, [prop.tab, dispatcher]);
-  const clickNew = (groupNumber: string) => (e: React.MouseEvent<HTMLButtonElement>) => {
-    setShowModal(_ => true);
-    setCurrentAddingGroupNumber(groupNumber);
-    e.stopPropagation();
-  }
-  
+  const clickNew =
+    (groupNumber: string) => (e: React.MouseEvent<HTMLButtonElement>) => {
+      setShowModal((_) => true);
+      setCurrentAddingGroupNumber(groupNumber);
+      e.stopPropagation();
+    };
+
   if (Object.keys(configData).length === 0) {
-    return <Empty />
+    return <Empty />;
   } else {
     let groups: Array<ReactElement> = [];
     for (let key of Object.keys(configData)) {
       let value = configData[key];
       groups.push(
-        <Collapse.Panel key={key} header={
-          <span>{`${key} - ${value.name}`}<Button style={{float: "right"}} onClick={clickNew(key)}>添加</Button></span>
-          }>
-            <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32},
-              { xs: 8, sm: 16, md: 24, lg: 32}]} align="middle">
-            {value.subscribes.map((subs, idx) => <SubscribeCard key={idx}
-              groupNumber={key} config={subs} />)}
+        <Collapse.Panel
+          key={key}
+          header={
+            <span>
+              {`${key} - ${value.name}`}
+              <Button style={{ float: "right" }} onClick={clickNew(key)}>
+                添加
+              </Button>
+            </span>
+          }
+        >
+          <Row
+            gutter={[
+              { xs: 8, sm: 16, md: 24, lg: 32 },
+              { xs: 8, sm: 16, md: 24, lg: 32 },
+            ]}
+            align="middle"
+          >
+            {value.subscribes.map((subs, idx) => (
+              <SubscribeCard key={idx} groupNumber={key} config={subs} />
+            ))}
           </Row>
         </Collapse.Panel>
-        )
+      );
     }
     return (
-    <div>
-      <Collapse>
-        {groups}
-      </Collapse>
-      <AddModal groupNumber={currentAddingGroupNumber} showModal={showModal} 
-        refresh={() => dispatcher(updateGroupSubs())}
-        setShowModal={(s: boolean) => setShowModal(_ => s)} />
-    </div>
-    )
+      <div>
+        <Collapse>{groups}</Collapse>
+        <AddModal
+          groupNumber={currentAddingGroupNumber}
+          showModal={showModal}
+          refresh={() => dispatcher(updateGroupSubs())}
+          setShowModal={(s: boolean) => setShowModal((_) => s)}
+        />
+      </div>
+    );
   }
 }
-
-

admin-frontend/src/pages/admin/index.tsx

@@ -1,37 +1,39 @@
-import {BugOutlined, SettingOutlined} from '@ant-design/icons';
-import {Layout, Menu} from 'antd';
-import React, {useState} from "react";
-import {useSelector} from 'react-redux';
-import {loginSelector} from 'src/store/loginSlice';
-import './admin.css';
-import {ConfigPage} from './configPage';
+import { BugOutlined, SettingOutlined } from "@ant-design/icons";
+import { Layout, Menu } from "antd";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { loginSelector } from "src/store/loginSlice";
+import "./admin.css";
+import { ConfigPage } from "./configPage";
 
 export function Admin() {
-  const login = useSelector(loginSelector)
-  const [ tab, changeTab ] = useState("manage");
+  const login = useSelector(loginSelector);
+  const [tab, changeTab] = useState("manage");
   return (
-  <Layout style={{ minHeight: '100vh' }}>
-    <Layout.Sider className="layout-side">
-      <div className="user">
-      </div>
-      <Menu mode="inline" theme="dark" defaultSelectedKeys={[tab]}
-        onClick={({key}) => changeTab(key)}>
-        <Menu.Item key="manage" icon={<SettingOutlined />}>订阅管理</Menu.Item>
-        { login.type === 'admin' &&
-        <Menu.Item key="log" icon={<BugOutlined />}>查看日志</Menu.Item>
-        }
-      </Menu>
-    </Layout.Sider>
-    <Layout.Content>
-      <div style={{margin: '24px', background: '#fff', minHeight: '640px'}}>
-      {
-        tab === 'manage' ? 
-        <ConfigPage tab={tab}/>
-        : null
-      }
-      </div>
-    </Layout.Content>
-  </Layout>
-  )
+    <Layout style={{ minHeight: "100vh" }}>
+      <Layout.Sider className="layout-side">
+        <div className="user"></div>
+        <Menu
+          mode="inline"
+          theme="dark"
+          defaultSelectedKeys={[tab]}
+          onClick={({ key }) => changeTab(key)}
+        >
+          <Menu.Item key="manage" icon={<SettingOutlined />}>
+            订阅管理
+          </Menu.Item>
+          {login.type === "admin" && (
+            <Menu.Item key="log" icon={<BugOutlined />}>
+              查看日志
+            </Menu.Item>
+          )}
+        </Menu>
+      </Layout.Sider>
+      <Layout.Content>
+        <div style={{ margin: "24px", background: "#fff", minHeight: "640px" }}>
+          {tab === "manage" ? <ConfigPage tab={tab} /> : null}
+        </div>
+      </Layout.Content>
+    </Layout>
+  );
 }
-

admin-frontend/src/pages/auth.tsx

@@ -1,28 +1,31 @@
-import React, {useEffect} from "react";
-import {useDispatch, useSelector} from "react-redux";
-import {useParams} from "react-router";
-import {Redirect} from 'react-router-dom';
-import {login, loginSelector} from 'src/store/loginSlice';
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router";
+import { Redirect } from "react-router-dom";
+import { login, loginSelector } from "src/store/loginSlice";
 
-interface AuthParam  {
-  code: string
+interface AuthParam {
+  code: string;
 }
 export function Auth() {
-  const { code } = useParams<AuthParam>(); 
+  const { code } = useParams<AuthParam>();
   const dispatch = useDispatch();
-  const loginState = useSelector(loginSelector)
+  const loginState = useSelector(loginSelector);
   useEffect(() => {
     const loginFun = async () => {
       dispatch(login(code));
-    }
+    };
     loginFun();
-  }, [code, dispatch])
-  return <>
-    { loginState.login ?
-      <Redirect to={{pathname: '/admin'}} /> :
-      loginState.failed ?
-      <div>登录失败，请重新获取连接</div> :
-      <div>Logining...</div>
-    }
-</>;
+  }, [code, dispatch]);
+  return (
+    <>
+      {loginState.login ? (
+        <Redirect to={{ pathname: "/admin" }} />
+      ) : loginState.failed ? (
+        <div>登录失败，请重新获取连接</div>
+      ) : (
+        <div>Logining...</div>
+      )}
+    </>
+  );
 }