search and compare working

README.md

@@ -1,70 +1,20 @@
-# Getting Started with Create React App
+# Pokedex Site
+Pokedex site which caches pokemon stats to compare and look through your favourite pokemon using the [pokemon api](https://pokeapi.co/docs/v2).
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Features
 
-## Available Scripts
+- Caches pokemon after fetching data from API for faster interactions
+- Async fetching so user can keep interacting while it is fetching
+- Uses react-bootstrap API for modular UI interfaces
+- Responsive layout (thanks bootstrap)
 
-In the project directory, you can run:
 
-### `npm start`
+## Getting Started
+You can clone this project from your command line with `git clone https://github.com/pluvio72/pokedex-site`.
+Then to start the project in development mode on localhost:3000 run: `npm start` in the root directory.
+To build out react files into static JS for production run `npm run build` which builds files into the /build folder.
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+Navigate to your server address in your preferred browser. To view in development mode.
+```sh
+localhost:3000
+```

src/App.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Compare from './views/Compare';
 import Pokedex from "./views/Pokedex";
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Pokedex />} />
+        <Route path="/compare" element={<Compare/>} />
       </Routes>
     </BrowserRouter>
   );

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/components/Layout/layout.jsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import Navbar from '../Navbar';
 import PropTypes from 'prop-types';
+import "./layout.scss";
 
 function Layout({ children }){
     return (
         <div>
-            <header>
+            <header id="header">
                 <Navbar/>
             </header>
-            <main>
+            <main id="main">
                 {children}
             </main>
         </div>

src/components/Layout/layout.scss

@@ -0,0 +1,6 @@
+#header{
+    height: 10vh;
+}
+#main{
+    height: 90vh;
+}

src/components/Navbar/navbar.jsx

@@ -1,18 +1,19 @@
 import React from "react";
 import { Container, Nav, Navbar } from "react-bootstrap";
