soniCaH / KCVV-Elewijt-Gatsby

import Axios from "axios"

import { Link } from "gatsby"

import * as JsSearch from "js-search"

import "./search-container.scss"

class Search extends Component {

  state = {

    articleList: [],

    teamList: [],

    playerList: [],

    staffList: [],

    eventList: [],

    search: [],

    searchResults: [],

    isLoading: true,

    isError: false,

    searchQuery: ``,

  }

  }

  /**

   * rebuilds the overall index based on the options

   */

  rebuildIndex = () => {

    const {

      articleList,

      teamList,

      playerList,

      staffList,

      eventList,

    } = this.state

    const dataToSearch = new JsSearch.Search(`id`)

    /**

     *  defines a indexing strategy for the data

     * more more about it in here https://github.com/bvaughn/js-search#configuring-the-index-strategy

     */

    dataToSearch.indexStrategy = new JsSearch.PrefixIndexStrategy()

    /**

     * defines the sanitizer for the search

     * to prevent some of the words from being excluded

     *

     */

    dataToSearch.sanitizer = new JsSearch.LowerCaseSanitizer()

    /**

     * defines the search index

     * read more in here https://github.com/bvaughn/js-search#configuring-the-search-index

     */

    dataToSearch.searchIndex = new JsSearch.TfIdfSearchIndex(`id`)

    dataToSearch.addIndex([`attributes`, `body`, `processed`])

    dataToSearch.addIndex([`attributes`, `title`])

    dataToSearch.addDocuments(articleList)

    dataToSearch.addDocuments(teamList)

    dataToSearch.addDocuments(playerList)

    dataToSearch.addDocuments(staffList)

    dataToSearch.addDocuments(eventList)

    this.setState({ search: dataToSearch, isLoading: false })

  }

  /**

   * handles the input change and perform a search with js-search

   * in which the results will be added to the state

   */

  searchData = (e) => {

    const { search } = this.state

    const queryResult = search.search(e.target.value)

    this.setState({ searchQuery: e.target.value, searchResults: queryResult })

  }

  handleSubmit = (e) => {

    e.preventDefault()

  }

  renderForm = (searchQuery) => (

    <form onSubmit={this.handleSubmit}>

      <div>

        <label className={"search_input__label"} htmlFor="search">

          <input

            id="search"

            onChange={this.searchData}

            className={"search_input__input"}

            placeholder="Spelersnaam, ploegnaam, deel van een artikel..."

            value={searchQuery}

            required

          />

          <span className={"search_input__label__inner_wrapper"}>

            <span className={"search_input__label__inner_text"}>

              Waar bent u naar op zoek?

            </span>

          </span>

        </label>

      </div>

    </form>

  )

  renderQueryResultsCaption = () => (

    <caption>

      <i

        className={`article__footer_related__icon article__footer_related__icon--node--article fa`}

      />{" "}

      Nieuwsbericht

      <br />

      <i

        className={`article__footer_related__icon article__footer_related__icon--node--team fa`}

      />{" "}

      Ploeg

      <br />

      <i

        className={`article__footer_related__icon article__footer_related__icon--node--player fa`}

      />{" "}

      Speler

      <br />

      <i

        className={`article__footer_related__icon article__footer_related__icon--node--staff fa`}

      />{" "}

      Staflid

      <br />

      <i

        className={`article__footer_related__icon article__footer_related__icon--node--event fa`}

      />{" "}

      Evenement

      <br />

    </caption>

  )

  renderQueryResultItem = (item) => (

    <tr key={`row_${item.attributes.drupal_internal__nid}`}>

      <td>

        <Link to={item.attributes.path.alias}>

          <i

            className={`article__footer_related__icon article__footer_related__icon--${item.type} fa`}

          />

          {item.attributes.title}

        </Link>

      </td>

    </tr>

  )

  renderQueryResults = (queryResults) => (

    <div>

      <h3>Gevonden resultaten: {queryResults.length}</h3>

      <table>

        <thead>

          <tr>

            <th>Titel</th>

          </tr>

        </thead>

        <tbody>

          {/* eslint-disable */}

          {queryResults.map((item) => {

            return this.renderQueryResultItem(item)

          })}

          {/* eslint-enable */}

        </tbody>

        {this.renderQueryResultsCaption()}

      </table>

    </div>

  )

  render() {

    const { isError, isLoading, searchResults, searchQuery } = this.state

    const queryResults = searchQuery === `` ? [] : searchResults

    if (isLoading) {

      return <p>Zoekfunctie is aan het laden...</p>

    }

    if (isError) {

      return (

        <>

          <h2>Aiiii...</h2>

          <h3>

            Er ging iets mis - gelieve{" "}

            <a href="mailto:[email protected]">contact op te nemen</a>{" "}

            indien het probleem zich blijft voordoen.

          </h3>

        </>

      )

    }

    return (

      <div className={"search--placeholder"}>

        {this.renderForm(searchQuery)}

        {queryResults.length > 0 && this.renderQueryResults(queryResults)}

      </div>

    )

  }

}

export default Search