Merge pull request #72 from elhagen13/filterTasksByUser

fixed routing so it can work with updated paths
elhagen13 · Dec 8, 2023 · f1a5830 · f1a5830
2 parents 19a179c + 8dd9880
commit f1a5830
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 45 deletions.
diff --git a/packages/studywell-frontend/src/App.js b/packages/studywell-frontend/src/App.js
@@ -10,7 +10,7 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/work/:userId" element={<WorkScreen />} />
+        <Route path="/work/*" element={<WorkScreen />} />
         <Route path="/" element={<LogIn />} />
         <Route path="/create" element={<CreateAccount />} />
       </Routes>

diff --git a/packages/studywell-frontend/src/components/navbar/NavBar.js b/packages/studywell-frontend/src/components/navbar/NavBar.js
@@ -3,20 +3,25 @@ import { NavLink } from "react-router-dom";
 import "./NavBar.css";
 
 const Navbar = () => {
+  const curURL = window.location.href;
+  const pathSegments = curURL.split("/");
+  const userId = pathSegments[pathSegments.length - 1];
+  console.log(userId);
+
   return (
     <div className="nav_bar">
       <div>
-        <NavLink to="/work" className="title">
+        <NavLink to={`/work/${userId}`} className="title">
           Work
         </NavLink>
       </div>
       <div>
-        <NavLink to="/work/shortbreak" className="title">
+        <NavLink to={`/work/shortbreak/${userId}`} className="title">
           Short
         </NavLink>
       </div>
       <div>
-        <NavLink to="/work/longbreak" className="title">
+        <NavLink to={`/work/longbreak/${userId}`} className="title">
           Long
         </NavLink>
       </div>

diff --git a/packages/studywell-frontend/src/components/timer/Timer.js b/packages/studywell-frontend/src/components/timer/Timer.js
@@ -25,6 +25,10 @@ function Timer(props) {
   const breakCount = props.breakCount;
   const page = props.page;
 
+  const curURL = window.location.href;
+  const pathSegments = curURL.split("/");
+  const userId = pathSegments[pathSegments.length - 1];
+
   useEffect(() => {
     setMinutes(props.time);
   }, [props.time]);
@@ -50,15 +54,15 @@ function Timer(props) {
     }
     console.log(breakCount);
     if (page === "shortbreak" || page === "longbreak") {
-      navigate("/work");
+      navigate(`/work/${userId}`);
     } else {
       if (breakCount % 3 === 0) {
-        navigate("/work/longbreak");
+        navigate(`/work/longbreak/${userId}`);
       } else {
-        navigate("/work/shortbreak");
+        navigate(`/work/shortbreak/${userId}`);
       }
     }
-  }, [audio, navigate, breakCount, props, page]);
+  }, [audio, navigate, breakCount, props, page, userId]);
 
   useEffect(() => {
     if (timerOn) {
@@ -88,9 +92,9 @@ function Timer(props) {
 
   useEffect(() => {
     if (timerDone) {
-      navigate("/work");
+      navigate(`/work/${userId}`);
     }
-  }, [timerDone, navigate]);
+  }, [timerDone, navigate, userId]);
 
   return (
     <div className="container">

diff --git a/packages/studywell-frontend/src/pages/CreateAccount.js b/packages/studywell-frontend/src/pages/CreateAccount.js
@@ -23,39 +23,48 @@ function CreateAccount() {
       password: password.value,
     };
 
-    try {
-      const usernameRes = await fetchUserByUsername(username.value);
-      console.log("username", usernameRes.status);
-      if (usernameRes.status === 200) {
-        setUsernameExistence(true);
-        existence[0] = 1;
-        console.log("username exists?", usernameExistence);
-      }
-
-      const emailRes = await fetchUserByEmail(email.value);
-      console.log("email", emailRes.status);
-      if (emailRes.status === 200) {
-        existence[1] = 1;
-        setEmailExistence(true);
-        console.log("email exists?", emailExistence);
-      }
-
-      console.log(emailExistence, usernameExistence);
-
-      if (!existence[0] && !existence[1]) {
-        const res = await createUser(user);
-        if (res.status === 201) {
-          navigate("/work");
-          console.log("navigated");
-        } else {
-          console.log("Account creation failed.");
+    fetchUserByUsername(username.value)
+      .then((res) => {
+        console.log("username", res.status);
+        if (res.status === 200) {
+          setUsernameExistence(true);
         }
-      } else {
-        console.log("failed");
-      }
-    } catch (error) {
-      console.error("Error:", error);
-    }
+        return;
+      })
+      .then(() => {
+        fetchUserByEmail(email.value).then((res) => {
+          console.log("email", res.status);
+          if (res.status === 200) {
+            setEmailExistence(true);
+            return;
+          }
+        });
+      })
+      .then(() => {
+        console.log(emailExistence, usernameExistence);
+        if (!emailExistence && !usernameExistence) {
+          createUser(user)
+            .then((res) => {
+              if (res.status === 201) {
+                return res.json();
+              } else {
+                return null;
+              }
+            })
+            .then((data) => {
+              console.log("data", data);
+              if (data !== null) {
+                const userId = data.id;
+                navigate(`/work/${userId}`);
+              } else {
+                console.log("account creation failed");
+              }
+            })
+            .catch((error) => {
+              console.log(error);
+            });
+        } else console.log("failed");
+      });
   }
 
   function fetchUserByEmail(email) {

diff --git a/packages/studywell-frontend/src/pages/WorkScreen.js b/packages/studywell-frontend/src/pages/WorkScreen.js
@@ -159,7 +159,7 @@ function WorkScreen() {
 
       <Routes>
         <Route
-          path="/"
+          path="/:userId"
           element={
             <MainScreen
               breakCount={breakCount}
@@ -169,7 +169,7 @@ function WorkScreen() {
           }
         />
         <Route
-          path="/shortbreak"
+          path="/shortbreak/:userId"
           element={
             <ShortBreak
               breakCount={breakCount}
@@ -179,7 +179,7 @@ function WorkScreen() {
           }
         />
         <Route
-          path="/longbreak"
+          path="/longbreak/:userId"
           element={
             <LongBreak
               breakCount={breakCount}