Convert im_webapp from static mock prototypes to real backend integration
Implements all 11 product chapters (auth, messaging, contacts, groups,
files/favorites, calls, workplace/reports, settings, security) against the
real /v1/im REST API and native Tinode WS protocol, replacing the hardcoded
mock data the ba8f48ee prototype commit shipped with. Adds src/lib/im-api.js
as the REST client, plus supporting fixes across messages-view.jsx and the
attachment/upload/download pipeline (wrong SDK auth headers, group topic
naming, seq/timezone edge cases) found via live end-to-end testing against
the real backend.
Backup checkpoint before reconciling with origin/dev's parallel rewrite.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Your Name
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
ba8f48ee83
commit
251c9de87c
@@ -1,9 +1,22 @@
|
||||
import React from 'react';
|
||||
import QRCode from 'qrcodejs';
|
||||
import { pinyin } from 'pinyin-pro';
|
||||
|
||||
import HashNavigation from '../lib/navigation.js';
|
||||
import {
|
||||
getFriends, getFriendRequests, createFriendRequest, acceptFriendRequest, rejectFriendRequest,
|
||||
deleteFriend, updateFriendRemark, searchUsers, getUserProfile, createMyQRCode, getBlocks,
|
||||
blockUser, unblockUser, getFileUrl, getBootstrap
|
||||
} from '../lib/im-api.js';
|
||||
import { readCachedData, writeCachedData, useCachedData } from '../lib/use-cached-data.js';
|
||||
|
||||
const navigate = view => HashNavigation.navigateTo(view);
|
||||
// Carries an optional `uid` (and anything else already in the hash) across chapter-5 navigation --
|
||||
// e.g. address-book -> friend-profile -> friend-settings all need to know which person this is.
|
||||
const navigate = (view, uid) => {
|
||||
let hash = HashNavigation.setUrlSidePanel(window.location.hash, view);
|
||||
hash = uid ? HashNavigation.addUrlParam(hash, 'uid', uid) : HashNavigation.removeUrlParam(hash, 'uid');
|
||||
HashNavigation.navigateTo(hash);
|
||||
};
|
||||
|
||||
export const CONTACT_MANAGEMENT_VIEWS = [
|
||||
'address-book', 'friend-requests', 'add-friend', 'my-friend-qr', 'friend-search-result',
|
||||
@@ -12,27 +25,39 @@ export const CONTACT_MANAGEMENT_VIEWS = [
|
||||
'clear-chat-confirm'
|
||||
];
|
||||
|
||||
const FRIENDS = [
|
||||
{id: 'annie', name: '安妮', remark: '安妮 · 产品', initial: 'A', avatar: 'img/bkg/p09.jpg', account: 'AN1024'},
|
||||
{id: 'chen', name: '陈晨', initial: 'C', avatar: 'img/bkg/p05.jpg', account: 'CHEN88'},
|
||||
{id: 'lizi', name: '栗子来了', remark: '栗子', initial: 'L', avatar: 'img/bkg/p15.jpg', account: 'LIZI66'},
|
||||
{id: 'wang', name: '王珊珊', initial: 'W', avatar: 'img/bkg/p14.jpg', account: 'WSS2026'}
|
||||
];
|
||||
|
||||
const REQUESTS = [
|
||||
{id: 'r1', name: '祈万事安好', message: '我是设计交流群里的小祈', time: '10:24', status: 'pending', avatar: 'img/bkg/p03.jpg'},
|
||||
{id: 'r2', name: '一颗栗子', message: '你好，想认识一下', time: '昨天', status: 'accepted', avatar: 'img/bkg/p15.jpg'},
|
||||
{id: 'r3', name: '林间风', message: '通过手机号搜索到你', time: '星期一', status: 'rejected', avatar: 'img/bkg/p18.jpg'}
|
||||
];
|
||||
// Server's own `initial` (bootstrap.go displayInitial) is just the first Unicode code point of the
|
||||
// display name -- for Chinese names that's a hanzi, not a Latin letter, so it can't drive the A/B/C
|
||||
// section headers docs/images/通讯录.png actually shows. Group client-side by first-pinyin-letter.
|
||||
function alphaInitial(name) {
|
||||
const ch = (name || '').trim()[0] || '#';
|
||||
if (/[A-Za-z]/.test(ch)) {
|
||||
return ch.toUpperCase();
|
||||
}
|
||||
if (/[一-龥]/.test(ch)) {
|
||||
const letter = pinyin(ch, {pattern: 'first', toneType: 'none'});
|
||||
return /[a-z]/i.test(letter) ? letter.toUpperCase() : '#';
|
||||
}
|
||||
return '#';
|
||||
}
|
||||
|
||||
function Icon({children}) { return <i className="material-icons" aria-hidden="true">{children}</i>; }
|
||||
|
||||
function Header({title, back = 'messages-home', right, onRight}) {
|
||||
return <header className="people-header"><button type="button" onClick={() => navigate(back)} aria-label="返回"><Icon>arrow_back_ios_new</Icon></button><h1>{title}</h1>{right ? <button type="button" className="text" onClick={onRight}>{right}</button> : <span />}</header>;
|
||||
function Header({title, back = 'messages-home', backUid, right, onRight}) {
|
||||
return <header className="people-header"><button type="button" onClick={() => { if (!HashNavigation.goBack()) navigate(back, backUid); }} aria-label="返回"><Icon>arrow_back_ios_new</Icon></button><h1>{title}</h1>{right ? <button type="button" className="text" onClick={onRight}>{right}</button> : <span />}</header>;
|
||||
}
|
||||
|
||||
// `person.avatar_file_id` (real API field) is loaded lazily via a cached authenticated fetch --
|
||||
// file serving is auth-gated, there's no public URL a plain <img src> could point at directly.
|
||||
function Avatar({person, icon}) {
|
||||
return <span className="people-avatar">{person && person.avatar ? <img src={person.avatar} alt="" /> : <Icon>{icon || 'person'}</Icon>}</span>;
|
||||
const fileId = person && person.avatar_file_id;
|
||||
const [url, setUrl] = React.useState(null);
|
||||
React.useEffect(() => {
|
||||
if (!fileId) { setUrl(null); return undefined; }
|
||||
let live = true;
|
||||
getFileUrl(fileId).then(u => { if (live) setUrl(u); }).catch(() => {});
|
||||
return () => { live = false; };
|
||||
}, [fileId]);
|
||||
return <span className="people-avatar">{url ? <img src={url} alt="" /> : <Icon>{icon || 'person'}</Icon>}</span>;
|
||||
}
|
||||
|
||||
function Toast({message, onDone}) {
|
||||
@@ -44,94 +69,434 @@ function Toast({message, onDone}) {
|
||||
return message ? <div className="chat-toast" role="status">{message}</div> : null;
|
||||
}
|
||||
|
||||
function Search({value, onChange, placeholder}) {
|
||||
return <label className="people-search"><Icon>search</Icon><input value={value} onChange={event => onChange(event.target.value)} placeholder={placeholder} /></label>;
|
||||
function Search({value, onChange, placeholder, onSubmit}) {
|
||||
return <label className="people-search"><Icon>search</Icon><input value={value} onChange={event => onChange(event.target.value)}
|
||||
onKeyDown={event => { if (event.key === 'Enter' && onSubmit) onSubmit(); }} placeholder={placeholder} /></label>;
|
||||
}
|
||||
|
||||
function QrCard({group = false}) {
|
||||
// `payload` is the real `qr_payload` string from POST /me/qrcodes (already shaped like
|
||||
// `im://qr?token=...&purpose=add_friend` -- same scheme the demo literal used, no format change).
|
||||
function QrCard({payload, profile, loading}) {
|
||||
const ref = React.useRef(null);
|
||||
React.useEffect(() => {
|
||||
if (!ref.current) return;
|
||||
if (!ref.current || !payload) return;
|
||||
ref.current.innerHTML = '';
|
||||
new QRCode(ref.current, {text: group ? 'im://qr?token=demo-group-2026&purpose=join_group' : 'im://qr?token=demo-user-2026&purpose=add_friend', width: 190, height: 190, correctLevel: QRCode.CorrectLevel.M});
|
||||
}, [group]);
|
||||
return <section className="people-qr-card"><div className="people-qr-profile"><Avatar person={group ? {avatar: 'img/bkg/p22.jpg'} : FRIENDS[1]} /><span><strong>{group ? '产品研发群' : '陈晨'}</strong><small>{group ? '18 位成员' : '账号 CHEN88'}</small></span></div><div className="people-qrcode" ref={ref} /><p>{group ? '扫码申请加入群聊' : '扫一扫上面的二维码，加我为好友'}</p><small>二维码 24 小时内有效</small></section>;
|
||||
new QRCode(ref.current, {text: payload, width: 190, height: 190, correctLevel: QRCode.CorrectLevel.M});
|
||||
}, [payload]);
|
||||
return <section className="people-qr-card">
|
||||
<div className="people-qr-profile"><Avatar person={profile} /><span><strong>{(profile && profile.display_name) || ''}</strong>
|
||||
<small>{profile && profile.public_account ? '账号 ' + profile.public_account : ''}</small></span></div>
|
||||
<div className="people-qrcode" ref={ref} />
|
||||
{loading ? <p>正在生成二维码…</p> : <p>扫一扫上面的二维码，加我为好友</p>}
|
||||
<small>二维码 24 小时内有效</small>
|
||||
</section>;
|
||||
}
|
||||
|
||||
function AddressBook() {
|
||||
function AddressBook({myUserId, onTopicSelected}) {
|
||||
const [query, setQuery] = React.useState('');
|
||||
const visible = FRIENDS.filter(item => `${item.name}${item.remark || ''}`.includes(query));
|
||||
const groups = visible.reduce((result, item) => ({...result, [item.initial]: (result[item.initial] || []).concat(item)}), {});
|
||||
// Seeded from cache so re-opening the address book (very much a back-and-forth flow: check
|
||||
// contacts, open a chat, come back) doesn't drop straight back to "加载中…" for a friend list that
|
||||
// hasn't actually changed.
|
||||
// Keyed by myUserId (same convention as the 'bootstrap:'+myUserId cache just below) -- a bare
|
||||
// 'friends' key meant logging out and into a *different* account in the same tab would briefly
|
||||
// paint the previous account's cached friend list on mount, before the fresh getFriends() call
|
||||
// overwrote it moments later.
|
||||
const friendsCacheKey = myUserId ? 'friends:' + myUserId : null;
|
||||
const [friends, setFriends] = React.useState(() => (friendsCacheKey && readCachedData(friendsCacheKey)) || []);
|
||||
const [pendingCount, setPendingCount] = React.useState(0);
|
||||
const [loading, setLoading] = React.useState(() => !(friendsCacheKey && readCachedData(friendsCacheKey)));
|
||||
// Same bootstrap the message center already fetches (and caches under the same key) -- only need
|
||||
// it here for the file assistant's real topic, so a plain read of the shared cache is enough.
|
||||
const [bootstrap] = useCachedData(myUserId ? 'bootstrap:' + myUserId : null, getBootstrap, [myUserId]);
|
||||
const fileAssistantTopic = bootstrap && bootstrap.entries && bootstrap.entries.file_assistant
|
||||
&& bootstrap.entries.file_assistant.topic;
|
||||
React.useEffect(() => {
|
||||
getFriends().then(data => {
|
||||
const list = data.items || [];
|
||||
if (friendsCacheKey) { writeCachedData(friendsCacheKey, list); }
|
||||
setFriends(list);
|
||||
}).catch(() => {}).finally(() => setLoading(false));
|
||||
getFriendRequests('inbound', 'pending').then(data => setPendingCount((data.items || []).length)).catch(() => {});
|
||||
}, []);
|
||||
const visible = friends.filter(item => `${item.display_name}${item.remark || ''}`.includes(query));
|
||||
const groups = visible.reduce((result, item) => {
|
||||
const key = alphaInitial(item.remark || item.display_name);
|
||||
return {...result, [key]: (result[key] || []).concat(item)};
|
||||
}, {});
|
||||
const sortedKeys = Object.keys(groups).sort();
|
||||
const entries = [
|
||||
{icon: 'person_add_alt', label: '新朋友', route: 'friend-requests', badge: 1, tone: 'blue'},
|
||||
{icon: 'group', label: '群聊', route: 'group-list', tone: 'green'},
|
||||
{icon: 'folder_special', label: '文件助手', route: 'chat-standard', tone: 'orange'},
|
||||
{icon: 'person_add_alt', label: '新朋友', route: 'friend-requests', badge: pendingCount || null, tone: 'blue'},
|
||||
{icon: 'group', label: '群组', route: 'group-list', tone: 'green'},
|
||||
{icon: 'folder_special', label: '文件助手', route: 'chat-standard', tone: 'orange', fileAssistant: true},
|
||||
{icon: 'notifications', label: '系统消息', route: 'system-messages', tone: 'red'}
|
||||
];
|
||||
return <div className="people-page"><Header title="通讯录" right="添加" onRight={() => navigate('add-friend')} /><Search value={query} onChange={setQuery} placeholder="搜索联系人" /><main className="people-scroll"><section className="people-entry-list">{entries.map(item => <button type="button" key={item.label} onClick={() => navigate(item.route)}><Avatar icon={item.icon} /><strong>{item.label}</strong>{item.badge ? <em>{item.badge}</em> : null}<Icon>chevron_right</Icon></button>)}</section>{Object.keys(groups).map(initial => <section className="people-group" key={initial}><h2>{initial}</h2>{groups[initial].map(person => <button type="button" key={person.id} onClick={() => navigate('friend-profile')}><Avatar person={person} /><span><strong>{person.remark || person.name}</strong>{person.remark ? <small>{person.name}</small> : null}</span></button>)}</section>)}</main><nav className="people-index">{Object.keys(groups).map(value => <a href={`#people-${value}`} key={value}>{value}</a>)}</nav></div>;
|
||||
const scrollTo = key => {
|
||||
const el = document.getElementById('people-group-' + key);
|
||||
if (el) el.scrollIntoView({behavior: 'smooth', block: 'start'});
|
||||
};
|
||||
// The file assistant is a real topic (from bootstrap), not a route -- same bug/fix pattern as the
|
||||
// "常联系的人" shortcuts in message-center-view.jsx. Falls back to the old demo route only if
|
||||
// bootstrap hasn't resolved a real topic yet, so the entry never becomes a dead click.
|
||||
const openEntry = item => {
|
||||
if (item.fileAssistant && fileAssistantTopic && onTopicSelected) onTopicSelected(fileAssistantTopic);
|
||||
else navigate(item.route);
|
||||
};
|
||||
return <div className="people-page"><Header title="通讯录" right="添加" onRight={() => navigate('add-friend')} /><Search value={query} onChange={setQuery} placeholder="搜索联系人" />
|
||||
<main className="people-scroll">
|
||||
<section className="people-entry-list">{entries.map(item => <button type="button" key={item.label} onClick={() => openEntry(item)}><Avatar icon={item.icon} /><strong>{item.label}</strong>{item.badge ? <em>{item.badge}</em> : null}<Icon>chevron_right</Icon></button>)}</section>
|
||||
<h3 className="people-section-title">好友通讯录</h3>
|
||||
{loading ? <p className="people-empty-hint">加载中…</p> : sortedKeys.length === 0 ? <p className="people-empty-hint">暂无好友</p> : null}
|
||||
{sortedKeys.map(initial => <section className="people-group" id={'people-group-' + initial} key={initial}><h2>{initial}</h2>
|
||||
{groups[initial].map(person => <button type="button" key={person.user_id} onClick={() => { seedProfile(person); navigate('friend-profile', person.user_id); }}>
|
||||
<Avatar person={person} /><span><strong>{person.remark || person.display_name}</strong>{person.remark ? <small>{person.display_name}</small> : null}</span>
|
||||
</button>)}
|
||||
</section>)}
|
||||
</main>
|
||||
<nav className="people-index">{sortedKeys.map(value => <a href="#" key={value} onClick={e => { e.preventDefault(); scrollTo(value); }}>{value}</a>)}</nav>
|
||||
</div>;
|
||||
}
|
||||
|
||||
function requestStatusLabel(item) {
|
||||
if (item.status === 'pending') return item.direction === 'outbound' ? '已发送' : null;
|
||||
if (item.status === 'accepted') return '已添加';
|
||||
if (item.status === 'rejected') return '已拒绝';
|
||||
if (item.status === 'expired') return '已过期';
|
||||
return null;
|
||||
}
|
||||
|
||||
function FriendRequests({onToast}) {
|
||||
const [items, setItems] = React.useState(REQUESTS);
|
||||
const handle = (id, status) => {setItems(values => values.map(item => item.id === id ? {...item, status} : item)); onToast(status === 'accepted' ? '已通过好友申请' : '已拒绝好友申请');};
|
||||
return <div className="people-page"><Header title="新朋友" back="address-book" /><main className="people-request-list">{items.map(item => <article key={item.id}><Avatar person={item} /><div><strong>{item.name}</strong><p>{item.message}</p><small>{item.time}</small></div>{item.status === 'pending' ? <span><button type="button" onClick={() => handle(item.id, 'rejected')}>拒绝</button><button type="button" className="primary" onClick={() => handle(item.id, 'accepted')}>通过</button></span> : <em>{item.status === 'accepted' ? '已通过' : '已拒绝'}</em>}</article>)}</main></div>;
|
||||
const [items, setItems] = React.useState([]);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
React.useEffect(() => {
|
||||
getFriendRequests('all', 'all').then(data => setItems(data.items || [])).catch(() => {}).finally(() => setLoading(false));
|
||||
}, []);
|
||||
const handle = (item, accept) => {
|
||||
const nextStatus = accept ? 'accepted' : 'rejected';
|
||||
setItems(values => values.map(v => v.request_id === item.request_id ? {...v, status: nextStatus} : v));
|
||||
const call = accept ? acceptFriendRequest(item.request_id) : rejectFriendRequest(item.request_id);
|
||||
call.then(() => onToast(accept ? '已通过好友申请' : '已拒绝好友申请')).catch(err => {
|
||||
setItems(values => values.map(v => v.request_id === item.request_id ? {...v, status: item.status} : v));
|
||||
onToast(err.message || '操作失败');
|
||||
});
|
||||
};
|
||||
return <div className="people-page"><Header title="新朋友" back="address-book" /><main className="people-request-list">
|
||||
{loading ? <p className="people-empty-hint">加载中…</p> : items.length === 0 ? <p className="people-empty-hint">暂无新朋友申请</p> : null}
|
||||
{items.map(item => <article key={item.request_id}>
|
||||
<Avatar person={item.peer} />
|
||||
<div><strong>{(item.peer && item.peer.display_name) || item.applicant_id}</strong><p>{item.message || '请求添加您为好友'}</p><small>{new Date(item.created_at).toLocaleString()}</small></div>
|
||||
{item.status === 'pending' && item.direction === 'inbound' ?
|
||||
<span><button type="button" onClick={() => handle(item, false)}>拒绝</button><button type="button" className="primary" onClick={() => handle(item, true)}>通过验证</button></span> :
|
||||
<em>{requestStatusLabel(item)}</em>}
|
||||
</article>)}
|
||||
</main></div>;
|
||||
}
|
||||
|
||||
function AddFriend({result = false}) {
|
||||
const [query, setQuery] = React.useState(result ? 'AN1024' : '');
|
||||
return <div className="people-page"><Header title="添加好友" back="address-book" /><Search value={query} onChange={setQuery} placeholder="输入账号或手机号" /><main>{query ? <section className="people-search-result"><h2>搜索结果</h2><button type="button" onClick={() => navigate('group-member-profile')}><Avatar person={FRIENDS[0]} /><span><strong>安妮</strong><small>账号 AN1024 · 产品设计组</small></span><em>添加</em></button></section> : <section className="people-add-actions"><button type="button"><Icon>qr_code_scanner</Icon><span><strong>扫一扫</strong><small>扫描好友或群二维码</small></span><Icon>chevron_right</Icon></button><button type="button" onClick={() => navigate('my-friend-qr')}><Icon>qr_code_2</Icon><span><strong>我的二维码</strong><small>让朋友扫一扫添加我</small></span><Icon>chevron_right</Icon></button><button type="button"><Icon>share</Icon><span><strong>分享好友</strong><small>发送我的个人名片</small></span><Icon>chevron_right</Icon></button></section>}<p className="people-my-account">我的账号：CHEN88</p></main></div>;
|
||||
// `GET /users/{id}/profile` (getUserProfile) 403s for anyone who isn't already a friend, by design
|
||||
// (server's default `profile_visibility` is "friends"-only, server/im_http.go's imPrivacyAllowsProfile).
|
||||
// But the two places that hand you a *stranger* to look at -- an account search hit and a scanned
|
||||
// QR code -- already returned the exact same fields (display_name/avatar_file_id/gender/region/
|
||||
// public_account/signature, both go through userSearchItemPayload/copyOptionalProfileFields) *before*
|
||||
// that gate, unconditionally. Profile used to throw that object away and re-fetch via the gated
|
||||
// endpoint, which 403s and leaves the page stuck on "加载中…" forever with no way forward -- this
|
||||
// stashes what we already have so Profile can render immediately, and only uses getUserProfile as a
|
||||
// best-effort background refresh (for when the two really are/become friends, or the peer's privacy
|
||||
// setting is "everyone").
|
||||
function seedProfile(item) {
|
||||
if (!item || !item.user_id) return;
|
||||
writeCachedData('profile-seed:' + item.user_id, {
|
||||
...item,
|
||||
capabilities: {can_add_friend: !!item.can_add}
|
||||
});
|
||||
}
|
||||
|
||||
function AddFriend({result = false, onToast, onOpenScanner}) {
|
||||
const [query, setQuery] = React.useState('');
|
||||
const [searching, setSearching] = React.useState(false);
|
||||
const [searched, setSearched] = React.useState(result);
|
||||
const [results, setResults] = React.useState([]);
|
||||
const runSearch = q => {
|
||||
if (!q.trim()) { setSearched(false); setResults([]); return; }
|
||||
setSearching(true); setSearched(true);
|
||||
searchUsers(q.trim(), 'exact_account').then(data => setResults(data.items || [])).catch(() => setResults([])).finally(() => setSearching(false));
|
||||
};
|
||||
const shareCard = () => {
|
||||
createMyQRCode().then(data => {
|
||||
const text = `加我为好友：${data.qr_payload}`;
|
||||
if (navigator.share) {
|
||||
navigator.share({title: '添加好友', text}).catch(() => {});
|
||||
} else if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(text);
|
||||
}
|
||||
}).catch(() => {});
|
||||
};
|
||||
const actionLabel = item => item.relationship === 'friend' ? '已是好友' :
|
||||
item.relationship === 'pending_outbound' ? '已申请' : item.relationship === 'pending_inbound' ? '待通过' : '添加';
|
||||
return <div className="people-page"><Header title="添加好友" back="address-book" />
|
||||
<Search value={query} onChange={v => { setQuery(v); if (!v.trim()) { setSearched(false); setResults([]); } }} placeholder="查找账号" onSubmit={() => runSearch(query)} />
|
||||
<main>
|
||||
{searched ? <section className="people-search-result"><h2>查找人</h2>
|
||||
{searching ? <p className="people-empty-hint">搜索中…</p> : results.length === 0 ? <p className="people-empty-hint">未找到相关用户</p> :
|
||||
results.map(item => <button type="button" key={item.user_id}
|
||||
onClick={() => { seedProfile(item); item.relationship === 'friend' ? navigate('friend-profile', item.user_id) : navigate('group-member-profile', item.user_id); }}>
|
||||
<Avatar person={item} /><span><strong>{item.display_name}</strong></span>
|
||||
<em className={item.relationship === 'none' ? 'people-add-cta' : ''}>{actionLabel(item)}</em>
|
||||
</button>)}
|
||||
</section> : <section className="people-add-actions">
|
||||
<button type="button" onClick={() => navigate('my-friend-qr')}><Icon>qr_code</Icon><span><strong>我的二维码</strong><small>让朋友扫一扫添加我</small></span><Icon>chevron_right</Icon></button>
|
||||
<button type="button" onClick={() => onOpenScanner ? onOpenScanner() : onToast('暂不支持扫码，请使用账号搜索添加好友')}><Icon>qr_code_scanner</Icon><span><strong>扫一扫</strong><small>扫描好友或群二维码</small></span><Icon>chevron_right</Icon></button>
|
||||
<button type="button" onClick={shareCard}><Icon>share</Icon><span><strong>分享给好友</strong><small>分享链接给好友，一起来玩吧</small></span><Icon>chevron_right</Icon></button>
|
||||
</section>}
|
||||
</main>
|
||||
</div>;
|
||||
}
|
||||
|
||||
function QrPage({onToast}) {
|
||||
return <div className="people-page people-qr-page"><Header title="我的二维码" back="add-friend" /><main><QrCard /><div className="people-qr-actions"><button type="button" onClick={() => onToast('二维码名片已分享')}><Icon>share</Icon><span>分享好友</span></button><button type="button" onClick={() => onToast('二维码已保存到相册')}><Icon>download</Icon><span>保存到相册</span></button></div></main></div>;
|
||||
const [payload, setPayload] = React.useState(null);
|
||||
const [profile, setProfile] = React.useState(null);
|
||||
React.useEffect(() => {
|
||||
createMyQRCode().then(data => { setPayload(data.qr_payload); setProfile(data.display_profile); }).catch(() => onToast('二维码生成失败'));
|
||||
}, []);
|
||||
const share = () => {
|
||||
if (navigator.share && payload) {
|
||||
navigator.share({title: '添加好友', text: payload}).then(() => onToast('二维码名片已分享')).catch(() => {});
|
||||
} else if (navigator.clipboard && payload) {
|
||||
navigator.clipboard.writeText(payload);
|
||||
onToast('链接已复制');
|
||||
}
|
||||
};
|
||||
const save = () => {
|
||||
const canvas = document.querySelector('.people-qrcode canvas');
|
||||
if (!canvas) { onToast('二维码尚未生成'); return; }
|
||||
const a = document.createElement('a');
|
||||
a.href = canvas.toDataURL('image/png');
|
||||
a.download = '我的二维码.png';
|
||||
a.click();
|
||||
onToast('二维码已保存到相册');
|
||||
};
|
||||
return <div className="people-page people-qr-page"><Header title="我的二维码" back="add-friend" /><main><QrCard payload={payload} profile={profile} loading={!payload} />
|
||||
<div className="people-qr-actions"><button type="button" onClick={share}><Icon>share</Icon><span>分享好友</span></button><button type="button" onClick={save}><Icon>download</Icon><span>保存到相册</span></button></div>
|
||||
</main></div>;
|
||||
}
|
||||
|
||||
function Verification({onToast}) {
|
||||
const [message, setMessage] = React.useState('我是产品研发群里的陈晨');
|
||||
return <div className="people-page"><Header title="好友验证" back="group-member-profile" /><main className="people-verify"><Avatar person={FRIENDS[0]} /><h2>安妮</h2><label><span>验证留言</span><textarea value={message} maxLength="50" onChange={event => setMessage(event.target.value)} /><small>{message.length}/50</small></label><button type="button" className="people-primary" disabled={!message.trim()} onClick={() => {onToast('好友申请已发送'); window.setTimeout(() => navigate('group-member-profile'), 800);}}>发送申请</button></main></div>;
|
||||
function Verification({uid, onToast}) {
|
||||
// Same seed-then-best-effort-refresh as Profile -- reached right after it (via its "添加好友"
|
||||
// button), so the cache this reads is the one Profile itself just kept warm.
|
||||
const [profile, setProfile] = React.useState(() => (uid ? readCachedData('profile-seed:' + uid) : null));
|
||||
const [message, setMessage] = React.useState('');
|
||||
const [sending, setSending] = React.useState(false);
|
||||
const [sent, setSent] = React.useState(false);
|
||||
React.useEffect(() => {
|
||||
if (!uid) return;
|
||||
getUserProfile(uid).then(data => { writeCachedData('profile-seed:' + uid, data); setProfile(data); }).catch(() => {});
|
||||
}, [uid]);
|
||||
const alreadyPending = profile && (profile.relationship === 'pending_outbound' || profile.relationship === 'pending_inbound');
|
||||
const alreadyFriend = profile && profile.relationship === 'friend';
|
||||
const send = () => {
|
||||
setSending(true);
|
||||
createFriendRequest(uid, message.trim(), 'search').then(() => {
|
||||
onToast('好友申请已发送'); setSent(true);
|
||||
// Patch the seed Profile will re-read on remount -- its own background getUserProfile refresh
|
||||
// can't do this for us, since a stranger-turned-pending peer still fails that gated endpoint
|
||||
// the exact same way a stranger does (server only exempts an established "friend").
|
||||
writeCachedData('profile-seed:' + uid, {...(readCachedData('profile-seed:' + uid) || {}), relationship: 'pending_outbound'});
|
||||
window.setTimeout(() => navigate('group-member-profile', uid), 800);
|
||||
}).catch(err => onToast(err.message || '发送失败')).finally(() => setSending(false));
|
||||
};
|
||||
return <div className="people-page"><Header title="好友验证" back="group-member-profile" backUid={uid} /><main className="people-verify">
|
||||
<Avatar person={profile} /><h2>{(profile && profile.display_name) || ''}</h2>
|
||||
{alreadyFriend ? <p className="people-empty-hint">你们已经是好友了</p> :
|
||||
alreadyPending || sent ? <p className="people-empty-hint">好友申请正在等待验证</p> :
|
||||
<label><span>验证留言</span><textarea value={message} maxLength="50" placeholder="我是祈万事安好" onChange={event => setMessage(event.target.value)} /><small>{message.length}/50</small></label>}
|
||||
{alreadyFriend || alreadyPending || sent ? null : <div className="people-verify-actions">
|
||||
<button type="button" onClick={() => navigate('group-member-profile', uid)}>取消</button>
|
||||
<button type="button" className="people-primary" disabled={sending} onClick={send}>{sending ? '发送中…' : '发送'}</button>
|
||||
</div>}
|
||||
</main></div>;
|
||||
}
|
||||
|
||||
function Profile({friend, onToast}) {
|
||||
const person = friend ? FRIENDS[0] : FRIENDS[2];
|
||||
return <div className="people-page"><Header title="个人资料" back={friend ? 'address-book' : 'chat-standard'} right={friend ? '设置' : null} onRight={() => navigate('friend-settings')} /><main className="people-profile"><section><Avatar person={person} /><div><h2>{person.remark || person.name}</h2><p>{person.remark ? `昵称：${person.name}` : '产品研发群成员'}</p><p>账号：{person.account}</p></div><Icon>qr_code_2</Icon></section><dl><div><dt>性别</dt><dd>女</dd></div><div><dt>地区</dt><dd>上海 浦东新区</dd></div><div><dt>个性签名</dt><dd>保持好奇，认真生活。</dd></div></dl>{friend ? <div className="people-profile-actions"><button type="button" className="people-primary" onClick={() => navigate('chat-standard')}><Icon>chat_bubble_outline</Icon>发消息</button><button type="button" onClick={() => navigate('call-history')}><Icon>call</Icon>音视频通话</button></div> : <button type="button" className="people-primary" onClick={() => navigate('friend-verification')}><Icon>person_add_alt</Icon>添加好友</button>}</main></div>;
|
||||
function Profile({uid, friend, onTopicSelected, onToast}) {
|
||||
const [profile, setProfile] = React.useState(() => (uid ? readCachedData('profile-seed:' + uid) : null));
|
||||
// A failed fetch with no seed to fall back on previously left this stuck on "加载中…" forever --
|
||||
// tracked separately from `profile` itself (which legitimately stays null while genuinely still
|
||||
// loading) so the render below can tell the two apart, same fix as DownloadPage's `loadError`.
|
||||
const [loadError, setLoadError] = React.useState(false);
|
||||
React.useEffect(() => {
|
||||
if (!uid) return;
|
||||
getUserProfile(uid).then(data => {
|
||||
writeCachedData('profile-seed:' + uid, data);
|
||||
setProfile(data);
|
||||
}).catch(() => {
|
||||
// Expected for anyone who isn't a friend yet (server-side privacy default) -- if a search/QR
|
||||
// seed already got us a usable preview, keep showing that instead of erroring the page out.
|
||||
// Only a total stranger with no seed data at all (e.g. a stale/direct deep link) has nothing to
|
||||
// show, and that's the one case worth telling the user about.
|
||||
setProfile(current => {
|
||||
if (!current) { onToast('资料加载失败'); setLoadError(true); }
|
||||
return current;
|
||||
});
|
||||
});
|
||||
}, [uid]);
|
||||
if (!profile) return <div className="people-page"><Header title="个人资料" back={friend ? 'address-book' : 'chat-standard'} /><main className="people-profile"><p className="people-empty-hint">{loadError ? '资料加载失败，请重试' : '加载中…'}</p></main></div>;
|
||||
const canAdd = profile.capabilities && profile.capabilities.can_add_friend;
|
||||
const isFriend = profile.relationship === 'friend';
|
||||
// canAdd===false covers several real, distinct relationships (found live: searching a friend who
|
||||
// had blocked me showed this exact page claiming a request was "pending verification" when nothing
|
||||
// had been sent and nothing ever could be -- they'd blocked me). Only pending_outbound actually
|
||||
// matches that wording; the others need their own accurate text instead of reusing it as a catch-all.
|
||||
const cannotAddReason = profile.relationship === 'blocked_by_peer' ? '对方已将你拉黑，无法添加为好友' :
|
||||
profile.relationship === 'blocked_by_me' ? '你已拉黑对方，需先取消拉黑才能添加为好友' :
|
||||
profile.relationship === 'pending_inbound' ? '对方已向你发送好友申请，请前往"新朋友"处理' :
|
||||
'好友申请正在等待验证';
|
||||
// Real native Tinode p2p topic name (from my side) is just the peer's own user_id ("usrXXXX") --
|
||||
// NOT `profile.topic` (a separate "p2pXXXX" identifier the custom REST layer uses internally,
|
||||
// which Tinode.topicType() doesn't recognize, so selecting it left the message pane blank).
|
||||
const openChat = () => onTopicSelected(uid);
|
||||
return <div className="people-page"><Header title="个人资料" back={friend ? 'address-book' : 'chat-standard'}
|
||||
right={isFriend ? '设置' : null} onRight={() => navigate('friend-settings', uid)} />
|
||||
<main className="people-profile">
|
||||
<section><Avatar person={profile} /><div><h2>{profile.display_name}</h2>
|
||||
{profile.public_account ? <p>用户名：{profile.public_account}</p> : null}
|
||||
{profile.region ? <p>地区：{profile.region}</p> : null}</div><Icon>qr_code</Icon></section>
|
||||
<dl>{profile.gender ? <div><dt>性别</dt><dd>{profile.gender}</dd></div> : null}
|
||||
<div><dt>个性签名</dt><dd className={profile.signature ? '' : 'muted'}>{profile.signature || '此人很懒什么都没留下~'}</dd></div>
|
||||
</dl>
|
||||
{isFriend ? <div className="people-profile-actions">
|
||||
<button type="button" className="people-primary" onClick={openChat}><Icon>chat_bubble_outline</Icon>发消息</button>
|
||||
<button type="button" onClick={openChat}><Icon>call</Icon>音视频通话</button>
|
||||
</div> :
|
||||
canAdd ? <button type="button" className="people-primary" onClick={() => navigate('friend-verification', uid)}><Icon>person_add_alt</Icon>添加好友</button> :
|
||||
<p className="people-empty-hint">{cannotAddReason}</p>}
|
||||
</main>
|
||||
</div>;
|
||||
}
|
||||
|
||||
function Toggle({checked, onChange}) { return <button type="button" role="switch" aria-checked={checked} className={'people-switch' + (checked ? ' checked' : '')} onClick={() => onChange(!checked)}><i /></button>; }
|
||||
|
||||
function Settings({initialBlocked, onToast}) {
|
||||
function Settings({uid, initialBlocked, onToast}) {
|
||||
// Same seed-from-what-we-already-know as Profile/Verification -- getUserProfile can 403 even for a
|
||||
// real, current friend (see seedProfile's own comment), which used to leave this page's header
|
||||
// blank instead of just stuck like Profile, but no less wrong.
|
||||
const [profile, setProfile] = React.useState(() => (uid ? readCachedData('profile-seed:' + uid) : null));
|
||||
const [blocked, setBlocked] = React.useState(initialBlocked);
|
||||
const [pinned, setPinned] = React.useState(false);
|
||||
const [muted, setMuted] = React.useState(false);
|
||||
const [blocked, setBlocked] = React.useState(initialBlocked);
|
||||
return <div className="people-page"><Header title="聊天设置" back="friend-profile" /><main className="people-settings"><section className="people-settings-profile"><Avatar person={FRIENDS[0]} /><strong>安妮 · 产品</strong></section><section><button type="button" onClick={() => navigate('history-search')}><span>查找聊天记录</span><Icon>chevron_right</Icon></button><button type="button"><span>消息保存方式</span><small>永久</small><Icon>chevron_right</Icon></button></section><section><div><span>置顶聊天</span><Toggle checked={pinned} onChange={setPinned} /></div><div><span>消息免打扰</span><Toggle checked={muted} onChange={setMuted} /></div><div><span>加入黑名单</span><Toggle checked={blocked} onChange={value => value ? navigate('block-confirm') : (setBlocked(false), onToast('已移出黑名单'))} /></div></section><section><button type="button"><span>设置备注</span><Icon>chevron_right</Icon></button><button type="button" onClick={() => navigate('abuse-report-reasons')}><span>投诉与举报</span><Icon>chevron_right</Icon></button><button type="button" onClick={() => navigate('clear-chat-confirm')}><span>清除聊天记录</span><Icon>chevron_right</Icon></button></section><button type="button" className="people-danger" onClick={() => navigate('friend-delete-confirm')}>删除好友</button></main></div>;
|
||||
const [editingRemark, setEditingRemark] = React.useState(false);
|
||||
const [remark, setRemark] = React.useState('');
|
||||
const [remarkDraft, setRemarkDraft] = React.useState('');
|
||||
React.useEffect(() => {
|
||||
if (!uid) return;
|
||||
getUserProfile(uid).then(p => { writeCachedData('profile-seed:' + uid, p); setProfile(p); setBlocked(p.relationship === 'blocked_by_me'); }).catch(() => {});
|
||||
// GET /users/{id}/profile never exposes the real remark (backend's userProfilePayload always
|
||||
// calls userSummaryPayload(user, "") -- confirmed against im_be/server/im_http.go:7844 --
|
||||
// folding an empty remark into display_name instead of returning a separate field), only the
|
||||
// friends list endpoint's friendListItemPayload does. Look this friend up there instead.
|
||||
getFriends().then(data => {
|
||||
const entry = (data.items || []).find(item => item.user_id === uid);
|
||||
if (entry) setRemark(entry.remark || '');
|
||||
}).catch(() => {});
|
||||
}, [uid]);
|
||||
const saveRemark = () => {
|
||||
const value = remarkDraft.trim();
|
||||
updateFriendRemark(uid, value).then(() => {
|
||||
setRemark(value);
|
||||
setEditingRemark(false); onToast('备注已更新');
|
||||
}).catch(err => onToast(err.message || '备注更新失败'));
|
||||
};
|
||||
return <div className="people-page"><Header title="聊天设置" back="friend-profile" backUid={uid} /><main className="people-settings">
|
||||
<section className="people-settings-profile"><Avatar person={profile} /><strong>{(profile && profile.display_name) || ''}</strong></section>
|
||||
<section><button type="button" onClick={() => HashNavigation.navigateTo(
|
||||
HashNavigation.addUrlParam(HashNavigation.setUrlSidePanel(window.location.hash, 'history-search'), 'topic', uid))}>
|
||||
<span>查看聊天记录</span><Icon>chevron_right</Icon>
|
||||
</button>
|
||||
<div><span>消息传输方式</span><small>已启动加密传输</small></div></section>
|
||||
<section><div><span>置顶聊天</span><Toggle checked={pinned} onChange={setPinned} /></div>
|
||||
<div><span>消息免打扰</span><Toggle checked={muted} onChange={setMuted} /></div>
|
||||
<button type="button" onClick={() => navigate('clear-chat-confirm', uid)}><span>清空聊天记录</span><Icon>chevron_right</Icon></button>
|
||||
{editingRemark ?
|
||||
<div className="people-remark-edit"><input value={remarkDraft} maxLength="20" onChange={e => setRemarkDraft(e.target.value)} autoFocus /><button type="button" onClick={saveRemark}>保存</button></div> :
|
||||
<button type="button" onClick={() => { setRemarkDraft(remark); setEditingRemark(true); }}><span>备注</span>{remark ? <small>{remark}</small> : null}<Icon>chevron_right</Icon></button>}
|
||||
<div><span>{blocked ? '取消拉黑' : '拉黑'}</span><Toggle checked={!!blocked} onChange={value => {
|
||||
if (value) { navigate('block-confirm', uid); return; }
|
||||
unblockUser(uid).then(() => { setBlocked(false); onToast('已移出黑名单'); }).catch(err => onToast(err.message || '操作失败'));
|
||||
}} /></div>
|
||||
<button type="button" onClick={() => {
|
||||
// The local navigate(view, uid) helper only carries a single `uid` param -- the report
|
||||
// flow (security-support-view.jsx's ReportReasons/ReportDetails) needs target_type/
|
||||
// target_id/target_name, so build the hash directly here rather than through it.
|
||||
let hash = HashNavigation.setUrlSidePanel(window.location.hash, 'abuse-report-reasons');
|
||||
hash = HashNavigation.addUrlParam(hash, 'target_type', 'user');
|
||||
hash = HashNavigation.addUrlParam(hash, 'target_id', uid);
|
||||
hash = HashNavigation.addUrlParam(hash, 'target_name', (profile && profile.display_name) || uid);
|
||||
HashNavigation.navigateTo(hash);
|
||||
}}><span>投诉与举报</span><Icon>chevron_right</Icon></button>
|
||||
</section>
|
||||
{blocked ? null : <button type="button" className="people-danger" onClick={() => navigate('friend-delete-confirm', uid)}>删除好友</button>}
|
||||
</main></div>;
|
||||
}
|
||||
|
||||
function BlockList({onToast}) {
|
||||
const [people, setPeople] = React.useState([FRIENDS[3], FRIENDS[2]]);
|
||||
return <div className="people-page"><Header title="黑名单" back="friend-settings" /><main className="people-block-list">{people.length ? people.map(person => <article key={person.id}><Avatar person={person} /><span><strong>{person.name}</strong><small>已阻止消息和通话</small></span><button type="button" onClick={() => {setPeople(items => items.filter(item => item.id !== person.id)); onToast('已移出黑名单');}}>移出</button></article>) : <div className="people-empty"><Icon>person_off</Icon><strong>黑名单为空</strong></div>}</main></div>;
|
||||
const [people, setPeople] = React.useState([]);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
React.useEffect(() => { getBlocks().then(data => setPeople(data.items || [])).catch(() => {}).finally(() => setLoading(false)); }, []);
|
||||
const remove = userId => {
|
||||
unblockUser(userId).then(() => { setPeople(items => items.filter(item => item.user_id !== userId)); onToast('已移出黑名单'); })
|
||||
.catch(err => onToast(err.message || '操作失败'));
|
||||
};
|
||||
// The only entry point into this view is personal-settings-view.jsx's "设置" list
|
||||
// ('android-settings'), not friend-settings -- this page has no friend uid in scope at all.
|
||||
return <div className="people-page"><Header title="黑名单" back="android-settings" /><main className="people-block-list">
|
||||
{loading ? <p className="people-empty-hint">加载中…</p> : people.length ?
|
||||
people.map(item => <article key={item.user_id}><Avatar person={item.user} /><span><strong>{(item.user && item.user.display_name) || item.user_id}</strong><small>已阻止消息和通话</small></span><button type="button" onClick={() => remove(item.user_id)}>移出</button></article>) :
|
||||
<div className="people-empty"><Icon>person_off</Icon><strong>黑名单为空</strong></div>}
|
||||
</main></div>;
|
||||
}
|
||||
|
||||
function ConfirmSheet({type, onToast}) {
|
||||
function ConfirmSheet({type, uid, tinode, onToast}) {
|
||||
const [busy, setBusy] = React.useState(false);
|
||||
const config = {
|
||||
delete: {title: '删除好友', text: '删除后将解除好友关系，对方将无法继续向你发送消息。聊天记录仍会保留。', action: '确认删除', route: 'address-book', toast: '好友已删除'},
|
||||
block: {title: '加入黑名单', text: '加入黑名单后，你将不再收到对方的消息和通话。', action: '确认拉黑', route: 'friend-settings-blocked', toast: '已加入黑名单'},
|
||||
clear: {title: '清除聊天记录', text: '仅清除你自己的聊天记录，不会影响对方，也不会删除已收藏内容。', action: '确认清除', route: 'friend-settings', toast: '聊天记录已清除'}
|
||||
delete: {title: '删除好友', text: '删除后将解除好友关系，对方将无法继续向你发送消息。聊天记录仍会保留。', action: '确认删除', route: 'address-book', toast: '好友已删除', keepUid: false},
|
||||
block: {title: '黑名单', text: '拉黑后将不会收到对方的消息，可在"设置"—"黑名单"查看人员名单', action: '确定', route: 'friend-settings-blocked', toast: '已加入黑名单', keepUid: true},
|
||||
clear: {title: '清除聊天记录', text: '清空后不可找回，确定要清空当前会话的历史记录吗？', action: '确定', route: 'friend-settings', toast: '聊天记录已清除', keepUid: true}
|
||||
}[type];
|
||||
return <div className="people-page"><Settings initialBlocked={type === 'block'} onToast={onToast} /><div className="people-sheet-backdrop"><section className="people-confirm-sheet" role="dialog" aria-modal="true"><i /><h2>{config.title}</h2><p>{config.text}</p><button type="button" className="danger" onClick={() => {onToast(config.toast); window.setTimeout(() => navigate(config.route), 700);}}>{config.action}</button><button type="button" onClick={() => navigate('friend-settings')}>取消</button></section></div></div>;
|
||||
const confirm = () => {
|
||||
setBusy(true);
|
||||
let call;
|
||||
if (type === 'delete') call = deleteFriend(uid);
|
||||
else if (type === 'block') call = blockUser(uid);
|
||||
else {
|
||||
// No dedicated "clear my view of history" REST endpoint exists yet -- this is the same native
|
||||
// Tinode soft-delete-all-for-me the real message-actions menu already uses (context-menu.jsx).
|
||||
// Native p2p topic name (from my side) is just the peer's own user_id -- NOT the relationship
|
||||
// context's `topic` field, which is a separate "p2pXXXX" id the REST layer uses internally and
|
||||
// Tinode.topicType() doesn't recognize (see Profile.openChat for the full story).
|
||||
const topic = tinode ? tinode.getTopic(uid) : null;
|
||||
call = topic ? topic.delMessagesAll(false) : Promise.resolve();
|
||||
}
|
||||
call.then(() => { onToast(config.toast); navigate(config.route, config.keepUid ? uid : undefined); })
|
||||
.catch(err => onToast(err.message || '操作失败')).finally(() => setBusy(false));
|
||||
};
|
||||
return <div className="people-page"><Settings uid={uid} initialBlocked={type === 'block'} onToast={onToast} />
|
||||
<div className="people-sheet-backdrop"><section className="people-confirm-sheet" role="dialog" aria-modal="true"><i /><h2>{config.title}</h2><p>{config.text}</p>
|
||||
<button type="button" className="danger" disabled={busy} onClick={confirm}>{config.action}</button>
|
||||
<button type="button" onClick={() => navigate('friend-settings', uid)}>取消</button>
|
||||
</section></div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
export default function ContactManagementView({view}) {
|
||||
export default function ContactManagementView({view, hashParams, myUserId, tinode, onTopicSelected, onOpenScanner}) {
|
||||
const [toast, setToast] = React.useState('');
|
||||
const uid = hashParams && hashParams.uid;
|
||||
let content;
|
||||
if (view === 'address-book') content = <AddressBook />;
|
||||
if (view === 'address-book') content = <AddressBook myUserId={myUserId} onTopicSelected={onTopicSelected} />;
|
||||
else if (view === 'friend-requests') content = <FriendRequests onToast={setToast} />;
|
||||
else if (view === 'add-friend' || view === 'friend-search-result') content = <AddFriend result={view === 'friend-search-result'} />;
|
||||
else if (view === 'add-friend' || view === 'friend-search-result') content = <AddFriend result={view === 'friend-search-result'} onToast={setToast} onOpenScanner={onOpenScanner} />;
|
||||
else if (view === 'my-friend-qr') content = <QrPage onToast={setToast} />;
|
||||
else if (view === 'friend-verification') content = <Verification onToast={setToast} />;
|
||||
else if (view === 'friend-profile' || view === 'group-member-profile') content = <Profile friend={view === 'friend-profile'} onToast={setToast} />;
|
||||
else if (view === 'friend-settings' || view === 'friend-settings-blocked') content = <Settings initialBlocked={view === 'friend-settings-blocked'} onToast={setToast} />;
|
||||
else if (view === 'friend-verification') content = <Verification uid={uid} onToast={setToast} />;
|
||||
else if (view === 'friend-profile' || view === 'group-member-profile') content = <Profile uid={uid} friend={view === 'friend-profile'} onTopicSelected={onTopicSelected} onToast={setToast} />;
|
||||
else if (view === 'friend-settings' || view === 'friend-settings-blocked') content = <Settings uid={uid} initialBlocked={view === 'friend-settings-blocked'} onToast={setToast} />;
|
||||
else if (view === 'block-list') content = <BlockList onToast={setToast} />;
|
||||
else if (view === 'friend-delete-confirm') content = <ConfirmSheet type="delete" onToast={setToast} />;
|
||||
else if (view === 'block-confirm') content = <ConfirmSheet type="block" onToast={setToast} />;
|
||||
else content = <ConfirmSheet type="clear" onToast={setToast} />;
|
||||
else if (view === 'friend-delete-confirm') content = <ConfirmSheet type="delete" uid={uid} tinode={tinode} onToast={setToast} />;
|
||||
else if (view === 'block-confirm') content = <ConfirmSheet type="block" uid={uid} tinode={tinode} onToast={setToast} />;
|
||||
else content = <ConfirmSheet type="clear" uid={uid} tinode={tinode} onToast={setToast} />;
|
||||
return <>{content}<Toast message={toast} onDone={() => setToast('')} /></>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user