Merge pull request #65 from Im-Rises/develop

Develop

src/app.jsx

@@ -2,6 +2,10 @@ import './app.scss';
 import React from 'react';
 import PokeOpening from './components/Opening/PokeOpening.jsx';
 import {PokemonList} from './pages/PokemonList.jsx';
+import {CodeKeyboardInputsEasterEgg} from './components/CodeKeyboardInputsEasterEgg/CodeKeyboardInputsEasterEgg.jsx';
+import konamicode from './constants/code-easteregg.js';
+import {ToastContainer, toast} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const App = () => {
 	const [isOpeningClicked, setIsOpeningClicked] = React.useState(false);
@@ -10,6 +14,16 @@ const App = () => {
 		<div className={'app-main'}>
 			<PokeOpening handleHasOpened={() => setIsOpeningClicked(true)} hasClicked={isOpeningClicked}/>
 			<PokemonList/>
+			<CodeKeyboardInputsEasterEgg code={konamicode} actionOnEasterEgg={() => {
+				toast('Easter Egg 1 found! Or should I say... Easter Pkm Egg?', {
+					type: 'success',
+					autoClose: 5000,
+					icon: '🥚',
+					closeOnClick: true,
+					pauseOnHover: false,
+				});
+			}}/>
+			<ToastContainer/>
 		</div>
 	);
 };

src/components/CodeKeyboardInputsEasterEgg/CodeKeyboardInputsEasterEgg.jsx

@@ -0,0 +1,41 @@
+import React, {useEffect, useState} from 'react';
+import PropTypes from 'prop-types';
+
+export const CodeKeyboardInputsEasterEgg = props => {
+	const [inputValue, setInputValue] = useState('');
+
+	const handleKeyDown = event => {
+		const {keyCode} = event;
+		setInputValue(inputValue + keyCode);
+	};
+
+	useEffect(() => {
+		let inputString = inputValue;
+
+		if (inputString === props.code) {
+			props.actionOnEasterEgg();
+		}
+
+		if (inputValue.length >= props.code.length) {
+			inputString = inputString.slice(1);
+		}
+
+		setInputValue(inputString);
+	}, [inputValue, props.code]);
+
+	useEffect(() => {
+		document.addEventListener('keydown', handleKeyDown);
+
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [handleKeyDown]);
+
+	return <>
+	</>;
+};
+
+CodeKeyboardInputsEasterEgg.propTypes = {
+	code: PropTypes.string.isRequired,
+	actionOnEasterEgg: PropTypes.func,
+};

src/constants/code-easteregg.js

@@ -0,0 +1,3 @@
+const konamicode = '38384040373937396665';
+
+export default konamicode;

src/pages/PokemonList.jsx

@@ -73,7 +73,7 @@ export const PokemonList = () => {
 
 		// If one of the Pokémon Easter Egg name is entered
 		if (easterEggPokemonData.some(pkm => pkm.pokemonName === search)) {
-			toast('Easter Egg found! Or should I say... Easter Pkm Egg?', {
+			toast('Easter Egg 1 found! Or should I say... Easter Pkm Egg?', {
 				type: 'success',
 				autoClose: 5000,
 				icon: '🥚',
@@ -166,6 +166,5 @@ export const PokemonList = () => {
 					exitDetailsPage={toggleViewDetails}
 					isEasterEgg={easterEggIndex >= 0}/>)}
 		</>)}
-		<ToastContainer/>
 	</>);
 };