Comment Section: Threading + Comment Thread Page

[eric-kitagawa]

Description

help

Link to Ticket

Add the comment section:

• Threading logic for comments
• New page to view longer comment threads
• Components for comment and threaded comments

How Has This Been Tested?

• Push a bunch of comment data to the local DB and view the threading (script in comments)

thread.screen.mov

replies.mov

Please describe the tests that you ran to verify your changes. If they are unit
tests, provide the file name the tests are in. If they are not unit tests,
describe how you t

ested the change.

Checklist

• I have performed a self-review of my code
• I have reached out to another developer to review my code
• I have commented my code, particularly in hard-to-understand areas
• New and existing unit tests pass locally with my changes

[eric-kitagawa]

cd /app

npx prisma db execute --schema=prisma/schema.prisma --stdin <<'SQL'
-- 1) Ensure a test post exists (adjust userId if needed)
INSERT INTO "public"."Post" ("id", "userId", "content", "type")
VALUES (
  'test-post-comments-001',
  '5c8430d2-6957-4527-a0b4-8ff1f2c46b00',  -- make sure this userId exists in UserProfile
  'Test post for deep comment threads',
  'SHORT'
)
ON CONFLICT ("id") DO UPDATE
SET "content" = EXCLUDED."content";

-- 2) Top-level comments (depth 0)
INSERT INTO "public"."Comment" ("id", "userId", "ratingId", "postId", "content", "parentId")
VALUES
  ('c-root-001', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Loved this movie, especially the pacing and the third act.', NULL),
  ('c-root-002', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Sound design was incredible. The theater was shaking.', NULL),
  ('c-root-003', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Characters felt a bit flat to me, but visuals were top-tier.', NULL),
  ('c-root-004', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Plot twist halfway through totally caught me off guard.', NULL),
  ('c-root-005', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Solid movie, but the ending felt rushed.', NULL);

-- 3) First-level replies (depth 1)
INSERT INTO "public"."Comment" ("id", "userId", "ratingId", "postId", "content", "parentId")
VALUES
  -- Replies to c-root-001
  ('c-r1-001', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Agree, the pacing made the 2 hours fly by.', 'c-root-001'),
  ('c-r1-002', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Third act felt like a different movie in a good way.', 'c-root-001'),

  -- Replies to c-root-002
  ('c-r2-001', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'That one scene with the bass drop was insane.', 'c-root-002'),
  ('c-r2-002', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Headphones do not do this justice, you need a theater.', 'c-root-002'),

  -- Replies to c-root-003
  ('c-r3-001', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'I actually liked the minimal character backstory.', 'c-root-003'),

  -- Replies to c-root-004
  ('c-r4-001', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Same, I had to rewind to see the setup clues.', 'c-root-004'),
  ('c-r4-002', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'The twist makes a second watch so much better.', 'c-root-004'),

  -- Replies to c-root-005
  ('c-r5-001', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Yeah, last 10 minutes felt like they were on fast-forward.', 'c-root-005');

-- 4) Second-level replies (depth 2) – these drive "Continue Thread"
INSERT INTO "public"."Comment" ("id", "userId", "ratingId", "postId", "content", "parentId")
VALUES
  -- Nest under c-r1-001 (child of c-root-001)
  ('c-r1-001-a', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Exactly, not a single boring scene for me.', 'c-r1-001'),
  ('c-r1-001-b', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'I wish more blockbusters took pacing this seriously.', 'c-r1-001'),

  -- Nest under c-r1-002
  ('c-r1-002-a', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Felt like a director’s cut with all the payoffs.', 'c-r1-002'),

  -- Nest under c-r2-001 (sound design branch)
  ('c-r2-001-a', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'My seat was literally vibrating during that scene.', 'c-r2-001'),
  ('c-r2-001-b', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Surround mix was so clean, no muddy dialogue.', 'c-r2-001'),

  -- Nest under c-r4-001 (twist discussion)
  ('c-r4-001-a', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'Once you know the twist, every early line hits different.', 'c-r4-001'),

  -- Nest under c-r5-001 (ending discussion)
  ('c-r5-001-a', '5c8430d2-6957-4527-a0b4-8ff1f2c46b00', NULL, 'test-post-comments-001',
   'I wonder if they cut another 15 minutes for runtime.', 'c-r5-001');

SQL

To populate the dev DB with some comments to test this, I generated a bunch of random comments using a command like this (make sure you run this from inside the docker shell). Just make sure you match the post or rating id with whatever mock id you associate with the comments in the comment section component.

[danctila]

approving ts