Host on GH

Author: linuxunil

src/App.jsx

@@ -1,7 +1,9 @@
-import { useState, useReducer } from "react";
+import { useState, useReducer, useEffect } from "react";
 import GameCard from "./components/GameCard";
 import "./App.css";
 import { Navbar, Nav, NavDropdown, Row, Col, Container } from "react-bootstrap";
+import axios from "./axios";
+import { propTypes } from "react-bootstrap/esm/Image";
 
 const defaultPokedex = [
   {
@@ -71,8 +73,9 @@ function App() {
   const [score, setScore] = useState(0);
   const [highScore, setHS] = useState(0);
   const [pokedex, setPokedex] = useState(defaultPokedex);
-  // const [pokimonToPlay, setPokimonToPlay] = useState();
+  const [imageCache, setImageCache] = useState({});
   const [pokemonToDisplay, setPokemonToDisply] = useState(defaultPokedex);
+  const [isLoading, setLoading] = useState(null);
 
   function isHighScore(newScore) {
     if (newScore > highScore) setHS(newScore);
@@ -95,6 +98,25 @@ function App() {
     setPokemonToDisply(array);
     forceUpdate();
   }
+  useEffect(() => {
+    async function cacheImages() {
+      try {
+        let cacheImages = {};
+        pokedex.map(async (pokemon) => {
+          const response = await axios.get(pokemon.name);
+          const img_url = response.data.sprites.other["official-artwork"];
+          cacheImages[pokemon.name] = img_url.front_default;
+        console.log(img_url.front_default);
+        console.log(cacheImages[pokemon.name]);
+      });
+      setImageCache(cacheImages);
+    } catch (error) {
+      console.error(error);
+    }
+    }
+    cacheImages();
+    setLoading(false);
+  },[pokedex])
 
   const handleClick = (pokemonID) => {
     let newState = (pokedex.map(pokemon => {
@@ -113,10 +135,10 @@ function App() {
     <>
     <Navbar expand="lg" className="bg-body-tertiary" pb={4}>
       <Container>
-        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
+        <Navbar.Brand href="#home">Pokemon Memorization</Navbar.Brand>
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
-          <Nav className="me-auto">
+          {/* <Nav className="me-auto">
             <Nav.Link href="#home">Home</Nav.Link>
             <Nav.Link href="#link">Link</Nav.Link>
             <NavDropdown title="Dropdown" id="basic-nav-dropdown">
@@ -130,7 +152,7 @@ function App() {
                 Separated link
               </NavDropdown.Item>
             </NavDropdown>
-          </Nav>
+          </Nav> */}
         </Navbar.Collapse>
           <Navbar.Collapse className="justify-content-end">
             <Col>
@@ -150,13 +172,15 @@ function App() {
 
     </Navbar>
     <Container>
-        <Row className="justify-content-md-center">
+        <Row className="justify-content-md-center pt-5">
         {pokemonToDisplay.map((pokemon, index) => (
           <GameCard
             key={index}
             name={pokemon.name}
             handleClick={handleClick}
+            images={imageCache}
             id={pokemon.id}
+            isLoading={isLoading}
           />
         ))}
       </Row>

src/components/GameCard.jsx

@@ -1,43 +1,52 @@
 import { useState, useEffect } from "react";
-import { Card, Col } from "react-bootstrap";
-import axios from "../axios";
+import { Card, Col, Placeholder } from "react-bootstrap";
+// import axios from "../axios";
 
 //Display picture of pokemon
 //Display pokemon name
 export default function GameCard(props) {
   const [sprite, setSprite] = useState([]);
   const [isLoading, setLoading] = useState(null);
 
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const response = await axios.get(props.name);
-        setSprite(response.data.sprites.other["official-artwork"]);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-    fetchData();
+  // useEffect(() => {
+  //   async function fetchData() {
+  //     try {
+  //       const response = await axios.get(props.name);
+  //       setSprite(response.data.sprites.other["official-artwork"]);
+  //     } catch (error) {
+  //       console.error(error);
+  //     }
+  //   }
+  //   fetchData();
 
-    setLoading(false);
-  }, [props.name]);
+  //   setLoading(false);
+  // }, [props.name]);
 
-  if (isLoading) {
+  if (props.isLoading) {
     return <p>Loading...</p>;
   } else {
     return (
       <Col md={"auto"}>
-        <Card
-          style={{ width: "14rem", height: "15rem" }}
+      {props.isLoading ? (
+        <Card style={{ width: '18rem' }}>
+          <Card.Img variant="top" src="holder.js/100px180" />
+          <Card.Body>
+            <Placeholder as={Card.Title} animation="glow">
+              <Placeholder xs={6} />
+            </Placeholder>
+          </Card.Body>
+        </Card> ) : ( 
+          <Card style={{ width: "14rem", height: "15rem" }}
           onClick={() => {
             props.handleClick(props.id);
           }}
         >
-          <Card.Img variant="top" src={sprite.front_default} />
+          {console.log(props.images[props.name])}
+          <Card.Img variant="top" src={props.images[props.name]} />
           <Card.Body>
             <Card.Title>{props.name}</Card.Title>
           </Card.Body>
-        </Card>
+        </Card>)}
       </Col>
     );
   }

vite.config.js

@@ -11,5 +11,5 @@ export default defineConfig({
     host: true,
     strictPort: true,
     port: 5173,
-  }
+  },
 })