|
| 1 | +import { useEffect } from "react"; |
| 2 | + |
1 | 3 | import { useAppContext } from "../contexts/AppContext"; |
2 | 4 | import { useCategories } from "../hooks/useCategories"; |
3 | 5 |
|
4 | | -let oldCategories = [] as string[]; |
5 | | - |
6 | 6 | const CategoryList = () => { |
7 | 7 | const { category, setCategory } = useAppContext(); |
8 | 8 | const { fetchedCategories, loading, error } = useCategories(); |
9 | 9 |
|
| 10 | + useEffect(() => { |
| 11 | + setCategory(fetchedCategories[0]); |
| 12 | + }, [fetchedCategories]); |
| 13 | + |
10 | 14 | if (loading) return <div>Loading...</div>; |
11 | 15 |
|
12 | 16 | if (error) return <div>Error occured: {error}</div>; |
13 | 17 |
|
14 | | - // NOTE: set the first element as selected |
15 | | - // switching between categories |
16 | | - // Just a temporary solution. |
17 | | - // If you've better solution, I would appreciate it :) |
18 | | - if (oldCategories !== fetchedCategories) { |
19 | | - setCategory(fetchedCategories[0]); |
20 | | - oldCategories = fetchedCategories; |
21 | | - } |
22 | | - |
23 | 18 | return ( |
24 | 19 | <ul role="list" className="categories"> |
25 | 20 | {fetchedCategories.map((name, idx) => ( |
|
0 commit comments