fix: fix feed component
This commit is contained in:
@@ -20,7 +20,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
|
|||||||
import { useWindowVirtualizer } from "@tanstack/react-virtual";
|
import { useWindowVirtualizer } from "@tanstack/react-virtual";
|
||||||
import { Loader2 } from "lucide-react";
|
import { Loader2 } from "lucide-react";
|
||||||
import { feed, type Post, type UserSummary } from "@/lib/social";
|
import { feed, type Post, type UserSummary } from "@/lib/social";
|
||||||
import { PostCard } from "@/components/social/post/post-card";
|
import { PostScrollCard } from "@/components/social/post/post-scroll-card";
|
||||||
import { NewUsersStrip } from "./new-users-strip";
|
import { NewUsersStrip } from "./new-users-strip";
|
||||||
|
|
||||||
const PAGE = 10;
|
const PAGE = 10;
|
||||||
@@ -74,7 +74,7 @@ export function HomeFeed() {
|
|||||||
|
|
||||||
const virtualizer = useWindowVirtualizer({
|
const virtualizer = useWindowVirtualizer({
|
||||||
count: items.length,
|
count: items.length,
|
||||||
estimateSize: () => 460,
|
estimateSize: () => 680,
|
||||||
overscan: 4,
|
overscan: 4,
|
||||||
scrollMargin: offsetTop,
|
scrollMargin: offsetTop,
|
||||||
});
|
});
|
||||||
@@ -135,7 +135,7 @@ export function HomeFeed() {
|
|||||||
style={{ transform: `translateY(${vi.start - offsetTop}px)` }}
|
style={{ transform: `translateY(${vi.start - offsetTop}px)` }}
|
||||||
>
|
>
|
||||||
<div className="pb-4">
|
<div className="pb-4">
|
||||||
<PostCard post={post} enableFollow />
|
<PostScrollCard post={post} enableFollow />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ export function NewUsersStrip({ users }: { users: UserSummary[] }) {
|
|||||||
New to Prabhupāda Says
|
New to Prabhupāda Says
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
Welcome them — follow the devotees who just joined.
|
Welcome them by sending a follow request.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -30,18 +30,13 @@ import { UserAvatar } from "@/components/ui/user-avatar";
|
|||||||
import { timeAgo } from "@/lib/time";
|
import { timeAgo } from "@/lib/time";
|
||||||
import { PostActionsFooter } from "./post-actions-footer";
|
import { PostActionsFooter } from "./post-actions-footer";
|
||||||
import { PostCardMenu } from "./post-card-menu";
|
import { PostCardMenu } from "./post-card-menu";
|
||||||
import { FeedFollowButton } from "./feed-follow-button";
|
|
||||||
|
|
||||||
export function PostCard({
|
export function PostCard({
|
||||||
post,
|
post,
|
||||||
onDelete,
|
onDelete,
|
||||||
enableFollow = false,
|
|
||||||
}: {
|
}: {
|
||||||
post: Post;
|
post: Post;
|
||||||
onDelete?: (id: string) => void;
|
onDelete?: (id: string) => void;
|
||||||
/** Home-feed only: show a Follow / Follow back button in the header for
|
|
||||||
* authors the viewer doesn't already follow. */
|
|
||||||
enableFollow?: boolean;
|
|
||||||
}) {
|
}) {
|
||||||
const sourceHref =
|
const sourceHref =
|
||||||
hasHighlight(post.source_url) || !post.caption
|
hasHighlight(post.source_url) || !post.caption
|
||||||
@@ -99,12 +94,6 @@ export function PostCard({
|
|||||||
{timeAgo(post.created_at)}
|
{timeAgo(post.created_at)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{enableFollow && authorHandle && !post.viewer_follows_author ? (
|
|
||||||
<FeedFollowButton
|
|
||||||
handle={authorHandle}
|
|
||||||
followsYou={!!post.author_follows_viewer}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
<PostCardMenu post={post} onDelete={onDelete} />
|
<PostCardMenu post={post} onDelete={onDelete} />
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
@@ -39,6 +39,7 @@ import { useAuth } from "@/components/auth/auth-provider";
|
|||||||
import { postSourceHref, quoteCardBgStyle } from "./post-card-shared";
|
import { postSourceHref, quoteCardBgStyle } from "./post-card-shared";
|
||||||
import { PostActionsFooter } from "./post-actions-footer";
|
import { PostActionsFooter } from "./post-actions-footer";
|
||||||
import { PostCardMenu } from "./post-card-menu";
|
import { PostCardMenu } from "./post-card-menu";
|
||||||
|
import { FeedFollowButton } from "./feed-follow-button";
|
||||||
import { UpdateBackgroundModal } from "../update-background-modal";
|
import { UpdateBackgroundModal } from "../update-background-modal";
|
||||||
import { MentionsDrawer } from "../mentions-drawer";
|
import { MentionsDrawer } from "../mentions-drawer";
|
||||||
|
|
||||||
@@ -46,10 +47,14 @@ export function PostScrollCard({
|
|||||||
post,
|
post,
|
||||||
onDelete,
|
onDelete,
|
||||||
onUpdated,
|
onUpdated,
|
||||||
|
enableFollow = false,
|
||||||
}: {
|
}: {
|
||||||
post: Post;
|
post: Post;
|
||||||
onDelete?: (id: string) => void;
|
onDelete?: (id: string) => void;
|
||||||
onUpdated?: (updated: Post) => void;
|
onUpdated?: (updated: Post) => void;
|
||||||
|
/** Home-feed only: show a Follow / Follow back button in the header for
|
||||||
|
* authors the viewer doesn't already follow. Off everywhere else. */
|
||||||
|
enableFollow?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const images = post.images ?? [];
|
const images = post.images ?? [];
|
||||||
const hasImages = images.length > 0;
|
const hasImages = images.length > 0;
|
||||||
@@ -136,6 +141,12 @@ export function PostScrollCard({
|
|||||||
</span>
|
</span>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
{enableFollow && post.author_handle && !post.viewer_follows_author ? (
|
||||||
|
<FeedFollowButton
|
||||||
|
handle={post.author_handle}
|
||||||
|
followsYou={!!post.author_follows_viewer}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
<PostCardMenu post={post} onDelete={onDelete} />
|
<PostCardMenu post={post} onDelete={onDelete} />
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user