251 frontend build course createedit form page with draft persistence

[smattymatty]

Build Course Create/Edit Form Page with Draft Persistence

Description

Adds a dedicated course create/edit form page at /courses/new and /courses/:id/edit with localStorage draft auto-save, unsaved changes protection, and full i18n support.

Closes #251

Mandatory Checklist

• I have read and followed the CONTRIBUTING.md
• I have linked the related issue above
• My branch is up to date with main
• I have tested my changes locally
• I have added or updated tests where applicable
• I have not introduced any new linting errors
• My commit messages are clear and descriptive
• I have updated documentation if my changes affect public APIs, setup steps, or user-facing behavior

What Changed

5 files (3 modified, 2 new)

New Files

src/hooks/useCourseDraft.ts (67 lines)

• localStorage draft management hook following useEditorDraft.ts pattern
• Exports useCourseDraft(courseId) returning { loadDraft, saveDraft, clearDraft }
• Exports CourseFormData and CourseDraft types
• Key format: course-draft-{id} or course-draft-new

src/pages/CourseFormPage.tsx (623 lines)

• Single component handles both create (/courses/new) and edit (/courses/:id/edit) modes
• Mode detected from URL params (no id = create, has id = edit)
• Draft persistence: auto-saves to localStorage on every form change, recovers on page load with "Draft recovered from X ago" toast, discards stale drafts that match server data
• Permission check: edit mode verifies user_role === "teacher", redirects with error toast if not
• 3-layer unsaved changes protection: browser beforeunload, React Router useBlocker with UnsavedChangesModal, visual red borders on changed fields
• Form validation: required title, outline max 1000 chars with counter, end date must be after start date
• Visibility radio buttons with descriptions, conditional "Allow Join Requests" checkbox (only shown for restricted)
• LazySelect for subject/language/country, native date inputs for start/end date
• Glass-morphism layout matching ProfilePage, full dark mode and mobile responsive

Modified Files

src/App.jsx — Added courses/new and courses/:id/edit protected routes (placed before courses/:id to avoid param capture)

en.json + ar.json — Added 49 course.form.* translation keys each (titles, labels, placeholders, validation messages, toasts, time-ago strings)

How to Test

Create Flow

1. Navigate to /courses/new
2. Fill in a title and any optional fields
3. Click "Create Course"
4. Verify redirect to the new course's detail page with success toast

Edit Flow

1. Navigate to /courses/:id/edit for a course you're a teacher in
2. Modify fields, verify red borders appear on changed fields
3. Click "Save Changes", verify success toast and borders clear
4. Try editing a course you're NOT a teacher in — should redirect with error toast

Draft Persistence

1. Start filling the create form, then close the tab
2. Reopen /courses/new — should see "Draft recovered from X ago" toast with your data
3. Successfully create/save — draft should be cleared

Unsaved Changes

1. Make changes, then click the back button or navigate away
2. Verify the modal appears asking to confirm navigation
3. Close the browser tab — verify the native browser warning appears

Visibility Toggle

1. Select "Restricted" visibility
2. Verify "Allow Join Requests" checkbox appears
3. Switch to "Public" or "Private" — checkbox should disappear

Validation

1. Try submitting with empty title — error shown
2. Set start date after end date — error shown on end date
3. Type 1001+ chars in outline — error shown

Other

• Toggle dark mode — verify all elements styled correctly
• Resize to mobile — verify responsive single-column layout
• Switch to Arabic — verify all text is translated

Screenshots (if applicable)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
edulite	Ready	Preview, Comment	Feb 13, 2026 0:03am

[github-actions]

PR Template Check

All checks passed.