import { useState } from "react";
import { useEffect } from "react";


export default function View(props) {
    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [item, setItems] = useState([]);

    // Note: the empty deps array [] means
    // this useEffect will run once
    // similar to componentDidMount()
    useEffect(() => {
        fetch("http://localhost:6130/api/v1/view/" + props.id)
            .then(res => res.json())
            .then(
                (result) => {
                    setIsLoaded(true);
                    setItems(result);
                },
                // Note: it's important to handle errors here
                // instead of a catch() block so that we don't swallow
                // exceptions from actual bugs in components.
                (error) => {
                    setIsLoaded(true);
                    setError(error);
                }
            )
    }, [])

    if (error) {
        return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
        return <div>Loading...</div>;
    } else {
        if ('Code' in item && item.Code != 200) {
            return (
                <p>
                    Error: {item.Code} {item.Msg}
                </p>
            );
        }
        return (
            <div className="content">
            <h2>ID: {props.id}</h2>
            <pre>
                <code>
                    {item.Content}
                </code>
            </pre>
            </div>
        );
    }
}