Feat/add item quantity #46
Conversation
… It's been updated to include an additional parameter, itemQuantity. This allows for specifying the quantity of the item being added to the list. The func now creates a new item document with the provided quantity, enhancing the functionality of adding items to the list.
…on in firebase.ts
…tsx in the `AddItemForm.tsx` file. Add itemQuantity and setItemQuantity state var and state func with the useState hook. Console log item quanity of 1 upon successful addition. Set item quantity state to 1 upon success. Update return string interpolation in toast to show itemQuantity as well.
…it to handleItemQuantityChange func. Add and revise console logs for item quantity entered, and item quantity added.
…s property represents the quantity of the item. It is of type "number". Render item.itemQuantity into ListItem.tsx view.
…ityForm component. - Add a quantity input field to the AddItemForm.tsx component with the type "number". - Create a new component called ItemQuantityForm.tsx to handle the quantity input. - The ItemQuantityForm component includes a form with an input field for the quantity. - The quantity input field has a maximum value of 100. - The quantity input field is initially set to 1. - The quantity input field can be edited and saved. - The saved quantity is passed to the parent component using a callback function. - Console logs are added to track the quantity entered and saved.
…tityForm component from "./forms/ItemQuantityForm". Replace the display of item quantity with the ItemQuantityForm component. Implement the editItemQuantity function to handle changes in item quantity.
…trieves the old item quantity from Firebase and logs it to the console. This function will be used to update the quantity of an item in the shopping list.
…tes object, and updateDoc method call to update the itemQuantity.
…gging of item quantity after successful update in try block.
- Modified `editItemQuantity` function in ListItem.tsx to accept the new quantity and pass it to the `updateItemQuantity` function. - Updated `updateItemQuantity` function in firebase.ts to accept the new quantity as a parameter and update the item with this new quantity. - Ensured that the new quantity is correctly passed and updated in firebase.
- In the ListItem component, the ItemQuantityForm component is updated to pass the item object as a prop. - In the ItemQuantityForm component, the initial item quantity is set to the item's itemQuantity property. - This change ensures that the ItemQuantityForm displays the correct initial quantity for each item.
…item quantity is null. This change initializes the item quantity state with the value from the item prop, allowing for proper rendering and editing of the quantity.
…ent. If quantity is 0, deleteItemHandler is called!
|
Visit the preview URL for this PR (updated for commit 5427158): https://tcl-77-smart-shopping-list--pr46-feat-add-item-quanti-g2sg65a4.web.app (expires Thu, 10 Oct 2024 00:02:17 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: b77df24030dca7d8b6561cb24957d2273c5e9d72 |
| @@ -83,6 +84,30 @@ export function ListItemCheckBox({ item, listPath }: Props) { | |||
| } | |||
| }; | |||
|
|
|||
There was a problem hiding this comment.
suggestion: i think we could move this logic for updating the item quantity into the ItemQuantityForm. reading through the code right now it feels like there is some duplication of logic, kind of adding logic to components to make another component work.
moving this to be handled by the ItemQuantityForm it could make it a bit more reusable because we could just place it into the location it is needed and not write logic within that component to get it to work. it would be like this check box and other forms the logic to do the updating and steps the form is doing is housed within the logic.
To get the item prop needed with these changes on the list view we could try moving the <ItemQuantityForm saveItemQuantity={editItemQuantity} item={item} /> x{" "} call into the List component with this logic
{filteredListItems.map((item) => (<ListItemCheckBox key={item.id} item={item} listPath={listPath} />))}
and I believe it would get the same result.
There was a problem hiding this comment.
Great idea, that way the logic outside of firebase for quantity is all referable in one place.
…emQuantityForm in AddItemForm underneath Item name input.
…unc of ListItemCheckBox component.
…port for consistency and readability!
…mponent and AddItemForm component!
…from a nullable type to using a logical operator. If there's an item, then show item.itemQuantity. Else, set to "1".
…ss than 1 in AddItemForm component.
…rm component. Set "min" attribute in ItemQuantityForm attribute to 1.
…ox component when quantity === 0.
…et default item quantity to 1 if it is less than 1.
…ntity is less than 1. Don't set quantity back to 1.
…nc of ListItemCheckBox component
…ItemQuantity to prevent confusion, and to explicitly describe what func does. Re-write console logs to be more specific about what is happening in each file.
…ore descriptive. In ItemQuantityForm, set the edit state to true if itemQuality is less than 1, and just return. This way user is prompted to enter valid input.
…ding a new item's quantity. Update AddItemForm component to use addedQuantity instead of itemQuantity. - Renamed the state variable 'itemQuantity' to 'addedQuantity' in the AddItemForm component to improve clarity and consistency. - Updated the handleItemQuantityChange function to set the 'addedQuantity' state based on the input value. - Updated the handleSubmit function to use the 'addedQuantity' state when adding the item to the list. - Updated the error message in the AddItemForm component to display the correct 'addedQuantity' value when adding the item fails. - Reset the 'addedQuantity' state to 1 after successfully adding the item to the list. - Removed the ItemQuantityForm component and replaced it with a simple input element for item quantity.
…when in edit mode.
…h. Update styles and dependencies. - Update _variables.scss with new color variables - Update vite.config.js to configure svgr plugin - Add new views: About, UnauthenticatedHome, AuthenticatedHome - Update index.tsx to import bootstrap and index.scss - Update components/index.ts to import AuthenticatedNavBar and UnauthenticatedNavBar - Update package.json to add bootstrap and react-bootstrap dependencies - Update index.html to include bootstrap.min.css - Update SingleList.tsx to import Button and update styles - Update App.tsx to import About and update routes - Add AuthenticatedNavBar.scss and AuthenticatedNavBar.tsx - Add AuthenticatedHome.tsx and UnauthenticatedNavBar.tsx - Update AddItemForm.tsx to import Button and Form from react-bootstrap - Update Home.tsx to import AuthenticatedHome and UnauthenticatedHome - Update FilterListInput.tsx to import Button, Form, and InputGroup from react-bootstrap
|
I was able to merge other pull requests into this pull request as well, and refactor as needed! Still a bit of refactoring to do! |
…r. Remove lablel, but keep aria label of checkbox.
|
Ope! I forgot to put in a screenshot of what the /list screen looks like now that the item.name interpolation is removed from the label element.
|
| @@ -80,6 +81,26 @@ export function ListItemCheckBox({ item, listPath }: Props) { | |||
| } | |||
| }; | |||
|
|
|||
| const editItemQuantity = async (quantity: number) => { | |||
There was a problem hiding this comment.
More a comment for later if we ever do a refactor. It may still be beneficial to move the logic for updating the item quantity to be contained in the ItemQuanitiyForm
Nonblocking!
Awesome functionality to add to the app!
For an example of how to fill this template out, see this Pull Request.
Description
This code adds "item quantity functionality"!
Related Issue
Acceptance Criteria
Type of Changes
Use one or more labels to help your team understand the nature of the change(s) you’re proposing. E.g.,
bug fixorenhancementare common ones.Updates
Before
After
Testing Steps / QA Criteria
Change Quantity!
1 Is The Default Number!
Delete Item!