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 React, { useEffect, useState, useMemo } from 'react'; import { debounce } from 'lodash'; export default function Home() { const [search, setSearch] = useState(''); const [cards, setCards] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(false); const [queryParams, setQueryParams] = useState(''); const searchForCard = async (event: React.ChangeEvent) => { event.stopPropagation(); setSearch(event.target.value); setLoading(true); await fetch(`https://api.scryfall.com/cards/search?q=${encodeURIComponent(event.target.value)}`) .then( res => res.json() ) .then( ({data}) => { setCards(data); setLoading(false); }) .catch( err => console.log(err) ); }; const debounceSearch = useMemo( () => debounce(searchForCard, 300), [search] ); useEffect(() => { invoke('greet', { name: 'World' }).then(console.log).catch(console.error); }, []); return (
Magic Card Valuator
{loading && !cards.length ?
: cards && cards.map( (card: any) => {`${card.name} ) }
) }