72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { useMemo } from "react";
|
|
import { t } from "@lingui/core/macro"
|
|
import { Trans } from "@lingui/react/macro";
|
|
import { ErrorCard } from "../../components/ErrorCard.tsx";
|
|
import {
|
|
JournalCard,
|
|
type JournalTier,
|
|
} from "../../components/JournalCard.tsx";
|
|
import { hotScore } from "../../utils/hotScore.ts";
|
|
import type { MainFeedProps } from "./types.ts";
|
|
|
|
export function JournalFeed(
|
|
{
|
|
dumps,
|
|
loading,
|
|
error,
|
|
hasMore,
|
|
loadingMore,
|
|
sentinelRef,
|
|
voteCounts,
|
|
myVotes,
|
|
user,
|
|
castVote,
|
|
removeVote,
|
|
}: MainFeedProps,
|
|
) {
|
|
const tiered = useMemo(() => {
|
|
const sorted = [...dumps].sort((a, b) => hotScore(b) - hotScore(a));
|
|
const n = sorted.length;
|
|
return sorted.map((dump, i) => {
|
|
const rank = i / n;
|
|
const tier: JournalTier = rank < 0.2
|
|
? "large"
|
|
: rank < 0.5
|
|
? "medium"
|
|
: "small";
|
|
return { dump, tier };
|
|
});
|
|
}, [dumps]);
|
|
|
|
if (loading) return <p className="index-status"><Trans>Loading…</Trans></p>;
|
|
if (error) return <ErrorCard title={t`Failed to load`} message={error} />;
|
|
if (tiered.length === 0) {
|
|
return <p className="index-status"><Trans>No dumps yet. Be the first!</Trans></p>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ul className="journal-grid">
|
|
{tiered.map(({ dump, tier }) => (
|
|
<JournalCard
|
|
key={dump.id}
|
|
dump={dump}
|
|
tier={tier}
|
|
voteCount={voteCounts[dump.id] ?? dump.voteCount}
|
|
voted={myVotes.has(dump.id)}
|
|
canVote={!!user}
|
|
castVote={castVote}
|
|
removeVote={removeVote}
|
|
isOwner={user?.id === dump.userId}
|
|
/>
|
|
))}
|
|
</ul>
|
|
<div ref={sentinelRef} />
|
|
{loadingMore && <p className="feed-loading-more"><Trans>Loading more…</Trans></p>}
|
|
{!hasMore && tiered.length > 0 && (
|
|
<p className="feed-end"><Trans>You've reached the end.</Trans></p>
|
|
)}
|
|
</>
|
|
);
|
|
}
|