Function StarButton

apps/cursor/src/components/plugins/star-button.tsx:12–104

({
  pluginId,
  slug,
  starCount,
}: {
  pluginId: string;
  slug: string;
  starCount: number;
})

import { Button } from "../ui/button";

export function StarButton({
  pluginId,
  slug,
  starCount,
}: {
  pluginId: string;
  slug: string;
  starCount: number;
}) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [starred, setStarred] = useState(false);
  const [count, setCount] = useState(starCount);
  const [loaded, setLoaded] = useState(false);
  const [isSignInModalOpen, setIsSignInModalOpen] = useState(false);
  const prevRef = useRef({ starred: false, count: starCount });

  useEffect(() => {
    const supabase = createClient();
    supabase.auth.getSession().then(({ data: { session } }) => {
      if (!session) {
        setLoaded(true);
        return;
      }
      setIsAuthenticated(true);
      supabase
        .from("plugin_stars")
        .select("plugin_id")
        .eq("plugin_id", pluginId)
        .eq("user_id", session.user.id)
        .maybeSingle()
        .then(({ data }) => {
          const isStarred = !!data;
          setStarred(isStarred);
          prevRef.current = { starred: isStarred, count: starCount };
          setLoaded(true);
        });
    });
  }, [pluginId, starCount]);

  const { execute } = useAction(starPluginAction, {
    onError: () => {
      setStarred(prevRef.current.starred);
      setCount(prevRef.current.count);
    },
  });

  const handleClick = () => {
    if (!isAuthenticated) {
      setIsSignInModalOpen(true);
      return;
    }

    prevRef.current = { starred, count };
    setStarred(!starred);
    setCount(starred ? count - 1 : count + 1);
    execute({ pluginId, slug });
  };