import Head from 'next/head'; import { invoke } from '@tauri-apps/api/tauri'; import Image from 'next/image'; import styles from '../styles/Home.module.css'; import { useEffect, useState, useMemo, useRef, MutableRefObject, RefObject } from 'react'; import { debounce } from 'lodash'; import Modal from '../components/modal'; export default function Home() { const [search, setSearch] = useState(''); const [selectedCard, setSelectedCard] = useState({}); const [cards, setCards] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(false); const [errorMessage, setErrorMessage] = useState(""); const [queryParams, setQueryParams] = useState(''); const [modalOpen, setModalOpen] = useState(false); const modalRef = useRef(null); const searchForCard = async (event: React.ChangeEvent) => { event.stopPropagation(); setSearch(event.target.value); setLoading(true); setError(false); setErrorMessage(""); if( event.target.value !== '' ) { await fetch(`https://api.scryfall.com/cards/search?q=${encodeURIComponent(event.target.value)}`) .then( res => res.json() ) .then( (res) => { if( res.data ) { setCards(res.data); setLoading(false); } else { setLoading(false); if( res.code === 'not_found' ) { setErrorMessage(res.details); setError(true); } } }) .catch( err => { console.log(err); setLoading(false); if( err.code === 'not_found' ) { setErrorMessage(err.details); setError(true); } } ); } }; const debounceSearch = useMemo( () => debounce(searchForCard, 300), [search] ); useEffect(() => { invoke('greet', { name: 'World' }).then(console.log).catch(console.error); return () => { debounceSearch.cancel(); } }, []); return (
Magic Card Valuator
{errorMessage}
{ cards.length === 0 ?
Please search for a card
:
{loading && search !== "" ?
: cards && cards.map( (card: any) => { setSelectedCard(card); setModalOpen(true); document.body.classList.toggle('prevent-scroll'); }} className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2" key={card.id} alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} /> ) }
}
) }