Merge pull request Im-Rises#52 from Im-Rises/develop

Develop

README.md

@@ -4,10 +4,25 @@
 
 Pokédex made in React using the Poképedia API.
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
 ## 🚀🚀[you can try the pokedex by clicking here](https://im-rises.github.io/pokedex-react/) 🚀🚀
 
+## 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
 
@@ -32,25 +47,6 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 - [react-gh-pages](https://github.com/gitname/react-gh-pages)
 - https://gist.github.com/apaleslimghost/0d25ec801ca4fc43317bcff298af43c3
 
-<!--
-## Components
-
-| Components Name        |                          its purpose                          |                    How to use it                    |
-|:-----------------------|:-------------------------------------------------------------:|:---------------------------------------------------:|
-| CommonSprites          |      show all common sprites by given the pokemon wanted      |      `<CommonSprites pokemon={"charmander"}>`       |
-| DreamWorldSprites      |   show all Dream World sprites by given the pokemon wanted    |    `<DreamWorldSprites pokemon={"charmander"}>`     |
-| HomeSprites            |       show all Home sprites by given the pokemon wanted       |       `<HomeSprites pokemon={"charmander"}>`        |
-| OfficialArtworkSprites | show all Official Artwork sprites by given the pokemon wanted |  `<OfficialArtworkSprites pokemon={"charmander"}>`  |
-| ShowAllSpriteOfObject  |   show all url with their name in caption from object given   | `<ShowAllSpriteOfObject ObjectOfUrl={ObjectOfUrl}>` |
-| Sprite                 |           show an image by its URL with its legend            |          `<Sprite url={url} name={name}/>`          |
-| VersionSprite          |       show all pokemon sprites generation by generation       |        `<VersionSprite pokemon={pokemon}/>`         |
-| PokemonNumber          |              show the pokemon number by its name              |        `<PokemonNumber pokemon={pokemon}/>`         |
-| PokemonName            |        show the pokemon name in the selected language         |         `<PokemonName pokemon={pokemon}/>`          |
-| PokemonDescription     |     show the pokemon description in the selected language     |      `<PokemonDescription pokemon={pokemon}/>`      |
-| PokemonLegendaryState  |  show the pokemon legendary boolean in the selected language  |    `<PokemonLegendaryState pokemon={pokemon}/>`     |
-| PokemonMythicalState   |  show the pokemon mythical boolean in the selected language   |     `<PokemonMythicalState pokemon={pokemon}/>`     |
--->
-
 ## Documentations
 
 - [React](https://reactjs.org/docs/getting-started.html)
@@ -72,39 +68,6 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 - gh-pages-publish: Publish to gh-pages branch
 - pages-build-deployment: Build and deploy to pages
 
-## Organization
-
-it's based on the NATIONAL pokédex THE LAST VERSION
-
-it loads all photos IN ONCE but if it's lags too much, it will be updated step by step
-
-from a pokémon, we show only official artworks from pokémon (because they're cutty)
-
-- [x] create all the function requests
-    - [x] get all names C
-    - [x] get all icons C
-    - [x] get all numbers (National) Q => passed in pokémon description
-    - [x] from a pokemon
-        - [x] get his type Q
-        - [x] get his photo C
-        - [x] get all descriptions with pkm version Q
-
-### isolation website idea
-
-```mermaid
-flowchart LR
-    client -->|HTTPS| SW
-    subgraph pokedex
-        subgraph github
-            SW[Site web]
-        end
-        subgraph cloud-provider
-            RM[Request Manager]
-        end
-        SW -->|HTTPS| RM -->|HTTPS| SW
-    end
-```
-
 ## Authors
 
 - [@clementreiffers](https://www.github.com/clementreiffers)

src/components/LazyLoadImage/LazyLoadImage.jsx

@@ -0,0 +1,31 @@
+import {useEffect, useRef} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const LazyLoadImage = props => {
+	const imageRef = useRef();
+
+	useEffect(() => {
+		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;
+					observer.unobserve(imageRef.current);
+				}
+			});
+		});
+
+		observer.observe(imageRef.current);
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [props.src]);
+
+	return <img ref={imageRef} alt=''/>;
+};
+
+LazyLoadImage.propTypes = {
+	src: PropTypes.string.isRequired,
+};

src/components/PokemonList/PokemonListElement.jsx

@@ -3,29 +3,24 @@ import {useEffect, useRef, useState} from 'react';
 import {getAllFromPokemon, uppercaseFirstLetter} 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 LazyLoadImage = props => {
-	const imageRef = useRef();
+const PokemonImageLogo = props => {
+	const [icon, setIcon] = useState(PokeballLoadingImage);
 
 	useEffect(() => {
-		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;
-					observer.unobserve(imageRef.current);
-				}
-			});
-		});
-
-		observer.observe(imageRef.current);
-
-		return () => {
-			observer.disconnect();
-		};
+		// if props.src update
+		if (props.src) {
+			setIcon(props.src);
+		}
 	}, [props.src]);
 
