Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature development #3

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Feature development #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1ebef58
init commit
tsoukent97 Jul 28, 2022
b3e9ff9
main page changed
tsoukent97 Jul 28, 2022
7d6e2f7
called 3rd party web api
tsoukent97 Jul 30, 2022
99085fc
tuesday api update
tsoukent97 Aug 2, 2022
6534f9c
object converted to array as newArray
tsoukent97 Aug 2, 2022
3676d95
d
tsoukent97 Aug 2, 2022
99563cc
3-08-2022
tsoukent97 Aug 3, 2022
47a6108
image shuffle, image search
tsoukent97 Aug 4, 2022
6882f5b
styling touch up
tsoukent97 Aug 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17,749 changes: 232 additions & 17,517 deletions 1. Frontend/my-app/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions 1. Frontend/my-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.1.3",
"superagent": "^8.0.0",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
Expand Down
3 changes: 2 additions & 1 deletion 1. Frontend/my-app/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link async rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" />
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
Expand All @@ -24,7 +25,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Pokédex Search</title>
<title>DOG Search</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
31 changes: 31 additions & 0 deletions 1. Frontend/my-app/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,34 @@
.search-field{
text-align: center;
}

* {
text-align: center;
}

h1 {
font-size: 40px;
background-color:bisque;
margin-bottom: -2px;
}

.image {
left: 0;
right: 0;
top: 2rem;
max-width: 150px;
height: auto;
width: auto;
max-height: 200px;
display: block;
display: contents;
}

.filtered-list {
font-size: 20px
}

.search-bar {
display:flex;
flex-direction: column;
}
0 1. Frontend/my-app/src/App.test.tsx → 1. Frontend/my-app/src/App.test.jsx
View file
Open in desktop
File renamed without changes.
238 changes: 80 additions & 158 deletions 1. Frontend/my-app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,171 +1,93 @@
/* eslint-disable react-hooks/exhaustive-deps */
import axios from "axios";
import { Pokemon } from "pokenode-ts";
import { useState } from "react";
import SearchIcon from "@mui/icons-material/Search";
import TextField from "@mui/material/TextField";
import { useEffect, useState } from "react";
import "./App.css";
import { Box, Button, Grid, Paper, Skeleton } from "@mui/material";
import DogCard from "./pages/Cards"
import BREED_LIST from "./const";
import { Button, Segment, Input } from "semantic-ui-react";