+import { NavLink } from "react-router-dom";
 
 function NavbarComponent() {
   return (
-    <Navbar bg="danger" expand="lg">
+    <Navbar bg="danger" expand="lg" className="h-100">
       <Container>
         <Navbar.Toggle aria-controls="navbar-general" />
         <Navbar.Collapse id="navbar-general">
           <Nav className="mx-auto align-items-center">
-            <Nav.Link href="#home">Home</Nav.Link>
+            <NavLink to="/" className="nav-link fw-bold fs-4">INDEX</NavLink>
             <Navbar.Brand className="mx-3" href="#home">
                 <img src="/images/logo.png" alt="pokemon logo" height="55"/>
             </Navbar.Brand>
-            <Nav.Link href="#link">Link</Nav.Link>
+            <NavLink to="/compare" className="nav-link fw-bold fs-4">COMPARE</NavLink>
           </Nav>
         </Navbar.Collapse>
       </Container>

src/components/PokemonCard/index.js

@@ -0,0 +1,2 @@
+import PokemonCard from "./pokemoncard";
+export default PokemonCard;

src/components/PokemonCard/pokemoncard.jsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { Badge, Col, Row } from "react-bootstrap";
+
+function PokemonCard({ pokemon }) {
+  return (
+    <div className="pokemon-info-parent mt-2">
+      <span className="fw-bold text-light fs-4 mx-auto mb-2">
+        {pokemon.name.toUpperCase()}{" "}
+        <span className="text-muted">( Generation {pokemon.generation} )</span>
+      </span>
+      <Badge bg="light" className="fw-bold text-dark text-center mb-2">
+        INFO
+      </Badge>
+      <span className="fw-bold text-muted mb-1">
+        Height: <span className="text-light">{pokemon.height} decimetres</span>
+      </span>
+      <span className="fw-bold text-muted mb-1">
+        Weight: <span className="text-light">{pokemon.weight} hectograms</span>
+      </span>
+      <span className="fw-bold text-muted mb-1">
+        Species: <span className="text-light">{pokemon.species_name}</span>
+      </span>
+      <span className="fw-bold text-muted mb-1">
+        Habitat: <span className="text-light">{pokemon.habitat}</span>
+      </span>
+      <span className="fw-bold text-muted mb-1">
+        Color: <span className="text-light">{pokemon.color}</span>
+      </span>
+      <span className="fw-bold text-muted mb-1">
+        Forms: <span className="text-light">{pokemon.forms.join(", ")}</span>
+      </span>
+      <br className="mb-4" />
+      <Badge bg="light" className="fw-bold text-dark text-center mb-2">
+        STATS
+      </Badge>
+      <Row className="gy-2">
+        <Col className="col-6">
+          <span className="text-success fw-bold fs-3">
+            HP:{" "}
+            <span className="text-light">{pokemon.stats.hp.base_stat}</span>
+          </span>
+        </Col>
+        <Col className="col-6">
+          <span className="text-info fw-bold fs-3">
+            SPEED:{" "}
+            <span className="text-light">
+              {pokemon.stats.speed.base_stat}
+            </span>
+          </span>
+        </Col>
+        <Col className="col-6">
+          <span className="text-primary fw-bold fs-3">
+            DEF:{" "}
+            <span className="text-light">
+              {pokemon.stats.defense.base_stat}
+            </span>
+          </span>
+        </Col>
+        <Col className="col-6">
+          <span className="text-danger fw-bold fs-3">
+            ATK:{" "}
+            <span className="text-light">
+              {pokemon.stats.attack.base_stat}
+            </span>
+          </span>
+        </Col>
+        <Col className="col-6">
+          <span className="text-warning fw-bold fs-3">
+            SP. ATK:{" "}
+            <span className="text-light">
+              {pokemon.stats["special-attack"].base_stat}
+            </span>
+          </span>
+        </Col>
+        <Col className="col-6">
+          <span className="text-warning fw-bold fs-3">
+            SP. DEF:{" "}
+            <span className="text-light">
+              {pokemon.stats["special-defense"].base_stat}
+            </span>
+          </span>
+        </Col>
+      </Row>
+      <div className="d-flex align-items-center pt-4 pb-3">
+        <div className="mx-auto">
+          {pokemon.types.map((_type) => (
+            <Badge key={_type} className={_type + " mx-1"}>
+              {_type}
+            </Badge>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PokemonCard;

src/components/SelectSearch/index.js

@@ -0,0 +1,2 @@
+import SelectSearch from "./selectsearch";
+export default SelectSearch;

src/components/SelectSearch/selectsearch.jsx

@@ -0,0 +1,57 @@
+import React, { useRef, useState } from 'react';
+import { FormControl } from 'react-bootstrap';
+import "./selectsearch.scss";
+
+function SelectSearch({ data, onSelect, onInputChange }){
+
+    const inputRef = useRef(null);
+
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [filter, setFilter] = useState('');
+
+    const onInputFocus = () => { setShowSuggestions(true); }
+    const onInputBlur = () => {
+        setShowSuggestions(false);
+        inputRef.current.blur();
+    }
+
+    const onInputChangeLocal = (event) => {
+        const { value } = event.target;
+        setFilter(value.toLowerCase());
+        onInputChange(value.toLowerCase());
+    }
+
+    const onClickSuggestion = (_suggestion) => {
+        setFilter(_suggestion);
+        console.log(inputRef.current);
+        inputRef.current.innerHTML = _suggestion;
+        setShowSuggestions(false);
+        onSelect(_suggestion);
+    }
+
+    return(
+        <div onMouseLeave={onInputBlur}>
+            <FormControl
+                type="text"
+                ref={inputRef}
+                placeholder="search for pokemon"
+                className={`select-search ${showSuggestions ? "open":""}`}
+                onFocus={onInputFocus}
+                onChange={onInputChangeLocal}
+                value={filter}
+            />
+            {showSuggestions &&
+                <div className="suggestions-box">
+                    {Object.keys(data).filter(e => e.indexOf(filter) > -1).slice(0,10).map((suggestion) => (
+                        <span
+                            className="suggestion"
+                            onClick={() => onClickSuggestion(suggestion)}
+                        >{suggestion}</span>
+                    ))}
+                </div>
+            }
+        </div>
+    )
+};
+
+export default SelectSearch;

src/components/SelectSearch/selectsearch.scss

@@ -0,0 +1,28 @@
+$suggestion-box-border-radius: .5rem;
+
+.suggestions-box{
+    background-color: black;
+    display: flex;
+    flex-direction: column;
+    border-bottom-left-radius: $suggestion-box-border-radius!important;
+    border-bottom-right-radius: $suggestion-box-border-radius!important;
+    padding-bottom: .5rem;
+}
+.suggestions-box > span {
+    color: white;
+    padding: 6px 10px;
+}
+
+.select-search:focus, .select-search:active, .select-search.open{
+    border-bottom-left-radius: 0!important;
+    border-bottom-right-radius: 0!important;
+    box-shadow: none!important;
+}
+
+.suggestion{
+    transition: .2s;
+    cursor: pointer;
+}
+.suggestion:hover{
+    background-color: rgb(100,100,100);
+}

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/services/pokemonAPI.js

@@ -14,6 +14,16 @@ async function getPokemonDetails(name) {
     });
 }
 
+async function searchPokemon(string) {
+    return fetch(POKEMON_DETAILS_ENDPOINT+string)
+        .then((results) => results.json())
+        .then((data) => data)
+        .catch((err) => {
+            console.log("Pokemon not found.");
+            return {};
+        });
+}
+
 async function getPokemonInfo(pokemonURL) {
   return fetch(pokemonURL)
     .then((results) => results.json())
@@ -53,4 +63,6 @@ export {
   getPokemonDetails,
   getPokemonByGeneration,
   getPokemonInfoAndDetails,
+  getPokemonInfo,
+  searchPokemon
 };

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';