-	return <img ref={imageRef} alt=''/>;
+	return <img src={icon} alt={props.pokemonName}/>;
+};
+
+PokemonImageLogo.propTypes = {
+	src: PropTypes.string.isRequired,
+	pokemonName: PropTypes.string.isRequired,
 };
 
 export const PokemonListElement = props => {
@@ -49,14 +44,12 @@ export const PokemonListElement = props => {
 	}, [props.pokemonName]);
 
 	return <div>
-		{icon && <LazyLoadImage src={icon}/>}
+		{/* {icon && <LazyLoadImage src={icon}/>} */}
+		{icon && <PokemonImageLogo src={icon} pokemonName={props.pokemonName}/>}
 		{uppercaseFirstLetter(props.pokemonName)}
 	</div>;
 };
 
 PokemonListElement.propTypes = {
 	pokemonName: PropTypes.string.isRequired,
 };
-LazyLoadImage.propTypes = {
-	src: PropTypes.string.isRequired,
-};

src/constants/pokemon-data-fetch.js

@@ -9,19 +9,20 @@ const pokemonDataModel = {
 
 const clementPokemonData = {
 	pokemonName: 'clement',
-	officialArtwork: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/143.png',
-	icon: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/143.png',
-	type: 'normal',
-	flavourEntries: 'When it is done spinning, it becomes dizzy and cannot stand up.',
-	pokemonNumber: 143,
+	officialArtwork: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/569.png',
+	icon: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/569.png',
+	type: ['normal'],
+	flavourEntries: 'This Pokémon eats trash, which turns into poison inside its body. The main component of the poison depends on what sort of trash was eaten.',
+	pokemonNumber: 569,
 };
 
 const quentinPokemonData = {
 	pokemonName: 'quentin',
-	officialArtwork: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/493.png',
-	icon: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/493.png',
-	type: 'normal',
-	flavourEntries: 'It can freely recombine its own cellular structure to transform into other life-forms.',
+	officialArtwork: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/10157.png',
+	icon: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10157.png',
+	type: ['psychic', 'dragon'],
+	flavourEntries: 'This is its form when it has absorbed overwhelming light energy. It fires laser beams from all over its body.',
+	pokemonNumber: 10157,
 };
 
 export {pokemonDataModel, clementPokemonData, quentinPokemonData};

src/pages/PokemonList.jsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {getListOfPkmAvailable} from '../requests/pokedex-request.js';
 import {MAX_PKM} from '../constants/pokedex-constant.js';
-import pokeballLoadingImage from '../images/loading/pokeball_loading.gif';
+import pokeballLoadingImage from '../images/loading/pokeball-loading-150x150.gif';
 import './PokemonList.scss';
 import {pipe, pluck, prop} from 'ramda';
 import {getAllFromPokemon, uppercaseFirstLetter} from '../requests/index.js';
@@ -98,11 +98,14 @@ export const PokemonList = () => {
 				<div className={'pokemon-name'}>
 					{pokemon.select ? uppercaseFirstLetter(pokemon.select) : 'Select a pokemon!'}
 				</div>
-				<div>
+				<div className={'pokemon-artwork-holder'}>
 					{pokemon.select ? <img src={pokemon.officialArtwork} alt={'official artwork'}/> : <></>}
 				</div>
-				{pokemon.select
-                    && <button className={'pokemon-view-details-button'} onClick={toggleViewDetails}>View details</button>}
+				<div className={'pokemon-view-details-button-holder'}>
+					{pokemon.officialArtwork !== pokeballLoadingImage
+                        && <button onClick={toggleViewDetails}>View
+                            details</button>}
+				</div>
 			</div>
 			<div className={'right'}>
 				<input type={'search'} className={'search-bar'} value={pokemon.search}

src/pages/PokemonList.scss

@@ -6,6 +6,22 @@
   .left {
     width: 100%;
 
+    .pokemon-artwork-holder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        //width: 80%;
+        //height: auto;
+        max-width: 100%;
+        max-height: 100%;
+        height: 100%;
+        //width: 80%;
+        //height: auto;
+      }
+    }
+
     .pokemon-name {
       width: 80%;
       margin: auto;
@@ -17,26 +33,32 @@
       background-color: rgb(255, 255, 255, 0.5);
     }
 
-    .pokemon-view-details-button {
-      // button in pokedex style
-      background-color: white;
-      border: 1px solid black;
-      border-radius: 30px;
-      padding: 5%;
-      margin: 5%;
-      font-size: 20px;
-      width: 80%;
-      opacity: 0.7;
-
-      &:hover {
-        background-color: coral;
-        cursor: pointer;
-        opacity: 1;
-      }
-
-      &:active {
-        background-color: #61dafb;
-        cursor: pointer;
+    .pokemon-view-details-button-holder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      button {
+        // button in pokedex style
+        background-color: white;
+        border: 1px solid black;
+        border-radius: 30px;
+        padding: 5%;
+        //margin: 5%;
+        font-size: 20px;
+        width: 80%;
+        opacity: 0.7;
+
+        &:hover {
+          background-color: coral;
+          cursor: pointer;
+          opacity: 1;
+        }
+
+        &:active {
+          background-color: #61dafb;
+          cursor: pointer;
+        }
       }
     }
   }