[ISSUE 21] - Display more item information about a selected item #76
Conversation
…omponent even more reusable; implement IconWithTooltip and InfoCard in ListItem component; update the way props are being passed into IconWithTooltip
|
Visit the preview URL for this PR (updated for commit a82d8fa): https://tcl-75-smart-shopping-list--pr76-nk-display-more-item-j9ov59d9.web.app (expires Fri, 25 Oct 2024 16:33:18 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 1f1fd53c369e1fa31e15c310aa075b4e8f4f8dde |
- move calculateIsPurchased into a utils folder; - rename urgency statses kindOfSoon to "kind of soon" and notSoon to "not soon"; - update UrgencyStatusIcon to be a component of its own, without using IconWithTooltip, as it was causing errors; - use IconWithTooltip to display Delete and More Information icons.
…ransition to Collapse
…n is being displayed upon clicking More Information button
kweeuhree
requested review from
ahsanatzapier,
jendevelops and
deeheber
as code owners
…-shopping-list into nk-display-more-item-information
…eInterval into a utils file; update utils exports
…ed item; pass averagePurchaseInterval to ListItem
|
Hey, @kweeuhree! The preview for this PR seems to be opening to a blank page, can you have a peek if you're able to observe the same? It seems like we have a console message that states "Uncaught ReferenceError: Cannot access 'Tn' before initialization" |
I can see the same issue when I open the preview, but I cannot reproduce it locally. I tried searching 'Tn' locally and couldn't find anything relevant. I am not getting this error on my side. I will look into this further, thank you! |
There was a problem hiding this comment.
@kweeuhree I pulled this down locally, and didn't get the error mentioned above. Everything looked good to me.
However, the preview link didn't work, and the error I received was related to "On" not "Tn", but I couldn't find that variable anywhere in the code. I wonder if that link is updated for the most recent commit though?
|
As I suggested on Slack, maybe change the white bg? The contrast was a little harsh on my eyes |
Description
This code defines a React component, InfoCard, that dynamically displays detailed information about a specific item. By leveraging Material UI components, the card presents key data such as the total number of purchases, the item's creation date, its last purchase date, and the estimated next purchase date.
Features:
This PR introduces a new feature: the average purchase interval calculation. This provides more meaningful insights into user shopping patterns by calculating the average time between purchases based on several factors, such as past estimates, days since the last purchase, and the estimated days until the next purchase.
getAveragePurchaseInterval Function:
This function calculates the average of the known purchase intervals: the last estimated interval, the days since the last purchase, and the estimated days until the next purchase.
The new logic builds upon existing purchase interval calculations, ensuring seamless integration with the rest of the application. Existing estimation functionality is preserved, but enhanced with these additional data points.
Reflection on Material UI:
Working with Material UI has showcased its flexibility and ease of use. Components like Card, Collapse, and Typography simplify the process of building intuitive and responsive interfaces. This project has deepened my appreciation for Material UI’s concise, yet powerful API, making it an enjoyable tool for creating efficient, user-friendly components.
Related Issue
Closes #66
Acceptance Criteria
Type of Changes
enhancementUpdates
Before
After
Newly added item:
Popular item:
Testing Steps / QA Criteria