feat(public_page): allow unauthenticated browsing with auth-gated interactivity
- Add get_optional_user dependency; dashboard returns guest-safe payload - AuthGuard only redirects /following and /notifications for guests - Sidebar hides auth-required nav items and shows Sign In/Register for guests - Dashboard shows trending bills as "Most Popular" for unauthenticated visitors - FollowButton opens AuthModal instead of acting when not signed in - Members page pins followed members at the top for quick unfollowing - useFollows skips API call and invalidates dashboard on follow/unfollow Authored-By: Jack Levy
This commit is contained in:
Jack Levy
@@ -3,6 +3,8 @@
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import { Heart, Shield, Zap, ChevronDown } from "lucide-react";
|
||||
import { useAddFollow, useIsFollowing, useRemoveFollow, useUpdateFollowMode } from "@/lib/hooks/useFollows";
|
||||
import { useAuthStore } from "@/stores/authStore";
|
||||
import { AuthModal } from "./AuthModal";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const MODES = {
|
||||
@@ -37,9 +39,16 @@ export function FollowButton({ type, value, label, supportsModes = false }: Foll
|
||||
const add = useAddFollow();
|
||||
const remove = useRemoveFollow();
|
||||
const updateMode = useUpdateFollowMode();
|
||||
const token = useAuthStore((s) => s.token);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [showAuthModal, setShowAuthModal] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
function requireAuth(action: () => void) {
|
||||
if (!token) { setShowAuthModal(true); return; }
|
||||
action();
|
||||
}
|
||||
|
||||
const isFollowing = !!existing;
|
||||
const currentMode: FollowMode = (existing?.follow_mode as FollowMode) ?? "neutral";
|
||||
const isPending = add.isPending || remove.isPending || updateMode.isPending;
|
||||
@@ -59,40 +68,48 @@ export function FollowButton({ type, value, label, supportsModes = false }: Foll
|
||||
// Simple toggle for non-bill follows
|
||||
if (!supportsModes) {
|
||||
const handleClick = () => {
|
||||
if (isFollowing && existing) {
|
||||
remove.mutate(existing.id);
|
||||
} else {
|
||||
add.mutate({ type, value });
|
||||
}
|
||||
requireAuth(() => {
|
||||
if (isFollowing && existing) {
|
||||
remove.mutate(existing.id);
|
||||
} else {
|
||||
add.mutate({ type, value });
|
||||
}
|
||||
});
|
||||
};
|
||||
return (
|
||||
<button
|
||||
onClick={handleClick}
|
||||
disabled={isPending}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
||||
isFollowing
|
||||
? "bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400"
|
||||
: "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<Heart className={cn("w-3.5 h-3.5", isFollowing && "fill-current")} />
|
||||
{isFollowing ? "Unfollow" : label || "Follow"}
|
||||
</button>
|
||||
<>
|
||||
<button
|
||||
onClick={handleClick}
|
||||
disabled={isPending}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
||||
isFollowing
|
||||
? "bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400"
|
||||
: "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<Heart className={cn("w-3.5 h-3.5", isFollowing && "fill-current")} />
|
||||
{isFollowing ? "Unfollow" : label || "Follow"}
|
||||
</button>
|
||||
<AuthModal open={showAuthModal} onClose={() => setShowAuthModal(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Mode-aware follow button for bills
|
||||
if (!isFollowing) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => add.mutate({ type, value })}
|
||||
disabled={isPending}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<Heart className="w-3.5 h-3.5" />
|
||||
{label || "Follow"}
|
||||
</button>
|
||||
<>
|
||||
<button
|
||||
onClick={() => requireAuth(() => add.mutate({ type, value }))}
|
||||
disabled={isPending}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<Heart className="w-3.5 h-3.5" />
|
||||
{label || "Follow"}
|
||||
</button>
|
||||
<AuthModal open={showAuthModal} onClose={() => setShowAuthModal(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -100,13 +117,17 @@ export function FollowButton({ type, value, label, supportsModes = false }: Foll
|
||||
const otherModes = (Object.keys(MODES) as FollowMode[]).filter((m) => m !== currentMode);
|
||||
|
||||
const switchMode = (mode: FollowMode) => {
|
||||
if (existing) updateMode.mutate({ id: existing.id, mode });
|
||||
setOpen(false);
|
||||
requireAuth(() => {
|
||||
if (existing) updateMode.mutate({ id: existing.id, mode });
|
||||
setOpen(false);
|
||||
});
|
||||
};
|
||||
|
||||
const handleUnfollow = () => {
|
||||
if (existing) remove.mutate(existing.id);
|
||||
setOpen(false);
|
||||
requireAuth(() => {
|
||||
if (existing) remove.mutate(existing.id);
|
||||
setOpen(false);
|
||||
});
|
||||
};
|
||||
|
||||
const modeDescriptions: Record<FollowMode, string> = {
|
||||
@@ -116,49 +137,52 @@ export function FollowButton({ type, value, label, supportsModes = false }: Foll
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
disabled={isPending}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
||||
color
|
||||
)}
|
||||
>
|
||||
<ModeIcon className={cn("w-3.5 h-3.5", currentMode === "neutral" && "fill-current")} />
|
||||
{modeLabel}
|
||||
<ChevronDown className="w-3 h-3 ml-0.5 opacity-70" />
|
||||
</button>
|
||||
<>
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
disabled={isPending}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
||||
color
|
||||
)}
|
||||
>
|
||||
<ModeIcon className={cn("w-3.5 h-3.5", currentMode === "neutral" && "fill-current")} />
|
||||
{modeLabel}
|
||||
<ChevronDown className="w-3 h-3 ml-0.5 opacity-70" />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute right-0 mt-1 w-64 bg-popover border border-border rounded-md shadow-lg z-50 py-1">
|
||||
{otherModes.map((mode) => {
|
||||
const { label: optLabel, icon: OptIcon } = MODES[mode];
|
||||
return (
|
||||
{open && (
|
||||
<div className="absolute right-0 mt-1 w-64 bg-popover border border-border rounded-md shadow-lg z-50 py-1">
|
||||
{otherModes.map((mode) => {
|
||||
const { label: optLabel, icon: OptIcon } = MODES[mode];
|
||||
return (
|
||||
<button
|
||||
key={mode}
|
||||
onClick={() => switchMode(mode)}
|
||||
title={modeDescriptions[mode]}
|
||||
className="w-full text-left px-3 py-2 text-sm hover:bg-accent transition-colors flex flex-col gap-0.5"
|
||||
>
|
||||
<span className="flex items-center gap-1.5 font-medium">
|
||||
<OptIcon className="w-3.5 h-3.5" />
|
||||
Switch to {optLabel}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground pl-5">{modeDescriptions[mode]}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<div className="border-t border-border mt-1 pt-1">
|
||||
<button
|
||||
key={mode}
|
||||
onClick={() => switchMode(mode)}
|
||||
title={modeDescriptions[mode]}
|
||||
className="w-full text-left px-3 py-2 text-sm hover:bg-accent transition-colors flex flex-col gap-0.5"
|
||||
onClick={handleUnfollow}
|
||||
className="w-full text-left px-3 py-2 text-sm text-destructive hover:bg-accent transition-colors"
|
||||
>
|
||||
<span className="flex items-center gap-1.5 font-medium">
|
||||
<OptIcon className="w-3.5 h-3.5" />
|
||||
Switch to {optLabel}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground pl-5">{modeDescriptions[mode]}</span>
|
||||
Unfollow
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<div className="border-t border-border mt-1 pt-1">
|
||||
<button
|
||||
onClick={handleUnfollow}
|
||||
className="w-full text-left px-3 py-2 text-sm text-destructive hover:bg-accent transition-colors"
|
||||
>
|
||||
Unfollow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<AuthModal open={showAuthModal} onClose={() => setShowAuthModal(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user