Skip to content

Commit b7cdc2f

Browse files
linuxunillinuxunil
authored
Merge pull request #1 from linuxunil/imagesLoading
Images loading
2 parents a479fc3 + d823127 commit b7cdc2f

File tree

3 files changed

+27
-76
lines changed

3 files changed

+27
-76
lines changed

Diff for: ‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
crossorigin="anonymous"
1515
></script>
1616
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
17-
<title>Vite + React</title>
17+
<title>Pokemon Memory Game</title>
1818
</head>
1919
<body>
2020
<div id="root"></div>

Diff for: ‎src/App.jsx

+2-41
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import { useState, useReducer, useEffect } from "react";
1+
import { useState, useReducer } from "react";
22
import GameCard from "./components/GameCard";
33
import "./App.css";
44
import { Navbar, Nav, NavDropdown, Row, Col, Container } from "react-bootstrap";
5-
import axios from "./axios";
6-
import { propTypes } from "react-bootstrap/esm/Image";
75

86
const defaultPokedex = [
97
{
@@ -68,14 +66,13 @@ const defaultPokedex = [
6866
},
6967
];
7068

69+
// BUGS: When high score is recorded images stop changing.
7170
function App() {
7271
const [, forceUpdate] = useReducer(x => x + 1, 0);
7372
const [score, setScore] = useState(0);
7473
const [highScore, setHS] = useState(0);
7574
const [pokedex, setPokedex] = useState(defaultPokedex);
76-
const [imageCache, setImageCache] = useState({});
7775
const [pokemonToDisplay, setPokemonToDisply] = useState(defaultPokedex);
78-
const [isLoading, setLoading] = useState(null);
7976

8077
function isHighScore(newScore) {
8178
if (newScore > highScore) setHS(newScore);
@@ -98,25 +95,6 @@ function App() {
9895
setPokemonToDisply(array);
9996
forceUpdate();
10097
}
101-
useEffect(() => {
102-
async function cacheImages() {
103-
try {
104-
let cacheImages = {};
105-
pokedex.map(async (pokemon) => {
106-
const response = await axios.get(pokemon.name);
107-
const img_url = response.data.sprites.other["official-artwork"];
108-
cacheImages[pokemon.name] = img_url.front_default;
109-
console.log(img_url.front_default);
110-
console.log(cacheImages[pokemon.name]);
111-
});
112-
setImageCache(cacheImages);
113-
} catch (error) {
114-
console.error(error);
115-
}
116-
}
117-
cacheImages();
118-
setLoading(false);
119-
},[pokedex])
12098

12199
const handleClick = (pokemonID) => {
122100
let newState = (pokedex.map(pokemon => {
@@ -138,21 +116,6 @@ function App() {
138116
<Navbar.Brand href="#home">Pokemon Memorization</Navbar.Brand>
139117
<Navbar.Toggle aria-controls="basic-navbar-nav" />
140118
<Navbar.Collapse id="basic-navbar-nav">
141-
{/* <Nav className="me-auto">
142-
<Nav.Link href="#home">Home</Nav.Link>
143-
<Nav.Link href="#link">Link</Nav.Link>
144-
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
145-
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
146-
<NavDropdown.Item href="#action/3.2">
147-
Another action
148-
</NavDropdown.Item>
149-
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
150-
<NavDropdown.Divider />
151-
<NavDropdown.Item href="#action/3.4">
152-
Separated link
153-
</NavDropdown.Item>
154-
</NavDropdown>
155-
</Nav> */}
156119
</Navbar.Collapse>
157120
<Navbar.Collapse className="justify-content-end">
158121
<Col>
@@ -178,9 +141,7 @@ function App() {
178141
key={index}
179142
name={pokemon.name}
180143
handleClick={handleClick}
181-
images={imageCache}
182144
id={pokemon.id}
183-
isLoading={isLoading}
184145
/>
185146
))}
186147
</Row>

Diff for: ‎src/components/GameCard.jsx

+24-34
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,43 @@
1-
import { useState, useEffect } from "react";
1+
import { useEffect, useState } from "react";
22
import { Card, Col, Placeholder } from "react-bootstrap";
3-
// import axios from "../axios";
3+
import axios from "../axios";
44

55
//Display picture of pokemon
66
//Display pokemon name
7+
// TODO: Flip cards on click.
8+
79
export default function GameCard(props) {
8-
const [sprite, setSprite] = useState([]);
9-
const [isLoading, setLoading] = useState(null);
10-
11-
// useEffect(() => {
12-
// async function fetchData() {
13-
// try {
14-
// const response = await axios.get(props.name);
15-
// setSprite(response.data.sprites.other["official-artwork"]);
16-
// } catch (error) {
17-
// console.error(error);
18-
// }
19-
// }
20-
// fetchData();
10+
const [imageURL, setURL] = useState(null)
11+
const [name, setName] = useState(props.name);
2112

22-
// setLoading(false);
23-
// }, [props.name]);
13+
useEffect(() => {
14+
async function getImageURL() {
15+
let response;
16+
let sprites;
17+
try {
18+
response = await axios.get(props.name);
19+
sprites = response.data.sprites.other["official-artwork"];
20+
setURL(sprites.front_default);
21+
setName(props.name);
22+
} catch(error) {
23+
console.error(error);
24+
}
25+
}
26+
getImageURL();
27+
}, [imageURL, props.name]);
2428

25-
if (props.isLoading) {
26-
return <p>Loading...</p>;
27-
} else {
2829
return (
2930
<Col md={"auto"}>
30-
{props.isLoading ? (
31-
<Card style={{ width: '18rem' }}>
32-
<Card.Img variant="top" src="holder.js/100px180" />
33-
<Card.Body>
34-
<Placeholder as={Card.Title} animation="glow">
35-
<Placeholder xs={6} />
36-
</Placeholder>
37-
</Card.Body>
38-
</Card> ) : (
3931
<Card style={{ width: "14rem", height: "15rem" }}
4032
onClick={() => {
4133
props.handleClick(props.id);
4234
}}
4335
>
44-
{console.log(props.images[props.name])}
45-
<Card.Img variant="top" src={props.images[props.name]} />
36+
<Card.Img variant="top" src={imageURL} />
4637
<Card.Body>
47-
<Card.Title>{props.name}</Card.Title>
38+
<Card.Title>{name}</Card.Title>
4839
</Card.Body>
49-
</Card>)}
40+
</Card>
5041
</Col>
5142
);
52-
}
5343
}

0 commit comments

Comments
 (0)