56 lines
1.3 KiB
JavaScript
56 lines
1.3 KiB
JavaScript
import { React, useEffect, useState} from 'react'
|
|
import { useRouter } from 'next/router'
|
|
|
|
const Result = ({result, term}) => {
|
|
|
|
const router = useRouter()
|
|
const {book, writer, text} = result._source
|
|
const [title, setTitle] = useState()
|
|
let sentences
|
|
|
|
const checkForMatches = (props) => {
|
|
|
|
if(props.length === 1) return setTitle(props)
|
|
if(props.length > 1){
|
|
return sentences.map(sentence => {
|
|
if(sentence.toLowerCase().includes(term.toLowerCase())) setTitle(sentence)
|
|
else setTitle(props[0])
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
const splitText = () => {
|
|
try{
|
|
return text.match( /[^\.!\?]+[\.!\?]+/g)
|
|
}catch{err => console.log(err)}
|
|
}
|
|
|
|
useEffect(() => {
|
|
sentences = splitText()
|
|
checkForMatches(sentences)
|
|
}, [])
|
|
|
|
|
|
return (
|
|
<div onClick={() => (router.push({pathname: `${result._index}/${result._type}/${result._id}`}))} className='
|
|
self-end
|
|
bg-[#202124]
|
|
w-[100%]
|
|
laptop:max-w-[50vw]
|
|
p-3 m-auto
|
|
border-4
|
|
border-[#303134]
|
|
font-serif text-base
|
|
text-lg
|
|
tablet:text-2xl text-white
|
|
laptop:text-lg
|
|
'
|
|
>
|
|
<p className='m-3'>{title}</p>
|
|
<p className='m-3'>"{book}" - {writer} - str. {result._id}.</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Result |