Build a Blog App with React - Components and Hooks (Part 3)

import { useParams, useHistory } from 'react-router-dom';import useFetch from './useFetch';const BlogDetails = () => {    const { id } = useParams();    const { data: blog, error, isPending } =  useFetch('http://localhost:8000/blogs/' + id);    const history = useHistory();    const handleClick = () => {        fetch('http://localhost:8000/blogs/'+ blog.id, {            method: 'DELETE'        }).then(() => {            history.push('/');        })    }    return (         <div className="blog-details">            {isPending && <div>Loading...</div>}            {error && <div>{error}</div>}            <article >                <h2>{blog.title}</h2>                <p>Written by {blog.author}</p>                <div>{blog.body}</div>                <button onClick={handleClick}>Delete</button>            </article>        </div>     );}export default BlogDetails;

import { useState } from 'react';import { useHistory } from 'react-router-dom';const Create = () => {    const [title, setTitle] = useState('');    const [body, setBody] = useState('');    const [author, setAuthor] = useState('Shubham');    const [isPending, setIsPending] = useState(false);    const history = useHistory();    const handleSubmit = (e) => {        e.preventDefault();        const blog = { title, body, author };        setIsPending(true);        fetch('http://localhost:8000/blogs', {            method: 'POST',            headers: {"Content-Type": "application/json"},            body: JSON.stringify(blog)        }).then(() => {            setIsPending(false);            history.push('/');        })    }    return (         <div className="create">            <h2>Add a New Blog</h2>            <form onSubmit={handleSubmit}>                <label>Blog Title</label>                <input                     type="text"                    required                    value={title}                    onChange={(e) => setTitle(e.target.value)}                />                <label>Blog Body:</label>                <textarea                    required                    value={body}                    onChange={(e) => setBody(e.target.value)}                />                <label>Blog author:</label>                <select                    value={author}                    onChange={(e) => setAuthor(e.target.value)}                >                    <option value="Shubham">Shubham</option>                    <option value="Satyam">Satyam</option>                    <option value="Anmol">Anmol</option>                </select>                {!isPending && <button>Add Blog</button>}                {isPending && <button disabled>Adding Blog</button>}            </form>        </div>     );}export default Create;

import { useState, useEffect } from 'react';const useFetch = (url) => {    const [data, setData] = useState([]);    const [isPending, setIsPending] = useState(true);    const [error, setError] = useState(null);    useEffect(() => {        const abortCont = new AbortController();        setTimeout(() => {            fetch(url, { signal: abortCont.signal })            .then(res => {                if(!res.ok)                {                    throw Error('Could not fetch data for that resource');                }                return res.json();            })            .then((data) => {                setData(data);                setIsPending(false);                setError(null);            })            .catch((err) => {                if(err.name==='AbortError') {                    console.log('Fetch aborted');                }                else {                    setError(err.message);                    setIsPending(false);                }            })        }, 5);        return () => abortCont.abort();    },[url]);    return {data, isPending, error};}export default useFetch;