feat: 私信会话侧边栏项

shared/cache/useCache.ts

@@ -10,7 +10,7 @@ import { isValidStr } from '../utils/string-helper';
  * 用户缓存
  */
 export function useCachedUserInfo(
-  userId: string,
+  userId: string | null,
   refetch = false
 ): UserBaseInfo | Record<string, never> {
   const { data } = useQuery(

shared/index.tsx

@@ -61,8 +61,11 @@ export {
 
 // redux
 export { useAppSelector, useAppDispatch } from './redux/hooks/useAppSelector';
+export { useDMConverseList } from './redux/hooks/useConverse';
 export { useConverseMessage } from './redux/hooks/useConverseMessage';
+export { useUserId } from './redux/hooks/useUserInfo';
 export { userActions } from './redux/slices';
+export type { ChatConverseState } from './redux/slices/chat';
 export { setupRedux } from './redux/setup';
 export { createStore } from './redux/store';
 export type { AppStore, AppDispatch } from './redux/store';

shared/redux/hooks/useConverse.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import type { ChatConverseState } from '../slices/chat';
+import { useAppSelector } from './useAppSelector';
+
+/**
+ * 获取私信会话列表
+ * 并补充一些信息
+ */
+export function useDMConverseList(): ChatConverseState[] {
+  const converses = useAppSelector((state) => state.chat.converses);
+
+  return useMemo(
+    () =>
+      Object.entries(converses)
+        .filter(([, info]) => info.type === 'DM')
+        .map(([, info]) => info),
+    [converses]
+  );
+}

shared/redux/hooks/useUserInfo.ts

@@ -0,0 +1,8 @@
+import { useAppSelector } from './useAppSelector';
+
+/**
+ * 用户基本Id
+ */
+export function useUserId(): string | undefined {
+  return useAppSelector((state) => state.user.info?._id);
+}

shared/redux/slices/chat.ts

@@ -4,7 +4,7 @@ import type { ChatMessage } from '../../model/message';
 import _uniqBy from 'lodash/uniqBy';
 import _orderBy from 'lodash/orderBy';
 
-interface ChatConverseState extends ChatConverseInfo {
+export interface ChatConverseState extends ChatConverseInfo {
   messages: ChatMessage[];
 }
 

web/src/routes/Main/Content/Personal/Sidebar.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Icon } from '@iconify/react';
 import { SidebarItem } from '../SidebarItem';
+import { useDMConverseList } from 'pawchat-shared';
+import { SidebarDMItem } from './SidebarDMItem';
 
 const SidebarSection: React.FC<{
   action: React.ReactNode;
@@ -22,6 +24,8 @@ SidebarSection.displayName = 'SidebarSection';
  * 个人面板侧边栏组件
  */
 export const Sidebar: React.FC = React.memo(() => {
+  const converseList = useDMConverseList();
+
   return (
     <>
       <SidebarItem
@@ -37,11 +41,9 @@ export const Sidebar: React.FC = React.memo(() => {
 
       <SidebarSection action={<Icon icon="mdi-plus" />}>私信</SidebarSection>
 
-      <SidebarItem
-        name="用户1"
-        action={<Icon icon="mdi-close" />}
-        to={`/main/personal/converse/${'uuid'}`}
-      />
+      {converseList.map((converse) => {
+        return <SidebarDMItem key={converse._id} converse={converse} />;
+      })}
     </>
   );
 });

web/src/routes/Main/Content/Personal/SidebarDMItem.tsx

@@ -0,0 +1,45 @@
+import {
+  ChatConverseState,
+  useCachedUserInfo,
+  useUserId,
+} from 'pawchat-shared';
+import { isValidStr } from 'pawchat-shared/utils/string-helper';
+import React, { useMemo } from 'react';
+import { SidebarItem } from '../SidebarItem';
+
+interface SidebarDMItemProps {
+  converse: ChatConverseState;
+}
+export const SidebarDMItem: React.FC<SidebarDMItemProps> = React.memo(
+  (props) => {
+    const converse = props.converse;
+    const userId = useUserId();
+    const otherMemberId = converse.members.find((m) => m !== userId);
+    const memberInfo = useCachedUserInfo(otherMemberId ?? null);
+    const memberSize = converse.members.length;
+
+    const name = useMemo(() => {
+      if (isValidStr(converse.name)) {
+        return converse.name;
+      }
+
+      let name = memberInfo.nickname;
+      if (memberSize >= 3) {
+        name += ' 等人的会话';
+      }
+
+      return name;
+    }, [converse.name, memberInfo.nickname, memberSize]);
+
+    return (
+      <SidebarItem
+        key={converse._id}
+        name={name}
+        // TODO
+        // action={<Icon icon="mdi-close" />}
+        to={`/main/personal/converse/${converse._id}`}
+      />
+    );
+  }
+);
+SidebarDMItem.displayName = 'SidebarDMItem';