Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useState, useEffect } from 'react'
- import blogService from '../services/blogs'
- import userService from '../services/users'
- import Togglable from './Togglable'
- import BlogForm from './BlogForm'
- import Notification from './Notification'
- const BlogDisplay = (props) => {
- const [blogs, setBlogs] = useState([])
- const [notification, setNotification] = useState(null)
- const [errorMessage, setErrorMessage] = useState(null)
- const blogFormRef = React.createRef()
- useEffect(() => {
- blogService.getAll().then(blogs =>
- setBlogs(blogs)
- )
- }, [])
- const blogStyle = {
- paddingTop: 10,
- paddingLeft: 2,
- border: 'solid',
- borderWidth: 1,
- marginBottom: 5,
- }
- const showBlogs = () => {
- return (
- blogs.sort((b1, b2) => b2.likes - b1.likes).map(b =>
- contentVisibility(b)
- )
- )
- }
- const addLike = async (blog) => {
- let returnedBlog = await blogService.update({
- user: blog.user.id,
- title: blog.title,
- author: blog.author,
- url: blog.url,
- likes: blog.likes + 1,
- visible: blog.visible,
- }, blog.id)
- setBlogs(blogs.map(b => b.id !== blog.id ? b : returnedBlog))
- }
- const contentVisibility = (blog) => {
- console.log('LISÄÄJÄ' + blog.user.username)
- if (blog.visible === false) {
- return (
- <div key={blog.id} style={blogStyle}>
- <div>{blog.title} {blog.author} <button onClick={() =>
- handleToggleVisibility(blog)}>view</button>
- </div>
- </div>
- )
- } else {
- return (
- <div key={blog.id} style={blogStyle}>
- <div>{blog.title} {blog.author} <button onClick={() =>
- handleToggleVisibility(blog)}>hide</button></div>
- <div>{blog.url} </div>
- <div>likes {blog.likes} <button onClick={() => addLike(blog)}>like</button> </div>
- <div>added by {blog.user.username} </div>
- <div>{props.user.username === blog.user.username && <button onClick={() =>
- deleteBlog(blog)}>delete</button>} <br /></div>
- </div>
- )
- }
- }
- const handleToggleVisibility = async (blog) => {
- console.log(blog)
- let returnedBlog = await blogService.update({
- user: blog.user.id,
- title: blog.title,
- author: blog.author,
- url: blog.url,
- likes: blog.likes,
- visible: !blog.visible,
- }, blog.id)
- console.log('TÄMÄ' + returnedBlog.user)
- setBlogs(blogs.map(b => b.id !== blog.id ? b : returnedBlog))
- }
- const addBlog = async (blogObject) => {
- let users = await userService.getAll()
- let user = users.filter(u => u.username === props.user.username)
- console.log(user)
- blogFormRef.current.toggleVisibility()
- try {
- let b = await blogService.create({
- title: blogObject.title,
- author: blogObject.author,
- url: blogObject.url,
- visible: false,
- })
- setBlogs(blogs.concat(b))
- setNotification(`a new blog ${b.title} by ${b.author} was added`)
- setTimeout(() => {
- setNotification(null)
- }, 5000)
- } catch (exception) {
- console.log(blogObject)
- setErrorMessage('something went wrong')
- setTimeout(() => {
- setErrorMessage(null)
- }, 5000)
- }
- }
- const deleteBlog = async (blogObject) => {
- let result = window.confirm("Are you sure you want to delete this blog?");
- if (result) {
- try {
- let b = await blogService.remove(blogObject.id)
- setBlogs(blogs.filter(b => b.id !== blogObject.id))
- setErrorMessage(`a new blog ${b.title} by ${b.author} was deleted`)
- setTimeout(() => {
- setErrorMessage(null)
- }, 5000)
- } catch (exception) {
- console.log(blogObject)
- setErrorMessage('something went wrong')
- setTimeout(() => {
- setErrorMessage(null)
- }, 5000)
- }
- }
- }
- const showBlogForm = () => {
- return (
- <div>
- <h2>Add new</h2>
- <Togglable buttonLabel="new blog" ref={blogFormRef}>
- {props.user !== null && <BlogForm createNewBlog={addBlog} />}
- </Togglable>
- </div>
- )
- }
- return (
- <>
- <Notification message={errorMessage} type="warning" />
- <Notification message={notification} type="success" />
- {props.user !== null && showBlogForm()}
- {props.user !== null && showBlogs()}
- </>
- )
- }
- export default BlogDisplay
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement