270 lines
8.6 KiB
TypeScript
270 lines
8.6 KiB
TypeScript
'use client'
|
|
|
|
import { Note } from '@/lib/types'
|
|
import { NoteCard } from './note-card'
|
|
import { useState, useMemo, useEffect } from 'react'
|
|
import { NoteEditor } from './note-editor'
|
|
import { reorderNotes, getNotes } from '@/app/actions/notes'
|
|
import {
|
|
DndContext,
|
|
DragEndEvent,
|
|
DragOverlay,
|
|
DragStartEvent,
|
|
MouseSensor,
|
|
TouchSensor,
|
|
useSensor,
|
|
useSensors,
|
|
closestCenter,
|
|
PointerSensor,
|
|
} from '@dnd-kit/core'
|
|
import {
|
|
SortableContext,
|
|
rectSortingStrategy,
|
|
useSortable,
|
|
arrayMove,
|
|
} from '@dnd-kit/sortable'
|
|
import { CSS } from '@dnd-kit/utilities'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
interface NoteGridProps {
|
|
notes: Note[]
|
|
}
|
|
|
|
function SortableNote({ note, onEdit }: { note: Note; onEdit: (note: Note) => void }) {
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({ id: note.id })
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.5 : 1,
|
|
zIndex: isDragging ? 1000 : 1,
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
{...attributes}
|
|
{...listeners}
|
|
data-note-id={note.id}
|
|
data-draggable="true"
|
|
>
|
|
<NoteCard note={note} onEdit={onEdit} isDragging={isDragging} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function NoteGrid({ notes }: NoteGridProps) {
|
|
const router = useRouter()
|
|
const [editingNote, setEditingNote] = useState<Note | null>(null)
|
|
const [activeId, setActiveId] = useState<string | null>(null)
|
|
const [localPinnedNotes, setLocalPinnedNotes] = useState<Note[]>([])
|
|
const [localUnpinnedNotes, setLocalUnpinnedNotes] = useState<Note[]>([])
|
|
|
|
// Sync local state with props
|
|
useEffect(() => {
|
|
setLocalPinnedNotes(notes.filter(note => note.isPinned).sort((a, b) => a.order - b.order))
|
|
setLocalUnpinnedNotes(notes.filter(note => !note.isPinned).sort((a, b) => a.order - b.order))
|
|
}, [notes])
|
|
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor, {
|
|
activationConstraint: {
|
|
distance: 8,
|
|
},
|
|
}),
|
|
useSensor(MouseSensor, {
|
|
activationConstraint: {
|
|
distance: 8,
|
|
},
|
|
}),
|
|
useSensor(TouchSensor, {
|
|
activationConstraint: {
|
|
delay: 200,
|
|
tolerance: 6,
|
|
},
|
|
})
|
|
)
|
|
|
|
const handleDragStart = (event: DragStartEvent) => {
|
|
console.log('[DND-DEBUG] Drag started:', {
|
|
activeId: event.active.id,
|
|
activeData: event.active.data.current
|
|
})
|
|
setActiveId(event.active.id as string)
|
|
}
|
|
|
|
const handleDragEnd = async (event: DragEndEvent) => {
|
|
const { active, over } = event
|
|
console.log('[DND-DEBUG] Drag ended:', {
|
|
activeId: active.id,
|
|
overId: over?.id,
|
|
hasOver: !!over
|
|
})
|
|
setActiveId(null)
|
|
|
|
if (!over || active.id === over.id) {
|
|
console.log('[DND-DEBUG] Drag cancelled: no valid drop target or same element')
|
|
return
|
|
}
|
|
|
|
const activeIdStr = active.id as string
|
|
const overIdStr = over.id as string
|
|
|
|
// Determine which section the dragged note belongs to
|
|
const isInPinned = localPinnedNotes.some(n => n.id === activeIdStr)
|
|
const targetIsInPinned = localPinnedNotes.some(n => n.id === overIdStr)
|
|
|
|
console.log('[DND-DEBUG] Section check:', {
|
|
activeIdStr,
|
|
overIdStr,
|
|
isInPinned,
|
|
targetIsInPinned,
|
|
pinnedNotesCount: localPinnedNotes.length,
|
|
unpinnedNotesCount: localUnpinnedNotes.length
|
|
})
|
|
|
|
// Only allow reordering within the same section
|
|
if (isInPinned !== targetIsInPinned) {
|
|
console.log('[DND-DEBUG] Drag cancelled: crossing sections (pinned/unpinned)')
|
|
return
|
|
}
|
|
|
|
if (isInPinned) {
|
|
// Reorder pinned notes
|
|
const oldIndex = localPinnedNotes.findIndex(n => n.id === activeIdStr)
|
|
const newIndex = localPinnedNotes.findIndex(n => n.id === overIdStr)
|
|
|
|
console.log('[DND-DEBUG] Pinned reorder:', { oldIndex, newIndex })
|
|
|
|
if (oldIndex !== -1 && newIndex !== -1) {
|
|
const newOrder = arrayMove(localPinnedNotes, oldIndex, newIndex)
|
|
setLocalPinnedNotes(newOrder)
|
|
console.log('[DND-DEBUG] Calling reorderNotes for pinned notes')
|
|
await reorderNotes(activeIdStr, overIdStr)
|
|
|
|
// Refresh notes from server to sync state
|
|
console.log('[DND-DEBUG] Refreshing notes from server after reorder')
|
|
await refreshNotesFromServer()
|
|
} else {
|
|
console.log('[DND-DEBUG] Invalid indices for pinned reorder')
|
|
}
|
|
} else {
|
|
// Reorder unpinned notes
|
|
const oldIndex = localUnpinnedNotes.findIndex(n => n.id === activeIdStr)
|
|
const newIndex = localUnpinnedNotes.findIndex(n => n.id === overIdStr)
|
|
|
|
console.log('[DND-DEBUG] Unpinned reorder:', { oldIndex, newIndex })
|
|
|
|
if (oldIndex !== -1 && newIndex !== -1) {
|
|
const newOrder = arrayMove(localUnpinnedNotes, oldIndex, newIndex)
|
|
setLocalUnpinnedNotes(newOrder)
|
|
console.log('[DND-DEBUG] Calling reorderNotes for unpinned notes')
|
|
await reorderNotes(activeIdStr, overIdStr)
|
|
|
|
// Refresh notes from server to sync state
|
|
console.log('[DND-DEBUG] Refreshing notes from server after reorder')
|
|
await refreshNotesFromServer()
|
|
} else {
|
|
console.log('[DND-DEBUG] Invalid indices for unpinned reorder')
|
|
}
|
|
}
|
|
}
|
|
|
|
// Function to refresh notes from server without full page reload
|
|
const refreshNotesFromServer = async () => {
|
|
console.log('[DND-DEBUG] Fetching fresh notes from server...')
|
|
const freshNotes = await getNotes()
|
|
console.log('[DND-DEBUG] Received fresh notes:', freshNotes.length)
|
|
|
|
// Update local state with fresh data
|
|
const pinned = freshNotes.filter(note => note.isPinned).sort((a, b) => a.order - b.order)
|
|
const unpinned = freshNotes.filter(note => !note.isPinned).sort((a, b) => a.order - b.order)
|
|
|
|
setLocalPinnedNotes(pinned)
|
|
setLocalUnpinnedNotes(unpinned)
|
|
|
|
console.log('[DND-DEBUG] Local state updated with fresh server data')
|
|
}
|
|
|
|
// Find active note from either section
|
|
const activeNote = activeId
|
|
? localPinnedNotes.find(n => n.id === activeId) || localUnpinnedNotes.find(n => n.id === activeId)
|
|
: null
|
|
|
|
return (
|
|
<>
|
|
<div className="space-y-8">
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragStart={handleDragStart}
|
|
onDragEnd={handleDragEnd}
|
|
>
|
|
{localPinnedNotes.length > 0 && (
|
|
<div>
|
|
<h2 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3 px-2">
|
|
Pinned
|
|
</h2>
|
|
<SortableContext items={localPinnedNotes.map(n => n.id)} strategy={rectSortingStrategy}>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 auto-rows-max">
|
|
{localPinnedNotes.map((note) => (
|
|
<SortableNote key={note.id} note={note} onEdit={setEditingNote} />
|
|
))}
|
|
</div>
|
|
</SortableContext>
|
|
</div>
|
|
)}
|
|
|
|
{localUnpinnedNotes.length > 0 && (
|
|
<div>
|
|
{localPinnedNotes.length > 0 && (
|
|
<h2 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3 px-2">
|
|
Others
|
|
</h2>
|
|
)}
|
|
<SortableContext items={localUnpinnedNotes.map(n => n.id)} strategy={rectSortingStrategy}>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 auto-rows-max">
|
|
{localUnpinnedNotes.map((note) => (
|
|
<SortableNote key={note.id} note={note} onEdit={setEditingNote} />
|
|
))}
|
|
</div>
|
|
</SortableContext>
|
|
</div>
|
|
)}
|
|
|
|
<DragOverlay>
|
|
{activeNote ? (
|
|
<div className="opacity-90 rotate-2 scale-105 shadow-2xl">
|
|
<NoteCard
|
|
note={activeNote}
|
|
onEdit={() => {}}
|
|
isDragging={true}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</DragOverlay>
|
|
</DndContext>
|
|
|
|
{notes.length === 0 && (
|
|
<div className="text-center py-16">
|
|
<p className="text-gray-500 dark:text-gray-400 text-lg">No notes yet</p>
|
|
<p className="text-gray-400 dark:text-gray-500 text-sm mt-2">Create your first note to get started</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{editingNote && (
|
|
<NoteEditor note={editingNote} onClose={() => setEditingNote(null)} />
|
|
)}
|
|
</>
|
|
)
|
|
}
|