Added pagination and add/edit/delete item #51
Conversation
| getData(); | ||
| }, [backend, category]); | ||
| loadData(); | ||
| }, [backend, category, currentPageNum, data]); |
There was a problem hiding this comment.
React Hook useEffect has a missing dependency: 'loadInfo'. Either include it or remove the dependency array.
| } | ||
| }; | ||
| getData(); | ||
| }, [isOpen]); |
There was a problem hiding this comment.
React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array. If 'setCategoryData' needs the current value of 'data', you can also switch to useReducer instead of useState and read 'data' in the reducer.
| // useEffect(() => { | ||
| // const getData = async () => { | ||
| // try { | ||
| // const response = await backend.get(`/value/filter/${category}`); | ||
| // setData(response.data); | ||
| // console.log(response.data); | ||
| // } catch (error) { | ||
| // console.error('Error getting donation items:', error); | ||
| // setData([]); | ||
| // } | ||
| // }; | ||
| // getData(); | ||
| // }, [backend]); |
|
|
||
| return ( | ||
| <> | ||
| <Button onClick={onOpen}>Add Item<AddIcon/></Button> |
| {/* TODO */} | ||
| {/* When we onClick EditIcon, setData(item), and then set isOpen to True to open the modal */} |
There was a problem hiding this comment.
delete comments if you're done with this
| ); | ||
| }; | ||
|
|
||
| DonationItems.propTypes = { | ||
| category: PropTypes.string.isRequired, | ||
| category: PropTypes.string |
There was a problem hiding this comment.
category should be required unless there is a reason you got rid of this
| await backend.put(`/value/${data["item_id"]}`, { | ||
| 'itemName': typeData, | ||
| 'quantityType': weightData, | ||
| 'price': priceData, | ||
| 'category': categoryData, | ||
| }); |
There was a problem hiding this comment.
add validation to see if any of these values are empty and don't pass any empty values
| }); | ||
| } | ||
| const dataResponse = backend.get( | ||
| `/value/?itemsLimit=10&pageNum=${currentPageNum}`, |
There was a problem hiding this comment.
make this do the get all GET request also. otherwise we have a problem where when you add the 11th item (or like if you have a full page and add another item), it won't be loaded into the tab until the page is reloaded.
| if (isOpen && data) { | ||
| setCategoryData(data['category']); | ||
| setTypeData(data['item_name']); | ||
| setWeightData(data['quantity_type']); | ||
| setPriceData(data['price']); | ||
| } |
There was a problem hiding this comment.
make sure that the data present isn't the data that was just passed to the post request. otherwise we get a little bug where when you create an item and then click add item, it populates the modal with the data from the last item you made.
There was a problem hiding this comment.
maybe when you call the post request what you can do is call all the set useStates to make the data empty
| const changePage = async () => { | ||
| const formResponse = await backend.get( | ||
| `/value/?itemsLimit=10&pageNum=${currentPageNum}`, | ||
| ); | ||
| setData(formResponse.data); | ||
| }; |
There was a problem hiding this comment.
make sure to pass the category to the route (a comment is left on the backend to change the route accordingly) so that it only grabs the corresponding data for the filter
| getData(); | ||
| }, [backend, category]); | ||
| loadInfo(); | ||
| }, [currentPageNum, category]); |
There was a problem hiding this comment.
React Hook useEffect has a missing dependency: 'loadInfo'. Either include it or remove the dependency array.
closes #42