Yifan-Happy-Thought-Post #70
Conversation
Heart count feature
| return ( | ||
| <div className="heart-display"> | ||
| <button | ||
| className={`heart-icon ${isLiked && "liked-icon"}`} |
There was a problem hiding this comment.
smart girl! clear and simple way to make the liked-icon
| export const HeartDisplay = ({ post, handleUpdate, handlePlusHeartCount }) => { | ||
| const [isLiked, setIsLiked] = useState( | ||
| localStorage.getItem(`liked-${post._id}`) | ||
| ); |
There was a problem hiding this comment.
I don't really understand liked-${post._id}, what is 'liked - ' for?
There was a problem hiding this comment.
Hi Trista!
I will try to explain as well as I can based on what I read for this project!
liked-${post._id}, this whole piece, is the key for the key-value pair you set for the localStorage object. 'liked - ' is a part of the key name. And '${post._id}' makes it more dynamic.
For example, the localStorage you saved could look like this: 'liked-12321231(whatever id): true'. You can also name it as you prefer, for example clicked-${post._id} or heartBtn-${post._id}.
Once you successfully set your value to the localStorage by using localStorage.setItem(), you can check it in inspect -> Application -> Local storage -> click the down arrow -> click the URL, then you will see a list with the key-value pairs.
There was a problem hiding this comment.
Hey thank you! Now I understand everything, no idea why yesterday I was confused
| .liked-icon { | ||
| @extend .heart-icon; | ||
| background-color: $active-btn-color; | ||
| } |
| }); | ||
|
|
||
| if (!response.ok) { | ||
| console.log("Post failed"); |
There was a problem hiding this comment.
can we use error instead of condole.log here?
There was a problem hiding this comment.
Seems like
"if (!response.ok) {
throw new Error("Post failed");
}" works as the same.
| className={ | ||
| isMaxLengthExceeded ? "character-count-max" : "character-count" | ||
| } | ||
| > |
There was a problem hiding this comment.
what are "textarea-error-effect" and "character-count-max" for?
| console.log("dependency rendered"); | ||
| const plusHeartCount = localStorage.getItem("shared-heart-count") | ||
| ? parseInt(localStorage.getItem("shared-heart-count"), 10) + 1 | ||
| : "1"; |
There was a problem hiding this comment.
do we alwayt put the number 10? or it depends on the situation
There was a problem hiding this comment.
Number 10 represents decimal. The localStorage object stores data as strings. So when you try to get data from localStorage, the data needs to be converted into numbers again by using parseInt(). And 10 here is the second parameter you pass into parseInt() to make the result a decimal number.
It seems like you can skip 10 in JavaScript because the default behavior is returning a decimal number.
| setTimeago(displayTimeAgo); | ||
| }, [post.createdAt]); | ||
|
|
||
| return <p className="post-time">{timeAgo}</p>; |
There was a problem hiding this comment.
for the time, you can also use ```
const timeFormat = date => {
const currentTime = new Date (date)
return moment (currentTime).fromNow()
}
There was a problem hiding this comment.
Cool! Thank you for the new method will look into it!
Netlify link
https://yifan-happy-thought-post.netlify.app/
Collaborators
[yifan-858]