Ranking #26

[K-Yoshizawa]

#26 の機能を実装しました

[shun-shobon]

PRありがとうございます！以下の点の修正をお願いしたいです！

• mainのコードが古く、コンフリクトしているため、コンフリクトを修正してください。
• useFetchRankingですが、useStateなどのReact組み込みのものを使うより、データフェッチライブラリであるSWRが入ってるため、それを使ったほうが良さそうです。useProfileなどを参考にしてみてください。useSWRInfiniteを使えば無限スクロールのためのページネーション機能も使えます。
• 無限スクロールですが、スクロールさせる機能はなくても大丈夫です。

[cloudflare-workers-and-pages]

Deploying school-festival-2024 with    Cloudflare Pages

Latest commit:	b221aee
Status:	✅  Deploy successful!
Preview URL:	https://b6102ebe.school-festival-2024.pages.dev
Branch Preview URL:	https://ranking--26.school-festival-2024.pages.dev

View logs

[K-Yoshizawa]

@shun-shobon
恐らく修正が完了したので、再レビューをお願いします！

[shun-shobon]

• プレイ回数が0のユーザーは順位が決まっていないため、フィルターする必要があります。
• hasMoreの判別はデータの全数から判別すると良いです。

Suggested change

	const { data } = await supabase
	.from("profiles_with_stats")
	.select("*")
	.order("rank", { ascending: true })
	.range(start, end);
	const { data, count } = await supabase
	.from("profiles_with_stats")
	.select("*", { count: "exact" })
	.not("rank", "is", null)
	.order("rank", { ascending: true })
	.range(start, end);

[shun-shobon]

observerはrefにしなくても良さそうです！

Suggested change

	const observer = useRef<IntersectionObserver | null>(null);
	const loadMoreRef = useRef<HTMLDivElement | null>(null);
	useEffect(() => {
	if (isValidating || !loadMoreRef.current) return;
	const observerCallback = (entries: IntersectionObserverEntry[]) => {
	if (entries[0].isIntersecting && hasMore && !isValidating) {
	loadMore();
	}
	};
	observer.current = new IntersectionObserver(observerCallback);
	observer.current.observe(loadMoreRef.current);
	return () => {
	if (observer.current && loadMoreRef.current) {
	observer.current.unobserve(loadMoreRef.current);
	}
	};
	}, [isValidating, loadMore, hasMore]);
	const observer = useRef<IntersectionObserver | null>(null);
	const loadMoreRef = useRef<HTMLDivElement | null>(null);
	useEffect(() => {
	if (isValidating || !loadMoreRef.current) return;
	const observerCallback = (entries: IntersectionObserverEntry[]) => {
	if (entries[0].isIntersecting && hasMore && !isValidating) {
	loadMore();
	}
	};
	observer.current = new IntersectionObserver(observerCallback);
	observer.current.observe(loadMoreRef.current);
	return () => {
	if (observer.current && loadMoreRef.current) {
	observer.current.unobserve(loadMoreRef.current);
	}
	};
	}, [isValidating, loadMore, hasMore]);