import { SearchResultModel } from "../models/SearchResultModel" ; import React , { ChangeEvent , EventHandler , MouseEventHandler , useState } from "react" ; import { mapJSONTrackSearchToModel } from "../utilities/JSONMapperUtilities" ; type SearchResultListProps = { searchResults : Map < string , SearchResultModel > ; setCurrentSelected : ( track : SearchResultModel ) => void ; } ; export const SearchResultList = ( { searchResults , setCurrentSelected } ) => { const [ selectedToShow , setSelectedToShow ] = useState ( "" ) ; const handleSelectTrack = ( trackId ) => { setCurrentSelected ( searchResults . get ( trackId ) ! ! ) ; setSelectedToShow ( trackId ) ; } ; const renderResults = ( ) => { let res = [ ] ; searchResults . forEach ( ( track , key ) => { res . push ( track ) ; } ) ; return res ; } ; return ( < > { renderResults ( ) . map ( ( result ) => { return ( < div className = "col-lg col-sm-3 m-1" > < div className = { "card shadow track my-2 d-block " + ( selectedToShow == result . trackId ? "selected-track" : "" ) } id = { result . trackId } onClick = { ( ) => handleSelectTrack ( result . trackId ) } > < img className = "card-img-top" src = { result . imgUrl } / > < p className = "card-title py-2" > { result . title } < br / > < i > by { result . artistName } < /i> < /p> < /div> < /div>); } ) } < />); } ;