Cacher is the code snippet organizer for pro developers

from https://ru.reactjs.org/docs/thinking-in-react.html

import React from "react";

import FilterableProductTable from "./components/FilterableProductTable";

const 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" }
];

function App() {
  return <FilterableProductTable products={PRODUCTS}></FilterableProductTable>;
}

export default App;

import React, { Component } from "react";
import SearchBar from "./SearchBar";
import ProductTable from "./ProductTable";

class FilterableProductTable extends Component {
  state = {
    filterText: "",
    isStockOnly: false
  };

  handleToggleStock = () => {
    const mutatedisStockOnly = this.state.isStockOnly;
    this.setState({
      isStockOnly: !mutatedisStockOnly
    });
  };

  handlerText = e => {
    console.log(e.target.value);
    this.setState({
      filterText: e.target.value
    });
  };

  render() {
    return (
      <div
        style={{ border: "1px solid yellow", width: "400px", margin: "0 auto" }}
      >
        <SearchBar
          is={this.state.isStockOnly}
          changed={this.handleToggleStock}
          changedText={this.handlerText}
          textVal={this.state.filterText}
        ></SearchBar>
        <ProductTable
          is={this.state.isStockOnly}
          products={this.props.products}
          text={this.state.filterText}
        ></ProductTable>
      </div>
    );
  }
}

export default FilterableProductTable;

import React from "react";

import TableRow from "./TableRow";
import TableCategoryRow from "./TableCategoryRow";

const ProductTable = props => {
  let curCat = null;

  let rows = [];

  props.products.map((el, i) => {
    if (el.category !== curCat) {
      rows.push(
        <TableCategoryRow
          key={el.category}
          name={el.category}
        ></TableCategoryRow>
      );
    }
    curCat = el.category;

    if ((props.is && !el.stocked) || !el.name.includes(props.text)) {
      //
    } else {
      rows.push(
        <TableRow
          key={el.name}
          name={el.name}
          price={el.price}
          stocked={el.stocked}
        ></TableRow>
      );
    }
    return null;
  });

  return (
    <table style={{ border: "1px solid green", width: "100%" }}>
      <tbody>
        <tr>
          <td>Name</td>
          <td>Price</td>
        </tr>
        {rows}
      </tbody>
    </table>
  );
};

export default ProductTable;

import React from "react";

const SearchBar = props => {
  return (
    <div style={{ border: "1px solid blue" }}>
      <input
        type="text"
        placeholder="search"
        onChange={props.changedText}
        value={props.textVal}
      ></input>
      <input
        type="checkbox"
        onChange={props.changed}
        checked={props.is}
      ></input>
      Stock
    </div>
  );
};

export default SearchBar;

import React from "react";

const TableCategoryRow = props => {
  return (
    <tr
      style={{
        outline: "1px solid lightblue",
        textAlign: "center",
        fontWeight: "bold"
      }}
    >
      <td colSpan="2">{props.name}</td>
    </tr>
  );
};

export default TableCategoryRow;

import React from "react";

const TableRow = props => {
  const styleStocked = props.stocked ? null : { color: "red" };
  return (
    <tr>
      <td style={styleStocked}>{props.name}</td>
      <td>{props.price}</td>
    </tr>
  );
};

export default TableRow;