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.
4.5 kB · 139 lines
JavaScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140import { useField, removeReset } from '../utils/hooks'import { useMutation, useQueryClient } from 'react-query'import { postBlog } from '../utils/requests'import { useNotification } from '../utils/NotifContext'import { useNavigate } from 'react-router-dom'import Button from '@mui/material/Button'import { Card, TextField, Box, Typography } from '@mui/material'
const BlogForm = () => { const queryClient = useQueryClient() const setNotif = useNotification() const navigate = useNavigate() const title = useField('text') const author = useField('text') const url = useField('text')
const createBlogMutation = useMutation(postBlog, { onSuccess: newBlog => { const blogsList = queryClient.getQueryData('blogs') queryClient.invalidateQueries('blogs', blogsList.concat(newBlog)) }, })
const createBlog = async blogObj => { try { createBlogMutation.mutateAsync(blogObj) setNotif( `Blog '${blogObj.title}' by ${blogObj.author} added!`, 'success', 5000 ) } catch (err) { setNotif( `Error occured while creating '${blogObj.title}'`, 'error', 5000 ) console.log(err) } }
const addBlog = event => { event.preventDefault() createBlog({ title: title.value, author: author.value, url: url.value, }) navigate('/') title.reset() author.reset() url.reset() }
const resetField = event => { event.preventDefault() title.reset() author.reset() url.reset() }
return ( <div> <Card sx={{ mt: 2, background: '#fffa', borderRadius: 3, border: 'solid', }} > <Typography variant="h4" sx={{ display: 'flex', justifyContent: 'center', m: 1, fontFamily: 'Spline Sans', }} > Create New Blog </Typography> <form onSubmit={addBlog}> <Box sx={{ m: 2 }}> <div> <TextField sx={{ mt: 1, mb: 1 }} fullWidth label="Title" {...removeReset(title)} /> </div> <div> <TextField sx={{ mt: 1, mb: 1 }} fullWidth label="Author" {...removeReset(author)} /> </div> <div> <TextField sx={{ mt: 1, mb: 1 }} fullWidth label="URL" {...removeReset(url)} /> </div> <div style={{ margin: 1, display: 'flex', justifyContent: 'space-between', }} > <Button sx={{ mt: 1, mb: 1 }} variant="contained" type="submit" > Create </Button> <Button sx={{ mt: 1, mb: 1 }} variant="outlined" type="reset" onClick={resetField} > Reset </Button> </div> </Box> </form> </Card> </div> )}
export default BlogForm