add task solution #1686
add task solution #1686
Conversation
src/App.tsx
Outdated
| const [amount, setAmount] = useState(0); | ||
| const [color, setColor] = useState(''); | ||
|
|
||
| <button type="button" data-cy="all-button"> | ||
| Load all goods | ||
| </button> | ||
| useEffect(() => { | ||
| getGoods(amount, color) | ||
| .then(setGoods); | ||
| }, [amount, color]); |
There was a problem hiding this comment.
remove amount and color state variables. try to create 3 separate function by using useCallback
There was a problem hiding this comment.
I still don`t understand how to use it, can I just code it in useEffect?..
src/api/goods.ts
Outdated
| } | ||
|
|
||
| export const get5First = () => { | ||
| export const getGoods = (amount: number, color: string) => { |
There was a problem hiding this comment.
just create 2 separate functions: get5First and getRedGoods
src/App.tsx
Outdated
| useEffect(() => { | ||
| if (selected5First) { | ||
| get5First() | ||
| .then(setGoods); | ||
| } else if (selectedRed) { | ||
| getRedGoods() | ||
| .then(setGoods); | ||
| } else { | ||
| getAll() | ||
| .then(setGoods); | ||
| } | ||
| }, [goods]); |
There was a problem hiding this comment.
Redundant here. Look, you can creat functions for each button and wrapped it on useCallback as Anastasia note in previous review. Or alternative You can create memoize value to prevent make request each time when you click on button, for example:
const allTodos = useMemo(() => getAll(), []) const firstFiveTodos= useMemo(() => get5First(), [])
The same for first 5 goods and red goods. And after that you can set this memoized values to state by clicking corresponding button
src/App.tsx
Outdated
| const [selected5First, setSelected5First] = useState(false); | ||
| const [selectedRed, setSelectedRed] = useState(false); |
DEMO LINK