46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
|
import { ConversationsPage, type ConversationFilters } from './conversations-page.js';
|
|
|
|
export function ConversationRoute() {
|
|
const navigate = useNavigate();
|
|
const { conversationId } = useParams<{ conversationId: string }>();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const filterValue = searchParams.get('filter');
|
|
const filters: ConversationFilters = {
|
|
search: searchParams.get('q') ?? '',
|
|
showSellers: searchParams.get('showSellers') === 'true',
|
|
filter:
|
|
filterValue === 'unread'
|
|
|| filterValue === 'awaiting-reply'
|
|
|| filterValue === 'received-images'
|
|
? filterValue
|
|
: 'all',
|
|
};
|
|
|
|
function selectConversation(nextConversationId: string | null) {
|
|
const suffix = searchParams.size > 0 ? `?${searchParams.toString()}` : '';
|
|
void navigate(
|
|
nextConversationId
|
|
? `/conversations/${encodeURIComponent(nextConversationId)}${suffix}`
|
|
: `/conversations${suffix}`,
|
|
);
|
|
}
|
|
|
|
function updateFilters(next: ConversationFilters) {
|
|
const params = new URLSearchParams(searchParams);
|
|
if (next.search) params.set('q', next.search); else params.delete('q');
|
|
if (next.filter !== 'all') params.set('filter', next.filter); else params.delete('filter');
|
|
if (next.showSellers) params.set('showSellers', 'true'); else params.delete('showSellers');
|
|
setSearchParams(params, { replace: true });
|
|
}
|
|
|
|
return (
|
|
<ConversationsPage
|
|
selectedConversationId={conversationId ?? null}
|
|
onSelectedConversationChange={selectConversation}
|
|
filters={filters}
|
|
onFiltersChange={updateFilters}
|
|
/>
|
|
);
|
|
}
|