Thinking In React - Code Slice 1 in Ruby

thinking-in-react-1.rb

class ProductCategoryRow < React::Component::Base
  param :category, type: String
  def render
    tr { th(colSpan: 2) { params.category } }
  end
end

class ProductRow < React::Component::Base
  param :product, type: Hash
  def product_color_code
    params.product[:stocked] ? {color: :red} : {}
  end
  def render
    tr do
      td do
        span({style: product_color_code}) { params.product[:name] }
      end
      td { params.product[:price] }
    end
  end
end

class ProductTable < React::Component::Base
  param :products, type: [Hash]
  def render
    table do 
      thead { tr { "Name".th; "Price".th }}
      tbody do
        params[:products].inject(nil) do | last_category, product|
          if product[:category] != last_category
            ProductCategoryRow category: product[:category], key: product[:category]
          end
          ProductRow product: product, key: product[:name]
          product[:category]
        end
      end
    end
  end
end

class SearchBar < React::Component::Base
  def render
    form do
      input type: :text, placeholder: "Search..."
      para do
        input type: :checkbox
        "Only show products in stock".span
      end
    end
  end
end

class FilterableProductTable < React::Component::Base
  param :products, type: [Hash]
  render
    div do
      SearchBar()
      ProductTable products: params.products
    end
  end
end

PRODUCTS = [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];
 
Element['#container'].render { FilterableProductTable products: PRODUCTS }