PliWould/components/ProductEditor.tsx

77 lines
2.7 KiB
TypeScript

import { useAppDispatch, useAppSelector } from "@/app/store"
import { addAttribute, changeKey, deleteAttribute, deleteProduct, selectProductIds, selectProducts, updateAttribute, updateDimensions, updatePrice, updateProduct } from "@/features/product/productSlice"
import { Id, Product, dimensions_t } from "@/lib/product";
import { FlatList, SafeAreaView, StyleSheet, Text } from "react-native";
import { ProductEditorItem } from "./ProductEditorItem";
export const ProductEditor = ({}) => {
const products = useAppSelector(selectProducts) as Product [];
const dispatch = useAppDispatch();
function onProductDeleted(product_id: string) {
dispatch(deleteProduct(product_id));
}
function onAttributeDelete(product_id: string, attribute: string) {
dispatch(deleteAttribute({product_id: product_id, attribute}));
}
function onAttributeUpdated(product_id: string, attribute: string, value: string) {
dispatch(updateAttribute({product_id, attributeKey: attribute, attributeValue: value}));
}
function onAttributeAdded(product_id: Id) {
console.log("Adding attribute to %s", product_id);
dispatch(addAttribute(product_id));
}
function onPriceUpdated(product_id: string, pricePerUnit: number) {
dispatch(updatePrice({product_id, pricePerUnit}));
}
function onAttributeKeyChanged(product_id : string, oldKey : string, newKey : string) {
dispatch(changeKey({product_id, oldKey, newKey}))
}
function onDimensionUpdated(product_id: string, dimensions: dimensions_t) {
dispatch(updateDimensions({product_id, dimensions}));
}
return (
<SafeAreaView>
<h1 style={styles.h1}>Edit Products</h1>
<FlatList
data={products}
keyExtractor={(p, i) => `product-${p.id}`}
renderItem={
({item}) => {
return (
<ProductEditorItem
product={item}
onProductDeleted={onProductDeleted}
onAttributeDeleted={onAttributeDelete}
onAttributeKeyChanged={onAttributeKeyChanged}
onAttributeUpdated={onAttributeUpdated}
onAttributeAdded={onAttributeAdded}
onPriceUpdated={onPriceUpdated}
onDimensionsUpdated={onDimensionUpdated}
/>
)
}
}
/>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
h1: {
textAlign: "center",
fontFamily: "sans-serif"
},
product: {
}
})