-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #128 from Huilensolis/95-feature-add-infinite-scro…
…ll-to-posts-grid 95 feature add infinite scroll to posts grid
- Loading branch information
Showing
13 changed files
with
211 additions
and
404 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,29 @@ | ||
| "use client"; | ||
|
|
||
| import { Heading } from "@/components/ui/typography/heading"; | ||
| import { useEffect, useState } from "react"; | ||
| import { useSupabase } from "@/hooks/use-supabase"; | ||
| import { Database } from "@/supabase/types"; | ||
| import { PostsGrid } from "@/components/feature/posts-grid/posts-grid.component"; | ||
| import { PostsGridSkeleton } from "@/components/feature/posts-grid/components/posts-grid-skeleton"; | ||
|
|
||
| export function Feed() { | ||
| const { supabase } = useSupabase(); | ||
|
|
||
| const [posts, setPosts] = useState< | ||
| Database["public"]["Tables"]["posts"]["Row"][] | ||
| >([]); | ||
|
|
||
| const [error, setError] = useState<boolean>(false); | ||
|
|
||
| const [isLoading, setIsLoading] = useState<boolean>(true); | ||
| const [isFetching, setIsFetching] = useState<boolean>(false); | ||
|
|
||
| const [lastPostIndex, setLastPostIndex] = useState<number>(1); | ||
|
|
||
| useEffect(() => { | ||
| const controller = new AbortController(); | ||
|
|
||
| try { | ||
| setIsLoading(true); | ||
| setIsFetching(true); | ||
|
|
||
| supabase | ||
| .from("posts") | ||
| .select("*") | ||
| .order("id", { ascending: false }) | ||
| .limit(32) | ||
| .range(lastPostIndex, lastPostIndex + 32) | ||
| .abortSignal(controller.signal) | ||
| .then(({ data: posts, error }) => { | ||
| if (error) return; | ||
|
|
||
| if (!posts) return; | ||
|
|
||
| setPosts((prev) => [...prev, ...posts]); | ||
| }); | ||
| } catch (error: unknown) { | ||
| if ((error as Error).name === "AbortError") return; | ||
|
|
||
| setError(true); | ||
| } finally { | ||
| setIsLoading(false); | ||
| setIsFetching(false); | ||
| } | ||
|
|
||
| return () => { | ||
| controller.abort(); | ||
| }; | ||
|
|
||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [lastPostIndex]); | ||
|
|
||
| function handleScroll() { | ||
| setLastPostIndex((prev) => prev + 32); | ||
| async function fetchNewPosts({ | ||
| currentPage, | ||
| signal, | ||
| pageSize, | ||
| }: { | ||
| currentPage: number; | ||
| signal: AbortSignal; | ||
| pageSize: number; | ||
| }) { | ||
| return await supabase | ||
| .from("posts") | ||
| .select("*") | ||
| .range(currentPage, currentPage + pageSize) | ||
| .abortSignal(signal); | ||
| } | ||
|
|
||
| return ( | ||
| <main className="w-full h-full flex flex-col gap-2"> | ||
| {isLoading && <PostsGridSkeleton cuantity={32} />} | ||
| {!isLoading && !isFetching && ( | ||
| <> | ||
| {!error ? ( | ||
| <div> | ||
| <PostsGrid posts={posts} onFetchNewPosts={handleScroll} /> | ||
| </div> | ||
| ) : ( | ||
| <article className="flex items-center justify-center w-full max-h-96 py-32 text-center border-y border-neutral-300"> | ||
| <Heading level={10}> | ||
| Something wen wrong, please reload the page | ||
| </Heading> | ||
| </article> | ||
| )} | ||
| </> | ||
| )} | ||
| <PostsGrid onFetchNewPosts={fetchNewPosts} /> | ||
| </main> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
94 changes: 17 additions & 77 deletions
94
src/app/(site)/app/post/[postid]/components/recent-posts/recent-pots.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,33 @@ | ||
| "use client"; | ||
|
|
||
| import { PostsGridSkeleton } from "@/components/feature/posts-grid/components/posts-grid-skeleton"; | ||
| import { PostsGrid } from "@/components/feature/posts-grid/posts-grid.component"; | ||
| import { Heading } from "@/components/ui/typography/heading"; | ||
| import { useSupabase } from "@/hooks/use-supabase"; | ||
| import { Database } from "@/supabase/types"; | ||
| import { useEffect, useState } from "react"; | ||
|
|
||
| export function RecentPosts({ | ||
| excludedPostId, | ||
| }: { | ||
| excludedPostId: Database["public"]["Tables"]["posts"]["Row"]["id"]; | ||
| }) { | ||
| const [posts, setPosts] = useState< | ||
| Database["public"]["Tables"]["posts"]["Row"][] | ||
| >([]); | ||
|
|
||
| const [isLoading, setIsLoading] = useState<boolean>(true); | ||
| const [isFetching, setIsFetching] = useState<boolean>(false); | ||
|
|
||
| const [lastPostIndex, setLastPostIndex] = useState<number>(1); | ||
| const [error, setError] = useState<boolean>(false); | ||
|
|
||
| const { supabase } = useSupabase(); | ||
|
|
||
| useEffect(() => { | ||
| const controller = new AbortController(); | ||
|
|
||
| try { | ||
| setIsLoading(true); | ||
| setIsFetching(true); | ||
|
|
||
| supabase | ||
| .from("posts") | ||
| .select("*") | ||
| .order("created_at", { ascending: false }) | ||
| .limit(32) | ||
| .range(lastPostIndex, lastPostIndex + 32) | ||
| .abortSignal(controller.signal) | ||
| .then(({ data: posts, error }) => { | ||
| if (error) return; | ||
|
|
||
| if (!posts) return; | ||
|
|
||
| setPosts((prev) => [ | ||
| ...prev, | ||
| ...posts.filter((post) => post.id !== excludedPostId), | ||
| ]); | ||
| }); | ||
| } catch (error: unknown) { | ||
| if ((error as Error).name === "AbortError") return; | ||
|
|
||
| setError(true); | ||
| } finally { | ||
| setIsLoading(false); | ||
| setIsFetching(false); | ||
| } | ||
|
|
||
| return () => { | ||
| controller.abort(); | ||
| }; | ||
|
|
||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [lastPostIndex]); | ||
|
|
||
| function handleScroll() { | ||
| if (isLoading || isFetching) return; | ||
|
|
||
| setLastPostIndex((prev) => prev + 32); | ||
| async function fetchNewPosts({ | ||
| currentPage, | ||
| signal, | ||
| pageSize, | ||
| }: { | ||
| currentPage: number; | ||
| signal: AbortSignal; | ||
| pageSize: number; | ||
| }) { | ||
| return supabase | ||
| .from("posts") | ||
| .select("*") | ||
| .neq("id", excludedPostId) // exclude the posts that has the id equal to excludedPostId | ||
| .order("title", { ascending: false }) | ||
| .range(currentPage, currentPage + pageSize) | ||
| .abortSignal(signal); | ||
| } | ||
|
|
||
| return ( | ||
| <section> | ||
| {isLoading && <PostsGridSkeleton cuantity={32} />} | ||
| {!isLoading && !isFetching && ( | ||
| <> | ||
| {!error ? ( | ||
| <div> | ||
| <PostsGrid posts={posts} onFetchNewPosts={handleScroll} /> | ||
| </div> | ||
| ) : ( | ||
| <article className="flex items-center justify-center w-full max-h-96 py-32 text-center border-y border-neutral-300"> | ||
| <Heading level={10}> | ||
| Something wen wrong, please reload the page | ||
| </Heading> | ||
| </article> | ||
| )} | ||
| </> | ||
| )} | ||
| </section> | ||
| ); | ||
| return <PostsGrid onFetchNewPosts={fetchNewPosts} />; | ||
| } |
94 changes: 17 additions & 77 deletions
94
src/app/(site)/app/profile/[username]/components/user-posts/user-posts.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,92 +1,32 @@ | ||
| "use client"; | ||
|
|
||
| import { PostsGridSkeleton } from "@/components/feature/posts-grid/components/posts-grid-skeleton"; | ||
| import { PostsGrid } from "@/components/feature/posts-grid/posts-grid.component"; | ||
| import { Heading } from "@/components/ui/typography/heading"; | ||
| import { useSupabase } from "@/hooks/use-supabase"; | ||
| import { Database } from "@/supabase/types"; | ||
| import { useEffect, useState } from "react"; | ||
|
|
||
| export function UserPosts({ profileId }: { profileId: string }) { | ||
| const { supabase } = useSupabase(); | ||
|
|
||
| const [posts, setPosts] = useState< | ||
| Database["public"]["Tables"]["posts"]["Row"][] | ||
| >([]); | ||
|
|
||
| const [error, setError] = useState<boolean>(false); | ||
|
|
||
| const [isLoading, setIsLoading] = useState<boolean>(true); | ||
| const [isFetching, setIsFetching] = useState<boolean>(false); | ||
|
|
||
| const [lastPostIndex, setLastPostIndex] = useState<number>(1); | ||
|
|
||
| const [userHasNoMorePosts, setUserHasNoMorePosts] = useState<boolean>(false); | ||
|
|
||
| useEffect(() => { | ||
| if (userHasNoMorePosts) return; | ||
|
|
||
| const controller = new AbortController(); | ||
|
|
||
| try { | ||
| setIsLoading(true); | ||
| setIsFetching(true); | ||
|
|
||
| supabase | ||
| .from("posts") | ||
| .select("*") | ||
| .eq("profile_id", profileId) | ||
| .order("id", { ascending: false }) | ||
| .limit(32) | ||
| .range(lastPostIndex, lastPostIndex + 32) | ||
| .abortSignal(controller.signal) | ||
| .then(({ data: posts, error }) => { | ||
| if (error) return; | ||
|
|
||
| if (!posts) return; | ||
|
|
||
| if (posts.length === 0) setUserHasNoMorePosts(true); | ||
|
|
||
| setPosts((prev) => [...prev, ...posts]); | ||
| }); | ||
| } catch (error: unknown) { | ||
| if ((error as Error).name === "AbortError") return; | ||
|
|
||
| setError(true); | ||
| } finally { | ||
| setIsLoading(false); | ||
| setIsFetching(false); | ||
| } | ||
|
|
||
| return () => { | ||
| controller.abort(); | ||
| }; | ||
|
|
||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [lastPostIndex]); | ||
|
|
||
| function handleScroll() { | ||
| setLastPostIndex((prev) => prev + 32); | ||
| async function fetchNewPosts({ | ||
| currentPage, | ||
| signal, | ||
| pageSize, | ||
| }: { | ||
| currentPage: number; | ||
| signal: AbortSignal; | ||
| pageSize: number; | ||
| }) { | ||
| return await supabase | ||
| .from("posts") | ||
| .select("*") | ||
| .eq("profile_id", profileId) | ||
| .order("created_at", { ascending: false }) | ||
| .range(currentPage, currentPage + pageSize) | ||
| .abortSignal(signal); | ||
| } | ||
|
|
||
| return ( | ||
| <main className="w-full h-full flex flex-col gap-2"> | ||
| {isLoading && <PostsGridSkeleton cuantity={32} />} | ||
| {!isLoading && !isFetching && ( | ||
| <> | ||
| {!error ? ( | ||
| <div> | ||
| <PostsGrid posts={posts} onFetchNewPosts={handleScroll} /> | ||
| </div> | ||
| ) : ( | ||
| <article className="flex items-center justify-center w-full max-h-96 py-32 text-center border-y border-neutral-300"> | ||
| <Heading level={10}> | ||
| Something wen wrong, please reload the page | ||
| </Heading> | ||
| </article> | ||
| )} | ||
| </> | ||
| )} | ||
| <PostsGrid onFetchNewPosts={fetchNewPosts} /> | ||
| </main> | ||
| ); | ||
| } |
Oops, something went wrong.