export type State = {
    inputUrl: string;
    shortenedUrl: string;
};

export class UrlShortener extends React.Component<{}, State> {
    constructor(props: {}, context: any) {
        super(props, context);
        this.state = {
            inputUrl: "",
            shortenedUrl: ""
        };
    }

    handleSubmit = async () => {
        try {
            const response = await fetch(`/url/${this.state.inputUrl}`, { method: "POST" });
            const shortenedUrl = await response.json();
            this.setState({ shortenedUrl });
        } catch (error) {
            alert("An error occurred!");
        }
    };

    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        });
    };

    render() {
        const { inputUrl, shortenedUrl } = this.state;
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type="text"
                    value={inputUrl}
                    onChange={this.handleChange}
                    name="inputUrl"
                />
                <input
                    type="text"
                    readOnly
                    value={shortenedUrl}
                />
            </form>
        );
    }
}