Spaces:
Sleeping
Sleeping
CarolinePascal commited on
fix(flags gone): fixing bug where flags disappear when clicking on an unflagged episode
Browse files
src/context/flagged-episodes-context.tsx
CHANGED
|
@@ -45,6 +45,7 @@ export const FlaggedEpisodesProvider: React.FC<{
|
|
| 45 |
children: React.ReactNode;
|
| 46 |
}> = ({ children }) => {
|
| 47 |
const [flagged, setFlagged] = useState<Set<number>>(new Set());
|
|
|
|
| 48 |
|
| 49 |
// Hydrate from sessionStorage after mount (avoids SSR/client mismatch)
|
| 50 |
useEffect(() => {
|
|
@@ -54,11 +55,15 @@ export const FlaggedEpisodesProvider: React.FC<{
|
|
| 54 |
} catch {
|
| 55 |
/* ignore */
|
| 56 |
}
|
|
|
|
| 57 |
}, []);
|
| 58 |
|
|
|
|
|
|
|
| 59 |
useEffect(() => {
|
|
|
|
| 60 |
saveToStorage(flagged);
|
| 61 |
-
}, [flagged]);
|
| 62 |
|
| 63 |
const toggle = useCallback((id: number) => {
|
| 64 |
setFlagged((prev) => {
|
|
|
|
| 45 |
children: React.ReactNode;
|
| 46 |
}> = ({ children }) => {
|
| 47 |
const [flagged, setFlagged] = useState<Set<number>>(new Set());
|
| 48 |
+
const [hydrated, setHydrated] = useState(false);
|
| 49 |
|
| 50 |
// Hydrate from sessionStorage after mount (avoids SSR/client mismatch)
|
| 51 |
useEffect(() => {
|
|
|
|
| 55 |
} catch {
|
| 56 |
/* ignore */
|
| 57 |
}
|
| 58 |
+
setHydrated(true);
|
| 59 |
}, []);
|
| 60 |
|
| 61 |
+
// Only persist after hydration so the initial empty set doesn't
|
| 62 |
+
// overwrite stored flags when the component remounts.
|
| 63 |
useEffect(() => {
|
| 64 |
+
if (!hydrated) return;
|
| 65 |
saveToStorage(flagged);
|
| 66 |
+
}, [flagged, hydrated]);
|
| 67 |
|
| 68 |
const toggle = useCallback((id: number) => {
|
| 69 |
setFlagged((prev) => {
|