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:
@@ -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"
|
||||
}
|
||||
]);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user