fix: Library page LessonListItem Edit/Delete buttons non-functional #24

New issue

Closed

opened 2026-04-09 10:47:30 +00:00 by KnallerKalle · 1 comment

KnallerKalle commented

2026-04-09 10:47:30 +00:00

(Migrated from github.com)

Problem

In the Library page (src/app/[locale]/library/page.tsx), the LessonListItem component has Edit and Delete buttons with empty onClick handlers:

<button onClick={() => {/* Edit functionality */}}>Edit</button>
<button onClick={() => {/* Delete functionality */}}>Delete</button>

Expected Behavior

Edit button: Should open the LessonEditModal with the selected lesson
Delete button: Should confirm deletion and remove the lesson from the database

Current State

The library page already imports LessonEditModal and has editingLesson state
The setEditingLesson setter exists but is not connected to these buttons
Delete functionality exists in DatabaseAPI.deleteLesson() but is not connected

Proposed Fix

Connect the existing state management to the button handlers:

<button onClick={() => setEditingLesson(lesson)}>Edit</button>
<button onClick={async () => {
  if (confirm("Delete this lesson?")) {
    await DatabaseAPI.deleteLesson(lesson.id);
    onRefresh();
  }
}}>Delete</button>

Acceptance Criteria

Edit button opens LessonEditModal with lesson data
Delete button shows confirmation dialog
Delete removes lesson and refreshes list
Toast notifications for feedback

Priority

HIGH — Basic CRUD operations should work

Files to Modify

src/app/[locale]/library/page.tsx — Connect button handlers

## Problem In the Library page (`src/app/[locale]/library/page.tsx`), the `LessonListItem` component has Edit and Delete buttons with empty onClick handlers: ```tsx <button onClick={() => {/* Edit functionality */}}>Edit</button> <button onClick={() => {/* Delete functionality */}}>Delete</button> ``` ## Expected Behavior - **Edit button**: Should open the `LessonEditModal` with the selected lesson - **Delete button**: Should confirm deletion and remove the lesson from the database ## Current State - The library page already imports `LessonEditModal` and has `editingLesson` state - The `setEditingLesson` setter exists but is not connected to these buttons - Delete functionality exists in `DatabaseAPI.deleteLesson()` but is not connected ## Proposed Fix Connect the existing state management to the button handlers: ```tsx <button onClick={() => setEditingLesson(lesson)}>Edit</button> <button onClick={async () => { if (confirm("Delete this lesson?")) { await DatabaseAPI.deleteLesson(lesson.id); onRefresh(); } }}>Delete</button> ``` ## Acceptance Criteria - [ ] Edit button opens LessonEditModal with lesson data - [ ] Delete button shows confirmation dialog - [ ] Delete removes lesson and refreshes list - [ ] Toast notifications for feedback ## Priority **HIGH** — Basic CRUD operations should work ## Files to Modify - `src/app/[locale]/library/page.tsx` — Connect button handlers

KnallerKalle commented

2026-04-09 11:39:12 +00:00

(Migrated from github.com)

✅ Fixed in commit `ebc4448`

Changes Made

LessonCard & LessonListItem Components:

Added onEdit prop to both components
Edit button now opens LessonEditModal with lesson data
Delete button shows confirmation dialog and calls DatabaseAPI.deleteLesson()
Toast notifications for success/error feedback
List refreshes automatically after delete

Files Modified

src/app/[locale]/library/page.tsx — Connected button handlers, added onEdit prop

## ✅ Fixed in commit `ebc4448` ### Changes Made **LessonCard & LessonListItem Components**: - Added `onEdit` prop to both components - Edit button now opens `LessonEditModal` with lesson data - Delete button shows confirmation dialog and calls `DatabaseAPI.deleteLesson()` - Toast notifications for success/error feedback - List refreshes automatically after delete ### Files Modified - `src/app/[locale]/library/page.tsx` — Connected button handlers, added onEdit prop