From 69990bb7a2d80818543c3933688db79d3c923b00 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 23 Mar 2022 15:02:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=97=A0=E5=A5=BD=E5=8F=8B?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA=E4=B8=8E=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=A5=BD=E5=8F=8B=E5=BF=AB=E9=80=9F=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/PillTabs.tsx               |  2 +-
 .../Content/Personal/Friends/FriendList.tsx   | 22 +++++++++++++++++--
 .../Main/Content/Personal/Friends/index.tsx   | 13 +++++++----
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/web/src/components/PillTabs.tsx b/web/src/components/PillTabs.tsx
index 514edf8c..2dbf05e6 100644
--- a/web/src/components/PillTabs.tsx
+++ b/web/src/components/PillTabs.tsx
@@ -13,7 +13,7 @@ import './PillTabs.less';
  */
 export const PillTabs: React.FC<TabsProps> = React.memo((props) => {
   return (
-    <Tabs className="pill-tabs" type="card" animated={true}>
+    <Tabs {...props} className="pill-tabs" type="card" animated={true}>
       {props.children}
     </Tabs>
   );
diff --git a/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx b/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx
index 9aeee819..78034f26 100644
--- a/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx
+++ b/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx
@@ -13,13 +13,16 @@ import {
 } from 'tailchat-shared';
 import { UserListItem } from '@/components/UserListItem';
 import { IconBtn } from '@/components/IconBtn';
-import { Dropdown, Menu, Tooltip } from 'antd';
+import { Button, Dropdown, Menu, Tooltip } from 'antd';
 import { useHistory } from 'react-router';
+import { Problem } from '@/components/Problem';
 
 /**
  * 好友列表
  */
-export const FriendList: React.FC = React.memo(() => {
+export const FriendList: React.FC<{
+  onSwitchToAddFriend: () => void;
+}> = React.memo((props) => {
   const friends = useAppSelector((state) => state.user.friends);
   const history = useHistory();
   const dispatch = useAppDispatch();
@@ -49,6 +52,21 @@ export const FriendList: React.FC = React.memo(() => {
     });
   }, []);
 
+  if (friends.length === 0) {
+    return (
+      <Problem
+        text={
+          <div>
+            <p className="mb-2">{t('暂无好友')}</p>
+            <Button type="primary" onClick={props.onSwitchToAddFriend}>
+              {t('立即添加')}
+            </Button>
+          </div>
+        }
+      />
+    );
+  }
+
   return (
     <div className="py-2.5 px-5">
       <div>{t('好友列表')}</div>
diff --git a/web/src/routes/Main/Content/Personal/Friends/index.tsx b/web/src/routes/Main/Content/Personal/Friends/index.tsx
index 980895db..da2d4e9e 100644
--- a/web/src/routes/Main/Content/Personal/Friends/index.tsx
+++ b/web/src/routes/Main/Content/Personal/Friends/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { PillTabPane, PillTabs } from '@/components/PillTabs';
 import { AddFriend } from './AddFriend';
 import { t, useAppSelector } from 'tailchat-shared';
@@ -13,15 +13,20 @@ import { Badge } from 'antd';
 export const FriendPanel: React.FC = React.memo(() => {
   const friendRequests = useAppSelector((state) => state.user.friendRequests);
   const userId = useAppSelector((state) => state.user.info?._id);
+  const [activeKey, setActiveKey] = useState('1');
 
   const send = friendRequests.filter((item) => item.from === userId);
   const received = friendRequests.filter((item) => item.to === userId);
 
+  const handleSwitchToAddFriend = useCallback(() => {
+    setActiveKey('add');
+  }, []);
+
   return (
     <div className="w-full">
-      <PillTabs>
+      <PillTabs activeKey={activeKey} onChange={setActiveKey}>
         <PillTabPane tab={t('全部')} key="1">
-          <FriendList />
+          <FriendList onSwitchToAddFriend={handleSwitchToAddFriend} />
         </PillTabPane>
         <PillTabPane
           tab={
@@ -53,7 +58,7 @@ export const FriendPanel: React.FC = React.memo(() => {
         </PillTabPane>
         <PillTabPane
           tab={<span className="text-green-400">{t('添加好友')}</span>}
-          key="4"
+          key="add"
         >
           <AddFriend />
         </PillTabPane>