fix infinite scroll
Browse files- app/_actions/logos.ts +1 -1
- app/_components/gallery/list.tsx +7 -4
- app/layout.tsx +4 -1
app/_actions/logos.ts
CHANGED
|
@@ -15,7 +15,7 @@ export const getLastLogos = async () => {
|
|
| 15 |
return images.map((image) => image.id);
|
| 16 |
};
|
| 17 |
|
| 18 |
-
const ITEMS_PER_PAGE =
|
| 19 |
|
| 20 |
export const getLogos = async (page: number = 0) => {
|
| 21 |
const images = await prisma.logo.findMany({
|
|
|
|
| 15 |
return images.map((image) => image.id);
|
| 16 |
};
|
| 17 |
|
| 18 |
+
const ITEMS_PER_PAGE = 12;
|
| 19 |
|
| 20 |
export const getLogos = async (page: number = 0) => {
|
| 21 |
const images = await prisma.logo.findMany({
|
app/_components/gallery/list.tsx
CHANGED
|
@@ -17,18 +17,21 @@ export const InfiniteGallery = ({
|
|
| 17 |
const [hasMore, setHasMore] = useState(initialHasMore);
|
| 18 |
|
| 19 |
const fetchMoreData = async () => {
|
| 20 |
-
const
|
| 21 |
-
setLogos([...logos.logos]);
|
| 22 |
-
setHasMore(
|
| 23 |
setPage(page + 1);
|
| 24 |
};
|
| 25 |
|
| 26 |
return (
|
| 27 |
<InfiniteScroll
|
|
|
|
| 28 |
dataLength={logos.length} //This is important field to render the next data
|
| 29 |
next={fetchMoreData}
|
| 30 |
hasMore={hasMore}
|
| 31 |
-
loader={
|
|
|
|
|
|
|
| 32 |
className="max-lg:grid max-lg:grid-cols-2 lg:flex lg:items-start lg:justify-center gap-6 flex-wrap"
|
| 33 |
endMessage={
|
| 34 |
<div className="w-full max-lg:col-span-2 text-zinc-400 text-center">
|
|
|
|
| 17 |
const [hasMore, setHasMore] = useState(initialHasMore);
|
| 18 |
|
| 19 |
const fetchMoreData = async () => {
|
| 20 |
+
const newLogos = await getLogos(page + 1);
|
| 21 |
+
setLogos([...logos, ...newLogos.logos]);
|
| 22 |
+
setHasMore(newLogos.hasMore);
|
| 23 |
setPage(page + 1);
|
| 24 |
};
|
| 25 |
|
| 26 |
return (
|
| 27 |
<InfiniteScroll
|
| 28 |
+
scrollableTarget="content-wrapper"
|
| 29 |
dataLength={logos.length} //This is important field to render the next data
|
| 30 |
next={fetchMoreData}
|
| 31 |
hasMore={hasMore}
|
| 32 |
+
loader={
|
| 33 |
+
<div className="w-full max-lg:col-span-2 text-center">Loading...</div>
|
| 34 |
+
}
|
| 35 |
className="max-lg:grid max-lg:grid-cols-2 lg:flex lg:items-start lg:justify-center gap-6 flex-wrap"
|
| 36 |
endMessage={
|
| 37 |
<div className="w-full max-lg:col-span-2 text-zinc-400 text-center">
|
app/layout.tsx
CHANGED
|
@@ -53,7 +53,10 @@ export default function RootLayout({
|
|
| 53 |
<body
|
| 54 |
className={`${nohemiRegular.variable} ${geistMono.variable} antialiased`}
|
| 55 |
>
|
| 56 |
-
<div
|
|
|
|
|
|
|
|
|
|
| 57 |
<Navigation />
|
| 58 |
{children}
|
| 59 |
<footer className="mt-4 w-full max-w-4xl mx-auto border-t border-zinc-800 pt-8 pb-3 text-center">
|
|
|
|
| 53 |
<body
|
| 54 |
className={`${nohemiRegular.variable} ${geistMono.variable} antialiased`}
|
| 55 |
>
|
| 56 |
+
<div
|
| 57 |
+
id="content-wrapper"
|
| 58 |
+
className="h-screen w-full overflow-auto font-[family-name:var(--font-nohemi-sans)] p-6 scroll-smooth"
|
| 59 |
+
>
|
| 60 |
<Navigation />
|
| 61 |
{children}
|
| 62 |
<footer className="mt-4 w-full max-w-4xl mx-auto border-t border-zinc-800 pt-8 pb-3 text-center">
|