Week4 solutions

week4/exercises/exercise 1 - context/src/App.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import Navbar from './components/Navbar.jsx';
 import Page from './components/Page.jsx';
+import { ThemeContext } from './contexts/ThemeContext.jsx';
 import './index.css';
 
 export default function App() {
@@ -11,12 +12,14 @@ export default function App() {
   }
 
   return (
-    <div
-      className="app"
-      style={{ background: isDark ? '#1a1a2e' : '#f0f2f5', color: isDark ? '#e0e0e0' : '#333333' }}
-    >
-      <Navbar isDark={isDark} onToggle={toggleTheme} />
-      <Page isDark={isDark} />
-    </div>
+    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
+      <div
+        className="app"
+        style={{ background: isDark ? '#1a1a2e' : '#f0f2f5', color: isDark ? '#e0e0e0' : '#333333' }}
+      >
+        <Navbar />
+        <Page />
+      </div>
+    </ThemeContext.Provider>
   );
 }

week4/exercises/exercise 1 - context/src/components/ArticleCard.jsx

@@ -1,6 +1,9 @@
+import { useContext } from 'react';
 import Heading from './Heading.jsx';
+import { ThemeContext } from '../contexts/ThemeContext.jsx';
 
-export default function ArticleCard({ article, isDark }) {
+export default function ArticleCard({ article }) {
+  const { isDark } = useContext(ThemeContext);
   const accent = isDark ? '#e94560' : '#4f46e5';
 
   return (
@@ -14,7 +17,7 @@ export default function ArticleCard({ article, isDark }) {
       }}
     >
       <div className="card__header">
-        <Heading level={3} isDark={isDark}>{article.title}</Heading>
+        <Heading level={3}>{article.title}</Heading>
         <span className="card__tag" style={{ background: accent }}>{article.tag}</span>
       </div>
       <p className="card__summary">{article.summary}</p>

week4/exercises/exercise 1 - context/src/components/Heading.jsx

@@ -1,9 +1,13 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../contexts/ThemeContext.jsx';
+
 const colors = {
   light: { color: '#111111' },
   dark:  { color: '#ffffff' },
 };
 
-export default function Heading({ level = 2, isDark, children }) {
+export default function Heading({ level = 2, children }) {
+  const { isDark } = useContext(ThemeContext);
   const Tag = `h${level}`;
   return (
     <Tag style={isDark ? colors.dark : colors.light}>

week4/exercises/exercise 1 - context/src/components/Navbar.jsx

@@ -1,4 +1,9 @@
-export default function Navbar({ isDark, onToggle }) {
+import { useContext } from 'react';
+import { ThemeContext } from '../contexts/ThemeContext.jsx';
+
+export default function Navbar() {
+  const { isDark, toggleTheme } = useContext(ThemeContext);
+
   return (
     <nav
       className="navbar"
@@ -7,7 +12,7 @@ export default function Navbar({ isDark, onToggle }) {
       <span className="navbar__logo">📰 My Blog</span>
       <button
         className="navbar__toggle"
-        onClick={onToggle}
+        onClick={toggleTheme}
         style={{ background: isDark ? '#e94560' : '#4f46e5' }}
       >
         {isDark ? '☀️ Light mode' : '🌙 Dark mode'}

week4/exercises/exercise 1 - context/src/components/Page.jsx

@@ -31,13 +31,13 @@ const articles = [
   },
 ];
 
-export default function Page({ isDark }) {
+export default function Page() {
   return (
     <main className="page">
-      <Heading level={2} isDark={isDark}>Latest Articles</Heading>
+      <Heading level={2}>Latest Articles</Heading>
       <div className="page__grid">
         {articles.map(article => (
-          <ArticleCard key={article.id} article={article} isDark={isDark} />
+          <ArticleCard key={article.id} article={article} />
         ))}
       </div>
     </main>

week4/exercises/exercise 1 - context/src/contexts/ThemeContext.jsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+// We provide the toggleTheme function that components can call to change the theme, but we don't implement it here. 
+// It is provided by the App
+export const ThemeContext = createContext({ isDark: false, toggleTheme: () => {} });

week4/exercises/exercise 2 - routing/src/App.jsx

@@ -1,16 +1,36 @@
+import { Routes, Route } from 'react-router-dom';
 import Navbar from './components/Navbar.jsx';
 import Home from './pages/Home.jsx';
 import About from './pages/About.jsx';
 import Contact from './pages/Contact.jsx';
+import Team from './pages/Team.jsx';
+import Mission from './pages/Mission.jsx';
 import './index.css';
 
+function NotFound() {
+  return (
+    <main className="page">
+      <h1 className="page__title">404 — Page not found</h1>
+      <p className="page__body">The page you're looking for doesn't exist.</p>
+    </main>
+  );
+}
+
 export default function App() {
   return (
     <div className="app">
+      {/* We keep the Navbar outside of the Routes component because we want it to be visible on all pages, regardless of the current route. */}
       <Navbar />
-      <Home />
-      <About />
-      <Contact />
+      {/* The Routes component is where we define all the routes for our application. So the component will render here. */}
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />}>
+          <Route path="team" element={<Team />} />
+          <Route path="mission" element={<Mission />} />
+        </Route>
+        <Route path="/contact" element={<Contact />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
     </div>
   );
 }

week4/exercises/exercise 2 - routing/src/components/Navbar.jsx

@@ -1,17 +1,31 @@
+import { NavLink } from 'react-router-dom';
+
 const links = [
-  { label: 'Home'    },
-  { label: 'About'   },
-  { label: 'Contact' },
+  { label: 'Home',    to: '/'        },
+  { label: 'About',   to: '/about'   },
+  { label: 'Contact', to: '/contact' },
 ];
 
+function navLinkClass({ isActive }) {
+  // isActive is a boolean from NavLink that tells us if the link is active.
+  // we use it to conditionally apply the 'active' class to the link, which will style it differently when it's active.
+  return isActive ? 'navbar__link active' : 'navbar__link';
+}
+
 export default function Navbar() {
   return (
     <nav className="navbar">
       <span className="navbar__logo">🌐 My Site</span>
       <ul className="navbar__links">
-        {links.map(({ label }) => (
+        {links.map(({ label, to }) => (
           <li key={label}>
-            <a href="#" className="navbar__link">{label}</a>
+            <NavLink
+              to={to}
+              end
+              className={navLinkClass}
+            >
+              {label}
+            </NavLink>
           </li>
         ))}
       </ul>

week4/exercises/exercise 2 - routing/src/main.jsx

@@ -1,9 +1,12 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )

week4/exercises/exercise 2 - routing/src/pages/About.jsx

@@ -1,3 +1,11 @@
+import { NavLink, Outlet } from 'react-router-dom';
+
+function subNavClass({ isActive }) {
+  // isActive is a boolean from NavLink that tells us if the link is active.
+  // we use it to conditionally apply the 'active' class to the link, which will style it differently when it's active.
+  return isActive ? 'about__sublink active' : 'about__sublink';
+}
+
 export default function About() {
   return (
     <main className="page">
@@ -13,11 +21,17 @@ export default function About() {
       </ul>
 
       <nav className="about__subnav">
-        <a href="#" className="about__sublink">Our Team</a>
-        <a href="#" className="about__sublink">Our Mission</a>
+        <NavLink to="/about/team" className={subNavClass}>
+          Our Team
+        </NavLink>
+        <NavLink to="/about/mission" className={subNavClass}>
+          Our Mission
+        </NavLink>
       </nav>
 
-      {/* Render the active nested page here */}
+      {/* The Outlet is where the nested routes will be rendered. 
+      So when we navigate to /about/team, the Team component will be rendered here, and when we navigate to /about/mission, the Mission component will be rendered here. */}
+      <Outlet />
     </main>
   );
 }