feat: 会话面板抬头

pull/13/head
moonrailgun
parent b6235fd058
commit b2c42f5f23

@ -22,6 +22,7 @@
"k35abe359": "Lobby",
"k35f486ba": "Nickname",
"k35f990b0": "View Detail",
"k36722a78": "Conversation with <1></1>",
"k3b4b656d": "About",
"k3bbf3bbd": "Register Account",
"k3c502edb": "E-mail can not be empty",
@ -64,6 +65,7 @@
"k7fc7e508": "Dark Mode",
"k821ff85a": "Common",
"k8582af3f": "Refuse",
"k8849b674": "Multiplayer conversations with <1></1> and <4></4>",
"k89df1d1e": "The network is abnormal",
"k8abdba5c": "Has been sent",
"k8acbe00": "Current service available",
@ -120,6 +122,7 @@
"kdd6c18f8": "Service exception",
"ke17b2c87": "Do not upload pictures that violate local laws and regulations",
"ke187440d": "Panel type cannot be empty",
"kea50b8e9": "Multi-person conversation with <1>{{membersEl}}</1> and others",
"kecbd7449": "Delete",
"ked2baf28": "Loading...",
"ked5385d5": "Create Panel",

@ -22,6 +22,7 @@
"k35abe359": "大厅",
"k35f486ba": "用户昵称",
"k35f990b0": "查看详情",
"k36722a78": "与 <1></1> 的会话",
"k3b4b656d": "关于",
"k3bbf3bbd": "注册账号",
"k3c502edb": "邮箱不能为空",
@ -64,6 +65,7 @@
"k7fc7e508": "暗黑模式",
"k821ff85a": "通用",
"k8582af3f": "拒绝",
"k8849b674": "与 <1></1> 和 <4></4> 的多人会话",
"k89df1d1e": "网络出现异常",
"k8abdba5c": "已发送",
"k8acbe00": "当前服务可用",
@ -120,6 +122,7 @@
"kdd6c18f8": "服务异常",
"ke17b2c87": "请勿上传违反当地法律法规的图片",
"ke187440d": "面板类型不能为空",
"kea50b8e9": "与 <1>{{membersEl}}</1> 等人的多人会话",
"kecbd7449": "删除",
"ked2baf28": "加载中...",
"ked5385d5": "创建面板",

@ -122,6 +122,7 @@ export { createStore } from './redux/store';
export type { AppStore, AppState, AppDispatch } from './redux/store';
// utils
export { joinArray } from './utils/array-helper';
export {
shouldShowMessageTime,
getMessageTimeDiff,

@ -0,0 +1,14 @@
import { joinArray } from '../array-helper';
describe('array-helper', () => {
test('joinArray', () => {
expect(joinArray([1, 2, 3], '5')).toMatchObject([1, '5', 2, '5', 3]);
expect(joinArray([{ a: 1 }, { a: 2 }, { a: 3 }], '5')).toMatchObject([
{ a: 1 },
'5',
{ a: 2 },
'5',
{ a: 3 },
]);
});
});

@ -0,0 +1,17 @@
import _flatten from 'lodash/flatten';
/**
* join
* join
*/
export function joinArray<T, K>(arr: T[], separator: K): (T | K)[] {
return _flatten(
arr.map((item, i) => {
if (i === 0) {
return [item];
} else {
return [separator, item];
}
})
);
}

@ -0,0 +1,60 @@
import { ChatBox } from '@/components/ChatBox';
import React from 'react';
import { joinArray, Trans, useAppSelector, useUserId } from 'tailchat-shared';
import { PanelCommonHeader } from '../common/Header';
import _without from 'lodash/without';
import _take from 'lodash/take';
import { UserName } from '@/components/UserName';
function useConverseTitle(converseId: string): React.ReactNode {
const members = useAppSelector(
(state) => state.chat.converses[converseId]?.members ?? []
);
const userId = useUserId();
const otherMembers = _without<string>(members, userId ?? '');
const len = otherMembers.length;
if (len === 1) {
return (
<Trans>
<UserName userId={otherMembers[0]} />
</Trans>
);
} else if (len === 2) {
return (
<Trans>
<UserName userId={otherMembers[0]} /> {' '}
<UserName userId={otherMembers[1]} />
</Trans>
);
} else {
const membersEl = joinArray(
_take(otherMembers, 2).map((uid) => <UserName key={uid} userId={uid} />),
<span></span>
);
return (
<Trans>
<span>{{ membersEl }}</span>
</Trans>
);
}
}
interface ConversePanelProps {
converseId: string;
}
export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
({ converseId }) => {
const title = useConverseTitle(converseId);
return (
<div className="flex flex-col overflow-hidden flex-1">
<PanelCommonHeader actions={[]}>{title}</PanelCommonHeader>
<div className="flex-1 overflow-hidden">
<ChatBox converseId={converseId} isGroup={false} />
</div>
</div>
);
}
);
ConversePanel.displayName = 'ConversePanel';

@ -1,4 +1,4 @@
import { ChatBox } from '@/components/ChatBox';
import { ConversePanel } from '@/components/Panel/personal/ConversePanel';
import React from 'react';
import { useParams } from 'react-router';
@ -6,13 +6,9 @@ interface UserConversePanelParams {
converseId: string;
}
export const ConversePanel: React.FC = React.memo(() => {
export const PersonalConverse: React.FC = React.memo(() => {
const params = useParams<UserConversePanelParams>();
return (
<div className="w-full h-full overflow-hidden">
<ChatBox converseId={params.converseId} isGroup={false} />
</div>
);
return <ConversePanel converseId={params.converseId} />;
});
ConversePanel.displayName = 'ConversePanel';
PersonalConverse.displayName = 'PersonalConverse';

@ -1,7 +1,7 @@
import React from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { PageContent } from '../PageContent';
import { ConversePanel } from './Converse';
import { PersonalConverse } from './Converse';
import { FriendPanel } from './Friends';
import { PluginsPanel } from './Plugins';
import { PersonalSidebar } from './Sidebar';
@ -16,7 +16,7 @@ export const Personal: React.FC = React.memo(() => {
<Route
path="/main/personal/converse/:converseId"
component={ConversePanel}
component={PersonalConverse}
/>
<Redirect to="/main/personal/friends" />

Loading…
Cancel
Save