From eb53c81fc99c252b6c4333efcb9365d221520f64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cha=CC=82u=20Minh=20Phu=CC=81c?= Date: Thu, 7 Sep 2023 20:39:38 +0700 Subject: [PATCH 1/5] init commit - after rebase --- app/api/post/[pid]/route.ts | 7 +++---- app/blog/page.tsx | 14 +++++++++++--- components/Navbar/index.tsx | 2 +- components/Post/PostCard.tsx | 23 +++++++++++++++++++++++ components/Post/index.ts | 1 + package.json | 1 + pnpm-lock.yaml | 7 +++++++ 7 files changed, 47 insertions(+), 8 deletions(-) create mode 100644 components/Post/PostCard.tsx diff --git a/app/api/post/[pid]/route.ts b/app/api/post/[pid]/route.ts index e012ef4..d34595f 100644 --- a/app/api/post/[pid]/route.ts +++ b/app/api/post/[pid]/route.ts @@ -18,8 +18,7 @@ export async function GET(req: Request, res: NextApiResponse) { } return NextResponse.json(post); } catch (error) { - return NextResponse.json({ error }); //res.status(400).json(error); - return NextResponse.json({ message: '404s' }); + return NextResponse.json({ error }); } } export async function PATCH(req: Request, res: NextApiResponse) { @@ -35,11 +34,11 @@ export async function PATCH(req: Request, res: NextApiResponse) { data, }); if (!updatePost) { - return NextResponse.json({ message: 'Post not found' }); // res.status(404).json({ message: 'Post not found' }); + return NextResponse.json({ message: 'Post not found' }); } return res.status(200).json(updatePost); } catch (error) { - return NextResponse.json({ message: 'Update Error', error }); // res.status(500).json({ message: 'Update Error', error }); + return NextResponse.json({ message: 'Update Error', error }); } } export async function DELETE(req: Request, res: NextApiResponse) { diff --git a/app/blog/page.tsx b/app/blog/page.tsx index 73705e4..396ac70 100644 --- a/app/blog/page.tsx +++ b/app/blog/page.tsx @@ -1,10 +1,18 @@ -import { Box, GeneralLayout, Heading } from '@/components'; +import { Box, GeneralLayout, Heading, Spinner, Wrap } from '@/components'; +import { PostCard } from '@/components/Post'; -export default function BlogsPage() { +export default async function BlogsPage() { + const data = await prisma?.post.findMany({ + orderBy: { createdAt: 'desc' }, + }); + if (!data) return ; return ( The latest articles - if user login then show button create post + + + {data?.map((post, index) => )} + ); } diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx index 79070ae..9383cd5 100644 --- a/components/Navbar/index.tsx +++ b/components/Navbar/index.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@chakra-ui/react'; +import { Flex } from '@/components'; import { ProfileMenu } from './ProfileMenu'; import { Logo } from './Logo'; diff --git a/components/Post/PostCard.tsx b/components/Post/PostCard.tsx new file mode 100644 index 0000000..b0b090f --- /dev/null +++ b/components/Post/PostCard.tsx @@ -0,0 +1,23 @@ +import type { FC, Post } from '@/types'; +import { Box, Card, CardBody, CardFooter, WrapItem } from '@/components'; +import moment from 'moment'; + +type PropTypes = { + post: Post; +}; +export const PostCard: FC = ({ post }) => { + // console.log(post); + return ( + + + + + {moment(post.createdAt).format('LL')} + + + + footer + + + ); +}; diff --git a/components/Post/index.ts b/components/Post/index.ts index 1821f94..34554b1 100644 --- a/components/Post/index.ts +++ b/components/Post/index.ts @@ -1 +1,2 @@ export { PostList } from './PostList'; +export { PostCard } from './PostCard'; diff --git a/package.json b/package.json index fbdbb71..f9852d5 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "framer-motion": "10.16.1", "jotai": "2.4.0", "lodash": "4.17.21", + "moment": "2.29.4", "next": "13.4.19", "next-auth": "4.23.1", "react": "18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 783c787..45c50e0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,6 +50,9 @@ dependencies: lodash: specifier: 4.17.21 version: 4.17.21 + moment: + specifier: 2.29.4 + version: 2.29.4 next: specifier: 13.4.19 version: 13.4.19(react-dom@18.2.0)(react@18.2.0) @@ -3469,6 +3472,10 @@ packages: hasBin: true dev: false + /moment@2.29.4: + resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==} + dev: false + /ms@2.1.2: resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} From a97c1432e630ae55622e187544f392b7d43ad400 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cha=CC=82u=20Minh=20Phu=CC=81c?= Date: Thu, 7 Sep 2023 21:48:39 +0700 Subject: [PATCH 2/5] create PostCard components --- app/blog/page.tsx | 15 ++++++-- components/Post/PostCard.tsx | 70 +++++++++++++++++++++++++++++++----- 2 files changed, 73 insertions(+), 12 deletions(-) diff --git a/app/blog/page.tsx b/app/blog/page.tsx index 396ac70..6767b95 100644 --- a/app/blog/page.tsx +++ b/app/blog/page.tsx @@ -1,18 +1,27 @@ -import { Box, GeneralLayout, Heading, Spinner, Wrap } from '@/components'; +import { prisma } from '@/utils/prisma'; +import { + Box, + GeneralLayout, + Heading, + SimpleGrid, + Spinner, + Wrap, +} from '@/components'; import { PostCard } from '@/components/Post'; export default async function BlogsPage() { const data = await prisma?.post.findMany({ orderBy: { createdAt: 'desc' }, + take: 25, }); if (!data) return ; return ( The latest articles - + {data?.map((post, index) => )} - + ); } diff --git a/components/Post/PostCard.tsx b/components/Post/PostCard.tsx index b0b090f..060830d 100644 --- a/components/Post/PostCard.tsx +++ b/components/Post/PostCard.tsx @@ -1,23 +1,75 @@ import type { FC, Post } from '@/types'; -import { Box, Card, CardBody, CardFooter, WrapItem } from '@/components'; +import { + Avatar, + AvatarGroup, + Box, + Button, + Card, + CardBody, + CardFooter, + Flex, + Heading, + Spacer, + WrapItem, +} from '@/components'; import moment from 'moment'; type PropTypes = { post: Post; }; export const PostCard: FC = ({ post }) => { - // console.log(post); return ( - + - - - {moment(post.createdAt).format('LL')} + + + + {moment(post.createdAt).format('LL')} + + + + + + + + + + + + + + {post.title} - + - footer + + + - + ); }; From c963a7963d17ec58273c0a0a93754a0ff13072c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cha=CC=82u=20Minh=20Phu=CC=81c?= Date: Thu, 7 Sep 2023 21:49:50 +0700 Subject: [PATCH 3/5] create PostCard component and install moment package --- components/Post/PostCard.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/components/Post/PostCard.tsx b/components/Post/PostCard.tsx index 060830d..f9586c2 100644 --- a/components/Post/PostCard.tsx +++ b/components/Post/PostCard.tsx @@ -1,16 +1,15 @@ import type { FC, Post } from '@/types'; import { - Avatar, - AvatarGroup, + Flex, Box, - Button, Card, + Spacer, + Avatar, + Button, + Heading, CardBody, CardFooter, - Flex, - Heading, - Spacer, - WrapItem, + AvatarGroup, } from '@/components'; import moment from 'moment'; From 64ecd99148862ebfb660cc34fc120f7b5d14ffb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cha=CC=82u=20Minh=20Phu=CC=81c?= Date: Thu, 7 Sep 2023 22:23:04 +0700 Subject: [PATCH 4/5] render post card --- components/Post/PostCard.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/components/Post/PostCard.tsx b/components/Post/PostCard.tsx index f9586c2..cc7f0eb 100644 --- a/components/Post/PostCard.tsx +++ b/components/Post/PostCard.tsx @@ -7,6 +7,7 @@ import { Avatar, Button, Heading, + NextLink, CardBody, CardFooter, AvatarGroup, @@ -19,8 +20,8 @@ type PropTypes = { export const PostCard: FC = ({ post }) => { return ( - - + + {moment(post.createdAt).format('LL')} @@ -60,13 +61,16 @@ export const PostCard: FC = ({ post }) => { WebkitBoxOrient: 'vertical', }} as="div" + maxHeight={300} dangerouslySetInnerHTML={{ __html: post?.content ?? '' }} /> - + + + From a3e28e441c84bd6f0f2ecccef6f884e844654728 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cha=CC=82u=20Minh=20Phu=CC=81c?= Date: Fri, 8 Sep 2023 08:38:11 +0700 Subject: [PATCH 5/5] remove moment js and install date-fns --- components/Post/PostCard.tsx | 5 +++-- package.json | 2 +- pnpm-lock.yaml | 17 ++++++++++------- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/components/Post/PostCard.tsx b/components/Post/PostCard.tsx index cc7f0eb..53c5cec 100644 --- a/components/Post/PostCard.tsx +++ b/components/Post/PostCard.tsx @@ -1,3 +1,5 @@ +import { format } from 'date-fns'; + import type { FC, Post } from '@/types'; import { Flex, @@ -12,7 +14,6 @@ import { CardFooter, AvatarGroup, } from '@/components'; -import moment from 'moment'; type PropTypes = { post: Post; @@ -24,7 +25,7 @@ export const PostCard: FC = ({ post }) => { - {moment(post.createdAt).format('LL')} + {format(post.createdAt, 'PPP')} diff --git a/package.json b/package.json index f9852d5..d751293 100644 --- a/package.json +++ b/package.json @@ -26,11 +26,11 @@ "@upstash/ratelimit": "0.4.3", "@vercel/kv": "0.2.2", "argon2": "0.31.0", + "date-fns": "2.30.0", "deepmerge": "4.3.1", "framer-motion": "10.16.1", "jotai": "2.4.0", "lodash": "4.17.21", - "moment": "2.29.4", "next": "13.4.19", "next-auth": "4.23.1", "react": "18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 45c50e0..c7e84b7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ dependencies: argon2: specifier: 0.31.0 version: 0.31.0 + date-fns: + specifier: 2.30.0 + version: 2.30.0 deepmerge: specifier: 4.3.1 version: 4.3.1 @@ -50,9 +53,6 @@ dependencies: lodash: specifier: 4.17.21 version: 4.17.21 - moment: - specifier: 2.29.4 - version: 2.29.4 next: specifier: 13.4.19 version: 13.4.19(react-dom@18.2.0)(react@18.2.0) @@ -2261,6 +2261,13 @@ packages: resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==} dev: true + /date-fns@2.30.0: + resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} + engines: {node: '>=0.11'} + dependencies: + '@babel/runtime': 7.22.15 + dev: false + /debug@3.2.7: resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==} peerDependencies: @@ -3472,10 +3479,6 @@ packages: hasBin: true dev: false - /moment@2.29.4: - resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==} - dev: false - /ms@2.1.2: resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}