-
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 #127 from Huilensolis/95-feature-add-infinite-scro…
…ll-to-posts-grid 95 feature add infinite scroll to posts grid
- Loading branch information
Showing
27 changed files
with
704 additions
and
361 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,43 +1,85 @@ | ||
| import { getSuapabaseServerComponent } from "@/supabase/models/index.models"; | ||
| "use client"; | ||
|
|
||
| import { Heading } from "@/components/ui/typography/heading"; | ||
| import { PostsGrid } from "@/components/feature/posts-grid"; | ||
| import { Suspense } from "react"; | ||
| import { Skeleton } from "@/components/ui/skeleton"; | ||
| 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); | ||
| } | ||
|
|
||
| export async function Feed() { | ||
| const supabase = await getSuapabaseServerComponent(); | ||
| return () => { | ||
| controller.abort(); | ||
| }; | ||
|
|
||
| const { data: posts, error } = await supabase | ||
| .from("posts") | ||
| .select("*") | ||
| .order("id", { ascending: false }) | ||
| .limit(24); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [lastPostIndex]); | ||
|
|
||
| const doesPostsExist = posts && posts.length > 0 && !error; | ||
| function handleScroll() { | ||
| setLastPostIndex((prev) => prev + 32); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {doesPostsExist ? ( | ||
| <main className="w-full h-full px-2"> | ||
| <Suspense | ||
| fallback={ | ||
| <ul className="break-inside-avoid gap-2 px-2 [column-count:3] md:[column-count:3]"> | ||
| {Array(16) | ||
| .fill(" ") | ||
| .map((_, i) => ( | ||
| <Skeleton key={i} className="w-full h-96 mb-2" /> | ||
| ))} | ||
| </ul> | ||
| } | ||
| > | ||
| <PostsGrid posts={posts} /> | ||
| </Suspense> | ||
| </main> | ||
| ) : ( | ||
| <article className="flex items-center justify-center w-full max-h-96 py-16 text-center border-y border-neutral-300"> | ||
| <Heading level={7}>Something wen wrong, reload the page</Heading> | ||
| </article> | ||
| <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> | ||
| )} | ||
| </> | ||
| )} | ||
| </> | ||
| </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
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
1 change: 1 addition & 0 deletions
1
src/app/(site)/app/post/[postid]/components/recent-posts/index.ts
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 |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./recent-pots.component"; |
93 changes: 93 additions & 0 deletions
93
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 |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| "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); | ||
| } | ||
|
|
||
| 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> | ||
| ); | ||
| } |
Oops, something went wrong.