sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display two random articles below the main content grid

Browse Source 
Implement a new `useMemo` hook to select two random articles for display in the `WideCard` components, ensuring they are not present in the main carousel section of the home page.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: fa95522d-4cc1-420f-92d8-66d4a2a08adf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 22:23:49 +00:00
parent ac54a6fbd7
commit 3f88aae55e
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/pages/home.tsx
View File

@ -493,6 +493,19 @@ export default function Home() {
return rows;
}, [gridItems]);
const widePickedArticles = useMemo(() => {
if (!articles || articles.length < 3) return [];
const carouselIds = new Set(articles.slice(0, 9).map((a) => a.id));
const candidates = articles.filter((a) => !carouselIds.has(a.id));
const pool = candidates.length >= 2 ? candidates : articles;
const copy = [...pool];
for (let i = copy.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[copy[i], copy[j]] = [copy[j], copy[i]];
}
return copy.slice(0, 2);
}, [articles]);
if (isLoading || !articles) {
return (
<div className="min-h-screen bg-background">
@ -522,10 +535,11 @@ export default function Home() {
</div>
))}
{shuffled.length > 1 && (
{widePickedArticles.length > 0 && (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<WideCard article={shuffled[shuffled.length - 1]} focalPoints={focalPoints} />
<WideCard article={shuffled[shuffled.length - 2]} focalPoints={focalPoints} />
{widePickedArticles.map((a) => (
<WideCard key={`wide-${a.id}`} article={a} focalPoints={focalPoints} />
))}
</div>
)}