Make Product properties optional and improve safety

Updated the `Product` type in `product-service.ts` to make `price`, `colors`, and `priceSale` optional. Removed hardcoded values from the `getProducts` function, allowing for more flexible product creation. Enhanced the `ProductItem` component to safely access the `colors` property using optional chaining, defaulting to an empty array if undefined.
This commit is contained in:
2025-07-02 16:11:55 +02:00
parent 3be5cba323
commit 3d49f32175
2 changed files with 7 additions and 12 deletions

View File

@@ -1,11 +1,11 @@
export type Product = {
id: string;
name: string;
price: number;
price?: number;
status: string;
coverUrl: string;
colors: string[];
priceSale: number | null;
colors?: string[];
priceSale?: number;
};
/**
@@ -18,20 +18,14 @@ export function getProducts(): Promise<Product[]> {
{
id: '1',
name: "User Manager",
price: 0,
coverUrl: "/assets/images/product/product-default.webp",
status: "1.0.0",
colors: [],
priceSale: null
status: "1.0.0"
},
{
id: '2',
name: "Envelope Generator",
price: 0,
coverUrl: "/assets/images/product/product-default.webp",
status: "1.0.0",
colors: [],
priceSale: null
status: "1.0.0"
}
]);
}

View File

@@ -15,6 +15,7 @@ import { ColorPreview } from 'src/components/color-utils';
// ----------------------------------------------------------------------
// TODO: Add explanation part
export function ProductItem({ product }: { product: Product }) {
const renderStatus = (
<Label
@@ -86,7 +87,7 @@ export function ProductItem({ product }: { product: Product }) {
justifyContent: 'space-between',
}}
>
<ColorPreview colors={product.colors} />
<ColorPreview colors={product?.colors ?? []} />
{renderPrice}
</Box>
</Stack>