code from amapei

js/react/store/ProductList.hx

@@ -0,0 +1,73 @@
+package react.store;
+import react.ReactComponent;
+import react.ReactMacro.jsx;
+import Common;
+
+using Lambda;
+
+typedef ProductListProps = {
+  var categories:Array<CategoryInfo>;
+  var productsBySubcategoryIdMap:Map<Int, Array<ProductInfo>>;
+  var filters:Array<String>;
+  var addToCart:ProductInfo -> Int -> Void;
+};
+
+class ProductList extends react.ReactComponentOfProps<ProductListProps>
+{
+  override public function render(){
+    return jsx('
+      <div className="categories">
+        ${renderCategories()}
+      </div>
+    ');
+  }
+
+  function renderCategories() {
+    return props.categories.map(function(category) {
+      if (!props.filters.has(category.name))
+        return null;
+
+      return jsx('
+        <div className="category" key=${category.name}>
+          <h2>${category.name}</h2>
+          <div className="subCategories">
+            ${renderSubCategories(category)}
+          </div>
+        </div>
+      ');
+    });
+  }
+
+  function renderSubCategories(category) {
+    var subCategories = category.subcategories.map(function(category) {
+      if (!props.productsBySubcategoryIdMap.exists(category.id))
+        return jsx('<div key=${category.name}>Loading...</div>');
+
+      var products = props.productsBySubcategoryIdMap.get(category.id);
+
+      return jsx('
+        <div className="sub-category" key=${category.name}>
+          <h3>${category.name}</h3>
+          <div className="products">
+            ${renderProducts(products)}
+          </div>
+        </div>
+      ');
+    });
+
+    return jsx('
+      <div className="sub-categories">
+        $subCategories
+      </div>
+    ');
+  }
+
+  function renderProducts(products) {
+    return products.map(function(product) {
+      return jsx('
+        <Product product=${product} key=${product.id} addToCart=${props.addToCart}/>
+      ');
+    });
+  }
+}
+