tanuki-s-forum/front/src/pages/CreateChannel.tsx

import { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import axios from "axios";


export default function CreateChannel() {
    const navigate = useNavigate();
    const [name, setName] = useState("");
    const [description, setDescription] = useState("");
    const [token, setToken] = useState<string>("");

    useEffect(() => {
        const localToken = localStorage.getItem("token");
        if (localToken) setToken(localToken);
    }, []);

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        axios
            .post("/api/channels/add", { name, description, token })
            .then(() => {
                navigate("/");
            })
            .catch((err) => {
                console.error(err.response.data.message);
            });
    }

    return (
        <div>
            <Link to="/">Home</Link>
            <h1>Create Channel</h1>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    placeholder="Name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                />
                <input
                    type="text"
                    placeholder="Description"
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                />
                <button type="submit">Create</button>
            </form>
        </div>
    );
}