add conditional rendering to Login component, refactor code

Lopkop · Feb 26, 2024 · d81ac7c · d81ac7c
1 parent da0d321
commit d81ac7c
Showing 1 changed file with 46 additions and 25 deletions.
diff --git a/frontend/src/routes/Login.jsx b/frontend/src/routes/Login.jsx
@@ -1,6 +1,7 @@
-import React from "react";
+import { React, useEffect, useState }  from "react";
+
 import "../styles/App.css";
-import { Footer } from "../components";
+import { user_is_logged_in, Footer, get_user } from "../components";
 
 async function login(event) {
     event.preventDefault();
@@ -27,29 +28,49 @@ async function login(event) {
     }
 }
 
-export default function Login() {
-    return (
-        <div className="App">
-            <header>
-                <h1>Chat Service</h1>
-            </header>
-            <main>
-
-                <div className="tab-content">
-                  <div className="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="tab-login">
-                  <form>
-                      <div className="form-outline mb-4">
-                        <input id="username" className="form-control" placeholder="Username"/>
-                      </div>
-                      <div className="form-outline mb-4">
-                        <input type="password" id="password" className="form-control" placeholder="Password"/>
+function Login_render() {
+    const [user, setUser] = useState();
+    useEffect(() => {
+        async function fetchData() {
+            const logged_in = await user_is_logged_in();
+            setUser(logged_in);
+            }
+            fetchData();
+        }, [])
+    if (user) {
+        window.location.pathname = `/chats`;
+    } else {
+        return (
+            <div className="App">
+                <header>
+                    <h1>Chat Service</h1>
+                </header>
+                <main>
+                    <div className="tab-content">
+                      <div className="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="tab-login">
+                      <form>
+                          <div className="form-outline mb-4">
+                            <input id="username" className="form-control" placeholder="Username"/>
+                          </div>
+                          <div className="form-outline mb-4">
+                            <input type="password" id="password" className="form-control" placeholder="Password"/>
+                          </div>
+                          <button onClick={(event) => login(event)}>Login</button>
+                        </form>
                       </div>
-                      <button onClick={(event) => login(event)}>Login</button>
-                    </form>
-                  </div>
-                </div>
-            </main>
-            <Footer />
-        </div>
+                    </div>
+                </main>
+                <Footer />
+            </div>
     );
+    }
+}
+
+
+export default function Login() {
+     return (
+        <section>
+            {Login_render()}
+        </section>
+    )
 }