fencl/davisfe.cz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement Favorites feature with persistent storage and sidebar integration and update lake data.

Browse Source
This commit is contained in:
David Fencl
2026-06-05 23:57:17 +02:00
parent b660f0f6c3
commit 27551f9183
16 changed files with 569 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+2
View File
@@ -3,6 +3,7 @@ import { Routes, Route, useParams, useLocation, useNavigate, Navigate } from 're
import LakeDetail from './components/LakeDetail';
import LakesOverview from './components/LakesOverview';
import LakeMap from './components/LakeMap';
import FavoritesOverview from './components/FavoritesOverview';
import Sidebar from './components/Sidebar';
import Topbar from './components/Topbar';
import SettingsModal from './components/SettingsModal';
@@ -60,6 +61,7 @@ function App() {
<Topbar language={language} onToggleMobileMenu={() => setIsMobileMenuOpen(!isMobileMenuOpen)} />
<Routes>
<Route path="/" element={<LakesOverview language={language} />} />
<Route path="/favorites" element={<FavoritesOverview language={language} />} />
<Route path="/map" element={<LakeMap language={language} />} />
<Route path="/:slug" element={<LakeDetailWrapper language={language} />} />
</Routes>
src/components/FavoritesOverview.tsx
+169
View File
@@ -0,0 +1,169 @@
import { useState, useEffect } from 'react';
import { FiStar } from 'react-icons/fi';
import { type Language } from '../translations';
import { useFavorites } from '../hooks/useFavorites';
import { useNavigate } from 'react-router-dom';
import { slugify } from '../utils/slugify';
import { AreaChart, Area, ResponsiveContainer } from 'recharts';
import { FiTrendingUp, FiTrendingDown } from 'react-icons/fi';
interface Lake {
id: string;
name: string;
river: string;
priority: boolean;
level: number;
capacity: number;
storageDiff?: number;
inflow: number;
outflow: number;
volume: number;
sparkline: number[];
}
interface Props {
language: Language;
}
const CircularProgress = ({ value, size = 60, strokeWidth = 6 }: { value: number, size?: number, strokeWidth?: number }) => {
const radius = (size - strokeWidth) / 2;
const circumference = radius * 2 * Math.PI;
const offset = circumference - (value / 100) * circumference;
return (
<div style={{ position: 'relative', width: size, height: size }}>
<svg width={size} height={size}>
<circle stroke="rgba(255,255,255,0.1)" fill="transparent" strokeWidth={strokeWidth} r={radius} cx={size / 2} cy={size / 2} />
<circle
stroke="var(--color-cyan)" fill="transparent" strokeWidth={strokeWidth} strokeLinecap="round"
style={{ strokeDasharray: circumference, strokeDashoffset: offset, transition: 'stroke-dashoffset 0.5s ease-in-out' }}
r={radius} cx={size / 2} cy={size / 2} transform={`rotate(-90 ${size / 2} ${size / 2})`}
/>
</svg>
<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.25, fontWeight: 'bold' }}>
{value > 0 ? `${value}%` : 'N/A'}
</div>
</div>
);
};
const FavoritesOverview = ({ language }: Props) => {
const [lakes, setLakes] = useState<Lake[]>([]);
const { isFavorite, toggleFavorite } = useFavorites();
const navigate = useNavigate();
useEffect(() => {
fetch('/data/lakes_index.json')
.then(res => res.json())
.then(data => setLakes(data))
.catch(err => console.error(err));
}, []);
const favoriteLakes = lakes.filter(l => isFavorite(l.id));
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<div>
<h1 style={{ fontSize: '1.75rem', fontWeight: 'bold', margin: '0 0 0.5rem 0', display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
<FiStar size={24} fill="#f59e0b" color="#f59e0b" />
{language === 'cs' ? 'Oblíbená' : 'Favourites'}
</h1>
<p style={{ margin: 0, color: 'var(--text-muted)', fontSize: '0.9rem' }}>
{language === 'cs'
? 'Jezera připnutá v přehledu. Připnout nebo odepnout lze ikonou hvězdičky.'
: 'Lakes you pinned in the overview. Use the star icon to pin or unpin.'}
</p>
</div>
{favoriteLakes.length === 0 ? (
<div style={{
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
gap: '1rem', padding: '4rem 2rem', color: 'var(--text-muted)', textAlign: 'center'
}}>
<FiStar size={48} strokeWidth={1.2} color="var(--text-muted)" />
<p style={{ margin: 0, fontSize: '1.1rem' }}>
{language === 'cs' ? 'Zatím žádná oblíbená jezera.' : 'No favourites yet.'}
</p>
<p style={{ margin: 0, fontSize: '0.85rem' }}>
{language === 'cs'
? 'Přejdi na Jezera a nádrže a klikni na ⭐ u jezera, které tě zajímá.'
: 'Go to Lakes & Reservoirs and click the ⭐ on any lake to pin it here.'}
</p>
</div>
) : (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '1.5rem' }}>
{favoriteLakes.map(lake => {
const chartData = lake.sparkline.map((val, i) => ({ name: i, value: val }));
const isFav = isFavorite(lake.id);
return (
<div
key={lake.id}
className="kpi-card priority-lake-card"
onClick={() => navigate(`/${slugify(lake.name)}`)}
style={{ cursor: 'pointer', padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1.5rem', position: 'relative' }}
>
{/* Unpin button */}
<button
onClick={(e) => { e.stopPropagation(); toggleFavorite(lake.id); }}
title="Odepnout"
style={{
position: 'absolute', top: '1rem', right: '1rem',
background: 'none', border: 'none', cursor: 'pointer',
color: '#f59e0b', transition: 'transform 0.15s',
padding: '4px', display: 'flex', alignItems: 'center', zIndex: 2,
}}
onMouseOver={(e) => { e.currentTarget.style.transform = 'scale(1.2)'; }}
onMouseOut={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
>
<FiStar size={18} fill="#f59e0b" />
</button>
<h3 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0, paddingRight: '2rem' }}>
{lake.name} {lake.river ? `- ${lake.river}` : ''}
</h3>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
<div>
<div style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Water level</div>
<div style={{ fontSize: '2rem', fontWeight: 'bold' }}>{lake.level} <span style={{ fontSize: '1rem', fontWeight: 'normal', color: 'var(--text-muted)' }}>m n.m.</span></div>
</div>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<CircularProgress value={lake.capacity} size={70} strokeWidth={6} />
<div>
<div style={{ fontSize: '1.25rem', fontWeight: 'bold' }}>
<span style={{ color: lake.capacity >= 80 ? 'var(--color-green)' : lake.capacity < 40 ? 'var(--color-red)' : 'var(--text-main)' }}>
{lake.capacity > 0 ? `${lake.capacity}%` : 'N/A'}
</span>
</div>
{lake.storageDiff !== undefined && (
<div style={{ fontSize: '0.8rem', color: lake.storageDiff >= 0 ? 'var(--color-green)' : 'var(--color-red)', fontWeight: 500 }}>
{lake.storageDiff > 0 ? '+' : ''}{lake.storageDiff.toFixed(2)} m
</div>
)}
</div>
</div>
</div>
<div style={{ display: 'flex', gap: '1rem', fontSize: '0.85rem' }}>
<div style={{ display: 'flex', gap: '0.5rem' }}>
<FiTrendingUp color="var(--color-green)" />
<span style={{ color: 'var(--text-muted)' }}>Inflow <span style={{ color: 'var(--color-green)' }}>{lake.inflow} m³/s</span></span>
</div>
<div style={{ display: 'flex', gap: '0.5rem' }}>
<FiTrendingDown color="var(--color-red)" />
<span style={{ color: 'var(--text-muted)' }}>Outflow <span style={{ color: 'var(--color-red)' }}>{lake.outflow} m³/s</span></span>
</div>
</div>
</div>
);
})}
</div>
)}
</div>
);
};
export default FavoritesOverview;
src/components/LakesOverview.tsx
+126 -29
View File
@@ -1,9 +1,10 @@
import { useState, useEffect } from 'react';
import { FiTrendingUp, FiTrendingDown } from 'react-icons/fi';
import { FiTrendingUp, FiTrendingDown, FiStar } from 'react-icons/fi';
import { type Language, t } from '../translations';
import { AreaChart, Area, ResponsiveContainer } from 'recharts';
import { useNavigate } from 'react-router-dom';
import { slugify } from '../utils/slugify';
import { useFavorites } from '../hooks/useFavorites';
interface Lake {
id: string;
@@ -12,6 +13,7 @@ interface Lake {
priority: boolean;
level: number;
capacity: number;
storageDiff?: number;
inflow: number;
outflow: number;
volume: number;
@@ -26,7 +28,7 @@ const CircularProgress = ({ value, size = 60, strokeWidth = 6 }: { value: number
const radius = (size - strokeWidth) / 2;
const circumference = radius * 2 * Math.PI;
const offset = circumference - (value / 100) * circumference;
return (
<div style={{ position: 'relative', width: size, height: size }}>
<svg width={size} height={size}>
@@ -57,18 +59,38 @@ const CircularProgress = ({ value, size = 60, strokeWidth = 6 }: { value: number
);
};
const LakeCard = ({ lake, language }: { lake: Lake, language: Language }) => {
const LakeCard = ({ lake, language, isFav, onToggleFav }: { lake: Lake, language: Language, isFav: boolean, onToggleFav: (id: string) => void }) => {
const navigate = useNavigate();
const chartData = lake.sparkline.map((val, i) => ({ name: i, value: val }));
return (
<div
className="kpi-card priority-lake-card"
<div
className="kpi-card priority-lake-card"
onClick={() => navigate(`/${slugify(lake.name)}`)}
style={{ cursor: 'pointer', flex: 1, padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1.5rem', position: 'relative' }}
>
<h3 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0 }}>{lake.name} {lake.river ? `- ${lake.river}` : ''}</h3>
{/* Star / Favorite button */}
<button
onClick={(e) => { e.stopPropagation(); onToggleFav(lake.id); }}
title={isFav ? 'Odepnout' : 'Připnout jako oblíbené'}
style={{
position: 'absolute', top: '1rem', right: '1rem',
background: 'none', border: 'none', cursor: 'pointer',
color: isFav ? '#f59e0b' : 'var(--text-muted)',
opacity: isFav ? 1 : 0.4,
transition: 'color 0.2s, opacity 0.2s, transform 0.15s',
padding: '4px',
display: 'flex', alignItems: 'center',
zIndex: 2,
}}
onMouseOver={(e) => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.transform = 'scale(1.2)'; }}
onMouseOut={(e) => { e.currentTarget.style.opacity = isFav ? '1' : '0.4'; e.currentTarget.style.transform = 'scale(1)'; }}
>
<FiStar size={18} fill={isFav ? '#f59e0b' : 'none'} />
</button>
<h3 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0, paddingRight: '2rem' }}>{lake.name} {lake.river ? `- ${lake.river}` : ''}</h3>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
<div style={{ width: '40px', height: '60px', backgroundColor: 'rgba(255,255,255,0.05)', position: 'relative', borderRadius: '4px', overflow: 'hidden' }}>
@@ -80,31 +102,39 @@ const LakeCard = ({ lake, language }: { lake: Lake, language: Language }) => {
<div style={{ fontSize: '2rem', fontWeight: 'bold' }}>{lake.level} <span style={{ fontSize: '1rem', fontWeight: 'normal', color: 'var(--text-muted)' }}>m n.m.</span></div>
</div>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<CircularProgress value={lake.capacity} size={70} strokeWidth={6} />
<div>
<div style={{ fontSize: '1.25rem', fontWeight: 'bold' }}>{lake.capacity > 0 ? `${lake.capacity}%` : 'N/A'} / <span style={{ fontSize: '1rem', color: 'var(--text-muted)', fontWeight: 'normal' }}>{lake.volume} mil. m³</span></div>
<div style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Volume</div>
<div style={{ fontSize: '1.25rem', fontWeight: 'bold' }}>
<span style={{ color: lake.capacity >= 80 ? 'var(--color-green)' : lake.capacity < 40 ? 'var(--color-red)' : 'var(--text-main)' }}>
{lake.capacity > 0 ? `${lake.capacity}%` : 'N/A'}
</span>
</div>
{lake.storageDiff !== undefined && (
<div style={{ fontSize: '0.8rem', color: lake.storageDiff >= 0 ? 'var(--color-green)' : 'var(--color-red)', fontWeight: 500 }}>
{lake.storageDiff > 0 ? '+' : ''}{lake.storageDiff.toFixed(2)} m
</div>
)}
</div>
</div>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ flex: 1, height: '40px', marginRight: '2rem' }}>
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={chartData}>
<defs>
<linearGradient id="colorSpark" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="var(--color-cyan)" stopOpacity={0.8}/>
<stop offset="95%" stopColor="var(--color-cyan)" stopOpacity={0}/>
<stop offset="5%" stopColor="var(--color-cyan)" stopOpacity={0.8} />
<stop offset="95%" stopColor="var(--color-cyan)" stopOpacity={0} />
</linearGradient>
</defs>
<Area type="monotone" dataKey="value" stroke="var(--color-cyan)" fillOpacity={1} fill="url(#colorSpark)" />
</AreaChart>
</ResponsiveContainer>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', fontSize: '0.85rem' }}>
<div style={{ display: 'flex', gap: '0.5rem' }}>
<FiTrendingUp color="var(--color-green)" />
@@ -120,9 +150,55 @@ const LakeCard = ({ lake, language }: { lake: Lake, language: Language }) => {
);
};
const SmallLakeCard = ({ lake, isFav, onToggleFav }: { lake: Lake, isFav: boolean, onToggleFav: (id: string) => void }) => {
const navigate = useNavigate();
return (
<div
className="kpi-card"
onClick={() => navigate(`/${slugify(lake.name)}`)}
style={{ cursor: 'pointer', padding: '1rem', display: 'flex', flexDirection: 'column', gap: '0.5rem', position: 'relative' }}
>
{/* Star button */}
<button
onClick={(e) => { e.stopPropagation(); onToggleFav(lake.id); }}
title={isFav ? 'Odepnout' : 'Připnout jako oblíbené'}
style={{
position: 'absolute', top: '0.6rem', right: '0.6rem',
background: 'none', border: 'none', cursor: 'pointer',
color: isFav ? '#f59e0b' : 'var(--text-muted)',
opacity: isFav ? 1 : 0.4,
transition: 'color 0.2s, opacity 0.2s, transform 0.15s',
padding: '2px',
display: 'flex', alignItems: 'center',
zIndex: 2,
}}
onMouseOver={(e) => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.transform = 'scale(1.2)'; }}
onMouseOut={(e) => { e.currentTarget.style.opacity = isFav ? '1' : '0.4'; e.currentTarget.style.transform = 'scale(1)'; }}
>
<FiStar size={14} fill={isFav ? '#f59e0b' : 'none'} />
</button>
<div style={{ fontSize: '0.85rem', fontWeight: 'bold', paddingRight: '1.5rem', lineHeight: 1.2 }}>{lake.name}</div>
<div style={{ fontSize: '1.1rem', fontWeight: 'bold', color: 'var(--color-cyan)' }}>{lake.level} <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)', fontWeight: 'normal' }}>m n.m.</span></div>
<div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>
<span style={{ color: lake.capacity >= 80 ? 'var(--color-green)' : lake.capacity < 40 ? 'var(--color-red)' : 'var(--text-muted)', fontWeight: 600 }}>
{lake.capacity > 0 ? `${lake.capacity}%` : 'N/A'}
</span>
{lake.storageDiff !== undefined && (
<span style={{ color: lake.storageDiff >= 0 ? 'var(--color-green)' : 'var(--color-red)', marginLeft: '4px' }}>
({lake.storageDiff > 0 ? '+' : ''}{lake.storageDiff.toFixed(2)} m)
</span>
)}
</div>
</div>
);
};
const LakesOverview = ({ language }: Props) => {
const [lakes, setLakes] = useState<Lake[]>([]);
const [sortBy, setSortBy] = useState<'name' | 'level' | 'capacity' | 'inflow'>('name');
const { isFavorite, toggleFavorite, favorites } = useFavorites();
useEffect(() => {
fetch('/data/lakes_index.json')
@@ -131,8 +207,9 @@ const LakesOverview = ({ language }: Props) => {
.catch(err => console.error(err));
}, []);
const priorityLakes = lakes.filter(l => l.priority);
const otherLakes = lakes.filter(l => !l.priority);
const favoriteLakes = lakes.filter(l => isFavorite(l.id));
const priorityLakes = lakes.filter(l => l.priority && !isFavorite(l.id));
const otherLakes = lakes.filter(l => !l.priority && !isFavorite(l.id));
otherLakes.sort((a, b) => {
if (sortBy === 'name') return a.name.localeCompare(b.name);
@@ -143,8 +220,8 @@ const LakesOverview = ({ language }: Props) => {
});
const sortButtonStyle = (type: string) => ({
background: 'none', border: 'none',
color: sortBy === type ? 'var(--text-main)' : 'var(--text-muted)',
background: 'none', border: 'none',
color: sortBy === type ? 'var(--text-main)' : 'var(--text-muted)',
cursor: 'pointer', fontSize: '0.85rem'
});
@@ -164,27 +241,47 @@ const LakesOverview = ({ language }: Props) => {
</div>
</div>
{/* Favorites section */}
{favoriteLakes.length > 0 && (
<section>
<h2 style={{ fontSize: '1.1rem', fontWeight: 'bold', marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<FiStar size={16} fill="#f59e0b" color="#f59e0b" /> Oblíbená ({favoriteLakes.length})
</h2>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
gap: '1.5rem'
}}>
{favoriteLakes.map(lake => (
<LakeCard key={lake.id} lake={lake} language={language} isFav={true} onToggleFav={toggleFavorite} />
))}
</div>
</section>
)}
{priorityLakes.length > 0 && (
<section>
<h2 style={{ fontSize: '1.1rem', fontWeight: 'bold', marginBottom: '1rem' }}>Priority Reservoirs</h2>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
gap: '1.5rem'
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
gap: '1.5rem'
}}>
{priorityLakes.map(lake => <LakeCard key={lake.id} lake={lake} language={language} />)}
{priorityLakes.map(lake => <LakeCard key={lake.id} lake={lake} language={language} isFav={false} onToggleFav={toggleFavorite} />)}
</div>
</section>
)}
<section>
<h2 style={{ fontSize: '1.1rem', fontWeight: 'bold', marginBottom: '1rem' }}>Other Reservoirs ({otherLakes.length})</h2>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
gap: '1rem'
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
gap: '1rem'
}}>
{otherLakes.map(lake => <LakeCard key={lake.id} lake={lake} language={language} />)}
{otherLakes.map(lake => (
<SmallLakeCard key={lake.id} lake={lake} isFav={isFavorite(lake.id)} onToggleFav={toggleFavorite} />
))}
</div>
</section>
</div>
src/components/Sidebar.tsx
+28 -3
View File
@@ -2,6 +2,7 @@ import { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { FiDroplet, FiStar, FiMap, FiSettings, FiChevronLeft, FiChevronRight, FiDatabase } from 'react-icons/fi';
import { type Language, t } from '../translations';
import { useFavorites } from '../hooks/useFavorites';
interface Props {
language: Language;
@@ -15,10 +16,11 @@ const Sidebar = ({ language, onOpenSettings, isMobileMenuOpen, onCloseMobileMenu
const navigate = useNavigate();
const location = useLocation();
const dict = t[language].sidebar;
const { favorites } = useFavorites();
const isOverview = location.pathname === '/';
const isFavoritesPage = location.pathname === '/favorites';
const isMap = location.pathname === '/map';
const isDetail = !isOverview && !isMap;
const handleNavigate = (path: string) => {
navigate(path);
@@ -49,14 +51,37 @@ const Sidebar = ({ language, onOpenSettings, isMobileMenuOpen, onCloseMobileMenu
</div>
<div className="nav-links">
<div className={`nav-item ${isDetail ? 'active' : ''}`} onClick={() => handleNavigate('/lipno-1')}>
<FiStar />
{/* Favourites */}
<div className={`nav-item ${isFavoritesPage ? 'active' : ''}`} onClick={() => handleNavigate('/favorites')} style={{ position: 'relative' }}>
<FiStar fill={favorites.length > 0 ? '#f59e0b' : 'none'} color={favorites.length > 0 ? '#f59e0b' : 'currentColor'} />
<span className="sidebar-text">{dict.favorites}</span>
{favorites.length > 0 && (
<span style={{
marginLeft: 'auto',
backgroundColor: '#f59e0b',
color: '#000',
borderRadius: '999px',
fontSize: '0.7rem',
fontWeight: 'bold',
minWidth: '18px',
height: '18px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '0 5px',
}}>
{favorites.length}
</span>
)}
</div>
{/* Lakes & Reservoirs */}
<div className={`nav-item ${isOverview ? 'active' : ''}`} onClick={() => handleNavigate('/')}>
<FiDatabase />
<span className="sidebar-text">{dict.lakes}</span>
</div>
{/* Map */}
<div className={`nav-item ${isMap ? 'active' : ''}`} onClick={() => handleNavigate('/map')}>
<FiMap />
<span className="sidebar-text">{dict.map}</span>
src/hooks/useFavorites.tsx
+46
View File
@@ -0,0 +1,46 @@
import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
const STORAGE_KEY = 'hladinator_favorites';
const loadFavorites = (): string[] => {
try {
const raw = localStorage.getItem(STORAGE_KEY);
return raw ? JSON.parse(raw) : [];
} catch {
return [];
}
};
interface FavoritesContextType {
favorites: string[];
toggleFavorite: (id: string) => void;
isFavorite: (id: string) => boolean;
}
const FavoritesContext = createContext<FavoritesContextType>({
favorites: [],
toggleFavorite: () => {},
isFavorite: () => false,
});
export const FavoritesProvider = ({ children }: { children: ReactNode }) => {
const [favorites, setFavorites] = useState<string[]>(loadFavorites);
const toggleFavorite = useCallback((id: string) => {
setFavorites(prev => {
const next = prev.includes(id) ? prev.filter(f => f !== id) : [...prev, id];
localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
return next;
});
}, []);
const isFavorite = useCallback((id: string) => favorites.includes(id), [favorites]);
return (
<FavoritesContext.Provider value={{ favorites, toggleFavorite, isFavorite }}>
{children}
</FavoritesContext.Provider>
);
};
export const useFavorites = () => useContext(FavoritesContext);
src/main.tsx
+4 -1
View File
@@ -1,13 +1,16 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { FavoritesProvider } from './hooks/useFavorites'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<BrowserRouter>
<App />
<FavoritesProvider>
<App />
</FavoritesProvider>
</BrowserRouter>
</StrictMode>,
)