Change state on login/logout

aleda145 · Aug 2, 2022 · bd031d7 · bd031d7
1 parent 9884ab9
commit bd031d7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import "./App.css";
 import Auth from "./auth/pocketbase";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
 import Dashboard from "./Dashboard/Dashboard";
 import Preferences from "./Preferences/Preferences";
 import PocketBase from "pocketbase";
@@ -15,23 +15,39 @@ const queryClient = new QueryClient({
   },
 });
 function App() {
-  const [token, setToken] = useState();
-  console.log(token);
   const client = new PocketBase("http://localhost:8090");
+  const [isLoggedIn, setIsLoggedIn] = useState(client.AuthStore.isValid);
+
   console.log(client.AuthStore.isValid);
   console.log(client.AuthStore.model.email);
-  if (!client.AuthStore.isValid) {
-    return <Auth client={client} />;
+  if (!isLoggedIn) {
+    return <Auth client={client} setIsLoggedIn={setIsLoggedIn} />;
   }
   return (
     <div className="wrapper">
       <h1>Application</h1>
       <QueryClientProvider client={queryClient}>
         <BrowserRouter>
+          <Link to="/">
+            <button>home</button>
+          </Link>
+          <Link to="/dashboard">
+            <button>dashboard</button>
+          </Link>
+          <Link to="/preferences">
+            <button>preferences</button>
+          </Link>
+
           <Routes>
             {/* <Route path="/" element={<App />} /> */}
-            <Route path="dashboard" element={<Dashboard client={client} />} />
+            <Route
+              path="dashboard"
+              element={
+                <Dashboard client={client} setIsLoggedIn={setIsLoggedIn} />
+              }
+            />
             <Route path="preferences" element={<Preferences />} />
+            <Route path="/" element={<Preferences />} />
           </Routes>
         </BrowserRouter>
       </QueryClientProvider>

diff --git a/frontend/src/Dashboard/Dashboard.js b/frontend/src/Dashboard/Dashboard.js
@@ -2,12 +2,13 @@ import React, { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate, NavLink } from "react-router-dom";
 
-export default function Dashboard({ client }) {
+export default function Dashboard({ client, setIsLoggedIn }) {
   const navigate = useNavigate();
 
   async function logOutClicked() {
     await client.AuthStore.clear();
-    navigate("/dashboard");
+    setIsLoggedIn(false);
+    navigate("/");
   }
   const { isLoading, error, data } = useQuery(["repoData"], () =>
     client.Records.getList("user_nums", 1, 50, {

diff --git a/frontend/src/auth/pocketbase.js b/frontend/src/auth/pocketbase.js
@@ -1,13 +1,14 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-export default function Auth({ client }) {
+export default function Auth({ client, setIsLoggedIn }) {
   const [username, setUserName] = useState();
   const [password, setPassword] = useState();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     const userData = await client.Users.authViaEmail(username, password);
     console.log(userData);
+    setIsLoggedIn(client.AuthStore.isValid);
   };
   return (
     <div className="login-wrapper">