Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/Savy011/fullstackopen-exercises. My Exercise Submissions for FullStack Open fullstackopen.com/en
Something went wrong. Try again.
1.5 kB · 52 lines
JavaScript
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253import { useState } from 'react'import propTypes from 'prop-types'
const Blog = ({ blog, user, updateBlog, deleteBlog }) => { const [ blogObj, setBlogObj ] = useState(blog) const [ visible, setVisible ] = useState(false)
Blog.propTypes = { blog: propTypes.object.isRequired, user: propTypes.object.isRequired, updateBlog: propTypes.func.isRequired, deleteBlog: propTypes.func.isRequired }
const showWhenVisible = { display: visible ? '' : 'none' } const buttonLabel = visible ? 'Hide' : 'Show'
const likeBlog = event => { event.preventDefault()
const updatedBlog = { ...blogObj, likes: blogObj.likes + 1 }
updateBlog(updatedBlog) setBlogObj(updatedBlog) }
const removeBlog = event => { event.preventDefault() deleteBlog(blogObj) }
return ( <div className='blog' > <div className='blog-title'> <i>{blogObj.title}</i> - {blogObj.author} <button id='show-button' onClick={() => setVisible(!visible)} >{buttonLabel}</button> </div> <div style={showWhenVisible} className='blog-details' > <p><b>Url:</b> {blogObj.url}</p> <p><span id='likes'><b>Likes:</b> {blogObj.likes}</span><button onClick={likeBlog} id='like-button' >Like</button> </p> <p><b>User:</b> {blogObj.user.name}</p> { user.username.toString() === blogObj.user.username.toString() ? <p><button id='delete-button' onClick={removeBlog} >Delete</button></p> : null} </div> </div> )}
export default Blog