Skip to content
Submitted over 2 years ago

Interactives comment section (+ animations and some

Yann•110
@yannaufray
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive comments section
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

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.

Community feedback

  • micoirvin•80
    @micoirvinPosted over 2 years ago

    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
    1
  • micoirvin•80
    @micoirvinPosted over 2 years ago

    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
    1
    micoirvin•80
    @micoirvinPosted over 2 years ago

    @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
    0
    Yann•110
    @yannaufrayPosted over 2 years ago

    @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.

    0
    micoirvin•80
    @micoirvinPosted over 2 years ago

    @yannbrds Nice! It seems all good now :D

    0

Please log in to post a comment

Log in with GitHub

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