Skip to content

Instantly share code, notes, and snippets.

@mohandere

mohandere/hoc-withSearch-full-example.js

Last active May 12, 2019 14:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mohandere/b1252ccc7870ca1ab46a946b77e5cee8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mohandere/b1252ccc7870ca1ab46a946b77e5cee8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mohandere renamed this gist May 12, 2019. 1 changed file with 0 additions and 0 deletions.
    0 hoc-withSearch.js → hoc-withSearch-full-example.js
    View file
    File renamed without changes.
  2. mohandere revised this gist May 6, 2019. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions hoc-withSearch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -47,6 +47,9 @@ const ProductsList = (props) => {
    )
    }

    const getDisplayName = (WrappedComponent) => {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
    }

    const withSearch = WrappedComponent => {
    class WithSearch extends React.Component {
  3. mohandere revised this gist May 6, 2019. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion hoc-withSearch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -49,7 +49,7 @@ const ProductsList = (props) => {


    const withSearch = WrappedComponent => {
    return class extends React.Component {
    class WithSearch extends React.Component {
    state = {
    searchTerm: ""
    };
    @@ -74,6 +74,8 @@ const withSearch = WrappedComponent => {
    );
    }
    };
    WithSearch.displayName = `WithSearch(${getDisplayName(WrappedComponent)})`;
    return WithSearch;
    };

    const ProductsListWithSearch = withSearch(ProductsList);
  4. mohandere revised this gist May 4, 2019. No changes.
  5. mohandere created this gist May 4, 2019.
    90 changes: 90 additions & 0 deletions hoc-withSearch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,90 @@
    const ProductCard = props => {
    return (
    <div>
    <hr />
    <p>
    <b>Title:</b> {props.title}
    </p>
    <p>
    <b>Style:</b> {props.style}
    </p>
    <p>
    <b>Price:</b> {props.price}
    </p>
    <p>
    <b>Description:</b> {props.description}
    </p>
    <p>
    <b>Free shipping:</b> {props.isFreeShipping}
    </p>
    <hr />
    </div>
    );
    };

    const filterProducts = (searchTerm) => {
    searchTerm = searchTerm.toUpperCase()
    return products.filter(product => {
    let str = `${product.title} ${product.style} ${product.sku}`.toUpperCase();
    return str.indexOf(searchTerm) >= 0;
    })
    }

    const ProductsList = (props) => {
    const { searchTerm } = props
    let filteredProducts = filterProducts(searchTerm);
    return (
    <div>
    <div>
    <div>
    <h2>Products</h2>
    </div>
    </div>
    <div>
    {filteredProducts.map((product) => <ProductCard key={product.sku} {...product} />)}
    </div>
    </div>
    )
    }


    const withSearch = WrappedComponent => {
    return class extends React.Component {
    state = {
    searchTerm: ""
    };
    handleSearch = event => {
    this.setState({ searchTerm: event.target.value });
    };

    render() {
    let { searchTerm } = this.state;
    return (
    <div>
    <div>
    <input
    onChange={this.handleSearch}
    value={searchTerm}
    type="text"
    placeholder="Search"
    />
    </div>
    <WrappedComponent searchTerm={searchTerm} />
    </div>
    );
    }
    };
    };

    const ProductsListWithSearch = withSearch(ProductsList);

    function App() {
    return (
    <div className="App">
    <ProductsListWithSearch />
    </div>
    );
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);
    211 changes: 211 additions & 0 deletions products.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,211 @@
    const products = [
    {
    "availableSizes": ["S", "XS"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "4 MSL",
    "id": 12,
    "installments": 9,
    "isFreeShipping": true,
    "price": 10.9,
    "sku": 12064273040195392,
    "style": "Black with custom print",
    "title": "Cat Tee Black T-Shirt"
    },
    {
    "availableSizes": ["M"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "",
    "id": 13,
    "installments": 5,
    "isFreeShipping": true,
    "price": 29.45,
    "sku": 51498472915966370,
    "style": "Front print and paisley print",
    "title": "Dark Thug Blue-Navy T-Shirt"
    },
    {
    "availableSizes": ["X", "L", "XL"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "GPX Poly 1",
    "id": 14,
    "installments": 3,
    "isFreeShipping": true,
    "price": 9,
    "sku": 10686354557628304,
    "style": "Front tie dye print",
    "title": "Sphynx Tie Dye Wine T-Shirt"
    },
    {
    "availableSizes": ["X", "L", "XL", "XXL"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "Treino 2014",
    "id": 15,
    "installments": 5,
    "isFreeShipping": true,
    "price": 14,
    "sku": 11033926921508488,
    "style": "Black T-Shirt with front print",
    "title": "Skuul"
    },
    {
    "availableSizes": ["X", "L"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "",
    "id": 11,
    "installments": 3,
    "isFreeShipping": true,
    "price": 13.25,
    "sku": 39876704341265610,
    "style": "Wine",
    "title": "Wine Skul T-Shirt"
    },
    {
    "availableSizes": ["X", "L", "XL", "XXL"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "14/15 s/nº",
    "id": 0,
    "installments": 9,
    "isFreeShipping": true,
    "price": 10.9,
    "sku": 8552515751438644,
    "style": "Branco com listras pretas",
    "title": "Cat Tee Black T-Shirt"
    },
    {
    "availableSizes": ["X", "L", "XL", "XXL"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "14/15 s/nº",
    "id": 1,
    "installments": 9,
    "isFreeShipping": true,
    "price": 10.9,
    "sku": 18644119330491310,
    "style": "Preta com listras brancas",
    "title": "Sphynx Tie Dye Grey T-Shirt"
    },
    {
    "availableSizes": ["X", "L"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "14/15 s/nº",
    "id": 2,
    "installments": 7,
    "isFreeShipping": true,
    "price": 14.9,
    "sku": 11854078013954528,
    "style": "Branco com listras pretas",
    "title": "Danger Knife Grey"
    },
    {
    "availableSizes": ["X", "L"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "2014 s/nº",
    "id": 3,
    "installments": 7,
    "isFreeShipping": true,
    "price": 14.9,
    "sku": 876661122392077,
    "style": "Preto com listras brancas",
    "title": "White DGK Script Tee"
    },
    {
    "availableSizes": ["XL"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "14/15 s/nº - Jogador",
    "id": 4,
    "installments": 12,
    "isFreeShipping": false,
    "price": 25.9,
    "sku": 9197907543445676,
    "style": "Branco com listras pretas",
    "title": "Born On The Streets"
    },
    {
    "availableSizes": ["X", "L", "XL"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "14/15 + Camiseta 1º Mundial",
    "id": 5,
    "installments": 9,
    "isFreeShipping": false,
    "price": 10.9,
    "sku": 10547961582846888,
    "style": "Preto",
    "title": "Tso 3D Short Sleeve T-Shirt A"
    },
    {
    "availableSizes": ["XL", "XXL"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "Goleiro 13/14",
    "id": 6,
    "installments": 0,
    "isFreeShipping": true,
    "price": 49.9,
    "sku": 6090484789343891,
    "style": "Branco",
    "title": "Man Tie Dye Cinza Grey T-Shirt"
    },
    {
    "availableSizes": ["S"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "1977 Infantil",
    "id": 7,
    "installments": 4,
    "isFreeShipping": true,
    "price": 22.5,
    "sku": 18532669286405344,
    "style": "Preto com listras brancas",
    "title": "Crazy Monkey Black T-Shirt"
    },
    {
    "availableSizes": ["XL"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "",
    "id": 8,
    "installments": 4,
    "isFreeShipping": false,
    "price": 18.7,
    "sku": 5619496040738316,
    "style": "Azul escuro",
    "title": "Tso 3D Black T-Shirt"
    },
    {
    "availableSizes": ["L", "XL"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "",
    "id": 9,
    "installments": 5,
    "isFreeShipping": true,
    "price": 134.9,
    "sku": 11600983276356164,
    "style": "",
    "title": "Crazy Monkey Grey"
    },
    {
    "availableSizes": ["L", "XL"],
    "currencyFormat": "$",
    "currencyId": "USD",
    "description": "",
    "id": 10,
    "installments": 9,
    "isFreeShipping": true,
    "price": 49,
    "sku": 27250082398145996,
    "style": "",
    "title": "On The Streets Black T-Shirt"
    }
    ]
    export default products;