23 feat build favorites page + make star button reactive and funcitonal

t29-project-1/package.json

@@ -30,7 +30,8 @@
     "dotenv": "^17.4.2",
     "express": "^5.2.1",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.4"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

t29-project-1/src/App.css

@@ -40,6 +40,12 @@
   flex-shrink: 0;
 }
 
+.favorite-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
 /* Mobile Responsive Adjustments */
 @media (max-width: 600px) {
   .nav-layout {

t29-project-1/src/App.tsx

@@ -1,6 +1,8 @@
 import { useCatNavigation } from './hooks/useCatNavigation';
+import { useFavoriteCat } from './hooks/useFavoriteCat';
 import { NavPrevious, NavNext } from './components/ActionButtons';
 import { CatCard } from './components/CatCard';
+import { Link } from 'react-router-dom';
 import './App.css';
 
 export default function App() {
@@ -12,16 +14,23 @@ export default function App() {
     handleNext,
     handlePrevious,
   } = useCatNavigation();
-
+  const { isFavorite, toggleFavorite } = useFavoriteCat(currentCat);
   return (
     <main className="app-container">
+      <Link to="/favorite">Favorite</Link>
       <nav className="nav-layout" aria-label="Main content navigation">
         <NavPrevious
           onClick={handlePrevious}
           disabled={!canGoPrevious || isLoading}
         />
 
-        <CatCard cat={currentCat} isLoading={isLoading} error={error} />
+        <CatCard
+          cat={currentCat}
+          isFavorite={isFavorite}
+          isLoading={isLoading}
+          error={error}
+          onToggleFavorite={toggleFavorite}
+        />
 
         <NavNext onClick={handleNext} disabled={isLoading} />
       </nav>

t29-project-1/src/components/Favorites.css

@@ -34,6 +34,11 @@
     stroke 0.15s ease;
 }
 
+.star-svg.is-active {
+  fill: #7d5d75;
+  stroke: #fff4c8;
+}
+
 /* Invert colors on BOTH hover and keyboard focus */
 .star-btn:hover .star-svg,
 .star-btn:focus-visible .star-svg {

t29-project-1/src/components/Favorites.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import './Favorites.css';
 
 interface FavoritesProps {
-  onToggleFavorites: () => void;
+  onToggleFavorites?: () => void;
   isViewingFavorites?: boolean;
 }
 
@@ -16,7 +16,7 @@ export const Favorites: React.FC<FavoritesProps> = ({
       className="star-btn"
       onClick={onToggleFavorites}
       aria-label={
-        isViewingFavorites ? 'Return to cat browsing' : 'Go to favorites'
+        isViewingFavorites ? 'Remove from favorites' : 'Add to favorites'
       }
       aria-pressed={isViewingFavorites}
     >

t29-project-1/src/hooks/useFavoriteCat.ts

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import type { CatData } from '../api/catApi';
+import {
+  addFavoriteCat,
+  getFavoriteCats,
+  removeFavoriteCat,
+} from '../utils/favorites';
+
+export function useFavoriteCat(currentCat: CatData | null) {
+  const [favoriteCats, setFavoriteCats] = useState(getFavoriteCats);
+  const isFavorite = Boolean(
+    currentCat?.id &&
+    favoriteCats.some((favorite) => favorite.id === currentCat.id)
+  );
+
+  const toggleFavorite = () => {
+    if (!currentCat?.id) return;
+
+    if (isFavorite) {
+      removeFavoriteCat(currentCat.id);
+    } else {
+      addFavoriteCat(currentCat);
+    }
+
+    setFavoriteCats(getFavoriteCats());
+  };
+
+  return { isFavorite, toggleFavorite };
+}

t29-project-1/src/main.tsx

@@ -1,8 +1,10 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './index.css';
 import App from './App.tsx';
+import FavoritePage from './pages/FavoritePage.tsx';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -16,7 +18,12 @@ const queryClient = new QueryClient({
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <App />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<App />} />
+          <Route path="/favorite" element={<FavoritePage />} />
+        </Routes>
+      </BrowserRouter>
     </QueryClientProvider>
   </StrictMode>
 );

t29-project-1/src/pages/FavoritePage.tsx

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { CatCard } from '../components/CatCard';
+import { getFavoriteCats, removeFavoriteCat } from '../utils/favorites';
+import '../App.css';
+
+export default function FavoritePage() {
+  const [favoriteCats, setFavoriteCats] = useState(getFavoriteCats);
+
+  const handleRemove = (catId?: string) => {
+    if (!catId) return;
+
+    removeFavoriteCat(catId);
+    setFavoriteCats(getFavoriteCats());
+  };
+
+  return (
+    <main>
+      <Link to="/">Back to cats</Link>
+      <h1>Favorites</h1>
+      {favoriteCats.length === 0 ? (
+        <p>No favorite cats yet.</p>
+      ) : (
+        <section className="favorite-grid" aria-label="Favorite cats">
+          {favoriteCats.map((cat) => (
+            <CatCard
+              key={cat.id ?? cat.url}
+              cat={cat}
+              isFavorite
+              onToggleFavorite={() => handleRemove(cat.id)}
+            />
+          ))}
+        </section>
+      )}
+    </main>
+  );
+}