From 2c1ae9962c2e79f67295853a27010dd517118b4a Mon Sep 17 00:00:00 2001 From: Yehoshua Sandler Date: Fri, 18 Apr 2025 10:43:25 -0500 Subject: [PATCH] feat: books page --- README.md | 13 +++-- package-lock.json | 27 ++++++++++ package.json | 1 + src/app/(frontend)/[slug]/page.client.tsx | 0 src/app/(frontend)/[slug]/page.tsx | 0 src/app/(frontend)/books/page.client.tsx | 23 +++++++++ src/app/(frontend)/books/page.tsx | 44 ++++++++++++++++ src/app/(frontend)/page.tsx | 16 +++--- src/app/globals.css | 1 - src/components/BookList/index.tsx | 20 ++++--- src/components/ui/pagination.tsx | 63 ++++++++--------------- src/components/ui/text-shimmer.tsx | 57 ++++++++++++++++++++ 12 files changed, 204 insertions(+), 61 deletions(-) create mode 100644 src/app/(frontend)/[slug]/page.client.tsx create mode 100644 src/app/(frontend)/[slug]/page.tsx create mode 100644 src/app/(frontend)/books/page.client.tsx create mode 100644 src/app/(frontend)/books/page.tsx create mode 100644 src/components/ui/text-shimmer.tsx diff --git a/README.md b/README.md index f21342c..e93440f 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,15 @@ -# blank -blank + ## Attributes -- **Database**: mongodb +- **Database**: postgres - **Storage Adapter**: localDisk + +## external resources + +https://openlibrary.org/dev/docs/api + +## maybe use +https://www.reddit.com/r/nextjs/comments/1ej1y32/share_cool_shadcnstyle_components_libraries_you/ +https://motion-primitives.com/docs diff --git a/package-lock.json b/package-lock.json index 80d9efa..889bfe4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "framer-motion": "^12.7.4", "graphql": "^16.8.1", "lucide-react": "^0.488.0", + "motion": "^12.7.4", "next": "15.2.3", "next-themes": "^0.4.6", "payload": "3.31.0", @@ -10787,6 +10788,32 @@ "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==", "license": "MIT" }, + "node_modules/motion": { + "version": "12.7.4", + "resolved": "https://registry.npmjs.org/motion/-/motion-12.7.4.tgz", + "integrity": "sha512-MBGrMbYageHw4iZJn+pGTr7abq5n53jCxYkhFC1It3vYukQPRWg5zij46MnwYGpLR8KG465MLHSASXot9edYOw==", + "license": "MIT", + "dependencies": { + "framer-motion": "^12.7.4", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/motion-dom": { "version": "12.7.4", "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.7.4.tgz", diff --git a/package.json b/package.json index 7f246fb..11ce51a 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "framer-motion": "^12.7.4", "graphql": "^16.8.1", "lucide-react": "^0.488.0", + "motion": "^12.7.4", "next": "15.2.3", "next-themes": "^0.4.6", "payload": "3.31.0", diff --git a/src/app/(frontend)/[slug]/page.client.tsx b/src/app/(frontend)/[slug]/page.client.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app/(frontend)/[slug]/page.tsx b/src/app/(frontend)/[slug]/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app/(frontend)/books/page.client.tsx b/src/app/(frontend)/books/page.client.tsx new file mode 100644 index 0000000..ec5f558 --- /dev/null +++ b/src/app/(frontend)/books/page.client.tsx @@ -0,0 +1,23 @@ +'use client' + +import BookList from '@/components/BookList' +import { Book } from '@/payload-types' +import { PaginatedDocs } from 'payload' +import { useMemo } from 'react' + +type Props = { + initialBooks: PaginatedDocs +} +const BooksPageClient = (props: Props) => { + const initialBooks = useMemo(() => { + return props.initialBooks + }, [props.initialBooks]) + + return ( +
+ +
+ ) +} + +export default BooksPageClient diff --git a/src/app/(frontend)/books/page.tsx b/src/app/(frontend)/books/page.tsx new file mode 100644 index 0000000..12aa013 --- /dev/null +++ b/src/app/(frontend)/books/page.tsx @@ -0,0 +1,44 @@ +import { Book } from '@/payload-types' +import { getPayload, PaginatedDocs } from 'payload' +import configPromise from '@payload-config' +import BooksPageClient from './page.client' + +type Params = Promise<{ slug: string }> +type SearchParams = Promise<{ [key: string]: string | undefined }> + +type Props = { + params: Params + searchParams: SearchParams +} +const BooksPage = async (props: Props) => { + const searchParams = await props.searchParams + + const defaultLimit = 25 + const defaultPage = 1 + + const pageFromUrl = parseInt(searchParams?.page || '', 10) + const limitFromUrl = parseInt(searchParams?.limit || '', 10) + + const payload = await getPayload({ config: configPromise }) + + const initialBooks = (await payload.find({ + collection: 'books', + depth: 2, + page: !Number.isNaN(pageFromUrl) ? pageFromUrl : defaultPage, + limit: !Number.isNaN(limitFromUrl) ? limitFromUrl : defaultLimit, + overrideAccess: false, + select: { + title: true, + authors: true, + publication: true, + lcc: true, + genre: true, + isbn: true, + copies: true, + }, + })) as PaginatedDocs + + return +} + +export default BooksPage diff --git a/src/app/(frontend)/page.tsx b/src/app/(frontend)/page.tsx index 33eba98..0a6d62f 100644 --- a/src/app/(frontend)/page.tsx +++ b/src/app/(frontend)/page.tsx @@ -1,5 +1,4 @@ import { headers as getHeaders } from 'next/headers.js' -import Image from 'next/image' import { getPayload, PaginatedDocs } from 'payload' import React from 'react' import { fileURLToPath } from 'url' @@ -8,6 +7,7 @@ import config from '@/payload.config' import BookList from '@/components/BookList' import { Book } from '@/payload-types' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' +import { TextShimmer } from '@/components/ui/text-shimmer' export default async function HomePage() { const headers = await getHeaders() @@ -33,19 +33,21 @@ export default async function HomePage() { }, })) as PaginatedDocs - //let safariaQuote = '' - //const randomSefariaQuoteRequest = await fetch('https://www.sefaria.org/api/texts/random?categories=english') - //if (randomSefariaQuoteRequest.body) safariaQuote = await randomSefariaQuoteRequest.json() - //console.log(safariaQuote) - return (

Get the help you need

+

- Welcome {user && {`user.firstName`}} + + Welcome + + {user && {`user.firstName`}}

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat diff --git a/src/app/globals.css b/src/app/globals.css index 72d707a..ef220dc 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -121,7 +121,6 @@ } } - html[data-theme='dark'], html[data-theme='light'] { opacity: initial; diff --git a/src/components/BookList/index.tsx b/src/components/BookList/index.tsx index 1d8bb95..bb59bde 100644 --- a/src/components/BookList/index.tsx +++ b/src/components/BookList/index.tsx @@ -47,17 +47,17 @@ export default function BookList(props: Props) { const { docs, hasNextPage, hasPrevPage, limit, totalPages, page, prevPage, nextPage, totalDocs } = props.books - console.log(props.books) - const currentPage = page || 0 const books = docs + console.log(props) + return (