function component post link search try agai

postLinkSearch2.txt

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 PostLinkSearch2({ onCancel, onHandleSubmit, view}) {
  console.log('i am in postlinksearch2', onCancel, onHandleSubmit, view)
  console.log('i am in postlinkesearch2 this is store', store)
  const [id, setId] = useState('')
  const [value, setValue] = useState('')
  const [suggestions, setSuggestions] = useState([])
  const [currentPostId, setCurrentPostId] = useState(
    store.getState().currentPost.currentPost.id || '')
  const inputProps = {
    placeholder: 'Search',
    value,
    onChange: onChange,
    onKeyDown: onKeyDown,
  }

  const storeInputReference(autosuggest) {
    if (autosuggest != null) {
      input = autosuggest.input
    }
  }

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

  // use useEffect to set focus on input when component loads

  function onSuggestionsFetchRequested(value) {
    fetchSearchResults(value)
  }

  function fetchSearchResults(value) {
    const inputValue = value.trim().toLowerCase()
    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) {
    // eslint-disable-next-line no-unused-expressions
    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) {
    setValue(suggestion.data.attributes.title.trim())
    setId(suggestion.data.id)
  }

  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',
  }
  function randomID() {
    return Math.floor(Math.random() * 0xffffffff)
  }

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

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