aimond/sapiens-web3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve organization of media outlets by adding sorting options

Browse Source 
Removes the global sorting dropdown and adds inline sort toggles to each media outlet category.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/YptCfK0
This commit is contained in:
kimjaehyeon0101
2025-09-29 19:48:58 +00:00
parent 1ad56f715d
commit 463f042f64
1 changed files with 42 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
client/src/pages/AdminDashboard.tsx
View File

@ -176,31 +176,24 @@ export default function AdminDashboard() {
</div>
) : (
<>
<div className="flex items-center justify-between mb-6">
<div className="text-sm text-gray-500">
{filteredOutlets.length} media outlets {searchTerm && `(search results for "${searchTerm}")`}
</div>
<div className="flex items-center space-x-2">
<ArrowUpDown className="h-4 w-4 text-gray-500" />
<Select value={sortBy} onValueChange={(value: "alphabetical" | "traffic") => setSortBy(value)}>
<SelectTrigger className="w-[180px]" data-testid="admin-sort-select">
<SelectValue placeholder="Sort by" />
</SelectTrigger>
<SelectContent>
<SelectItem value="alphabetical" data-testid="admin-sort-alphabetical">Alphabetical</SelectItem>
<SelectItem value="traffic" data-testid="admin-sort-traffic">Traffic</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* People Section */}
<div data-testid="admin-section-people">
<h2 className="text-xl font-bold text-gray-900 mb-2">
People
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
</h2>
<div className="flex items-center justify-between mb-2">
<h2 className="text-xl font-bold text-gray-900">
People
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
</h2>
<button
onClick={() => setSortBy(sortBy === "alphabetical" ? "traffic" : "alphabetical")}
className="p-1 rounded hover:bg-gray-100"
title={`Sort by ${sortBy === "alphabetical" ? "traffic" : "alphabetical"}`}
data-testid="people-sort-toggle"
>
<ArrowUpDown className="h-4 w-4 text-gray-500" />
</button>
</div>
<div className="space-y-2">
{getOutletsByCategory("People").map((outlet) => (
<Card
@ -244,10 +237,20 @@ export default function AdminDashboard() {
{/* Topics Section */}
<div data-testid="admin-section-topics">
<h2 className="text-xl font-bold text-gray-900 mb-2">
Topics
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
</h2>
<div className="flex items-center justify-between mb-2">
<h2 className="text-xl font-bold text-gray-900">
Topics
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
</h2>
<button
onClick={() => setSortBy(sortBy === "alphabetical" ? "traffic" : "alphabetical")}
className="p-1 rounded hover:bg-gray-100"
title={`Sort by ${sortBy === "alphabetical" ? "traffic" : "alphabetical"}`}
data-testid="topics-sort-toggle"
>
<ArrowUpDown className="h-4 w-4 text-gray-500" />
</button>
</div>
<div className="space-y-2">
{getOutletsByCategory("Topics").map((outlet) => (
<Card
@ -291,10 +294,20 @@ export default function AdminDashboard() {
{/* Companies Section */}
<div data-testid="admin-section-companies">
<h2 className="text-xl font-bold text-gray-900 mb-2">
Companies
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
</h2>
<div className="flex items-center justify-between mb-2">
<h2 className="text-xl font-bold text-gray-900">
Companies
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
</h2>
<button
onClick={() => setSortBy(sortBy === "alphabetical" ? "traffic" : "alphabetical")}
className="p-1 rounded hover:bg-gray-100"
title={`Sort by ${sortBy === "alphabetical" ? "traffic" : "alphabetical"}`}
data-testid="companies-sort-toggle"
>
<ArrowUpDown className="h-4 w-4 text-gray-500" />
</button>
</div>
<div className="space-y-2">
{getOutletsByCategory("Companies").map((outlet) => (
<Card