From 7c2289098e79341758b1e740f5e0df5c5e7972ba Mon Sep 17 00:00:00 2001
From: Jordan Hewitt <hireme@jordanhewitt.pro>
Date: Fri, 28 Jun 2024 17:04:30 -0700
Subject: [PATCH] working on getting input to respond correctly.

---
 app/(tabs)/_layout.tsx           |  58 ++++++------
 app/(tabs)/index.tsx             | 151 ++++++++++++++++++++++++++++---
 app/(tabs)/product-editor.tsx    |   7 +-
 components/LengthInput.tsx       |   6 +-
 components/ProductEditor.tsx     |   1 -
 components/ProductEditorItem.tsx |  14 ++-
 components/ProductTile.tsx       |  10 +-
 lib/product.ts                   |  12 +++
 8 files changed, 206 insertions(+), 53 deletions(-)

diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index f579bd6..a3fb5d5 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -1,37 +1,43 @@
 import { Tabs } from 'expo-router';
-import React from 'react';
 
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { TabBarIcon } from '@/components/navigation/TabBarIcon';
+import { Provider } from 'react-redux';
+import { products as fixtures } from "@/__fixtures__/initialProducts"
+import { setupStore } from '../store';
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
-
+  const store = setupStore({
+    products: fixtures
+  });
   return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-      }}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Conversion',
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'recording' : 'recording-outline'} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="product-editor"
-        options={{
-          title: 'Products',
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'recording' : 'recording-outline'} color={color} />
-          ),
-        }}
-      />
-    </Tabs>
+    <Provider store={store}>
+      <Tabs
+        screenOptions={{
+          tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+          headerShown: false,
+        }}>
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: 'Conversion',
+            tabBarIcon: ({ color, focused }) => (
+              <TabBarIcon name={focused ? 'recording' : 'recording-outline'} color={color} />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="product-editor"
+          options={{
+            title: 'Products',
+            tabBarIcon: ({ color, focused }) => (
+              <TabBarIcon name={focused ? 'recording' : 'recording-outline'} color={color} />
+            ),
+          }}
+        />
+      </Tabs>
+    </Provider>
   );
 }
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index e1b6827..671f3cd 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -1,36 +1,165 @@
-import { Image, StyleSheet, Platform, ImageBackground } from 'react-native';
+import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData } from 'react-native';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { MeasurementInput } from '@/components/LengthInput';
-import { setupStore, useAppDispatch } from '../store';
+import { useAppSelector } from '../store';
 import { selectProducts } from '@/features/product/productSlice';
-import { Product } from '@/lib/product';
+import { Product, dimensions_t } from '@/lib/product';
 import { ProductTile } from '@/components/ProductTile';
