import React from "react";
import globals from "../globals";
import { apiClient } from "../utils/httpClients";

export default class Logout extends React.Component {
    constructor(props) {
        super(props);
    }

    static contextType = globals;

    async componentDidMount() {
        const logoutResponse = await apiClient.get("/user/logout");
        if (logoutResponse.status === 200) {
            this.redirectTimer = setTimeout(() => {
                this.context.navigate("/", { replace: true });
            }, 2000);
        } else if (logoutResponse.status == 401) {
            this.context.navigate("/", { replace: true });
        }

        this.context.update({ user: null });
    }

    componentWillUnmount() {
        clearTimeout(this.redirectTimer);
    }

    render() {
        return (
            <div className="page-root">
                <div>
                    <h1>You are now logged out. See you later!</h1>
                    <p className="text-muted">We will redirect you shortly...</p>
                </div>
            </div>
        );
    }
}