Keep/keep-notes/app/page.tsx

48 lines
1.3 KiB
TypeScript

'use client'
import { useState, useEffect } from 'react'
import { useSearchParams } from 'next/navigation'
import { Note } from '@/lib/types'
import { getNotes, searchNotes } from '@/app/actions/notes'
import { NoteInput } from '@/components/note-input'
import { NoteGrid } from '@/components/note-grid'
export default function HomePage() {
const searchParams = useSearchParams()
const [notes, setNotes] = useState<Note[]>([])
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
const loadNotes = async () => {
setIsLoading(true)
const search = searchParams.get('search')
const labelFilter = searchParams.get('labels')?.split(',').filter(Boolean) || []
let allNotes = search ? await searchNotes(search) : await getNotes()
// Filter by selected labels
if (labelFilter.length > 0) {
allNotes = allNotes.filter(note =>
note.labels?.some(label => labelFilter.includes(label))
)
}
setNotes(allNotes)
setIsLoading(false)
}
loadNotes()
}, [searchParams])
return (
<main className="container mx-auto px-4 py-8 max-w-7xl">
<NoteInput />
{isLoading ? (
<div className="text-center py-8 text-gray-500">Loading...</div>
) : (
<NoteGrid notes={notes} />
)}
</main>
)
}