Implement watch page

[davedumto]

🐛 Bug: "Watch" Page Route (/:username/watch) Returns 404 Instead of Rendering Placeholder View

Summary
Currently, navigating to the Watch page (e.g., http://localhost:3000/chidinma/watch) results in a 404 error. This is because the route app/[username]/watch/page.tsx does not exist. We need to implement this dynamic route similar to how ClipsPage works, with placeholder logic and empty state rendering.

---

Expected Behavior

• The route /username/watch should:

  • Load a page with the message {username} does not have any watched videos if the list is empty.
  • Show a loading message while data is being fetched.
  • Fallback to notFound() if the user does not exist.

---

Actual Behavior

• Navigating to http://localhost:3000/username/watch leads to a 404 page.

---

Suggested Implementation

Create a new file:

pages/[username]/watch.tsx

Use a structure similar to ClipsPage, with:

• A mock function like fetchWatchedVideos(username)
• useEffect to simulate fetching
• useState for loading and storing videos
• Use <EmptyState type="watch" isOwner={isOwner} username={username} /> to render empty states

Example placeholder condition:

<p className={textClasses.tertiary}>{username} does not have any watched videos</p>

---

Acceptance Criteria

• Page at /:username/watch renders correctly.
• Uses dynamic route param username.
• Shows loading state while fetching.
• Shows empty state message if no watched videos.
• Returns 404 via notFound() if user doesn’t exist.
• Fully integrated with EmptyState component (type = "watch").

---

Labels: bug, frontend, routing, good first issue

[benedictfred]

GM
Can I handle this issue ? I would get it done in 10hrs

[davedumto]

I’d like to resolve this.

[FabianSanchezD]

Hi @davedumto, I'd like to work on this issue. I have experience with frontend and this should be an easy fix. My ETA is 12 hrs.

[laryhills]

Hi dave

✅ Plan: I’ll add the dynamic route app/[username]/watch/page.tsx (App Router) mirroring the ClipsPage pattern: read the username param, verify user (return notFound() if missing), then fetch watched videos with loading and empty states rendering when no items, and show the placeholder text: “{username} does not have any watched videos.” I’ll keep it fully responsive and wired to the correct URL (/:username/watch).

📌 Why Me: I have experience with NextJs and App Router and can match the existing ClipsPage structure for consistency and quick delivery.

Recommended by OnlyDust for high-quality and dependable contributions.