Change search results ui to stack identical multiverse_id

[anthony-devarti]

there should not be identical entries for cards with the same multiverse_id (mid in echomtg)

note: some cards just don't have mids, so we need to make the app not whitescreen if we hit one of these via error handling.

my top of head idea is that if the multiverse id is null, just generate a unique card.

[anthony-devarti]

I'm thinking this might be a use the array filter method to filter through the array of objects and find each unique multiverseid, then count the totals.

Remember that the initial search is handled by an API that we do not control, so most of this logic will have to live on the frontend.

[ast-epk]

The search function is found in sylvan-library/src/Components/SubComponents/ReservationModal/SearchBar.js.

Lines 9-65 extracted for comments:

export default function SearchBar({addToBasket}) {

    const [search, setSearch] = useState('')
    const [searchResults, setSearchResults] = useState([])

    const reservedCardsInState = useSelector(state => state.basket.reservedCards)

    const request = async () => {
        // creates an `endpoint` variable for calling up a search result
        const endpoint = `https://api.echomtg.com/api/inventory/view/?start=0&limit=100$sort=name&search=${search}`;
        // call on the endpoint to produce a search result `res`
        const res = await fetch(endpoint, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${ECHO_TOKEN}`
            }
        })
        // Inserts the content of the search result `res` into a JSON variable named `data`
        const data = await res.json();
        // as long as data.status has not thrown an error, run the setSearchResults function passing data.items (this calls on ./Results, as imported in the top of the file)
        if (data.status != 'error') {
            setSearchResults(data.items)
        }

        //we probably want to filter these search results according to outstanding inventory ids that are not available, that way we're not showing stuff that isn't available
        return data;
    }

    return (
        <div className='search'>
            <div className='search-bar'>
                <Form.Control
                    className='search-field'
                    type="text"
                    id="search"
                    placeholder='Search'
                    onChange={e => setSearch(e.target.value)}
                />
                <Button className='go-button' onClick={request}>Go!</Button>
            </div>
            <div className='results'>
                { searchResults.length == 0 &&
                    <>
                    No Results
                    </>
                }
                {searchResults.map((item) => {
                    //just don't render them here if they are among the cards that are reserved already
                    if (reservedCardsInState && reservedCardsInState.includes(item.inventory_id)){
                        console.log('hiding something that is reserved')
                        return null
                    }
                    return (
                        <Result item={item} addToBasket={addToBasket} key={item.inventory_id}/>
                    )
                })}
            </div>
        </div>
    )
}

The Results function is held within sylvan-library/src/Components/SubComponents/ReservationModal/SearchBar.js:

// the results of the search can be seen and selected from this section 
import { Button } from 'react-bootstrap'
// passing `item` variable and `addToBasket` function into the Results function.
export default function Results({item, addToBasket}) {

    return (
        <div className="result">
            <div>
                <img src={item.image} style={{maxWidth:'10vw'}}/>
            </div>
            <div>
                {item.name}
            </div>
            <div>
                {item.inventory_id}
            </div>
            <Button onClick={() => addToBasket(item)}>Reserve</Button>
        </div>
    )
}