-
+export default function Page() {
+ const [html, setHtml] = useState(
- Get started by editing
- app/page.tsx
-
-
- By{' '}
-
- Loading...
);
+ const [apiKey, setApiKey] = useState("");
+ const [score, setScore] = useState(0);
+ const [message, setMessage] = useState("");
+ const [error, setError] = useState("");
+ const [currentImage, setCurrentImage] = useState("/loading.gif");
+ const [currentBreed, setCurrentBreed] = useState(Breed.AEGEAN);
+ const [randomBreeds, setRandomBreeds]: [randomBreeds: Breed[], setRandomBreeds: any] = useState([]);
+ const [api, setApi] = useState(new TheCatAPI(""));
-
-
+ useEffect(() => {
+ if (window.localStorage.getItem("apiKey") !== null && window.localStorage.getItem("apiKey") !== undefined) {
+ setApiKey(window.localStorage.getItem("apiKey") as string)
+ } else {
+ setApiKeyUi()
+ }
+ }, []);
-
-
-
- - Docs{' '} - - -> - -
-- Find in-depth information about Next.js features and API. -
- + useEffect(() => { + if (apiKey === "") { + return + } + setMessage("") + setApi(new TheCatAPI(apiKey)) + }, [apiKey]) - -- Learn{' '} - - -> - -
-- Learn about Next.js in an interactive course with quizzes! -
- + useEffect(() => { + if (apiKey === "") { + return + } + async function check() { + try { + const img= await api.images.searchImages({ + limit: 1, + hasBreeds: true, + mimeTypes: ["jpg", "png"], + }) + if (img[0].breeds === undefined) { + window.localStorage.removeItem("apiKey") + setError("API key error!") + return false + } + return true + } catch (e) { + console.error(e) + window.localStorage.removeItem("apiKey") + setError("API key error!") + return false + } + } + check().then((canContinue) => { + if (!canContinue) { + return + } + setNewImage() + }) + }, [api]) - -- Templates{' '} - - -> - -
-- Explore the Next.js 13 playground. -
- + useEffect(() => { + if (apiKey === "") { + return + } + if (currentImage === "") return + getRandomBreeds() + }, [currentImage]) - -- Deploy{' '} - - -> - -
-- Instantly deploy your Next.js site to a shareable URL with Vercel. -
- -