I had a lot of fun making this with Vue 3.
I had some difficulties though:
I couldn't make the 'reply to reply' work. You can comment in the main flow and reply to a 1st order comment, but not reply to a reply, if that makes sense. I guess it's just a algorithm problem though, I got confused with these (feel free to give me your feedback).
I couldn't animate the new comment component so that it doesn't pop up before (under) the other ones have moved down.
I couldn't animate the new comment component when another comment is removed from the DOM. It does work with other comments (thanks to a Vue transition-group). It tried to wrap it all into yet another transition-group but it didn't work.
@micoirvin
Posted
Some bugs to watch out for:
1.) Sometimes, delete button deletes a different comment. Happens when: I am trying to delete comment X placed above comment Y, but comment Y is the one being deleted.
2.) Sometimes, when sending a comment, it adds a @username even when it's not a reply. Happens when: I click reply to a comment. Cancels it. Then adds a comment through the main comment form.
Marked as helpful
@micoirvin
Posted
Great work! I am amazed by the way you measure the timestamp :D
About your problem. Not really sure, but I tried to understand your code. I think replies to replies are not coming in because you don't have "replies" property for new replies. Check the Comments.vue > function handleSend > const reply does not have "replies" property, so a reply to a reply can't be pushed in line 34 of CommentStore.js
Marked as helpful
@micoirvin
Posted
@micoirvin Oh. Open the app. Try to add a reply to a reply. Then open inspect element. You will see this error message at the console: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'replies') CommentStore.js:34
Marked as helpful
@yannaufray
Posted
@micoirvin Thank you man. There was several tricky recursion things to implement. It took me the whole day because I'm not good at this! I started looking for a solution with a recursion inside of a reduce, but I ended up with another solution that works well too.
Many parts of the code are much simpler now, and I think I fixed all the problems (except some transitions ones), including those you reported in your other comment. Feel free to tell me if you find anything wrong this time!
Thank you again Mico for your feedback.
@micoirvin
Posted
@yannbrds Nice! It seems all good now :D
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
