From 9590b07003ad849c2b5e6268d82dde4ab24d4e86 Mon Sep 17 00:00:00 2001 From: Huilensolis Date: Thu, 14 Mar 2024 15:28:23 -0300 Subject: [PATCH 1/4] refactor(app): 95 posts grid --- src/app/(site)/app/components/feed/index.tsx | 87 ++-------- src/app/(site)/app/page.tsx | 16 +- src/components/feature/lazy-image/index.tsx | 3 +- .../posts-grid-row.component.tsx | 8 +- .../posts-grid/posts-grid.component.tsx | 155 ++++++++++++++---- .../feature/posts-grid/posts-grid.models.ts | 3 - 6 files changed, 146 insertions(+), 126 deletions(-) delete mode 100644 src/components/feature/posts-grid/posts-grid.models.ts diff --git a/src/app/(site)/app/components/feed/index.tsx b/src/app/(site)/app/components/feed/index.tsx index c33a748..69aaa57 100644 --- a/src/app/(site)/app/components/feed/index.tsx +++ b/src/app/(site)/app/components/feed/index.tsx @@ -1,85 +1,30 @@ "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(false); - - const [isLoading, setIsLoading] = useState(true); - const [isFetching, setIsFetching] = useState(false); - - const [lastPostIndex, setLastPostIndex] = useState(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, + postsCuantity, + }: { + currentPage: number; + signal: AbortSignal; + postsCuantity: number; + }) { + return await supabase + .from("posts") + .select("*") + .limit(30) + .range(currentPage, currentPage + postsCuantity) + .abortSignal(signal); } return (
- {isLoading && } - {!isLoading && !isFetching && ( - <> - {!error ? ( -
- -
- ) : ( -
- - Something wen wrong, please reload the page - -
- )} - - )} +
); } diff --git a/src/app/(site)/app/page.tsx b/src/app/(site)/app/page.tsx index 270338d..325c836 100644 --- a/src/app/(site)/app/page.tsx +++ b/src/app/(site)/app/page.tsx @@ -30,21 +30,7 @@ function DesktopLayout() { function MobileLayout() { return (
- - {Array(6) - .fill("") - .map((_, i) => ( -
  • - -
    • - ))} - - } - > - -     +
    ); } diff --git a/src/components/feature/lazy-image/index.tsx b/src/components/feature/lazy-image/index.tsx index 5bab7b4..273aaec 100644 --- a/src/components/feature/lazy-image/index.tsx +++ b/src/components/feature/lazy-image/index.tsx @@ -59,7 +59,8 @@ export function LazyImage({ loading="lazy" className={loading ? "opacity-0" : className} ref={imageRef} - style={{ height, width }} + width={width} + height={height} /> )} {loading && !error && ( diff --git a/src/components/feature/posts-grid/components/posts-grid-row/posts-grid-row.component.tsx b/src/components/feature/posts-grid/components/posts-grid-row/posts-grid-row.component.tsx index a920fea..07524e7 100644 --- a/src/components/feature/posts-grid/components/posts-grid-row/posts-grid-row.component.tsx +++ b/src/components/feature/posts-grid/components/posts-grid-row/posts-grid-row.component.tsx @@ -14,9 +14,9 @@ export function PostsGridRow({ }) { const imageHeight = (post.asset_height * columnWidth) / post.asset_width; return ( -
  • +
  • diff --git a/src/components/feature/posts-grid/posts-grid.component.tsx b/src/components/feature/posts-grid/posts-grid.component.tsx index 4ba9fe5..2ca64dc 100644 --- a/src/components/feature/posts-grid/posts-grid.component.tsx +++ b/src/components/feature/posts-grid/posts-grid.component.tsx @@ -1,35 +1,64 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { TPostsGridItem } from "./posts-grid.models"; import { PostsGridRow } from "./components/posts-grid-row"; import { PostsGridContainer } from "./components/posts-grid-container"; +import { type Database } from "@/supabase/types"; +import { PostsGridSkeleton } from "./components/posts-grid-skeleton"; +import { type PostgrestSingleResponse } from "@supabase/supabase-js"; + +type TPost = Database["public"]["Tables"]["posts"]["Row"]; + +type TOnFetchNewPostsProps = { + currentPage: number; + signal: AbortSignal; + postsCuantity: number; +}; + +type TOnFetchNewPosts = ({ + postsCuantity, + signal, + currentPage, +}: TOnFetchNewPostsProps) => Promise>; export function PostsGrid({ - posts, onFetchNewPosts, }: { - posts: TPostsGridItem[]; - onFetchNewPosts: () => void; + onFetchNewPosts: TOnFetchNewPosts; }) { const [columnWidth, setColumnWidth] = useState(null); - const containerRef = useRef(null); + const containerRef = useRef(null); + + const setContainerRef = useCallback((node: HTMLUListElement) => { + if (!node) return; + + calculateColumnWidth(node.offsetWidth); + containerRef.current = node; + return; + }, []); + + function calculateColumnWidth(containerWidth: number) { + if (typeof window === "undefined") return; + + if (containerWidth <= 0 || !containerWidth) return; + + const columnCount = window.innerWidth > 1024 ? 3 : 2; + setColumnWidth((containerWidth - 8 * 2) / columnCount); + } useEffect(() => { - function calculateColumnWidth() { - if (!containerRef.current) return; + if (typeof window === "undefined") return; - const containerWidth = containerRef.current.offsetWidth; - if (containerWidth <= 0 || !containerWidth) return; + console.log("running use Effect"); - const columnCount = window.innerWidth > 1024 ? 3 : 2; - setColumnWidth((containerWidth - 8 * 2) / columnCount); + function eventListenerForWidthResize() { + if (containerRef.current === null) return; + calculateColumnWidth(containerRef.current.offsetWidth); } - calculateColumnWidth(); - - window.addEventListener("resize", calculateColumnWidth); + window.addEventListener("resize", eventListenerForWidthResize); - return () => window.removeEventListener("resize", calculateColumnWidth); + return () => + window.removeEventListener("resize", eventListenerForWidthResize); }, []); const [lastElementRef, setLastElementRef] = useState( @@ -51,7 +80,7 @@ export function PostsGrid({ threshold: 1.0, }; - const observer = new IntersectionObserver(onFetchNewPosts, observerOptions); + const observer = new IntersectionObserver(handleScroll, observerOptions); observer.observe(lastElementRef); @@ -62,22 +91,84 @@ export function PostsGrid({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [lastElementRef]); + const [posts, setPosts] = useState([]); + const [page, setPage] = useState(1); + const [isLastPage, setIsLastPage] = useState(false); + + const [isFetching, setIsFetching] = useState(false); + + function handleScroll() { + setPage((prev) => prev + 32); + } + + useEffect(() => { + const controller = new AbortController(); + + async function fetchNewPosts() { + try { + setIsFetching(true); + const { data: newPosts, error } = await onFetchNewPosts({ + signal: controller.signal, + currentPage: page, + postsCuantity: 32, + }); + + if (error) { + if (error instanceof Error && error.message === "AbortError") { + console.log("error is sinstance of error"); + return; + } + if (error.code === "20") { + return; // this means there is been throwed an error because the request has been aborted + } + console.log({ error }); + throw new Error("eror fetching new posts"); + } + + if (newPosts.length === 0) { + setIsLastPage(true); + return; + } + + setPosts((prev) => [...prev, ...newPosts]); + } catch (error) { + console.log(error); + } finally { + setIsFetching(false); + } + } + + if (isFetching) return; + if (isLastPage) return; + + fetchNewPosts(); + + return () => { + controller.abort(); + }; + }, [page]); + + console.log({ columnWidth }); + return ( - - {posts.length > 0 && containerRef.current && ( - <> - {posts.map((post, i) => ( - - ))} -
    - - )} - + <> + + {posts.length > 0 && columnWidth && ( + <> + {posts.map((post, i) => ( + + ))} +
    + + )} + + {isFetching && } + ); } diff --git a/src/components/feature/posts-grid/posts-grid.models.ts b/src/components/feature/posts-grid/posts-grid.models.ts deleted file mode 100644 index dcaec5b..0000000 --- a/src/components/feature/posts-grid/posts-grid.models.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Database } from "@/supabase/types"; - -export type TPostsGridItem = Database["public"]["Tables"]["posts"]["Row"]; From 27e2970e2f2dfaf8d351a55c68414f95bb195fef Mon Sep 17 00:00:00 2001 From: Huilensolis Date: Fri, 15 Mar 2024 12:18:05 -0300 Subject: [PATCH 2/4] refactor(app): 95 posts grid --- src/app/(site)/app/components/feed/index.tsx | 1 - src/app/(site)/app/page.tsx | 2 - .../recent-posts/recent-pots.component.tsx | 94 +++---------- .../user-posts/user-posts.component.tsx | 95 +++---------- .../searched-posts-grid.component.tsx | 125 +++--------------- src/app/(site)/app/search/page.tsx | 18 ++- .../posts-grid-container.component.tsx | 2 +- .../posts-grid-row.component.tsx | 5 +- .../posts-grid-skeleton.component.tsx | 7 +- .../posts-grid/posts-grid.component.tsx | 3 - 10 files changed, 70 insertions(+), 282 deletions(-) diff --git a/src/app/(site)/app/components/feed/index.tsx b/src/app/(site)/app/components/feed/index.tsx index 69aaa57..ef1b113 100644 --- a/src/app/(site)/app/components/feed/index.tsx +++ b/src/app/(site)/app/components/feed/index.tsx @@ -17,7 +17,6 @@ export function Feed() { return await supabase .from("posts") .select("*") - .limit(30) .range(currentPage, currentPage + postsCuantity) .abortSignal(signal); } diff --git a/src/app/(site)/app/page.tsx b/src/app/(site)/app/page.tsx index 325c836..62d58b4 100644 --- a/src/app/(site)/app/page.tsx +++ b/src/app/(site)/app/page.tsx @@ -1,7 +1,5 @@ import { Feed } from "./components/feed"; import { protectRouteFromUnauthUsers } from "@/utils/auth/server-side-validations"; -import { Suspense } from "react"; -import { Skeleton } from "@/components/ui/skeleton"; export const dynamic = "force-dynamic"; diff --git a/src/app/(site)/app/post/[postid]/components/recent-posts/recent-pots.component.tsx b/src/app/(site)/app/post/[postid]/components/recent-posts/recent-pots.component.tsx index 9902630..4c4ed44 100644 --- a/src/app/(site)/app/post/[postid]/components/recent-posts/recent-pots.component.tsx +++ b/src/app/(site)/app/post/[postid]/components/recent-posts/recent-pots.component.tsx @@ -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(true); - const [isFetching, setIsFetching] = useState(false); - - const [lastPostIndex, setLastPostIndex] = useState(1); - const [error, setError] = useState(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, + postsCuantity, + }: { + currentPage: number; + signal: AbortSignal; + postsCuantity: number; + }) { + return supabase + .from("posts") + .select("*") + .neq("id", excludedPostId) + .order("title", { ascending: false }) + .range(currentPage, currentPage + postsCuantity) + .abortSignal(signal); } - return ( -
    - {isLoading && } - {!isLoading && !isFetching && ( - <> - {!error ? ( -
    - -
    - ) : ( -
    - - Something wen wrong, please reload the page - -
    - )} - - )} -
    - ); + return ; } diff --git a/src/app/(site)/app/profile/[username]/components/user-posts/user-posts.component.tsx b/src/app/(site)/app/profile/[username]/components/user-posts/user-posts.component.tsx index d2e0caf..40577b1 100644 --- a/src/app/(site)/app/profile/[username]/components/user-posts/user-posts.component.tsx +++ b/src/app/(site)/app/profile/[username]/components/user-posts/user-posts.component.tsx @@ -1,92 +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 UserPosts({ profileId }: { profileId: string }) { const { supabase } = useSupabase(); - const [posts, setPosts] = useState< - Database["public"]["Tables"]["posts"]["Row"][] - >([]); - - const [error, setError] = useState(false); - - const [isLoading, setIsLoading] = useState(true); - const [isFetching, setIsFetching] = useState(false); - - const [lastPostIndex, setLastPostIndex] = useState(1); - - const [userHasNoMorePosts, setUserHasNoMorePosts] = useState(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, + postsCuantity, + }: { + currentPage: number; + signal: AbortSignal; + postsCuantity: number; + }) { + return await supabase + .from("posts") + .select("*") + .eq("profile_id", profileId) + .order("created_at", { ascending: false }) + .limit(32) + .range(currentPage, currentPage + postsCuantity) + .abortSignal(signal); } return (
    - {isLoading && } - {!isLoading && !isFetching && ( - <> - {!error ? ( -
    - -
    - ) : ( -
    - - Something wen wrong, please reload the page - -
    - )} - - )} +
    ); } diff --git a/src/app/(site)/app/search/components/searched-posts-grid/searched-posts-grid.component.tsx b/src/app/(site)/app/search/components/searched-posts-grid/searched-posts-grid.component.tsx index b65d39f..256da6c 100644 --- a/src/app/(site)/app/search/components/searched-posts-grid/searched-posts-grid.component.tsx +++ b/src/app/(site)/app/search/components/searched-posts-grid/searched-posts-grid.component.tsx @@ -1,121 +1,34 @@ "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 SearchedPostsGrid({ searchValue }: { searchValue: string }) { - const { supabase } = useSupabase(); - - const [posts, setPosts] = useState< - Database["public"]["Tables"]["posts"]["Row"][] - >([]); - - const [error, setError] = useState(false); - - const [isLoading, setIsLoading] = useState(true); - const [isFetching, setIsFetching] = useState(false); - - const [lastPostIndex, setLastPostIndex] = useState(1); - - const [notFound, setNotFound] = useState(false); - - function getAndSetPosts({ signal }: { signal: AbortSignal }) { - try { - setIsLoading(true); - setIsFetching(true); - - setNotFound(false); - - supabase - .from("posts") - .select("*") - .like("title", `%${searchValue}%`) - .order("created_at", { ascending: false }) - .range(lastPostIndex, lastPostIndex + 32) - .abortSignal(signal) - .limit(32) - .then(({ data: posts, error }) => { - if (error) return; - - if (!posts) return; - - if (posts.length === 0) { - setNotFound(true); - return; - } - setNotFound(false); - - setPosts((prev) => [...prev, ...posts]); - }); - } catch (error: unknown) { - if ((error as Error).name === "AbortError") return; + if (!searchValue || searchValue.trim().length === 0) searchValue = "painting"; - setError(true); - } finally { - setIsLoading(false); - setIsFetching(false); - } - } - - useEffect(() => { - const controller = new AbortController(); - - getAndSetPosts({ signal: controller.signal }); - - return () => { - controller.abort(); - }; - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [lastPostIndex]); - - useEffect(() => { - const controller = new AbortController(); - - if (isLoading || isFetching) return; - - setLastPostIndex(1); - - setPosts([]); - - getAndSetPosts({ signal: controller.signal }); - - return () => { - controller.abort(); - }; - }, [searchValue]); + const { supabase } = useSupabase(); - function handleScroll() { - setLastPostIndex((prev) => prev + 32); + async function fetchNewPosts({ + signal, + currentPage, + postsCuantity, + }: { + currentPage: number; + signal: AbortSignal; + postsCuantity: number; + }) { + return await supabase + .from("posts") + .select("*") + .ilike("title", `%${searchValue}%`) + .order("created_at", { ascending: false }) + .range(currentPage, currentPage + postsCuantity) + .abortSignal(signal); } return (
    - {isLoading && } - {!isLoading && !isFetching && ( - <> - {!error ? ( -
    - -
    - ) : ( -
    - - Something wen wrong, please reload the page - -
    - )} - - )} - {notFound && posts.length === 0 && ( -
    - 404 not found -
    - )} +
    ); } diff --git a/src/app/(site)/app/search/page.tsx b/src/app/(site)/app/search/page.tsx index e068359..a593559 100644 --- a/src/app/(site)/app/search/page.tsx +++ b/src/app/(site)/app/search/page.tsx @@ -1,16 +1,16 @@ import { SearchForm } from "./components/SearchForm/SearchForm"; import { SearchedPostsGrid } from "./components/searched-posts-grid"; -interface SearchParams { +type SearchParams = { search_query?: string; -} +}; -interface Props { +export default async function SearchPage({ + searchParams, +}: { searchParams: SearchParams; -} - -const SearchPage: React.FC = async ({ searchParams }) => { - const searchValue = searchParams.search_query ?? "painting"; +}) { + const searchValue = searchParams.search_query ?? " "; return (
    @@ -19,6 +19,4 @@ const SearchPage: React.FC = async ({ searchParams }) => {
    ); -}; - -export default SearchPage; +} diff --git a/src/components/feature/posts-grid/components/posts-grid-container/posts-grid-container.component.tsx b/src/components/feature/posts-grid/components/posts-grid-container/posts-grid-container.component.tsx index 4276768..7b2c550 100644 --- a/src/components/feature/posts-grid/components/posts-grid-container/posts-grid-container.component.tsx +++ b/src/components/feature/posts-grid/components/posts-grid-container/posts-grid-container.component.tsx @@ -10,7 +10,7 @@ type TRef = HTMLUListElement; const PostsGridContainer = forwardRef(({ children }, ref) => { return (
      {children} diff --git a/src/components/feature/posts-grid/components/posts-grid-row/posts-grid-row.component.tsx b/src/components/feature/posts-grid/components/posts-grid-row/posts-grid-row.component.tsx index 07524e7..e3435f7 100644 --- a/src/components/feature/posts-grid/components/posts-grid-row/posts-grid-row.component.tsx +++ b/src/components/feature/posts-grid/components/posts-grid-row/posts-grid-row.component.tsx @@ -14,7 +14,10 @@ export function PostsGridRow({ }) { const imageHeight = (post.asset_height * columnWidth) / post.asset_width; return ( -
    • +
    • + <> {Array(cuantity) .fill(" ") .map((_, i) => ( - + ))} - + ); } diff --git a/src/components/feature/posts-grid/posts-grid.component.tsx b/src/components/feature/posts-grid/posts-grid.component.tsx index 2ca64dc..b4576f8 100644 --- a/src/components/feature/posts-grid/posts-grid.component.tsx +++ b/src/components/feature/posts-grid/posts-grid.component.tsx @@ -148,8 +148,6 @@ export function PostsGrid({ }; }, [page]); - console.log({ columnWidth }); - return ( <> @@ -168,7 +166,6 @@ export function PostsGrid({ )} - {isFetching && } ); } From a0d1d2d7188fcc49b84371a04f775a6de4fd2d27 Mon Sep 17 00:00:00 2001 From: Huilensolis Date: Fri, 15 Mar 2024 12:20:36 -0300 Subject: [PATCH 3/4] refactor(app): 95 post image styles --- src/app/(site)/app/post/[postid]/components/post/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(site)/app/post/[postid]/components/post/index.tsx b/src/app/(site)/app/post/[postid]/components/post/index.tsx index b09c154..54f4077 100644 --- a/src/app/(site)/app/post/[postid]/components/post/index.tsx +++ b/src/app/(site)/app/post/[postid]/components/post/index.tsx @@ -60,7 +60,7 @@ export async function Post({ Date: Fri, 15 Mar 2024 12:28:56 -0300 Subject: [PATCH 4/4] refactor(app): 95 posts grid --- src/app/(site)/app/components/feed/index.tsx | 6 +++--- .../recent-posts/recent-pots.component.tsx | 8 ++++---- .../components/user-posts/user-posts.component.tsx | 7 +++---- .../searched-posts-grid.component.tsx | 6 +++--- .../feature/posts-grid/posts-grid.component.tsx | 12 ++++++------ 5 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/app/(site)/app/components/feed/index.tsx b/src/app/(site)/app/components/feed/index.tsx index ef1b113..f65b5d3 100644 --- a/src/app/(site)/app/components/feed/index.tsx +++ b/src/app/(site)/app/components/feed/index.tsx @@ -8,16 +8,16 @@ export function Feed() { async function fetchNewPosts({ currentPage, signal, - postsCuantity, + pageSize, }: { currentPage: number; signal: AbortSignal; - postsCuantity: number; + pageSize: number; }) { return await supabase .from("posts") .select("*") - .range(currentPage, currentPage + postsCuantity) + .range(currentPage, currentPage + pageSize) .abortSignal(signal); } diff --git a/src/app/(site)/app/post/[postid]/components/recent-posts/recent-pots.component.tsx b/src/app/(site)/app/post/[postid]/components/recent-posts/recent-pots.component.tsx index 4c4ed44..cf4adec 100644 --- a/src/app/(site)/app/post/[postid]/components/recent-posts/recent-pots.component.tsx +++ b/src/app/(site)/app/post/[postid]/components/recent-posts/recent-pots.component.tsx @@ -14,18 +14,18 @@ export function RecentPosts({ async function fetchNewPosts({ currentPage, signal, - postsCuantity, + pageSize, }: { currentPage: number; signal: AbortSignal; - postsCuantity: number; + pageSize: number; }) { return supabase .from("posts") .select("*") - .neq("id", excludedPostId) + .neq("id", excludedPostId) // exclude the posts that has the id equal to excludedPostId .order("title", { ascending: false }) - .range(currentPage, currentPage + postsCuantity) + .range(currentPage, currentPage + pageSize) .abortSignal(signal); } diff --git a/src/app/(site)/app/profile/[username]/components/user-posts/user-posts.component.tsx b/src/app/(site)/app/profile/[username]/components/user-posts/user-posts.component.tsx index 40577b1..1498b18 100644 --- a/src/app/(site)/app/profile/[username]/components/user-posts/user-posts.component.tsx +++ b/src/app/(site)/app/profile/[username]/components/user-posts/user-posts.component.tsx @@ -9,19 +9,18 @@ export function UserPosts({ profileId }: { profileId: string }) { async function fetchNewPosts({ currentPage, signal, - postsCuantity, + pageSize, }: { currentPage: number; signal: AbortSignal; - postsCuantity: number; + pageSize: number; }) { return await supabase .from("posts") .select("*") .eq("profile_id", profileId) .order("created_at", { ascending: false }) - .limit(32) - .range(currentPage, currentPage + postsCuantity) + .range(currentPage, currentPage + pageSize) .abortSignal(signal); } diff --git a/src/app/(site)/app/search/components/searched-posts-grid/searched-posts-grid.component.tsx b/src/app/(site)/app/search/components/searched-posts-grid/searched-posts-grid.component.tsx index 256da6c..83c8aae 100644 --- a/src/app/(site)/app/search/components/searched-posts-grid/searched-posts-grid.component.tsx +++ b/src/app/(site)/app/search/components/searched-posts-grid/searched-posts-grid.component.tsx @@ -11,18 +11,18 @@ export function SearchedPostsGrid({ searchValue }: { searchValue: string }) { async function fetchNewPosts({ signal, currentPage, - postsCuantity, + pageSize, }: { currentPage: number; signal: AbortSignal; - postsCuantity: number; + pageSize: number; }) { return await supabase .from("posts") .select("*") .ilike("title", `%${searchValue}%`) .order("created_at", { ascending: false }) - .range(currentPage, currentPage + postsCuantity) + .range(currentPage, currentPage + pageSize) .abortSignal(signal); } diff --git a/src/components/feature/posts-grid/posts-grid.component.tsx b/src/components/feature/posts-grid/posts-grid.component.tsx index b4576f8..ce17e76 100644 --- a/src/components/feature/posts-grid/posts-grid.component.tsx +++ b/src/components/feature/posts-grid/posts-grid.component.tsx @@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { PostsGridRow } from "./components/posts-grid-row"; import { PostsGridContainer } from "./components/posts-grid-container"; import { type Database } from "@/supabase/types"; -import { PostsGridSkeleton } from "./components/posts-grid-skeleton"; import { type PostgrestSingleResponse } from "@supabase/supabase-js"; type TPost = Database["public"]["Tables"]["posts"]["Row"]; @@ -10,11 +9,13 @@ type TPost = Database["public"]["Tables"]["posts"]["Row"]; type TOnFetchNewPostsProps = { currentPage: number; signal: AbortSignal; - postsCuantity: number; + pageSize: number; }; +const PAGE_SIZE = 30; + type TOnFetchNewPosts = ({ - postsCuantity, + pageSize, signal, currentPage, }: TOnFetchNewPostsProps) => Promise>; @@ -110,18 +111,17 @@ export function PostsGrid({ const { data: newPosts, error } = await onFetchNewPosts({ signal: controller.signal, currentPage: page, - postsCuantity: 32, + pageSize: PAGE_SIZE, }); if (error) { if (error instanceof Error && error.message === "AbortError") { - console.log("error is sinstance of error"); + // error is caused by an abortcontroller abort signal return; } if (error.code === "20") { return; // this means there is been throwed an error because the request has been aborted } - console.log({ error }); throw new Error("eror fetching new posts"); }