start to refactor components.

app/(tabs)/index.tsx

@@ -1,202 +1,13 @@
-import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData, TextInput, FlatList } from 'react-native';
+import ProductCalculatorSelector from '@/components/ProductCalculatorSelector';
+import { SafeAreaView, View } 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 { useEffect, useState } from 'react';
-import { TouchableHighlight } from 'react-native-gesture-handler';
 
 const fallbackImage = require("@/assets/images/board-stock-lightened-blurred.png");
 
-export default function HomeScreen() {
-
-  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");
-
-  useEffect(function () {
-    const iv = setInterval(function () {
-      if (!activeProduct) 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 };
-      try {
-        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);
-      } catch (err) {
-        console.log(activeProduct);
-        console.error(err)
-        return null;
-      }
-    }, 50);
-    return function () {
-      clearInterval(iv);
-    }
-  }, [activeProduct, length, width]);
-
+export const HomeScreen = () => {
   return (
-    <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}
-                onChangeText={setLength}
-                inputMode='decimal'
-                style={styles.lengthInput}
-              />
-              <Text style={styles.unitHints}>{units}</Text>
-              {activeProduct.area && (
-                <View>
-                  <TextInput
-                    clearTextOnFocus={true}
-                    defaultValue={width}
-                    onChangeText={setWidth}
-                    inputMode='decimal'
-                    style={styles.widthInput}
-                  />
-                  <Text style={styles.unitHints}>{units}</Text>
-                </View>)
-              }
-              <View style={styles.unitSelector}>
-                <Button title="in" onPress={() => setUnits("in")} color={units === "in" ? "gray" : "blue"} />
-                <Button title="ft" onPress={() => setUnits("ft")} color={units === "ft" ? "gray" : "blue"} />
-              </View>
-            </View>
-          ) : (<Text>Please choose a product</Text>)}
-        </View>
-      </View>
-      <FlatList
-        data={products}
-        style={styles.productSelectorFlatList}
-        renderItem={({ item }) => {
-          return (
-            <TouchableHighlight
-              style={item === activeProduct ? styles.productTileTouchableActive : styles.productTileTouchable}
-              onPress={() => setActiveProduct(item)}>
-                  <Text style={item === activeProduct ? styles.productTileTextActive : styles.productTileText}>{item.attributes.name || `Product ${item.id}`}</Text>
-            </TouchableHighlight>
-          )
-        }}
-      />
-
+    <SafeAreaView>
+      <ProductCalculatorSelector />
     </SafeAreaView>
-  );
+  )
 }
-
-const styles = StyleSheet.create({
-  wrapper: {
-  },
-  bigPriceWrapper: {
-    alignContent: "center",
-  },
-  bigPrice: {
-    alignSelf: "center",
-    fontSize: 40,
-    marginTop: 100,
-    marginBottom: 100,
-  },
-  inputWrapper: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-  },
-  unitSelector: {
-  },
-  inputAndUnitWrapper: {
-    flexDirection: "row",
-    alignSelf: "center",
-  },
-  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',
-    gap: 8,
-  },
-  stepContainer: {
-    gap: 8,
-    marginBottom: 8,
-  },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-  },
-
-  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,
-  },
-
-});