try again

postLinkSearch3.js

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

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

  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',
  }

  const theme = {
    input: 'form-control',
    suggestionsList: 'postLinkSuggestionsList',
  }

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

  function onSuggestionsFetchRequested(value) {
    console.log(value)
    setValue(value)
    getSuggestions(value)
  }

  function getSuggestions(value) {
    console.log("value", value)
    const inputValue = value.trim().toLowerCase()
    console.log("value2", value)
    const inputLength = inputValue.length

    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)
      })
  }

  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)} // this needs to be tested
        tabIndex={0}
      >
        {data.attributes.title && (
          <p className="suggestion-title">{data.attributes.title}</p>
        )}
      </div>
    )
  }

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

  function onSuggestionSelected(event, { suggestion }) {
    console.log("Selected: " + suggestion)
    setValue(suggestion.data.attributes.title.trim())
    setId(suggestion.data.id)
  }

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

  function onKeyDown(event) {
    if (event.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 inputRef(autosuggest) {
    if (autosuggest != null) {
      return autosuggest.input.focus()
    }
  }

  // function onChange(event, { newValue, method}) {
  //   setValue(newValue)
  // }

  return (
    <div>
      <Floater view={view}>
        <div className="postlinksearch shadow rounded" style={containerStyle}>
          <div className="d-inline-block">
            <Autosuggest
              id="postlinksearch"//done
              suggestions={suggestions} //done
              onSuggestionsFetchRequested={onSuggestionsFetchRequested} //done
              onSuggestionsClearRequested={onSuggestionsClearRequested} //done
              getSuggestionValue={getSuggestionValue} //done
              renderSuggestion={renderSuggestion} //done
              renderSectionTitle={() => null}
              getSectionSuggestions={() => null}
              onSuggestionSelected={onSuggestionSelected} //done
              inputProps={inputProps} //done
              theme={theme} //done
              ref={inputRef}
            />
          </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>
    </div>
  )
}