-
Notifications
You must be signed in to change notification settings - Fork 13
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Updated SinglePost.js #65
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Everything looks good but likes should not be hardcoded, would it be possible for it to be fetched from else where?
|
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? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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:
![Screen Shot 2024-02-02 at 10 07 52 AM](https://private-user-images.githubusercontent.com/142813774/301885376-8f7b3f7d-8a31-42f7-b307-c8416ce0d8c5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MzM3NTQsIm5iZiI6MTcyNDUzMzQ1NCwicGF0aCI6Ii8xNDI4MTM3NzQvMzAxODg1Mzc2LThmN2IzZjdkLThhMzEtNDJmNy1iMzA3LWM4NDE2Y2UwZDhjNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNFQyMTA0MTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jZDU2YzAxYTlmMTJmY2ZkOGM2NjgzNzcyOWQ5NWFkNmNlZmVjMTcwY2Q1ZDg5ZGZhZDgzNDNmMTE0MWRiMDc0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.KBro3QK9EbhdfLJmRvCIqJTh4T1jiWaQZ_9JljKEIlg)
![Screen Shot 2024-02-02 at 10 07 27 AM](https://private-user-images.githubusercontent.com/142813774/301885452-99626b44-e528-46d5-b562-12731fe48a4f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MzM3NTQsIm5iZiI6MTcyNDUzMzQ1NCwicGF0aCI6Ii8xNDI4MTM3NzQvMzAxODg1NDUyLTk5NjI2YjQ0LWU1MjgtNDZkNS1iNTYyLTEyNzMxZmU0OGE0Zi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNFQyMTA0MTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mNTcxNDk4ZTNlOGVkMDEwNjI0MDhjZjM3Y2Q2ZDIxNjg2ZWRhNGYwY2MyOWQ3NzRhMDRiZDEwZGZhYTBjOGRiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.tHvlIBJdlJGCKaCndw3tvYpj9NTEeOI5q0G0JeEigPY)
![Screen Shot 2024-02-02 at 10 06 07 AM](https://private-user-images.githubusercontent.com/142813774/301885492-035e6fb0-d1df-45fa-8ffd-5aeeb5b3e3e2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MzM3NTQsIm5iZiI6MTcyNDUzMzQ1NCwicGF0aCI6Ii8xNDI4MTM3NzQvMzAxODg1NDkyLTAzNWU2ZmIwLWQxZGYtNDVmYS04ZmZkLTVhZWViNWIzZTNlMi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNFQyMTA0MTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jOWZmNmIyODhkZGIxMGIyMGY3ZTBhZTc3YTNjMjhkMzJmOGU3ZWU2ZGNiNTIxOTg4MWI3NTBkNmIwYTRlNGFhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.7UvR3X_lKPRkRU95FaXX3nZ2fseEV-MRWdDtuMCdzFM)
+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