diff --git a/app/layout.tsx b/app/layout.tsx index 6ad6529..c5142d6 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -9,6 +9,7 @@ import clsx from 'clsx' import { userSchema } from '@/types' import { cookies } from 'next/headers' import { getUser } from '@/lib/auth' +import { getBookmarkCategories } from '@/lib/utils' export const metadata: Metadata = { title: { @@ -40,6 +41,10 @@ export default async function RootLayout({ user = userSchema.parse(userData) } + const bookmarkCategories = await getBookmarkCategories( + userData ? userData.id : null + ) + return (
- +
{children}
diff --git a/components/navbar.tsx b/components/navbar.tsx index 8a06258..c339b95 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -30,9 +30,15 @@ import { GithubIcon } from '@/components/icons' import { Icon } from '@iconify/react' import NewBookmarkForm from '@/components/newBookmarkForm' import { usePathname, useRouter } from 'next/navigation' -import { User } from '@/types' +import { BookmarkCategory, User } from '@/types' -export const Navbar = ({ user }: { user: User | null }) => { +export const Navbar = ({ + user, + categories, +}: { + user: User | null + categories: BookmarkCategory[] +}) => { const pathname = usePathname() const router = useRouter() @@ -95,7 +101,7 @@ export const Navbar = ({ user }: { user: User | null }) => { {pathname.startsWith('/dashboard') && (
- +
)} { + const onSubmit = () => { + if (selected === 'bookmark') submitBookmark() + else if (selected === 'bookmark_category') submitCategory() + else return + } + + const submitBookmark = async () => { const body = { name, link, description, url, - category_id: selectedKey === 'Other' ? 2 : 1, + category_id: parseInt(value.currentKey), } await fetch('/api/bookmark', { method: 'POST', @@ -41,12 +48,28 @@ export default function NewBookmarkForm() { router.refresh() } + const submitCategory = async () => { + const body = { + name: categoryName, + } + await fetch('/api/bookmark_category', { + method: 'POST', + body: JSON.stringify(body), + }) + onOpenChange() + router.refresh() + } + + const [selected, setSelected] = useState('bookmark') + const [name, setName] = useState('') const [link, setLink] = useState('') const [description, setDescription] = useState('') const [url, setUrl] = useState('') - const [selectedKey, setSelectedKey] = useState('Other') + const [categoryName, setCategoryName] = useState('') + + const [value, setValue] = useState(new Set([])) return ( <> @@ -67,84 +90,95 @@ export default function NewBookmarkForm() { onOpenChange={onOpenChange} placement='center' hideCloseButton> - { - if (e.key === 'Enter') onSubmit() - }}> + {(onClose) => ( <> - New Bookmark + New Bookmark/Category - - - - - - - Select Category - - { - setSelectedKey('Coding') - }} - className='capitalize'> - Coding - - { - setSelectedKey('Other') - }} - className='capitalize'> - Other - - - - { - setName(event.target.value) - }} - /> - { - setUrl(event.target.value) - }} - /> + + setSelected(key.toString()) + } + fullWidth + color='primary'> + +
+ + { + setName(event.target.value) + }} + /> + { + setUrl(event.target.value) + }} + /> +
+ + +
+ { + setCategoryName( + event.target.value + ) + }} + /> +
+ +