Changeset 8ca35dc for my-react-app/src/components/AppContent.js

Timestamp:

01/19/25 23:18:37 (4 months ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

f5b256e

Parents:

db39d9e

Message:

Done with stupid timeslots

File:

• my-react-app/src/components/AppContent.js (modified) (2 diffs)

my-react-app/src/components/AppContent.js

@@ -1 @@
-import * as React from "react";
+import React from "react";
+import axios from "axios";
 import WelcomeContent from "./WelcomeContent";
 import AuthContent from "./AuthContent";
 import LoginForm from "./LoginForm";
-import { request, setAuthToken } from "../axios_helper";
-import Buttons from './Buttons'
+import AuthForm from "./AuthForm";
+import Buttons from './Buttons';
+import restaurants from "./Restaurants";
 
-export default class AppContent extends React.Component {
+class AppContent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            componentToShow: "welcome"
+            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"})
+        this.setState({ componentToShow: "login" });
     }
 
     logout = () => {
-        this.setState({componentToShow: "welcome"})
+        localStorage.removeItem('token');
+        this.setAuthToken(null);
+        this.setState({ componentToShow: "welcome", isAuthenticated: false });
     }
 
     onLogin = (e, email, password) => {
         e.preventDefault();
-        request(
-            "POST",
-            "/api/login",
-            {email: email, password: password}
-        ).then((response) => {
-            this.setState({componentToShow: "restaurants"})
-            setAuthToken(response.data.token);
-        }).catch((error) => {
-            this.setState({componentToShow: "welcome"})
-        });
+        // 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();
-        request(
-            "POST",
-            "/api/register",
-            {
-                firstName: firstName,
-                lastName: lastName,
-                email: email,
-                password: password
-            }
-        ).then((response) => {
-            this.setState({componentToShow: "restaurants"})
-            setAuthToken(response.data.token);
-        }).catch((error) => {
-            this.setState({componentToShow: "welcome"})
-        });
+        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"];
+        }
     };
 
@@ -58 +95 @@
         return (
             <div>
-                <Buttons login={this.login} logout={this.logout}></Buttons>
-                {this.state.componentToShow === "welcome" && <WelcomeContent/>}
-                {this.state.componentToShow === "restaurants" && <AuthContent/>}
-                {this.state.componentToShow === "login" && <LoginForm onLogin={this.onLogin} onRegister={this.onRegister}/>}
+                <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;