Skip to content

Commit

Permalink
refactor(app): 95 posts grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@huilensolis
huilensolis committed Mar 15, 2024
1 parent 9590b07 commit 27e2970
Show file tree
Hide file tree
Showing 10 changed files with 70 additions and 282 deletions.
1 change: 0 additions & 1 deletion src/app/(site)/app/components/feed/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export function Feed() {
return await supabase
.from("posts")
.select("*")
.limit(30)
.range(currentPage, currentPage + postsCuantity)
.abortSignal(signal);
}
Expand Down
2 changes: 0 additions & 2 deletions src/app/(site)/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand Down
94 changes: 17 additions & 77 deletions src/app/(site)/app/post/[postid]/components/recent-posts/recent-pots.component.tsx
View file
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,
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 (
<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} />;
}
95 changes: 18 additions & 77 deletions src/app/(site)/app/profile/[username]/components/user-posts/user-posts.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<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,
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 (
<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>
);
}
125 changes: 19 additions & 106 deletions src/app/(site)/app/search/components/searched-posts-grid/searched-posts-grid.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<boolean>(false);

const [isLoading, setIsLoading] = useState<boolean>(true);
const [isFetching, setIsFetching] = useState<boolean>(false);

const [lastPostIndex, setLastPostIndex] = useState<number>(1);

const [notFound, setNotFound] = useState<boolean>(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 (
<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">
<Heading level={10}>
Something wen wrong, please reload the page
</Heading>
</article>
)}
</>
)}
{notFound && posts.length === 0 && (
<article className="flex items-center justify-center w-full max-h-96 py-32 text-center">
<Heading level={10}>404 not found</Heading>
</article>
)}
<PostsGrid onFetchNewPosts={fetchNewPosts} />
</main>
);
}
Loading

0 comments on commit 27e2970

Please sign in to comment.