Completed Code Along

src/App.js

@@ -1,12 +1,25 @@
+import { useState, useEffect } from "react"
+import { Outlet } from "react-router-dom"
+import NavBar from "./components/NavBar"
 
 function App() {
+  const [users, setUsers] = useState([])
+
+  useEffect(() => {
+    fetch("http://localhost:4000/users")
+      .then((r) => r.json())
+      .then((data) => setUsers(data))
+      .catch((error) => console.error(error))
+  }, [])
+
   return (
     <>
       <header>
-
+        <NavBar />
       </header>
+      <Outlet context={users} />
     </>
-  );
-};
+  )
+}
 
-export default App;
+export default App

src/components/UserCard.js

@@ -1,12 +1,17 @@
-import { Link } from "react-router-dom";
+import { Link, useOutletContext } from "react-router-dom"
 
-function UserCard({user}) {
-    return (
-      <article>
-          <h2>{user.name}</h2>
-          <Link to={`/profile/${user.id}`}>View profile</Link>
-      </article>
-    );
-  };
-
-  export default UserCard;
+function UserCard({ user }) {
+  const users = useOutletContext()
+  console.log(users)
+
+  return (
+    <article>
+      <h2>{user.name}</h2>
+      <p>
+        <Link to={`/profile/${user.id}`}>View profile</Link>
+      </p>
+    </article>
+  )
+}
+
+export default UserCard

src/pages/About.js

@@ -1,11 +1,11 @@
 function About() {
-    return (
-      <>
-        <main>
-          <h1>This is my about component!</h1>
-        </main>
-      </>
-    );
-  };
-  
-  export default About;
+  return (
+    <>
+      <main>
+        <h1>This is my about component!</h1>
+      </main>
+    </>
+  )
+}
+
+export default About

src/pages/ErrorPage.js

@@ -1,14 +1,14 @@
-import { useRouteError } from "react-router-dom";
+import { useRouteError } from "react-router-dom"
 
 function ErrorPage() {
-  const error = useRouteError();
-  console.error(error);
+  const error = useRouteError()
+  console.error(error)
 
   return (
     <main>
-        <h1>Whoops! Something went wrong!</h1>
+      <h1>Whoops! Something went wrong!</h1>
     </main>
-  );
-};
+  )
+}
 
-export default ErrorPage;
+export default ErrorPage

src/pages/Home.js

@@ -1,32 +1,17 @@
-import { useState, useEffect } from "react";
-import UserCard from "../components/UserCard";
-import NavBar from "../components/NavBar";
+import { Outlet, useOutletContext } from "react-router-dom"
+import UserCard from "../components/UserCard"
 
 function Home() {
-  const [users, setUsers] = useState([]);
-
-  useEffect(() =>{
-    fetch("http://localhost:4000/users")
-      .then(r => r.json())
-      .then(data => setUsers(data))
-      .catch(error => console.error(error));
-  }, []);
-
-  const userList = users.map(user =>{
-    return <UserCard key={user.id} user={user}/>;
-  });
+  const users = useOutletContext()
+  const userList = users.map((user) => <UserCard key={user.id} user={user} />)
 
   return (
-    <>
-      <header>
-        <NavBar />
-      </header>
-      <main>
-        <h1>Home!</h1>
-        {userList}
-      </main>
-    </>
-  );
-};
+    <main>
+      <h1>Home!</h1>
+      <Outlet context={users} />
+      {userList}
+    </main>
+  )
+}
 
-export default Home;
+export default Home

src/pages/Login.js

@@ -1,20 +1,20 @@
 function Login() {
-    return (
-      <>
-        <main>
-          <h1>Login</h1>
-          <form>
-            <div>
-              <input type="text" name="username" placeholder="Username" />
-            </div>
-            <div>
-              <input type="password" name="password" placeholder="Password" />
-            </div>
-            <input type="submit" value="Submit" />
-          </form>
-        </main>
-      </>
-    );
-  };
-  
-  export default Login;
+  return (
+    <>
+      <main>
+        <h1>Login</h1>
+        <form>
+          <div>
+            <input type="text" name="username" placeholder="Username" />
+          </div>
+          <div>
+            <input type="password" name="password" placeholder="Password" />
+          </div>
+          <input type="submit" value="Submit" />
+        </form>
+      </main>
+    </>
+  )
+}
+
+export default Login

src/pages/UserProfile.js

@@ -1,27 +1,20 @@
-import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useOutletContext } from "react-router-dom"
 
 function UserProfile() {
-  const [user, setUser] = useState({});
-  const params = useParams();
-  const userId = params.id;
+  const params = useParams()
+  const users = useOutletContext()
 
-  useEffect(() =>{
-    fetch(`http://localhost:4000/users/${userId}`)
-    .then(r => r.json())
-    .then(data => setUser(data))
-    .catch(error => console.error(error));
-  }, [userId]);
+  const user = users.find((user) => user.id == parseInt(params.id))
 
-  if(!user.name){
-    return <h1>Loading...</h1>;
-  };
+  if (!user) {
+    return <h1>Loading...</h1>
+  }
 
-  return(  
-      <aside>
-        <h1>{user.name}</h1>
-      </aside>
-  );
-};
+  return (
+    <aside>
+      <h1>{user.name}</h1>
+    </aside>
+  )
+}
 
-export default UserProfile;
+export default UserProfile

src/routes.js

@@ -1,30 +1,36 @@
-import Home from "./pages/Home";
-import About from "./pages/About";
-import Login from "./pages/Login";
-import UserProfile from "./pages/UserProfile";
-import ErrorPage from "./pages/ErrorPage";
+import App from "./App"
+import Home from "./pages/Home"
+import About from "./pages/About"
+import Login from "./pages/Login"
+import UserProfile from "./pages/UserProfile"
+import ErrorPage from "./pages/ErrorPage"
 
 const routes = [
   {
     path: "/",
-    element: <Home />,
-    errorElement: <ErrorPage />
-  }, 
-  {
-    path: "/about",
-    element: <About />,
-    errorElement: <ErrorPage />
-  },
-  {
-    path: "/login",
-    element: <Login />,
-    errorElement: <ErrorPage />
+    element: <App />,
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        path: "/",
+        element: <Home />,
+        children: [
+          {
+            path: "/profile/:id",
+            element: <UserProfile />,
+          },
+        ],
+      },
+      {
+        path: "/about",
+        element: <About />,
+      },
+      {
+        path: "/login",
+        element: <Login />,
+      },
+    ],
   },
-  {
-    path: "/profile/:id",
-    element: <UserProfile />,
-    errorElement: <ErrorPage />
-  }
-];
+]
 
-export default routes;
+export default routes