refactor(app): 95 posts grid

huilensolis · Mar 15, 2024 · af96e3a · af96e3a
1 parent a0d1d2d
commit af96e3a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -2,19 +2,20 @@ 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"];
 
 type TOnFetchNewPostsProps = {
   currentPage: number;
   signal: AbortSignal;
-  postsCuantity: number;
+  pageSize: number;
 };
 
+const PAGE_SIZE = 30;
+
 type TOnFetchNewPosts = ({
-  postsCuantity,
+  pageSize,
   signal,
   currentPage,
 }: TOnFetchNewPostsProps) => Promise<PostgrestSingleResponse<TPost[]>>;
@@ -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");
         }