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 } from 'react'; import { debounce } from 'lodash'; import { motion } from 'framer-motion'; import Modal from '../components/modal'; import Transition from '../components/transition'; export async function getStaticProps(context) { const res = await fetch(`https://api.scryfall.com/cards/search?q=${encodeURIComponent('knight')}`); const {data} = await res.json(); return { props: { initialCards: data } } } export default function Home(props) { const [search, setSearch] = useState(''); const [selectedCard, setSelectedCard] = useState({}); const [cardRow, setCardRow] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(false); const [errorMessage, setErrorMessage] = 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 ) { let cardMatrix = []; for(let i = 0; i < res.data.length; i += 4) { cardMatrix.push(res.data.slice(i, i + 4)) } setCardRow(cardMatrix); setLoading(false); } else { setLoading(false); if( res.code === 'not_found' ) { setErrorMessage(res.details); setError(true); } } }) .catch( err => { console.log(err); setLoading(false); 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}
{ cardRow.length === 0 ?
{props.initialCards.map( (card: any) => {`${card.name} ).slice(0, 5) }

Please search for a card!

:
{loading && search !== "" ?
: cardRow && cardRow.map( (row: any, i: number) => {row.map( (card: any, i: number) => { setSelectedCard(card); setModalOpen(true); document.body.classList.toggle('prevent-scroll'); }} className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out 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} /> )} ) }
}
{ !modalOpen &&
window.scrollTo(0, 0)}> arrow_upward
}
) }