-import { Measure, area, length } from 'enheter';
+import { useEffect, useState } from 'react';
+import { TextInput, TouchableHighlight } from 'react-native-gesture-handler';
 
 export default function HomeScreen() {
 
-  const products = useAppDispatch(selectProducts);
+  const products = useAppSelector(selectProducts);
+  const [activeProduct, setActiveProduct] = useState(null as Product | null);
+  const [price, setPrice] = useState("0.00");
+  const [length, setLength] = useState("0");
+  const [width, setWidth] = useState("0");
+  const [units, setUnits] = useState("in" as "ft" | "in");
 
   function calculatePrice() {
-
+    if (!activeProduct) {
+      setPrice("0.00");
+      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);
   }
 
-  const selectProduct = (product : Product) => {
+  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>
-      <MeasurementInput onMeasurementSet={calculatePrice} />
+    <SafeAreaView style={styles.wrapper}>
+      <View style={styles.bigPriceWrapper}>
+        <Text style={styles.bigPrice}>$ { price }</Text>
+      </View>
+      <View style={styles.inputAndUnitWrapper}>
+        <View style={styles.inputWrapper}>
+          {activeProduct ? (
+            <View>
+            <TextInput
+              clearTextOnFocus={true}
+              defaultValue={length}
+              onChangeText={onLengthChanged}
+              inputMode='decimal'
+              style={styles.lengthInput}
+            />
+            <Text style={styles.unitHints}>{units}</Text>
+            {activeProduct.area && 
+
+          (<View><TextInput
+            clearTextOnFocus={true}
+            defaultValue={width}
+            onPressIn={() => calculatePrice()}
+            onChangeText={setWidth}
+            inputMode='decimal'
+            style={styles.widthInput}
+            />
+            <Text style={styles.unitHints}>{units}</Text>
+            </View>)
+            }
+            </View>
+          ) : (<Text>Please choose a product</Text>)}
+          </View>
+          <View style={styles.unitSelector}>
+            <Button title="in" onPress={() => onUnitPressed("in")} color={units === "in" ? "gray" : "blue"} />
+            <Button title="ft" onPress={() => onUnitPressed("ft")} color={units === "ft" ? "gray" : "blue"} />
+          </View>
+      </View>
       {products.map((product) => {
-        <ProductTile product={product} onProductSelected={selectProduct} />
+        return (
+          <TouchableHighlight onPress={() => setActiveProduct(product)} >
+            <View
+              style={product.id === activeProduct?.id ? styles.activeProduct : styles.inactiveProduct}>
+              <ProductTile product={product} onProductSelected={onProductSelected} />
+            </View>
+          </TouchableHighlight>
+        )
       })}
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
+  wrapper: {
+    padding: 10,
+    alignItems: "center",
+  },
+  bigPriceWrapper: {
+    alignContent: "center",
+  },
+  bigPrice: {
+    alignSelf: "center",
+    fontSize: 40,
+    marginTop: 100,
+    marginBottom: 100,
+  },
+  inputWrapper: {
+    flexDirection: "row",
+  },
+  unitSelector: {
+  },
+  inputAndUnitWrapper: {
+    flexDirection: "row",
+  },
+  unitHints: {
+    fontSize: 30,
+    padding: 10,
+  },
+  lengthInput: {
+    borderWidth: 1,
+    borderRadius: 4,
+    borderColor: "grey",
+    padding: 4,
+    margin: 4,
+    fontSize: 30,
+    width: 200,
+  },
+  widthInput: {
+    width: 200,
+    borderWidth: 1,
+    borderRadius: 4,
+    borderColor: "grey",
+    padding: 4,
+    margin: 4,
+    fontSize: 30,
+  },
+  activeProduct: {
+    borderWidth: 2,
+    borderColor: "black",
+    borderStyle: "solid",
+  },
+  inactiveProduct: {
+
+  },
   titleContainer: {
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/app/(tabs)/product-editor.tsx b/app/(tabs)/product-editor.tsx
index 42877cc..7f49a3d 100644
--- a/app/(tabs)/product-editor.tsx
+++ b/app/(tabs)/product-editor.tsx
@@ -1,12 +1,7 @@
 import { Image, StyleSheet, Platform, ImageBackground } from 'react-native';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { MeasurementInput } from '@/components/LengthInput';
-import { setupStore, useAppDispatch } from '../store';
-import { selectProducts } from '@/features/product/productSlice';
-import { Product } from '@/lib/product';
-import { ProductTile } from '@/components/ProductTyle';
-import { Measure, area, length } from 'enheter';
+import { ProductEditor } from '@/components/ProductEditor';
 
 export default function HomeScreen() {
 
diff --git a/components/LengthInput.tsx b/components/LengthInput.tsx
index fc9b565..1329d32 100644
--- a/components/LengthInput.tsx
+++ b/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);
diff --git a/components/ProductEditor.tsx b/components/ProductEditor.tsx
index 5c9779b..cba5168 100644
--- a/components/ProductEditor.tsx
+++ b/components/ProductEditor.tsx
@@ -20,7 +20,6 @@ export const ProductEditor = ({}) => {
 
     return (
         <SafeAreaView>
-            <Text>Hello</Text>
             <FlatList
             data={products}
             renderItem={
diff --git a/components/ProductEditorItem.tsx b/components/ProductEditorItem.tsx
index 532cdaa..8d3cc12 100644
--- a/components/ProductEditorItem.tsx
+++ b/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 &&
                 (
diff --git a/components/ProductTile.tsx b/components/ProductTile.tsx
index 4c713ac..dd57a73 100644
--- a/components/ProductTile.tsx
+++ b/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: {
+
     },
 })
\ No newline at end of file
diff --git a/lib/product.ts b/lib/product.ts
index 60f451f..7768db3 100644
--- a/lib/product.ts
+++ b/lib/product.ts
@@ -87,6 +87,18 @@ export class Product {
         throw new Error(`Invalid dimensions: ${dimensions}`);
     }
 
+    get priceDisplay() {
+        const u = this.presentUnits;
+        if (this.area) {
+            const w = Math.round(convert(this.area.w, this.area.u).to(this.presentUnits));
+            const l = Math.round(convert(this.area.l, this.area.u).to(this.presentUnits));
+            return `$ ${this.pricePerUnit} / ${l} x ${w} ${u}`;
+        } else if (this.length) {
+            const l = Math.round(convert(this.length.l, this.length.u).to(this.presentUnits));
+            return `$ ${this.pricePerUnit} per ${l} ${u}`;
+        }
+    }
+
     get attributesAsList() {
         return Object.entries(this.attributes).map(([key, value]) => {
             return { key, value }