postLinkSearch2 function component

postLinkSearch2.js

import React, { useState } from 'react'
import Autosuggest from 'react-autosuggest'
import superagent from 'superagent'
import Floater from './Floater'
import { store } from './store'

export default function PostLinkSearch2(props) {
  const [id, setId] = useState('')
  const [value, setValue] = useState('')
  const [suggestions, setSuggestions] = useState([])
  const [currentPostId] = useState(
    store.getState().currentPost.currentPost.id || ''
  )
  const inputProps = {
    placeholder: 'Search',
    value,
    onChange: onChange,
    onKeyDown: onKeyDown,
  }
  const { onCancel, onHandleSubmit, view } = props

  function handleFormSubmit() {
    onHandleSubmit({
      id,
      value,
      suggestions,
      currentPostId,
    })
  }

  function onChange(e, { newValue, method }) {
    setValue(newValue)
  }

  function onKeyDown(e) {
    if (e.keyCode === 13) {
      let suggestion
      if (suggestions.length > 0) {
        suggestion = suggestions[0]
      }
      if (
        suggestion &&
        suggestion.data.attributes.title
          .toLowerCase()
          .includes(value.toLowerCase())
      ) {
        setId(suggestion.data.id)
      }
    }
  }

  function onSuggestionsFetchRequested(value) {
    fetchSearchResults(value)
  }

  function onSuggestionsClearRequested() {
    setSuggestions([])
  }

  function getSuggestionValue(suggestion) {
    suggestion.title || ''
  }

  function renderSuggestion(suggestion) {
    const { data } = suggestion
    return (
      <div
        className="suggestion-row"
        role="button"
        onClick={handleClick(data)}
        onKeyPress={handleClick(data)}
        tabIndex={0}
      >
        {data.attributes.title && (
          <p className="suggestion-title">{data.attributes.title}</p>
        )}
      </div>
    )
  }

  function handleClick(data) {
    setValue(data.attributes.title)
  }

  function fetchSearchResults(value) {
    const inputValue = value.toString().trim().toLowerCase()
    const inputLength = inputValue.inputLength

    if (inputLength === 0) return []

    var query = value
    const url = '/search/bar?query=' + query
    let suggestions = []

    superagent
      .get(url)
      .set('accept', 'application/json')
      .then((res) => {
        console.log(res.body)
        suggestions = res.body
        setSuggestions(suggestions)
      })
  }

  const containerStyle = {
    display: 'inline-block',
    background: 'white',
    padding: '6px',
  }

  const buttonRow = {
    display: 'inline-block',
  }

  const buttonStyle = {
    padding: '9px 10px 8px 10px',
    top: '-1px',
    position: 'relative',
  }

  return (
    <Floater view={view}>
      <div className="postlinksearch shadow rounded" style={containerStyle}>
        <div className="d-inline-block">
          <Autosuggest
            suggestions={suggestions}
            onSuggestionsFetchRequested={onSuggestionsFetchRequested}
            onSuggestionsClearRequested={onSuggestionsClearRequested}
            getSuggestionValue={getSuggestionValue}
            renderSuggestion={renderSuggestion}
            inputProps={inputProps}
            renderSectionTitle={() => null}
            getSectionSuggestions={() => null}
          />
        </div>
        <div className="button-row" style={buttonRow}>
          <button
            type="button"
            className="btn btn-primary btn-sm"
            onClick={handleFormSubmit}
            style={buttonStyle}
          >
            Submit
          </button>
          &nbsp;
          <button type="button" className="btn btn sm o" onClick={onCancel}>
            Cancel
          </button>
        </div>
      </div>
    </Floater>
  )
}