From 173d738aa4f45a8028c2cc37bf96c8f71f20a5f5 Mon Sep 17 00:00:00 2001 From: TZGyn Date: Thu, 10 Aug 2023 20:20:45 +0800 Subject: [PATCH] Added zod and use drizzle to get and add bookmarks --- .env.example | 2 + app/api/bookmark/route.ts | 25 +++++ app/api/bruh/route.ts | 5 - app/dashboard/page.tsx | 94 +++--------------- components/bookmarkCard.tsx | 55 +++++++++++ components/newBookmarkForm.tsx | 38 +++++++- drizzle.config.ts | 2 +- lib/schema.ts | 46 +++++++++ package.json | 6 +- pnpm-lock.yaml | 170 +++------------------------------ schema.ts | 38 -------- types/index.ts | 16 +++- 12 files changed, 208 insertions(+), 289 deletions(-) create mode 100644 .env.example create mode 100644 app/api/bookmark/route.ts delete mode 100644 app/api/bruh/route.ts create mode 100644 components/bookmarkCard.tsx create mode 100644 lib/schema.ts delete mode 100644 schema.ts diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..3c65834 --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ +NEXT_APP_URL=https://next-dashboard.tzgyn.com +DATABASE_URL=postgres://postgres:password@127.0.0.1:5432/next-dashboard diff --git a/app/api/bookmark/route.ts b/app/api/bookmark/route.ts new file mode 100644 index 0000000..7de3850 --- /dev/null +++ b/app/api/bookmark/route.ts @@ -0,0 +1,25 @@ +import { bookmarkSchema } from '@/types' +import { NextRequest, NextResponse } from 'next/server' +import { db, bookmark } from '@/lib/schema' + +export const dynamic = 'force-dynamic' + +export const GET = async () => { + const bookmarks = await db.select().from(bookmark) + + return NextResponse.json(bookmarks) +} + +export const POST = async (request: NextRequest) => { + const body = await request.json() + + const newBookmark = bookmarkSchema.safeParse(body) + + if (newBookmark.success) { + await db.insert(bookmark).values(newBookmark.data) + + return NextResponse.json({ status: 200 }) + } + + return NextResponse.json(newBookmark.error) +} diff --git a/app/api/bruh/route.ts b/app/api/bruh/route.ts deleted file mode 100644 index af00537..0000000 --- a/app/api/bruh/route.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { NextResponse } from 'next/server' - -export async function GET(request: Request) { - return NextResponse.json({ message: 'Hello World' }, { status: 200 }) -} diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index c098d52..6f5e1fd 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -1,90 +1,26 @@ -'use client' - -import { Card, CardHeader, CardBody, CardFooter } from '@nextui-org/card' -import { Link } from '@nextui-org/link' -import { Divider } from '@nextui-org/divider' -import { Image } from '@nextui-org/image' - -const handleClick = (url: string) => { - console.log(url) - // open(url, '_blank') - getData() -} +import { BookmarkCard } from '@/components/bookmarkCard' +import { bookmarkSchema } from '@/types' const getData = async () => { - const res = await fetch('/api/bruh') + const res = await fetch(process.env.NEXT_APP_URL + '/api/bookmark', { + method: 'GET', + cache: 'no-store', + }) + const data = await res.json() - console.log(res) + return bookmarkSchema.array().parse(data) } -export default function DashboardPage() { - const data = [ - { - name: 'NextUI', - link: 'nextui.org', - description: - 'Make beautiful websites regardless of your design experience.', - url: 'https://github.com/nextui-org/nextui', - }, - { - name: 'NextUI', - link: 'nextui.org', - description: - 'Make beautiful websites regardless of your design experience.', - url: 'https://github.com/nextui-org/nextui', - }, - { - name: 'NextUI', - link: 'nextui.org', - description: - 'Make beautiful websites regardless of your design experience.', - url: 'https://github.com/nextui-org/nextui', - }, - { - name: 'NextUI', - link: 'nextui.org', - description: - 'Make beautiful websites regardless of your design experience.', - url: 'https://github.com/nextui-org/nextui', - }, - ] +export default async function DashboardPage() { + const data = await getData() + return (
{data.map((data, index) => ( - handleClick(data.url)}> - - nextui logo -
-

{data.name}

-

- {data.link} -

-
- - - -

{data.description}

- - - - - {data.url} - - - + ))}
) diff --git a/components/bookmarkCard.tsx b/components/bookmarkCard.tsx new file mode 100644 index 0000000..539d18f --- /dev/null +++ b/components/bookmarkCard.tsx @@ -0,0 +1,55 @@ +'use client' + +import { Card, CardHeader, CardBody, CardFooter } from '@nextui-org/card' +import { Link } from '@nextui-org/link' +import { Divider } from '@nextui-org/divider' +import { Image } from '@nextui-org/image' + +import { type Bookmark } from '@/types' + +export const BookmarkCard = ({ + index, + data, +}: { + index: number + data: Bookmark +}) => { + return ( + <> + open(data.url, '_blank')}> + + nextui logo +
+

{data.name}

+

+ {data.link} +

+
+ + + +

{data.description}

+ + + + + {data.url} + + + + + ) +} diff --git a/components/newBookmarkForm.tsx b/components/newBookmarkForm.tsx index bde2487..1fd9951 100644 --- a/components/newBookmarkForm.tsx +++ b/components/newBookmarkForm.tsx @@ -11,15 +11,33 @@ import { import { Button } from '@nextui-org/button' import { Input } from '@nextui-org/input' import { Icon } from '@iconify/react' +import { useRouter } from 'next/navigation' +import { useState } from 'react' export default function NewBookmarkForm() { const { isOpen, onOpen, onOpenChange } = useDisclosure() - const onSubmit = () => { - console.log('submitting') + const router = useRouter() + const onSubmit = async () => { + const body = { + name, + link, + description, + url, + } + await fetch('/api/bookmark', { + method: 'POST', + body: JSON.stringify(body), + }) onOpenChange() + router.refresh() } + const [name, setName] = useState('') + const [link, setLink] = useState('') + const [description, setDescription] = useState('') + const [url, setUrl] = useState('') + return ( <>