Updated SinglePost.js #65
Conversation
|
it seems like the method to do that is to update my code to have it connect to backend? I'm not quite sure how to do that but it shouldn't be too hard, I would just have to know if there is someone in backend that did like count and their file name to link it i guess? |
Slouis07
changed the title
Slouis07
changed the title
There was a problem hiding this comment.
Same changes as the change requested in the css PR (#64). Put your files inside the Components folder.
And like Jonas mentioned, you should be connecting to the backend to fetch all the post information and comments information instead of using static values.
Also, are you using any of the already created components for this? There should be components for comments and the view all comments popup that can be used included in the components folder.
Lastly, are you sure your styles are being applied correctly? When I was running the React app and calling this, none of the styles were actually getting applied. This is what I see when trying to use it on the example page.
| const likeButton = document.querySelector('.like-button'); | ||
| const shareButton = document.querySelector('.interaction-buttons.share'); | ||
| const likesCountElement = document.querySelector('.likes-count'); | ||
| const sharesCountElement = document.querySelector('.shares-count'); |
There was a problem hiding this comment.
Awesome work so far! Just a couple of suggestions regarding React best practices.
- Same suggestions as everyone else in making sure nothing is hardcoded; Should be pulling the info from the backend (dm in the frontend chat if help is needed, seems like it might get complicated).
- It looks like all the functions and icons are wrapped in a huge useEffect. This will lead to a lot of performance issues later on as a useEffect often reloads the component multiple times depending on any change made to any of these buttons. If you wrap these icons in a tag, the button tag has special operator like onClick or onScroll etc. that you can attach the functions to so that they run as intended without the need of wrapping everything in a useEffect. My suggestion would be to wrap those icons in the button tag and move all of this logic outside of the useEffect.
Here's some resources:
https://react.dev/learn/responding-to-events
https://react.dev/reference/react/useEffect
updated functionality such as:
+like button increase/decrease and color changed to green
+download post when click on save/download icon
+share feature with copy link
+dropdown for post options such as delete (red color now) , make public, and make private with pop-up alerts for each one
+teaser comments before full post comments and teaser comments are also displayed in full comment view
+can type in a new comment and that update will stay
+comment icon takes you to view all comments