feat: add private media dashboard slice
This commit is contained in:
jjbrunton committed
1 parent
8d4eae7ab5
commit
768470204b
8 files changed
+688
No files matched your search
@@ -0,0 +1,208 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { filterMedia, mediaConversation, type MediaFilters } from './filters.js';
|
||||
import { FullSyncDialog } from './full-sync-dialog.js';
|
||||
import { MediaCard } from './media-card.js';
|
||||
import { useMediaQuery, useMediaSyncStatusQuery, useTriggerMediaSyncMutation } from './queries.js';
|
||||
import './media.css';
|
||||
|
||||
const initialFilters: MediaFilters = {
|
||||
conversation: 'all',
|
||||
sender: 'all',
|
||||
type: 'all',
|
||||
dateRange: 'all',
|
||||
};
|
||||
|
||||
function errorMessage(error: Error | null): string {
|
||||
return error?.message ?? 'Something went wrong.';
|
||||
}
|
||||
|
||||
function formatLastSync(timestamp: number): string {
|
||||
return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(timestamp);
|
||||
}
|
||||
|
||||
export function MediaPage() {
|
||||
const mediaQuery = useMediaQuery();
|
||||
const statusQuery = useMediaSyncStatusQuery();
|
||||
const syncMutation = useTriggerMediaSyncMutation();
|
||||
const [filters, setFilters] = useState<MediaFilters>(initialFilters);
|
||||
const [revealedIds, setRevealedIds] = useState<Set<string>>(() => new Set());
|
||||
const [isRevealAll, setIsRevealAll] = useState(false);
|
||||
const [isFullSyncDialogOpen, setIsFullSyncDialogOpen] = useState(false);
|
||||
|
||||
const items = mediaQuery.data ?? [];
|
||||
const visibleItems = useMemo(() => filterMedia(items, filters, Date.now()), [items, filters]);
|
||||
const conversations = useMemo(
|
||||
() => [...new Set(items.map(mediaConversation))].sort((left, right) => left.localeCompare(right)),
|
||||
[items],
|
||||
);
|
||||
const senders = useMemo(
|
||||
() => [...new Set(items.map((item) => item.sender))].sort((left, right) => left.localeCompare(right)),
|
||||
[items],
|
||||
);
|
||||
const isSyncBusy = statusQuery.data?.isSyncing === true || syncMutation.isPending;
|
||||
|
||||
function updateFilter<Key extends keyof MediaFilters>(key: Key, value: MediaFilters[Key]) {
|
||||
setFilters((current) => ({ ...current, [key]: value }));
|
||||
}
|
||||
|
||||
function toggleItem(itemId: string) {
|
||||
if (isRevealAll) {
|
||||
setIsRevealAll(false);
|
||||
setRevealedIds(new Set(items.filter((item) => item.id !== itemId).map((item) => item.id)));
|
||||
return;
|
||||
}
|
||||
setRevealedIds((current) => {
|
||||
const next = new Set(current);
|
||||
if (next.has(itemId)) next.delete(itemId);
|
||||
else next.add(itemId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
function runSync(isFull: boolean) {
|
||||
syncMutation.mutate(isFull, {
|
||||
onSuccess: () => {
|
||||
if (isFull) setIsFullSyncDialogOpen(false);
|
||||
},
|
||||
onError: () => {
|
||||
if (isFull) setIsFullSyncDialogOpen(false);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (mediaQuery.isPending) {
|
||||
return <div aria-label="Loading media" className="page-state" role="status"><span className="spinner" />Loading media…</div>;
|
||||
}
|
||||
|
||||
if (mediaQuery.isError) {
|
||||
return (
|
||||
<div className="page-state error-state" role="alert">
|
||||
<strong>Media unavailable</strong>
|
||||
<span>{errorMessage(mediaQuery.error)}</span>
|
||||
<button className="button secondary" onClick={() => void mediaQuery.refetch()} type="button">Retry media</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page media-page">
|
||||
<header className="page-header">
|
||||
<div>
|
||||
<span className="eyebrow">Private gallery</span>
|
||||
<h1>Media</h1>
|
||||
<p>Browse authenticated conversation media. Everything stays blurred until you choose to reveal it.</p>
|
||||
</div>
|
||||
<div className="header-actions">
|
||||
{items.length > 0 ? (
|
||||
<button
|
||||
className="button secondary"
|
||||
onClick={() => {
|
||||
setIsRevealAll((current) => !current);
|
||||
setRevealedIds(new Set());
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
{isRevealAll ? 'Blur all media' : 'Reveal all media'}
|
||||
</button>
|
||||
) : null}
|
||||
<button
|
||||
className="button secondary"
|
||||
disabled={isSyncBusy}
|
||||
onClick={() => {
|
||||
syncMutation.reset();
|
||||
setIsFullSyncDialogOpen(true);
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
Full sync
|
||||
</button>
|
||||
<button className="button primary" disabled={isSyncBusy} onClick={() => runSync(false)} type="button">
|
||||
{isSyncBusy ? 'Syncing…' : 'Sync new media'}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section aria-label="Media sync status" className="status-strip media-sync-status">
|
||||
{statusQuery.isPending ? <span role="status">Loading sync status…</span> : null}
|
||||
{statusQuery.isError ? (
|
||||
<div role="alert">
|
||||
<span>{errorMessage(statusQuery.error)}</span>
|
||||
<button className="button secondary" onClick={() => void statusQuery.refetch()} type="button">Retry sync status</button>
|
||||
</div>
|
||||
) : null}
|
||||
{statusQuery.data ? (
|
||||
statusQuery.data.isSyncing ? (
|
||||
<div role="status"><span className="spinner" /><strong>Media sync in progress</strong></div>
|
||||
) : (
|
||||
<div>
|
||||
<span className="status-dot running" aria-hidden="true" />
|
||||
<div>
|
||||
<small>Sync status</small>
|
||||
<strong>{statusQuery.data.lastSyncChats === null ? 'No completed sync yet' : `Last synced ${statusQuery.data.lastSyncChats} conversations`}</strong>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : null}
|
||||
{statusQuery.data?.lastSyncAt ? <span className="status-note">{formatLastSync(statusQuery.data.lastSyncAt)}</span> : null}
|
||||
</section>
|
||||
|
||||
{statusQuery.data?.lastError ? <div className="cooldown-banner" role="alert"><strong>Last sync failed</strong><span>{statusQuery.data.lastError}</span></div> : null}
|
||||
{syncMutation.isSuccess ? <div className="media-notice success" role="status">{syncMutation.variables ? 'Full media sync completed.' : 'Media sync completed.'}</div> : null}
|
||||
{syncMutation.isError ? <div className="media-notice error" role="alert">{errorMessage(syncMutation.error)}</div> : null}
|
||||
|
||||
{items.length === 0 ? (
|
||||
<section className="panel empty-state"><strong>No media yet.</strong><span>Use Sync new media to check recent conversations.</span></section>
|
||||
) : (
|
||||
<>
|
||||
<section aria-label="Media filters" className="panel media-filters">
|
||||
<label>Conversation
|
||||
<select value={filters.conversation} onChange={(event) => updateFilter('conversation', event.target.value)}>
|
||||
<option value="all">All conversations</option>
|
||||
{conversations.map((conversation) => <option key={conversation} value={conversation}>{conversation}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label>Sender
|
||||
<select value={filters.sender} onChange={(event) => updateFilter('sender', event.target.value)}>
|
||||
<option value="all">All senders</option>
|
||||
{senders.map((sender) => <option key={sender} value={sender}>{sender}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label>Media type
|
||||
<select value={filters.type} onChange={(event) => updateFilter('type', event.target.value as MediaFilters['type'])}>
|
||||
<option value="all">All types</option><option value="image">Images</option><option value="gif">GIFs</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Date range
|
||||
<select value={filters.dateRange} onChange={(event) => updateFilter('dateRange', event.target.value as MediaFilters['dateRange'])}>
|
||||
<option value="all">Any time</option><option value="24h">Past 24 hours</option><option value="7d">Past 7 days</option><option value="30d">Past 30 days</option>
|
||||
</select>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
{visibleItems.length === 0 ? (
|
||||
<section className="panel empty-state"><strong>No media matches these filters.</strong><span>Try broadening one or more filters.</span></section>
|
||||
) : (
|
||||
<section aria-label="Media gallery" className="media-grid">
|
||||
{visibleItems.map((item) => (
|
||||
<MediaCard
|
||||
isRevealed={isRevealAll || revealedIds.has(item.id)}
|
||||
item={item}
|
||||
key={item.id}
|
||||
onToggleReveal={() => toggleItem(item.id)}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isFullSyncDialogOpen ? (
|
||||
<FullSyncDialog
|
||||
isPending={syncMutation.isPending}
|
||||
onCancel={() => setIsFullSyncDialogOpen(false)}
|
||||
onConfirm={() => runSync(true)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user