github.com/Jeffail/benthos/v3@v3.65.0/website/src/theme/CookbookListPage/index.js (about)

     1  /**
     2   * Copyright (c) 2017-present, Facebook, Inc.
     3   *
     4   * This source code is licensed under the MIT license found in the
     5   * LICENSE file in the root directory of this source tree.
     6   */
     7  
     8  import React, {useState} from 'react';
     9  
    10  import CookbookItem from '@theme/CookbookItem';
    11  import Layout from '@theme/Layout';
    12  import qs from 'qs';
    13  import classnames from 'classnames';
    14  
    15  import styles from './styles.module.css';
    16  
    17  function CookbookListPage(props) {
    18    const {items} = props;
    19  
    20    const queryObj = props.location ? qs.parse(props.location.search, {ignoreQueryPrefix: true}) : {};
    21  
    22    let itemsFiltered = items.slice(0);
    23    itemsFiltered.sort((a, b) => (b.content.metadata.featured === true && 1) || -1);
    24  
    25    //
    26    // State
    27    //
    28  
    29    const [onlyFeatured, setOnlyFeatured] = useState(queryObj['featured'] == 'true');
    30    const [searchTerm, setSearchTerm] = useState(null);
    31    const [searchLimit, setSearchLimit] = useState(20);
    32  
    33    let filteredCap = itemsFiltered.length;
    34    let increaseSearchLimit = function() {
    35      if ( searchLimit > filteredCap ) {
    36        return
    37      }
    38      let newLimit = searchLimit + 10;
    39      setSearchLimit(newLimit);
    40    };
    41  
    42    //
    43    // Filtering
    44    //
    45  
    46    if (searchTerm) {
    47      itemsFiltered = itemsFiltered.filter(item => {
    48        let searchTerms = searchTerm.split(" ");
    49        let content = `${item.content.metadata.title.toLowerCase()} ${item.content.metadata.description.toLowerCase()}`;
    50        return searchTerms.every(term => {
    51          return content.includes(term.toLowerCase())
    52        })
    53      });
    54    }
    55  
    56    if (onlyFeatured) {
    57      itemsFiltered = itemsFiltered.filter(item => item.content.metadata.featured == true);
    58    }
    59  
    60    filteredCap = itemsFiltered.length;
    61    itemsFiltered = itemsFiltered.slice(0, searchLimit);
    62  
    63    return (
    64      <Layout title="Cookbooks" description="Benthos Cookbooks">
    65        <header className={styles.cookbookListHeader}>
    66          <div className="container">
    67            <div className="row">
    68              <div className="col col--5 col--offset-1">
    69                <img className={styles.headerImgMobile} src="/img/Blobchef.svg" />
    70                <div>
    71                  <h1>Benthos Cookbooks</h1>
    72                  <p>A collection of guides to walk you through more advanced Benthos applications.</p>
    73                </div>
    74                <div className="search">
    75                  <input
    76                    className={classnames("shadow--lw", styles.cookbookSearch)}
    77                    type="text"
    78                    onChange={(event) => setSearchTerm(event.currentTarget.value)}
    79                    placeholder="🔍 Search..." />
    80                </div>
    81              </div>
    82              <div className="col col--5">
    83                <img className={styles.headerImg} src="/img/Blobchef.svg" />
    84              </div>
    85            </div>
    86          </div>
    87        </header>
    88        <div className={styles.cookbookItemsContainer}>
    89          <div className="container container--narrow container--bleed margin-vert--lg">
    90            {itemsFiltered.map(({content: CookbookContent}) => (
    91              <CookbookItem
    92                key={CookbookContent.metadata.permalink}
    93                frontMatter={CookbookContent.frontMatter}
    94                metadata={CookbookContent.metadata}
    95                truncated>
    96                <CookbookContent />
    97              </CookbookItem>
    98            ))}
    99            {itemsFiltered.length > 0 && itemsFiltered.length < items.length && itemsFiltered.length > searchLimit &&
   100              <div className="col">
   101                <button className="button button--secondary cookbook-show-more" onClick={() => increaseSearchLimit()}>Show more</button>
   102              </div>}
   103            {itemsFiltered.length == 0 &&
   104              <div className="col">
   105                <p>Whoops, looks like your search hasn't got any results. If the cookbook you want doesn't exist please <a href="https://github.com/Jeffail/benthos/issues/new">ask for it</a>.</p>
   106              </div>}
   107          </div>
   108        </div>
   109      </Layout>
   110    );
   111  }
   112  
   113  export default CookbookListPage;