refactor(creative-space): enhance Creative Space component #21
Conversation
…e creation and improved UI elements, including date formatting and loading states
There was a problem hiding this comment.
Pull request overview
Refactors the student Creative Space home UI to support inline space creation and richer list rows (formatted timestamps, loading/delete states), and updates Next.js dev/build scripts.
Changes:
- Replaced the prompt-based “create space” flow with an inline create row including validation + loading UI.
- Redesigned the spaces list rows with formatted “Last updated”, and added per-row delete loading state.
- Modified
dev/buildscripts to runnext ... --webpack.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| LearningPlatform/package.json | Updates Next.js dev/build scripts with a --webpack flag. |
| LearningPlatform/components/student/creative-space-home-client.tsx | Adds inline creation UI, formatted timestamps, and delete/loading states for creative spaces. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "dev": "next dev --webpack", | ||
| "build": "next build --webpack", |
There was a problem hiding this comment.
The Next.js CLI typically doesn't accept a --webpack flag (webpack is already the default). If this flag is unsupported for the pinned next@16.2.4, npm run dev/build will fail immediately. Consider removing --webpack (or, if the goal is to opt out of turbopack, remove any --turbo usage instead / use a supported Next flag).
| "dev": "next dev --webpack", | |
| "build": "next build --webpack", | |
| "dev": "next dev", | |
| "build": "next build", |
| } | ||
| setShowCreateRow(false) | ||
| setCreateTitle('') | ||
| await loadSpaces() |
There was a problem hiding this comment.
submitCreateSpace doesn't handle thrown errors from fetch/res.json() (network failures, aborted requests, non-JSON responses). In those cases the UI will silently exit without setting createError. Add a catch to set a user-facing error message (and optionally log) before the finally runs.
| await loadSpaces() | |
| await loadSpaces() | |
| } catch (error) { | |
| console.error('Failed to create creative space', error) | |
| setCreateError('Could not create the space. Try again.') |
| const deleteSpace = useCallback(async (id: string) => { | ||
| setDeletingId(id) | ||
| try { | ||
| const res = await fetch(`/api/creative-spaces/${encodeURIComponent(id)}`, { method: 'DELETE' }) | ||
| if (!res.ok) return | ||
| await loadSpaces() | ||
| } finally { | ||
| setDeletingId(null) | ||
| } |
There was a problem hiding this comment.
deleteSpace also lacks a catch path. If the DELETE request throws (network error) or returns a failure, the UI clears the spinner but provides no feedback, which can look like the action did nothing. Consider handling errors explicitly (e.g., surface an inline message/toast and/or keep the row disabled until acknowledgement).
| const openDisabled = deleting | ||
|
|
||
| return ( | ||
| <div className={cn('group flex flex-col gap-4', spaceRowSurface)}> |
There was a problem hiding this comment.
spaceRowSurface already includes group flex flex-col gap-4, and those same classes are also passed again via cn('group flex flex-col gap-4', spaceRowSurface), resulting in duplicated Tailwind classes. Consider removing the duplicate from either the constant or the cn(...) call to keep the styling source of truth in one place.
| <div className={cn('group flex flex-col gap-4', spaceRowSurface)}> | |
| <div className={spaceRowSurface}> |
| const submitCreateSpace = useCallback(async () => { | ||
| const name = createTitle.trim() | ||
| if (!name) { | ||
| setCreateError('Enter a name for your space.') | ||
| document.getElementById('inline-create-space-name')?.focus() |
There was a problem hiding this comment.
This refactor adds substantial new client behavior (inline create flow + validation/error UI). Consider adding an RTL test for CreativeSpaceHomeClient that stubs fetch (similar to test/components/assign-to-lesson-dialog.test.tsx:45-53) and verifies the empty-name validation message and successful POST path.
Added inline creation and improved UI elements, including date formatting and loading states