User Inventory (My Products)
Relevant source files
The following files were used as context for generating this wiki page:
The User Inventory (My Products) module is a dedicated component within the application that allows authenticated users to manage and view the items they have listed for sale. It serves as a personal dashboard where users can monitor their active listings, access detailed views of their items, and navigate to the creation interface for new listings if no products are currently present.
This feature is integrated with the broader product management system, utilizing a centralized context for data persistence and specialized API services for backend communication. It ensures that users only interact with their own data by filtering the global product state based on the authenticated user's unique identifier.
Architecture and Data Flow
The module relies on the ProductContext to retrieve and filter product data. The data flow begins with the useAuth hook providing the current user's identity, which is then passed to a filtering function that isolates products where the seller.id matches the user's ID.
The diagram above illustrates how the User Inventory component consumes data from multiple contexts to render a filtered list of user-owned items.
Sources: Front/src/pages/myProducts.jsx:10-14, Front/src/routes/appRoutes.jsx:31-33
Key Logic and Functions
The core logic for isolating a user's inventory is encapsulated within the getUserProducts helper function provided by the application's routing and context layer.
| Function | Location | Description |
|---|---|---|
getUserProducts(userId) | appRoutes.jsx | Filters the global products array to return only items belonging to the specified userId. |
getProductById(id) | appRoutes.jsx | Retrieves details for a specific product for navigation to the detail view. |
useProducts() | appRoutes.jsx | Custom hook to access product state and management functions. |
Sources: Front/src/routes/appRoutes.jsx:17-33
Component Structure
The MyProducts component utilizes react-bootstrap for its layout and framer-motion for interactive animations. It handles two primary states: an empty state and a populated inventory state.
Empty State Management
If the products array returned by getUserProducts is empty, the component renders a call-to-action (CTA). This includes a visual icon (bi-box-seam) and a button that navigates the user to the /publish route.
Sources: Front/src/pages/myProducts.jsx:19-35
Inventory Rendering
When products are present, they are displayed in a responsive grid (Row and Col). Each item is wrapped in a motion.div for hover effects and contains a Card displaying:
- Image: Rendered with an object-fit of cover and a fixed height.
- Identity: Product name and description.
- Pricing: The price formatted with a primary color style.
- Actions: A button to navigate to the detailed product view.
Sources: Front/src/pages/myProducts.jsx:37-75
Backend Interaction and API Services
While the UI currently uses a context-based approach for immediate state, the productosService provides the necessary infrastructure for persisting inventory changes to the backend.
Product Data Model
Based on the API definitions, products are structured with the following fields:
| Field | Type | Description |
|---|---|---|
id / ProductoID | number | Unique identifier for the product. |
nombre | string | The display name of the item. |
descripcion | string | Detailed text describing the product. |
precio | number | Numeric value for the cost. |
disponible | boolean | Status indicating if the item is still for sale. |
Sources: Front/src/services/api.ts:107-111, Back/Alumnos/Api/Comun/Utilidades/MapeoDtos.cs:25-32
API Operations
The productosService provides methods used to manage the lifecycle of items within a user's inventory:
This sequence shows the intended flow for modifying or removing inventory items via the service layer.
Sources: Front/src/services/api.js:103-125, Front/src/services/api.ts:121-135
Integration with Product Creation
The inventory is populated via the PublishProduct component. When a user submits the form, the data is processed and assigned to the current user before being added to the global state accessed by the inventory page.
// From appRoutes.jsx
const handleAddProduct = (newProduct) => {
const productToAdd = {
id: Date.now(),
...newProduct,
seller: {
id: user.id,
name: user.name
}
};
setProducts(prevProducts => [productToAdd, ...prevProducts]);
};
Sources: Front/src/routes/appRoutes.jsx:21-30, Front/src/pages/publishProduct.jsx:65-98
Summary
The User Inventory (My Products) system provides a seamless interface for users to oversee their marketplace contributions. By leveraging React Context and specialized services, it maintains a clear separation between a user's own listings and the general marketplace while providing the necessary hooks for full CRUD (Create, Read, Update, Delete) operations.