made it look prettier. working on fixing product editor.

app/(tabs)/index.tsx

@@ -1,12 +1,13 @@
-import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData } from 'react-native';
+import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData, TextInput, FlatList } from 'react-native';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useAppSelector } from '../store';
 import { selectProducts } from '@/features/product/productSlice';
 import { Product, dimensions_t } from '@/lib/product';
-import { ProductTile } from '@/components/ProductTile';
 import { useEffect, useState } from 'react';
-import { TextInput, TouchableHighlight } from 'react-native-gesture-handler';
+import { TouchableHighlight } from 'react-native-gesture-handler';
+
+const fallbackImage = require("@/assets/images/board-stock-lightened-blurred.png");
 
 export default function HomeScreen() {
 
@@ -17,101 +18,83 @@ export default function HomeScreen() {
   const [width, setWidth] = useState("0");
   const [units, setUnits] = useState("in" as "ft" | "in");
 
-  function calculatePrice() {
+  useEffect(function () {
-    if (!activeProduct) {
+    const iv = setInterval(function () {
-      setPrice("0.00");
+      if (!activeProduct) return;
-      return;
+      const l = Number.parseInt(length);
+      const w = Number.parseInt(width);
+      console.log("l=%d, w=%d", l, w);
+      const u = units;
+      const d: dimensions_t = activeProduct.area ? { l, w, u } : { l, u };
+      const p = activeProduct.priceFor(d);
+      console.log("set price %s", p);
+      const s = p.toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      })
+      setPrice(s == "NaN" ? "0.00" : s);
+    }, 10);
+    return function () {
+      clearInterval(iv);
     }
-    const l = Number.parseInt(length);
+  }, [activeProduct, length, width]);
-    const w = Number.parseInt(width);
-    console.log("l=%d, w=%d", l, w);
-    const u = units;
-    const d : dimensions_t = activeProduct.area ? {l, w, u} : {l, u};
-    const p = activeProduct.priceFor(d);
-    console.log("set price %s", p);
-    const s = p.toLocaleString(undefined, {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    })
-    setPrice(s);
-  }
-
-  const onProductSelected = (product: Product) => {
-    setActiveProduct(product);
-    calculatePrice();
-  }
-
-  const onUnitPressed = (u : "ft" | "in") => {
-    setUnits(u);
-    calculatePrice();
-  }
-
-  const onLengthChanged = (value : string) => {
-    setLength(value);
-    calculatePrice();
-  }
-
-  const onWidthChanged = (width : string) => {
-    setWidth(width);
-    calculatePrice();
-  }
 
   return (
     <SafeAreaView style={styles.wrapper}>
       <View style={styles.bigPriceWrapper}>
-        <Text style={styles.bigPrice}>$ { price }</Text>
+        <Text style={styles.bigPrice}>$ {price}</Text>
       </View>
       <View style={styles.inputAndUnitWrapper}>
         <View style={styles.inputWrapper}>
           {activeProduct ? (
             <View>
-            <TextInput
+              <TextInput
-              clearTextOnFocus={true}
+                clearTextOnFocus={true}
-              defaultValue={length}
+                onChangeText={setLength}
-              onChangeText={onLengthChanged}
+                inputMode='decimal'
-              inputMode='decimal'
+                style={styles.lengthInput}
-              style={styles.lengthInput}
+              />
-            />
+              <Text style={styles.unitHints}>{units}</Text>
-            <Text style={styles.unitHints}>{units}</Text>
+              {activeProduct.area && (
-            {activeProduct.area && 
+                <View>
-
+                  <TextInput
-          (<View><TextInput
+                    clearTextOnFocus={true}
-            clearTextOnFocus={true}
+                    defaultValue={width}
-            defaultValue={width}
+                    onChangeText={setWidth}
-            onPressIn={() => calculatePrice()}
+                    inputMode='decimal'
-            onChangeText={setWidth}
+                    style={styles.widthInput}
-            inputMode='decimal'
+                  />
-            style={styles.widthInput}
+                  <Text style={styles.unitHints}>{units}</Text>
-            />
+                </View>)
-            <Text style={styles.unitHints}>{units}</Text>
+              }
-            </View>)
-            }
             </View>
           ) : (<Text>Please choose a product</Text>)}
-          </View>
+        </View>
-          <View style={styles.unitSelector}>
+        <View style={styles.unitSelector}>
-            <Button title="in" onPress={() => onUnitPressed("in")} color={units === "in" ? "gray" : "blue"} />
+          <Button title="in" onPress={() => setUnits("in")} color={units === "in" ? "gray" : "blue"} />
-            <Button title="ft" onPress={() => onUnitPressed("ft")} color={units === "ft" ? "gray" : "blue"} />
+          <Button title="ft" onPress={() => setUnits("ft")} color={units === "ft" ? "gray" : "blue"} />
-          </View>
+        </View>
       </View>
-      {products.map((product) => {
+      <FlatList
-        return (
+        data={products}
-          <TouchableHighlight onPress={() => setActiveProduct(product)} >
+        style={styles.productSelectorFlatList}
-            <View
+        renderItem={({ item }) => {
-              style={product.id === activeProduct?.id ? styles.activeProduct : styles.inactiveProduct}>
+          return (
-              <ProductTile product={product} onProductSelected={onProductSelected} />
+            <TouchableHighlight
-            </View>
+              style={item === activeProduct ? styles.productTileTouchableActive : styles.productTileTouchable}
-          </TouchableHighlight>
+              onPress={() => setActiveProduct(item)}>
-        )
+                  <Text style={item === activeProduct ? styles.productTileTextActive : styles.productTileText}>{item.attributes.name || `Product ${item.id}`}</Text>
-      })}
+            </TouchableHighlight>
+          )
+        }}
+      />
+
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   wrapper: {
-    padding: 10,
-    alignItems: "center",
   },
   bigPriceWrapper: {
     alignContent: "center",
@@ -124,11 +107,13 @@ const styles = StyleSheet.create({
   },
   inputWrapper: {
     flexDirection: "row",
+    alignItems: "flex-start",
   },
   unitSelector: {
   },
   inputAndUnitWrapper: {
     flexDirection: "row",
+    alignSelf: "center",
   },
   unitHints: {
     fontSize: 30,
@@ -162,7 +147,6 @@ const styles = StyleSheet.create({
   },
   titleContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
     gap: 8,
   },
   stepContainer: {
@@ -174,6 +158,39 @@ const styles = StyleSheet.create({
     width: 290,
     bottom: 0,
     left: 0,
-    position: 'absolute',
   },
+
+  productSelectorFlatList: {
+    padding: 10,
+    margin: 10,
+  },
+
+  productTileTouchable: {
+    margin: 10,
+    padding: 20,
+    backgroundColor: "grey",
+  },
+
+  productTileTouchableActive: {
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: "black",
+    margin: 10,
+    padding: 20,
+  },
+
+  productTileText: {
+    textAlign: "center",
+    color: "white",
+  },
+
+  productTileTextActive: {
+    textAlign: "center",
+    color: "black",
+  },
+
+  productTileCover: {
+    padding: 4,
+  },
+
 });

components/ProductAttributeEditor.tsx

@@ -9,7 +9,7 @@ export type ProductAttributeDeleteFunc = (product_id: string, key: string) => an
 
 export type ProductAttributeProps = { product: Product, attributeKey: string, attributeValue: string, onChange?: ProductAttributeChangeFunc, onDelete?: ProductAttributeChangeFunc, };
 
-export const ProductAttributeEditor = ({ product, attributeKey: key, attributeValue: value, onDelete, onChange } : ProductAttributeProps) => {
+export const ProductAttributeEditor = ({ product, attributeKey: key, attributeValue: value, onDelete, onChange }: ProductAttributeProps) => {
     const [doEdit, setDoEdit] = useState(true);
     const [newValue, setNewValue] = useState(value);
 
@@ -20,30 +20,36 @@ export const ProductAttributeEditor = ({ product, attributeKey: key, attributeVa
 
     return (
         <View>
-            <Text>{key}</Text>
+            <View style={styles.productAttributeRow}>
-            <View>
+                <Text style={styles.key}>{key}</Text>
-                <TouchableHighlight
+                <TextInput
-                    onPress={() => setDoEdit(!doEdit)}
+                    value={newValue}
-                    aria-label="Property Value"
+                    onChangeText={doChange}
-                >
+                    style={styles.value}
-                    {doEdit ?
+                    aria-label="Edit Value" />
-                        (<Text>{newValue}</Text>) :
-                        (<TextInput
-                            value={newValue}
-                            onChangeText={doChange}
-                            aria-label="Edit Value" />)
-                    }
-                </TouchableHighlight>
                 <TouchableHighlight
                     onPress={() => onDelete && onDelete(product.id, key, value)}
-                    aria-label="Delete Attribute">
+                    aria-label="Delete Attribute"
-                    <Ionicons name="trash-bin-outline" />
+                    style={{ backgroundColor: "darkred", borderRadius: 5, margin: 5, padding: 5, }}>
+                    <Ionicons name="trash-bin-outline" size={30} color={"white"} />
                 </TouchableHighlight>
             </View>
         </View>
     )
 }
 
-const style = StyleSheet.create({
+const styles = StyleSheet.create({
-
+    productAttributeRow: {
+        flexDirection: "row",
+    },
+    key: {
+        flex: 1,
+    },
+    value: {
+        flex: 1,
+        borderWidth: 1,
+        borderColor: "grey",
+        borderStyle: "solid",
+        padding: 10
+    }
 });

components/ProductEditor.tsx

@@ -20,6 +20,7 @@ export const ProductEditor = ({}) => {
 
     return (
         <SafeAreaView>
+            <h1 style={styles.h1}>Edit Products</h1>
             <FlatList
             data={products}
             renderItem={
@@ -39,6 +40,10 @@ export const ProductEditor = ({}) => {
 }
 
 const styles = StyleSheet.create({
+    h1: {
+        textAlign: "center",
+        fontFamily: "sans-serif"
+    },
     product: {
         
     }

components/ProductEditorItem.tsx

@@ -41,12 +41,14 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
             <TouchableHighlight
                 onPress={() => setShowAttributes(!showAttributes)}
                 aria-label="Product Item"
+                style={styles.productItemName}
             >
-                <Text style={styles.product}>{newName}</Text>
+                <Text style={styles.productNameText}>{newName}</Text>
             </TouchableHighlight>
             {showAttributes &&
                 (
                     <FlatList
+                        style={styles.productAttributesList}
                         data={product.attributesAsList}
                         renderItem={({ item }) => (
                             <ProductAttributeEditor
@@ -66,5 +68,21 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
 }
 
 const styles = StyleSheet.create({
-    product: {},
+    productNameText: {
+        paddingLeft: 10,
+        paddingRight: 10,
+    },
+    productItemName: {
+        flex: 1,
+        backgroundColor: "lightgrey",
+        padding: 4,
+        margin: 4,
+    },
+    productAttributesList: {
+        margin: 10,
+        padding: 10,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "black",
+    },
 })

features/product/productSlice.ts

@@ -45,6 +45,14 @@ export const selectProducts = (state : RootState) => {
     return state.products;
 }
 
+export const productIds = (state : RootState) => {
+    return state.products.map(p => p.id);
+}
+
+export const getProductById = (state : RootState, id : Id) => {
+    return state.products.find(x => x.id === id);
+}
+
 
 export const actions = {
     ...productsState.actions

package.json

@@ -7,7 +7,7 @@
     "reset-project": "node ./scripts/reset-project.js",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web",
+    "web": "expo start --web --offline",
     "test": "jest --watchAll",
     "lint": "expo lint"
   },
@@ -37,6 +37,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.2",
+    "react-native-flex-grid": "^1.0.4",
     "react-native-gesture-handler": "~2.16.2",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",

pnpm-lock.yaml

@@ -80,6 +80,9 @@ dependencies:
   react-native:
     specifier: 0.74.2
     version: 0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7)(@types/react@18.2.79)(react@18.2.0)
+  react-native-flex-grid:
+    specifier: ^1.0.4
+    version: 1.0.4(react-native@0.74.2)(react@18.2.0)
   react-native-gesture-handler:
     specifier: ~2.16.2
     version: 2.16.2(react-native@0.74.2)(react@18.2.0)
@@ -8755,6 +8758,16 @@ packages:
   /react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  /react-native-flex-grid@1.0.4(react-native@0.74.2)(react@18.2.0):
+    resolution: {integrity: sha512-VFadQy3JpgBM2fNsn7W/TdebZ0JNeZgedxPJ0Xi6o+HQJU8j43YGUsGot72rEMWlzaAJCGQnMQXkW9vX+E2n5w==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+    dependencies:
+      react: 18.2.0
+      react-native: 0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7)(@types/react@18.2.79)(react@18.2.0)
+    dev: false
+
   /react-native-gesture-handler@2.16.2(react-native@0.74.2)(react@18.2.0):
     resolution: {integrity: sha512-vGFlrDKlmyI+BT+FemqVxmvO7nqxU33cgXVsn6IKAFishvlG3oV2Ds67D5nPkHMea8T+s1IcuMm0bF8ntZtAyg==}
     peerDependencies: