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

Distinguish new media outlets from regular ones within categories

Browse Source 
Refactors `getOutletsByCategory` to `getSeparatedOutlets` in `MainContent.tsx`, separating outlets with recent articles (marked as "NEW") from regular ones and improving UI presentation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aabe2db1-f078-4501-aab5-be145ebc6b9a
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/aabe2db1-f078-4501-aab5-be145ebc6b9a/ETDmxYB
This commit is contained in:
kimjaehyeon0101
2025-10-13 09:09:28 +00:00
parent 22efc5a753
commit f9e2e49d8a
2 changed files with 68 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
client/src/components/MainContent.tsx
View File

@ -54,20 +54,38 @@ export default function MainContent() {
return acc;
}, {} as Record<string, number>);
// Group outlets by category and sort
const getOutletsByCategory = (category: string) => {
// Group outlets by category and separate NEW outlets from regular ones
const getSeparatedOutlets = (category: string) => {
const filtered = allOutlets.filter(outlet =>
outlet.category.toLowerCase() === category.toLowerCase()
);
return filtered.sort((a, b) => {
// Separate outlets with articles (NEW) from those without
const newOutlets = filtered.filter(outlet => {
const articleCount = articleCountByOutlet[outlet.id] || 0;
return articleCount > 0;
});
const regularOutlets = filtered.filter(outlet => {
const articleCount = articleCountByOutlet[outlet.id] || 0;
return articleCount === 0;
});
// Sort both groups
const sortFn = (a: MediaOutlet, b: MediaOutlet) => {
if (sortBy === "alphabetical") {
return a.name.localeCompare(b.name);
} else {
// Sort by traffic score (descending - highest traffic first)
return (b.trafficScore || 0) - (a.trafficScore || 0);
}
});
};
return {
newOutlets: newOutlets.sort(sortFn),
regularOutlets: regularOutlets.sort(sortFn),
total: filtered.length
};
};
const renderOutletCard = (outlet: MediaOutlet) => {
@ -199,10 +217,22 @@ export default function MainContent() {
<div data-testid="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>
<span className="text-gray-400 text-base ml-2">({getSeparatedOutlets("People").total})</span>
</h2>
<div className="space-y-2">
{getOutletsByCategory("People").map(renderOutletCard)}
{getSeparatedOutlets("People").newOutlets.length > 0 && (
<>
<div className="flex items-center gap-2 mb-3">
<Sparkles className="h-4 w-4 text-blue-500" />
<h3 className="text-sm font-semibold text-blue-600">NEW</h3>
</div>
{getSeparatedOutlets("People").newOutlets.map(renderOutletCard)}
{getSeparatedOutlets("People").regularOutlets.length > 0 && (
<div className="border-t border-gray-200 my-4"></div>
)}
</>
)}
{getSeparatedOutlets("People").regularOutlets.map(renderOutletCard)}
</div>
</div>
@ -210,10 +240,22 @@ export default function MainContent() {
<div data-testid="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>
<span className="text-gray-400 text-base ml-2">({getSeparatedOutlets("Topics").total})</span>
</h2>
<div className="space-y-2">
{getOutletsByCategory("Topics").map(renderOutletCard)}
{getSeparatedOutlets("Topics").newOutlets.length > 0 && (
<>
<div className="flex items-center gap-2 mb-3">
<Sparkles className="h-4 w-4 text-blue-500" />
<h3 className="text-sm font-semibold text-blue-600">NEW</h3>
</div>
{getSeparatedOutlets("Topics").newOutlets.map(renderOutletCard)}
{getSeparatedOutlets("Topics").regularOutlets.length > 0 && (
<div className="border-t border-gray-200 my-4"></div>
)}
</>
)}
{getSeparatedOutlets("Topics").regularOutlets.map(renderOutletCard)}
</div>
</div>
@ -221,10 +263,22 @@ export default function MainContent() {
<div data-testid="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>
<span className="text-gray-400 text-base ml-2">({getSeparatedOutlets("Companies").total})</span>
</h2>
<div className="space-y-2">
{getOutletsByCategory("Companies").map(renderOutletCard)}
{getSeparatedOutlets("Companies").newOutlets.length > 0 && (
<>
<div className="flex items-center gap-2 mb-3">
<Sparkles className="h-4 w-4 text-blue-500" />
<h3 className="text-sm font-semibold text-blue-600">NEW</h3>
</div>
{getSeparatedOutlets("Companies").newOutlets.map(renderOutletCard)}
{getSeparatedOutlets("Companies").regularOutlets.length > 0 && (
<div className="border-t border-gray-200 my-4"></div>
)}
</>
)}
{getSeparatedOutlets("Companies").regularOutlets.map(renderOutletCard)}
</div>
</div>
</div>