source: my-react-app/src/components/AppContent.js@ 8ca35dc

import React from "react";
import axios from "axios";
import WelcomeContent from "./WelcomeContent";
import AuthContent from "./AuthContent";
import LoginForm from "./LoginForm";
import AuthForm from "./AuthForm";
import Buttons from './Buttons';
import restaurants from "./Restaurants";

class AppContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            componentToShow: "welcome",
            isAuthenticated: false,
            user: null,
            loading: false // Add loading state
        };
    }

    componentDidMount() {
        const token = localStorage.getItem('token');
        console.log(token);
        if (token) {
            this.setAuthToken(token);
            this.setState({ componentToShow: "restaurants", isAuthenticated: true });
        }
    }

    fetchUserDetails = (token) => {
        console.log("Fetch");
        axios.get("/api/user")
            .then((response) => {
                this.setState({ user: response.data, componentToShow: "restaurants", isAuthenticated: true });
            })
            .catch((error) => {
                console.error("Failed to fetch user details:", error);
                this.logout();
            });
    };

    login = () => {
        this.setState({ componentToShow: "login" });
    }

    logout = () => {
        localStorage.removeItem('token');
        this.setAuthToken(null);
        this.setState({ componentToShow: "welcome", isAuthenticated: false });
    }

    onLogin = (e, email, password) => {
        e.preventDefault();
        // After successful login, save the token
        axios.post("/api/login", { email, password })
            .then((response) => {
                const token = response.data.token;
                localStorage.setItem('token', token);  // Save the token
                console.log(token);
                this.setAuthToken(token);  // Set the token for future requests
                this.setState({ componentToShow: "restaurants", isAuthenticated: true });
            })
            .catch((error) => {
                console.error("Login failed:", error);
                this.setState({ componentToShow: "welcome" });
            });

    };

    onRegister = (e, firstName, lastName, email, password) => {
        e.preventDefault();
        axios.post("/api/register", { firstName, lastName, email, password })
            .then((response) => {
                const token = response.data.token;
                localStorage.setItem('token', token);
                console.log(token);
                this.setAuthToken(token);
                this.fetchUserDetails(token);
            })
            .catch((error) => {
                this.setState({ componentToShow: "welcome" });
                console.error(error);
            });
    };

    setAuthToken = (token) => {
        if (token) {
            axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
        } else {
            delete axios.defaults.headers.common["Authorization"];
        }
    };

    render() {
        return (
            <div>
                <Buttons login={this.login} logout={this.logout} />
                {this.state.componentToShow === "welcome" && <WelcomeContent />}
                {this.state.componentToShow === "restaurants" && <AuthContent />}
                {this.state.componentToShow === "login" && <LoginForm onLogin={this.onLogin} onRegister={this.onRegister} />}
                {this.state.loading && <div>Loading...</div>} {/* Show loading state */}
            </div>
        );
    }
}


export default AppContent;