You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tailchat/web/src/routes/Main/Content/Personal/Friends/index.tsx

54 lines
1.6 KiB
TypeScript

import React from 'react';
import { PillTabPane, PillTabs } from '@/components/PillTabs';
import { AddFriend } from './AddFriend';
import { useAppSelector } from 'pawchat-shared';
/**
* 主要内容组件
*/
export const FriendPanel: React.FC = React.memo(() => {
const friends = useAppSelector((state) => state.user.friends);
const friendRequests = useAppSelector((state) => state.user.friendRequests);
const userId = useAppSelector((state) => state.user.info?._id);
return (
<div className="w-full">
<PillTabs>
<PillTabPane tab={'全部'} key="1">
<div className="py-2.5 px-5">
<div></div>
<div>{JSON.stringify(friends)}</div>
</div>
</PillTabPane>
<PillTabPane tab={'已发送'} key="2">
<div className="py-2.5 px-5">
<div></div>
<div>
{JSON.stringify(
friendRequests.filter((item) => item.from === userId)
)}
</div>
</div>
</PillTabPane>
<PillTabPane tab={'待处理'} key="3">
<div className="py-2.5 px-5">
<div></div>
<div>
{JSON.stringify(
friendRequests.filter((item) => item.to === userId)
)}
</div>
</div>
</PillTabPane>
<PillTabPane
tab={<span className="text-green-400"></span>}
key="4"
>
<AddFriend />
</PillTabPane>
</PillTabs>
</div>
);
});
FriendPanel.displayName = 'FriendPanel';