PliWould/components/ProductList.tsx

import { Dimensions, ScrollView, StyleSheet } from "react-native";
import { ProductTile } from "./ProductTile";
import { Product, product_type_t } from "@/lib/product";
import { useState } from "react";
import { selectProducts } from "@/features/product/productSlice";
import { useAppSelector } from "@/app/store";

const windowDimensions = Dimensions.get('window');

export type ProductSelectionProps = {
  onProductSelected?: (product: Product) => any;
  productType?: product_type_t;
};

export default function ProductList({
  productType,
  onProductSelected,
}: ProductSelectionProps) {
  const [activeProduct, setActiveProduct] = useState(null as null | Product);
  const products = useAppSelector(selectProducts)
    .filter((p) => !!p)
    .filter((p: Product) => (!productType) || p.type === productType)
    .filter((p) => {
      return !!p.dimensions;
    });

  function doOnProductSelected(product: Product) {
    setActiveProduct(product);
    onProductSelected && onProductSelected(product);
  }

  return (
    <ScrollView style={styles.productSelectorFlatList} contentContainerStyle={styles.content} aria-label="product list">
      {products.map((product) => {
        return (
          <ProductTile
            product={product}
            onProductSelected={doOnProductSelected}
            isActive={activeProduct === product}
            key={product.id}
          />
        );
      })}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  productSelectorFlatList: {
    padding: 10,
    margin: 10,
    height: windowDimensions.height - 200,
    width: windowDimensions.width,
  },
  content: {
    alignItems: "flex-start",
    flexWrap: "wrap",
    flexDirection: "row",
  }
});