Skip to content
Submitted almost 3 years ago

Interactives comment section (+ animations and some

vue, pinia
Yann•110
@yannaufray
A solution to the Interactive comments section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • micoirvin•80
    @micoirvin

    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•80
    @micoirvin

    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

Join our Discord community

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