CreatePost

import { useState } from 'react';
import { supabase } from '../client';
import { useNavigate } from 'react-router-dom';
import './CreatePost.css';

const CreatePost = () => {
    const navigate = useNavigate();
    const [post, setPost] = useState({ title: "", author: "", description: "" });

    const handleChange = (event) => {
        const { name, value } = event.target;
        setPost(prev => ({
            ...prev,
            [name]: value,
        }));
    }

    const createPost = async (event) => {
        event.preventDefault();

        try {
            await supabase
                .from('Posts')
                .insert({ title: post.title, author: post.author, description: post.description })
                .select();

            navigate('/'); // Redirect after post creation
        } catch (error) {
            console.error("Error creating post: ", error);
        }
    }

    return (
        <div>
            <form onSubmit={createPost}>
                <label htmlFor="title">Title</label> <br />
                <input
                    type="text"
                    id="title"
                    name="title"
                    value={post.title}
                    onChange={handleChange}
                /><br />
                <br />

                <label htmlFor="author">Author</label><br />
                <input
                    type="text"
                    id="author"
                    name="author"
                    value={post.author}
                    onChange={handleChange}
                /><br />
                <br />

                <label htmlFor="description">Description</label><br />
                <textarea
                    rows="5"
                    cols="50"
                    id="description"
                    name="description"
                    value={post.description}
                    onChange={handleChange}
                />
                <br />
                <input type="submit" value="Submit" />
            </form>
        </div>
    );
}

export default CreatePost;