working on getting input to respond correctly.

components/LengthInput.tsx

@@ -1,3 +1,5 @@
+import { dimensions_t, length_t } from "@/lib/product";
+import { Length } from "convert";
 import { Measure, Unit, length as en_length, area as en_area } from "enheter";
 import { useState } from "react";
 import { Button, StyleSheet, Text, TextInput, View } from "react-native";
@@ -7,7 +9,7 @@ export type t_length_unit = "foot" | "inch"
 export type mode = "length" | "area"
 
 export type LengthInputProps = {
-    onMeasurementSet?: (length: Measure<"length" | "area">) => any,
+    onMeasurementSet?: (d : dimensions_t) => any,
     isArea?: boolean,
 }
 
@@ -15,7 +17,7 @@ export function MeasurementInput(props: LengthInputProps) {
 
     const [length, setLength] = useState(null as null | number);
     const [width, setWidth] = useState(null as null | number);
-    const [unit, setUnit] = useState("foot" as t_length_unit);
+    const [unit, setUnit] = useState("foot" as Length);
 
     function doSetLength(text: string) {
         const value = parseFloat(text);

components/ProductEditor.tsx

@@ -20,7 +20,6 @@ export const ProductEditor = ({}) => {
 
     return (
         <SafeAreaView>
-            <Text>Hello</Text>
             <FlatList
             data={products}
             renderItem={

components/ProductEditorItem.tsx

@@ -1,8 +1,8 @@
 import { Product } from "@/lib/product"
 import { useState } from "react"
 import { FlatList, StyleSheet, Text, TouchableHighlight, View } from "react-native"
-import {ProductAttributeEditor} from "./ProductAttributeEditor";
-import React from "react";
+import { ProductAttributeEditor } from "./ProductAttributeEditor";
+import { TextInput } from "react-native-gesture-handler";
 
 export type ProductUpdatedFunc = (product_id: string, product: Product) => any;
 export type ProductDeletedFunc = (product_id: string) => any;
@@ -16,6 +16,14 @@ export type ProductEditorItemProps = {
 export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted }: ProductEditorItemProps) => {
 
     const [showAttributes, setShowAttributes] = useState(false);
+    const [doEditName, setDoEditName] = useState(false);
+    const [newName, setNewName] = useState(product.attributes.name || `Product ${product.id}`);
+
+    function updateName(name : string) {
+        setNewName(name);
+        product.attributes["name"] = name;
+        onProductUpdated && onProductUpdated(product.id, product);
+    }
 
     function onAttributeChanged(product_id: string, key: string, newValue: string) {
         product.attributes[key] = newValue;
@@ -34,7 +42,7 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
                 onPress={() => setShowAttributes(!showAttributes)}
                 aria-label="Product Item"
             >
-                <Text style={styles.product}>{product.attributes.name || `Product ${product.id}`} </Text>
+                <Text style={styles.product}>{newName}</Text>
             </TouchableHighlight>
             {showAttributes &&
                 (

components/ProductTile.tsx

@@ -1,7 +1,6 @@
 import { Product } from "@/lib/product"
-import { ImageBackground, StyleProp, StyleSheet, Text, ViewStyle } from "react-native";
+import { ImageBackground, StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native";
 import { AnimatedStyle } from "react-native-reanimated";
-import { View } from "react-native-reanimated/lib/typescript/Animated";
 
 export type OnProductSelectedFunc = (product : Product) => any;
 
@@ -21,14 +20,14 @@ const FALLBACK_IMAGE = "";
 export function ProductTile ({product, onProductSelected, style} : ProductTileProps) {
     const src = product.attributes.image || FALLBACK_IMAGE;
     return (
-        <View style={style?.tile}>
+        <View style={styles.tile}>
             <ImageBackground
                 src={src}
                 resizeMode="cover"
                 style={styles.image}
             >
                 <Text style={styles.text}>{product.attributes.name || `Product ${product.id}`}</Text>
-                <Text style={styles.text}>{ product.pricePerUnit.toString() } / {product.measure.value} {product.measure.unit.symbol} </Text>
+                <Text style={styles.text}>{ product.priceDisplay } </Text>
             </ImageBackground>
         </View>
     );
@@ -40,5 +39,8 @@ const styles = StyleSheet.create({
     },
     text: {
 
+    },
+    tile: {
+
     },
 })