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.
6.1 kB · 214 lines
JavaScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215import { useNavigate, useParams } from 'react-router-dom'import { useUserValue } from '../utils/UserContext'import { useNotification } from '../utils/NotifContext'import { postComment, putBlog, removeBlog } from '../utils/requests'import { useField, removeReset } from '../utils/hooks'import { useQuery, useQueryClient, useMutation } from 'react-query'import Loading from './Loading'import Error from './Error'import { Card, Typography, Button, Grid, TextField, List, ListItem, ListItemText,} from '@mui/material'import { ThumbUpRounded as LikeIcon, Delete as DeleteIcon, AddComment as AddCommentIcon, Create as CreateIcon, ShortText as ListIcon,} from '@mui/icons-material'
const BlogView = () => { const { id } = useParams() const navigate = useNavigate() const result = useQuery('blogs') const blogs = result.data
const blog = blogs !== undefined ? blogs.find(b => b.id === id) : null const user = useUserValue() const setNotif = useNotification() const comment = useField('text') const queryClient = useQueryClient()
const updateBlogMutation = useMutation(putBlog, { onSuccess: () => { queryClient.invalidateQueries('blogs') }, })
// eslint-disable-next-line no-unused-vars const deleteBlogMutation = useMutation(removeBlog, { onSuccess: () => { queryClient.invalidateQueries('blogs') }, })
const addCommentMutuation = useMutation(postComment, { onSuccess: () => { queryClient.invalidateQueries('blogs') }, })
const updateBlog = async blogObj => { try { updateBlogMutation.mutateAsync(blogObj) setNotif( `Liked '${blogObj.title}' by ${blogObj.author}`, 'success', 5000 ) } catch (err) { setNotif( `Error occured while updating '${blogObj.title}'`, 'error', 5000 ) console.error(err) } }
const deleteBlog = async blogObj => { try { const confirmation = window.confirm(`Delete ${blogObj.title}?`) console.log('Confirmation', confirmation) if (confirmation) { deleteBlogMutation.mutateAsync(blogObj) navigate('/') setNotif( `Deleted '${blogObj.title}' by ${blogObj.author}`, 'error', 5000 ) } else { setNotif('Deletion Cancelled', 'info', 5000) } } catch (err) { setNotif( `Error occured while Deleting '${blogObj.title}'`, 'error', 5000 ) console.log(err) } } // eslint-disable-next-line no-unused-vars const likeBlog = () => { const updatedBlog = { ...blog, likes: blog.likes + 1, }
updateBlog(updatedBlog) }
const delBlog = () => { deleteBlog(blog) }
const addComment = () => { const commentObj = { id: blog.id, comment: comment.value, }
addCommentMutuation.mutateAsync(commentObj) console.log(commentObj) comment.reset() }
if (result.isLoading) return <Loading />
if (result.isError) return <Error />
return ( <Card sx={{ mt: 2, p: 2, background: '#fffa', borderRadius: 3, border: 'solid', }} > <Typography variant="h4" sx={{ display: 'flex', justifyContent: 'center', m: 1, fontFamily: 'Spline Sans', }} > {blog.title} </Typography> <Typography> <b>Author:</b> {blog.author} </Typography> <Typography> <b>Link:</b> <a href={blog.url}>{blog.url}</a> </Typography> <Grid container alignItems="center" > <Grid item> <Typography>Has {blog.likes} Likes </Typography> </Grid> <Grid item> <Button onClick={likeBlog}> <LikeIcon /> </Button> </Grid> </Grid> <Typography>Added by {blog.user.name}</Typography> {user.username === blog.user.username ? ( <Button onClick={delBlog} startIcon={<DeleteIcon />} > Delete </Button> ) : null} <Typography variant="h5">Comments:</Typography> <TextField variant="standard" {...removeReset(comment)} /> <Button onClick={addComment} startIcon={<AddCommentIcon />} > Add Comment </Button> <List> {blog.comments.length !== 0 ? ( blog.comments.map(comment => ( <ListItem key={comment} disablePadding > <ListIcon fontSize="small" /> <ListItemText primary={comment} /> </ListItem> )) ) : ( <Typography variant="subtitle" fontSize="14" > <CreateIcon fontSize="small" /> Be the first to comment! </Typography> )} </List> </Card> )}
export default BlogView