Merge pull request #55 from Im-Rises/develop

Develop

README.md

@@ -8,20 +8,9 @@ Pokédex made in React using the Poképedia API.
 
 ## To do list
 
-- [x] Create the main pages
 - [ ] Improve css for all the pages
 - [ ] Responsive design
-- [ ] Correct search bar bugs
-- [x] Add loading animations
-- [ ] Correct pokemon not loading at the end of the list
 - [ ] Correct web query bug (check console after clicking the pokemon pokeball intro menu)
-- [x] import and correct the intro menu pokedex (pokeball opening)
-- [x] Add a pokemon search bar
-- [ ] Add easteregg
-- [ ] Add logo for pokemon types
-- [x] Change pokemon for clément from Snorlax to Muk
-- [x] Change pokemon for clément from Muk to Garbodor
-- [x] Change pokémon for Quentin from Arceus to Ultra Necrozma
 
 <!--
 ## Overview

package.json

@@ -27,6 +27,7 @@
     "ramda": "^0.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-toastify": "^9.1.3",
     "sass": "^1.66.1"
   },
   "devDependencies": {

src/app.jsx

@@ -7,10 +7,10 @@ const App = () => {
 	const [isOpeningClicked, setIsOpeningClicked] = React.useState(false);
 
 	return (
-		<>
+		<div className={'app-main'}>
 			<PokeOpening handleHasOpened={() => setIsOpeningClicked(true)} hasClicked={isOpeningClicked}/>
 			{isOpeningClicked && <PokemonList/>}
-		</>
+		</div>
 	);
 };
 

src/app.scss

@@ -0,0 +1,4 @@
+.app-main {
+  width: 100vw;
+  height: 100vh;
+}

src/components/LazyLoadImage/LazyLoadImage.jsx

@@ -1,6 +1,11 @@
 import {useEffect, useRef} from 'react';
 import PropTypes from 'prop-types';
 import React from 'react';
+import defaultIcon from '../../images/loading/pokeball-loading-50x50.gif';
+
+const imageLinkGetter = link => new Promise(resolve => {
+	resolve(link);
+});
 
 const LazyLoadImage = props => {
 	const imageRef = useRef();
@@ -9,8 +14,10 @@ const LazyLoadImage = props => {
 		const observer = new IntersectionObserver(entries => {
 			entries.forEach(entry => {
 				if (entry.isIntersecting) {
-					// Charger l'image lorsque l'élément devient visible
-					imageRef.current.src = props.src;
+					props.imageGetter().then(icon => {
+						imageRef.current.src = icon;
+					});
+					// load image only if it's visible by users
 					observer.unobserve(imageRef.current);
 				}
 			});
@@ -21,11 +28,15 @@ const LazyLoadImage = props => {
 		return () => {
 			observer.disconnect();
 		};
-	}, [props.src]);
+	}, [props.imageGetter]);
 
-	return <img ref={imageRef} alt=''/>;
+	return <img src={defaultIcon} alt={''} ref={imageRef} className={props.className}/>;
 };
 
 LazyLoadImage.propTypes = {
-	src: PropTypes.string.isRequired,
+	imageGetter: PropTypes.func.isRequired,
+	className: PropTypes.string,
 };
+
+export {imageLinkGetter};
+export default LazyLoadImage;

src/components/Opening/GitHub/GithubLink.scss

@@ -9,8 +9,9 @@
 }
 
 .github-links:hover {
-  background-color: white;
+  background-color: #EEEEEE;
   color: black;
+  border-radius: 5px;
 }
 
 .github-icon {

src/components/Opening/TopBottomBars/TopOpening.jsx

@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 import PokemonLogo from '/src/images/logo/logo-pokedex.png';
 // import './GithubLink.scss';
 import {GitHubLink} from '../GitHub/GitHubLink.jsx';
+import LazyLoadImage, {imageLinkGetter} from '../../LazyLoadImage/LazyLoadImage.jsx';
 
 export const TopOpening = ({hasOpened}) => {
 	const changeClassName = (hasClicked, where) => hasClicked ? `${where}-move` : `${where}-fixed`;
 	return (
 
 		<div className={changeClassName(hasOpened, 'top')}>
 			<div className={'pokedex-logo-container'}>
-				<img className={'pokedex-logo'}
-					src={PokemonLogo} alt={'pokedex'}/>
+				<img className={'pokedex-logo'} src={PokemonLogo} alt={'pokedex'}/>
 				<GitHubLink text={'pokedex-react'} link={'https://github.com/Im-Rises/pokedex-react'}/>
 			</div>
 		</div>

src/components/PokemonList/PokemonListElement.jsx

@@ -1,52 +1,17 @@
 import PropTypes from 'prop-types';
-import {useEffect, useRef, useState} from 'react';
-import {getAllFromPokemon, uppercaseFirstLetter} from '../../requests/index.js';
+import {getAllFromPokemon} from '../../requests/index.js';
 import React from 'react';
-import {clementPokemonData, quentinPokemonData} from '../../constants/pokemon-data-fetch.js';
-import PokeballLoadingImage from '/src/images/loading/pokeball-loading-50x50.gif';
-
-const PokemonImageLogo = props => {
-	const [icon, setIcon] = useState(PokeballLoadingImage);
-
-	useEffect(() => {
-		// if props.src update
-		if (props.src) {
-			setIcon(props.src);
-		}
-	}, [props.src]);
-
-	return <img src={icon} alt={props.pokemonName}/>;
-};
-
-PokemonImageLogo.propTypes = {
-	src: PropTypes.string.isRequired,
-	pokemonName: PropTypes.string.isRequired,
-};
+import LazyLoadImage from '../LazyLoadImage/LazyLoadImage.jsx';
+import './pokemon-list-element.scss';
 
 export const PokemonListElement = props => {
-	const [icon, setIcon] = useState('');
-
-	useEffect(() => {
-		// Don't mind this code, it's juste a joke 😝
-		if (props.pokemonName === clementPokemonData.pokemonName) {
-			setIcon(clementPokemonData.icon);
-			return;
-		}
-
-		// Leave this code, it's the perfection 😁
-		if (props.pokemonName === quentinPokemonData.pokemonName) {
-			setIcon(quentinPokemonData.icon);
-			return;
-		}
-
+	const imageGetter = () =>
 		getAllFromPokemon(props.pokemonName)
-			.then(({icon}) => setIcon(icon));
-	}, [props.pokemonName]);
+			.then(({icon}) => icon);
 
-	return <div>
-		{/* {icon && <LazyLoadImage src={icon}/>} */}
-		{icon && <PokemonImageLogo src={icon} pokemonName={props.pokemonName}/>}
-		{uppercaseFirstLetter(props.pokemonName)}
+	return <div className={'pokemon-list-element'}>
+		{<LazyLoadImage imageGetter={imageGetter} />}
+		{props.pokemonName}
 	</div>;
 };
 

src/components/PokemonList/pokemon-list-element.scss

@@ -0,0 +1,3 @@
+.pokemon-list-element {
+  text-transform: capitalize;
+}

src/constants/pokedex-constant.js

@@ -2,8 +2,8 @@ const API_URL = 'https://pokeapi.co/api/v2';
 
 const LANGUAGE_NAME = 'en';
 
-const POKEDEX_TYPE = 'national';
+const POKEDEX_TYPE = 'national';// Unusable for now, only national pokedex is available
 
-const MAX_PKM = 1281;
+const MAX_PKM = 1281;// Value from https://pokeapi.co/api/v2/pokemon-species/ doesn't seem to be the same as the number of pokemon in the pokedex
 
 export {API_URL, LANGUAGE_NAME, POKEDEX_TYPE, MAX_PKM};

src/constants/pokemon-data-fetch.js

@@ -25,4 +25,6 @@ const quentinPokemonData = {
 	pokemonNumber: 10157,
 };
 
-export {pokemonDataModel, clementPokemonData, quentinPokemonData};
+const easterEggPokemonData = [clementPokemonData, quentinPokemonData];
+
+export {pokemonDataModel, easterEggPokemonData};

src/pages/PokemonDetails.jsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import './PokemonDetails.scss';
-import {getAllFromPokemon, getPokemonOtherInfo, uppercaseFirstLetter} from '../requests/index.js';
+import {getAllFromPokemon, getPokemonOtherInfo} from '../requests/index.js';
 import {pokemonDataModel} from '../constants/pokemon-data-fetch.js';
 import pokemonTypeConstant from '../constants/pokemon-type-constant.js';
 import PropTypes from 'prop-types';
@@ -21,11 +21,14 @@ export const PokemonDetails = props => {
 
 	return (
 		<div className={'pokemon-details-panel'}>
+			<div className={'exit-details-page'}>
+				<button onClick={props.exitDetailsPage}>X</button>
+			</div>
 			<div className={'pokemon-presentation'}>
 				<div className={'panel-name-artwork'}>
 					<div className={'pokemon-name-logo'}>
 						<img src={pokemonData.icon} alt={props.name}/>
-						<h2>{uppercaseFirstLetter(props.name)}</h2>
+						<h2>{props.name}</h2>
 					</div>
 					<div className={'pokemon-artwork'}>
 						<img src={pokemonData.officialArtwork} alt={props.name}/>
@@ -39,7 +42,8 @@ export const PokemonDetails = props => {
 					<p className={'pokemon-types-title'}>Types:</p>
 					<ul>
 						{R.map(
-							type => <li key={type}>{type}
+							type => <li key={type}>
+								<p>{type}</p>
 								<img
 									style={{width: 'auto', height: '60%'}}
 									src={pokemonTypeConstant[type]}
@@ -69,5 +73,6 @@ export const PokemonDetails = props => {
 
 PokemonDetails.propTypes = {
 	name: PropTypes.string.isRequired,
+	exitDetailsPage: PropTypes.func.isRequired,
 };