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 = {
|
export type Product = {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
price: number;
|
price?: number;
|
||||||
status: string;
|
status: string;
|
||||||
coverUrl: string;
|
coverUrl: string;
|
||||||
colors: string[];
|
colors?: string[];
|
||||||
priceSale: number | null;
|
priceSale?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -18,20 +18,14 @@ export function getProducts(): Promise<Product[]> {
|
|||||||
{
|
{
|
||||||
id: '1',
|
id: '1',
|
||||||
name: "User Manager",
|
name: "User Manager",
|
||||||
price: 0,
|
|
||||||
coverUrl: "/assets/images/product/product-default.webp",
|
coverUrl: "/assets/images/product/product-default.webp",
|
||||||
status: "1.0.0",
|
status: "1.0.0"
|
||||||
colors: [],
|
|
||||||
priceSale: null
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '2',
|
id: '2',
|
||||||
name: "Envelope Generator",
|
name: "Envelope Generator",
|
||||||
price: 0,
|
|
||||||
coverUrl: "/assets/images/product/product-default.webp",
|
coverUrl: "/assets/images/product/product-default.webp",
|
||||||
status: "1.0.0",
|
status: "1.0.0"
|
||||||
colors: [],
|
|
||||||
priceSale: null
|
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
@@ -15,6 +15,7 @@ import { ColorPreview } from 'src/components/color-utils';
|
|||||||
|
|
||||||
// ----------------------------------------------------------------------
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
// TODO: Add explanation part
|
||||||
export function ProductItem({ product }: { product: Product }) {
|
export function ProductItem({ product }: { product: Product }) {
|
||||||
const renderStatus = (
|
const renderStatus = (
|
||||||
<Label
|
<Label
|
||||||
@@ -86,7 +87,7 @@ export function ProductItem({ product }: { product: Product }) {
|
|||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ColorPreview colors={product.colors} />
|
<ColorPreview colors={product?.colors ?? []} />
|
||||||
{renderPrice}
|
{renderPrice}
|
||||||
</Box>
|
</Box>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|||||||
Reference in New Issue
Block a user