Function CreateBlog

client/src/component/CreateBlog.jsx:9–143

()

import { useNavigate } from 'react-router-dom';

const CreateBlog = () => {
    const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";

    const [formData, setFormData] = useState({
        id: '',
        title: '',
        author: '',
        excerpt: '',
        category: '',
    });
    const navigate = useNavigate()
    const [loading, setLoading] = useState(false);
    const [errors, setErrors] = useState('');

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData({
            ...formData,
            [name]: value
        });
    };

    const handleContentChange = (value) => {
        setFormData({
            ...formData,
            content: value
        });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true); // Start loading

        // Generate a unique ID for the blog post
        const uniqueId = uuidv4();
        const blogPost = { ...formData, id: uniqueId }; // Add the ID to formData
        console.log(blogPost)
        try {
            const response = await axios.post(`${VITE_SERVER_PORT}/api/blog/post-blog`, blogPost, {
                headers: { 'Content-Type': 'application/json' }
            });

            console.log('Response:', response.data);
            setFormData({ title: '', author: '', content: '', id: '', category: '' }); // Reset form data
            alert('Blog created successfully.');
            navigate('/blog');

        } catch (error) {
            console.error('Error:', error);
            setErrors('There was an issue with your submission. Please try again later.');
        } finally {
            setLoading(false); // Stop loading
        }
    };

    return (
        <>
            <div className="create-blog-container">