Threading v2

[cha0sg0d]

Description:

This PR builds on and simplifies Amir's initial PR for threading deeply nested posts and deep linking to deeply nested posts. There was a lot of code that we could remove because in the schema described below, we never have to recursively iterate AND fetch posts at the same time in the frontend (like how we previously displayed a deeply linked post). Instead, we have two building blocks -- fetching deeper replies and fetching parents -- that have relatively simple logic for how the data is fetched and rendered on the frontend.

https://share.cleanshot.com/Jrqs0lBZ

This video shows going deeply into a nested thread, copying a link, opening that link in a new tab, then fetching the parents of that nested post back up to the root.

Threading deeply nested posts

Each item in the thread can fetch replies below it. We fetch the number of children a post has AND the actual children objects. If the number of children a post has is greater than the number of children objects (like when our recursive query ended and there are no more children fetched), that item can fetch its children. It appends it's children to itself using the same recursive threading logic.

Deep Linking deeply nested posts

If a post has a depth greater than a specified depth (for now, 5), we don't render it's parents on the client initially. We simply render the root, the post in question, and any children the post has (up to specified depth). To view that post's parents, we have a fetch parents function that goes up depth levels on the tree, then performs the traditional recursive fetch of a post and it's replies. On the frontend, when a post's parent (or grandparent etc...) is fetched, we replace our entire thread with the new parent and it's children, which will include the original post.

Additional Utilities

• I removed the manual hardcoding of 5 layers of nesting and made the types work with a recursive function to build queries at a depth we can specify.

TODO:

• [x] Loading states when fetching parents or children
• [x] Fetch parents button text CSS is off
• [x] I think handling text in progress is broken warning is brken.
• [x] When fetching parents, highlight previous parent.
• [x] Fix upvoting refetch logic.
• [x] Error handling for axios get requests for children and parents in the thread.
• [ ] Make sure functionality works and the correct handlers are there.

Smaller Things I'd like to do:

• [x] In PostWithReplies.tsx, figure out a better way to name singlePost (the post a page is loaded with) and parent (the post the page is replaced with when parents are fetched)
• [x] Better documentation around when to pass in [parent] or singlePost.replies to resolveNestedReplyThreads.
• [x] In [postId].ts, get the post root as part of the postSelect query to avoid two database calls.
• [x] (removed_ Better documentation for getRootAndPostIdFromPreview in backend.
• [x] Figure out how to add the parent property to the ParentPostPayload type
• [x] Clean up singlePost.root in PostWithReplies.tsx

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nym	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 12, 2023 4:01pm

[amirgamil]

This looks a lot cleaner, good stuff. Small thing, but I think fetch parents should be aligned left (similar to how reddit does it) see u have it in the TODOs though so all good

[grace-fagan]

Additional bugs fixed in this PR:

• [x] Use ENS name for upvote hover and upvote warning
• [x] Text styling on header and some user page spacing was messed up

[grace-fagan]

Post Highlighting on deep linking:

• The initial highlight is set to the linked post
• On fetch parent, the highlight is set to the previous parent

https://github.com/personaelabs/nym/assets/95446735/d6a3d7ab-f7f2-4160-81ec-93bd42382137