function App() {
const [pokemonName, setPokemonName] = useState("");
const [pokemonInfo, setPokemonInfo] = useState<null | undefined | Pokemon>(
undefined
);
const POKEMON_BASE_API_URL = "https://pokeapi.co/api/v2";
return (
<div>
<div className="search-field">
<h1>Pokédex Search</h1>
<div style={{ display: "flex", justifyContent: "center" }}>
<TextField
id="search-bar"
className="text"
value={pokemonName}
onChange={(prop) => {
setPokemonName(prop.target.value);
}}
label="Enter a Pokémon Name..."
variant="outlined"
placeholder="Search..."
size="medium"
/>
<Button
onClick={() => {
search();
}}
>
<SearchIcon style={{ fill: "blue" }} />
Search
</Button>
</div>
</div>

{pokemonInfo === undefined ? (
<div></div>
) : (
<div
id="pokemon-result"
style={{
maxWidth: "800px",
margin: "0 auto",
padding: "100px 10px 0px 10px",
}}
>
<Paper sx={{ backgroundColor: getBackColor(pokemonInfo) }}>
<Grid
container
direction="row"
spacing={5}
sx={{
justifyContent: "center",
}}
>
<Grid item>
<Box>
{pokemonInfo === undefined || pokemonInfo === null ? (
<h1> Pokemon not found</h1>
) : (
<div>
<h1>
{pokemonInfo.name.charAt(0).toUpperCase() +
pokemonInfo.name.slice(1)}
</h1>
<p>
ID: {pokemonInfo.id}
<br />
Height: {pokemonInfo.height * 10} cm
<br />
Weight: {pokemonInfo.weight / 10} kg
<br />
Types: {getTypes()?.toString()}
<br />
Abilities: {getAbilities()?.toString()}
</p>
</div>
)}
</Box>
</Grid>
<Grid item>
<Box>
{pokemonInfo?.sprites.other.dream_world.front_default ? (
<img
height="300px"
width="300px"
alt={pokemonInfo.name}
src={pokemonInfo.sprites.other.dream_world.front_default}
></img>
) : (
<Skeleton width={300} height={300} />
)}
</Box>
</Grid>
</Grid>
</Paper>
</div>
)}
</div>
);

// Credit to codingsparkles for providing the color mapping
function getBackColor(poke: Pokemon | undefined | null) {
let backColor = "#EEE8AA";
if (poke === undefined || poke === null) {
return backColor;
}
const pokeTypes = poke.types.map((i) => i.type.name);
if (pokeTypes.includes("fire")) {
backColor = "#FEC5BB";
} else if (pokeTypes.includes("grass")) {
backColor = "#80FFDB";
} else if (pokeTypes.includes("water")) {
backColor = "#DFE7FD";
} else if (pokeTypes.includes("bug")) {
backColor = "#B0DEA3";
} else if (pokeTypes.includes("normal")) {
backColor = "#E0FFFF";
} else if (pokeTypes.includes("electric")) {
backColor = "#D8E2DC";
} else if (pokeTypes.includes("ground")) {
backColor = "#FAD2E1";
} else if (pokeTypes.includes("fairy")) {
backColor = "#FFF1E6";
} else if (pokeTypes.includes("ghost")) {
backColor = "#F8EDEB";
} else if (pokeTypes.includes("fighting")) {
backColor = "#F1FAEE";
} else if (pokeTypes.includes("rock")) {
backColor = "#A8DADC";
}
return backColor;

const [ dogName, setDogName ]= useState("");
const [filteredList, setFilteredList] = useState<String[]>([]);
const [ imageUrlList, setImageUrlList] = useState<String[]>([]);

function random(obj : any){
return Math.floor(Math.random() * obj.length + 1)
}

async function search() {
const curDogs: string[] = await Promise.all(filteredList.map(async (ele) => {
let res:any = await axios.get(`https://dog.ceo/api/breed/${ele}/images`)
let obj = res.data.message
return obj[0]
}))
setImageUrlList(curDogs)
}

async function shuffle() {
const curDogs: string[] = await Promise.all(filteredList.map(async (ele) => {
let res:any = await axios.get(`https://dog.ceo/api/breed/${ele}/images`)
let obj = res.data.message
return obj[random(obj)]
}))
setImageUrlList(curDogs)
}

function search() {
console.log(pokemonName);
if (pokemonName === undefined || pokemonName === "") {
return;
useEffect(() => {
if (dogName === "") {
setFilteredList([])
setImageUrlList([])
} else {
setFilteredList(BREED_LIST.filter((names) => names.startsWith(dogName)))
}
}, [dogName]);

axios
.get(POKEMON_BASE_API_URL + "/pokemon/" + pokemonName?.toLowerCase())
.then((res) => {
setPokemonInfo(res.data);
})
.catch(() => {
setPokemonInfo(null);
});
}
return (
<div>
<h1>🐶 🐶 🐶 Dog Search 🐶 🐶 🐶</h1>

function getTypes() {
if (pokemonInfo !== undefined && pokemonInfo !== null) {
return pokemonInfo.types.map((item) => item.type.name);
}
}
<div className="search-bar">
<Segment inverted>
<Input
placeholder="Search Dog Breed"
type="text"
id="dog-name"
name="dog-name"
onChange={(e) => setDogName(e.target.value)}
/>
</Segment>
<Button.Group size='large'>
<Button onClick={search}>Search</Button>
<Button.Or />
<Button onClick={shuffle}>Shuffle</Button>
</Button.Group>
</div>

<div className="filtered-list">
{
filteredList.map( (ele) => {
return <p>{ele}</p>
})
}
</div>
<br/>
<br/>
<div className="image">
{
imageUrlList.map( (ele, i) => {
return (
<div>
<h2>{"Breed: " + filteredList[i].toUpperCase()}</h2>
<DogCard imageLink={ele}/>
</div>)
})
}
</div>

function getAbilities() {
if (pokemonInfo !== undefined && pokemonInfo !== null) {
return pokemonInfo.abilities.map((ability) => ability.ability.name);
}
}
</div>
);
}

export default App;

Loading