labenuexercicios · BrunoNMoura · May 21, 2023 · Jun 1, 2023
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/Pokebola-Pokémon-PNG.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <title>pokedex</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "bruno-moura-projeto-pokedex",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2.6.1",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "axios": "^1.4.0",
+    "framer-motion": "^10.12.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
+    "react-router-dom": "^6.11.1",
+    "styled-components": "^6.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "vite": "^4.3.2"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,19 @@
+import { ChakraProvider } from "@chakra-ui/react";
+import Router from "./routes/router";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { GlobalStyled } from "./constants/constants";
+import GlobalState from "./context/GlobalState";
+function App() {
+
+  return (
+    <GlobalState>
+      <GlobalStyled />
+      <ChakraProvider>
+        <Router/>
+      </ChakraProvider>
+    </GlobalState>
+  );
+}
+
+export default App;
diff --git a/src/assets/AddPokemon.png b/src/assets/AddPokemon.png
diff --git a/src/assets/Logo.png b/src/assets/Logo.png
diff --git a/src/assets/Pokebola-Pokémon-PNG.png b/src/assets/Pokebola-Pokémon-PNG.png
diff --git a/src/assets/deletPokemon.png b/src/assets/deletPokemon.png
diff --git a/src/assets/pngwing 2.png b/src/assets/pngwing 2.png
diff --git a/src/assets/pokemon-types/bug.png b/src/assets/pokemon-types/bug.png
diff --git a/src/assets/pokemon-types/dark.png b/src/assets/pokemon-types/dark.png
diff --git a/src/assets/pokemon-types/dragon.png b/src/assets/pokemon-types/dragon.png
diff --git a/src/assets/pokemon-types/electric.png b/src/assets/pokemon-types/electric.png
diff --git a/src/assets/pokemon-types/fairy.png b/src/assets/pokemon-types/fairy.png
diff --git a/src/assets/pokemon-types/fighting.png b/src/assets/pokemon-types/fighting.png
diff --git a/src/assets/pokemon-types/fire.png b/src/assets/pokemon-types/fire.png
diff --git a/src/assets/pokemon-types/flying.png b/src/assets/pokemon-types/flying.png
diff --git a/src/assets/pokemon-types/ghost.png b/src/assets/pokemon-types/ghost.png
diff --git a/src/assets/pokemon-types/grass.png b/src/assets/pokemon-types/grass.png
diff --git a/src/assets/pokemon-types/ground.png b/src/assets/pokemon-types/ground.png
diff --git a/src/assets/pokemon-types/ice.png b/src/assets/pokemon-types/ice.png
diff --git a/src/assets/pokemon-types/normal.png b/src/assets/pokemon-types/normal.png
diff --git a/src/assets/pokemon-types/poison.png b/src/assets/pokemon-types/poison.png
diff --git a/src/assets/pokemon-types/psychic.png b/src/assets/pokemon-types/psychic.png
diff --git a/src/assets/pokemon-types/rock.png b/src/assets/pokemon-types/rock.png
diff --git a/src/assets/pokemon-types/steel.png b/src/assets/pokemon-types/steel.png
diff --git a/src/assets/pokemon-types/water.png b/src/assets/pokemon-types/water.png
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/DetailPokemon/DetailPokemon.jsx b/src/components/DetailPokemon/DetailPokemon.jsx
@@ -0,0 +1,148 @@
+import axios from "axios";
+import { useContext, useEffect, useState } from "react";
+import {
+  BaseStats,
+  BoxImageMiniPoke,
+  ContainerCard,  
+  DetailPage,  
+  Id,
+  InfoAndMoves,
+  MoviesPokemon,
+  Pokeball,
+  Pokemon,
+  PokemonType,
+  ProgressBar,
+  ProgressBarContainer,
+  TypeMoves,
+  TypesContainer,
+  H1,  
+} from "./styled";
+import pokeball from "../../assets/pngwing 2.png";
+import GlobalContext from "../../context/GlobalContext";
+
+export const DetailPokemon = () => {
+
+  const context = useContext(GlobalContext)
+    const { type1,
+      type2,
+      setType1,
+      setType2,
+      detail,
+      getColors,
+      getTypes,
+      colorProgress,
+      abbreviate,
+      ModifayFirstLetter
+     } = context
+
+  const [image, setImage] = useState("");
+  const [imageBack, setImageBack] = useState("");
+  const [imageFront, setImageFront] = useState("");
+  const [name,setName] =useState('')
+  const [id, setId] = useState("")
+  const [stats, setStats] = useState([]);
+  const [moves, setMoves] = useState([]);
+  const statName = stats.map((stat) => stat.stat.name);
+
+  const getPokemonData = async () => {
+    try {
+      const res = await axios.get(detail?.url);
+      setImage(res.data.sprites.other["official-artwork"].front_default);
+      setImageBack(res.data.sprites.back_default);
+      setImageFront(res.data.sprites.front_default);
+      setType1(res.data.types[0]?.type.name);
+      setType2(res.data.types[1]?.type.name);
+      setStats(res.data.stats);
+      setMoves(res.data.moves);
+      setName(res.data.name);
+      setId(res.data.id)     
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    getPokemonData();
+  }, [detail]);
+
+  const typ2Detail = () => {
+    if (type2) {
+      return <PokemonType src={getTypes(type2)} />;
+    } else {
+      return null;
+    }
+  };
+  return (
+    <DetailPage>
+      <div>
+        <H1>Detalhes</H1>
+      </div>
+      <ContainerCard color={getColors(type1)}>
+        <BoxImageMiniPoke>
+          <div>
+            <img src={imageFront} alt="pokemon image" />
+          </div>
+          <div>
+            <img src={imageBack} alt="pokemon image" />
+          </div>
+        </BoxImageMiniPoke>
+        <BaseStats>
+          <h2>Base stats:</h2>
+          {stats.map((stat, index) => (
+            <div  key={index}>
+              <h5>
+                {abbreviate(ModifayFirstLetter(stat.stat.name))}{" "}
+                {stat.base_stat}
+              </h5>
+              <ProgressBarContainer>
+                <ProgressBar
+                  color={colorProgress(statName[index])}
+                  progress={stat.base_stat}
+                >
+                  .
+                </ProgressBar>
+              </ProgressBarContainer>             
+            </div>
+          ))}
+          <div>
+            <p>
+              Total:{""}
+              {stats.length > 0
+                ? stats.reduce(
+                    (allPower, valueStat) => allPower + valueStat.base_stat,
+                    0
+                  )
+                : 0}
+            </p>
+          </div>
+        </BaseStats>
+        <InfoAndMoves>
+          <div>
+          {id?<Id>#0{id}</Id>:<Id>#{id}</Id>}
+          <h1>{name}</h1>
+          </div>
+           <TypesContainer>
+            <PokemonType src={getTypes(type1)} />
+            {typ2Detail()}
+          </TypesContainer>        
+
+        </InfoAndMoves>
+        <MoviesPokemon>
+        <h2>Moves:</h2>
+        <div>
+          {moves?.filter((move, index) => index < 4).map((move, index) => {
+            return (
+            <div key={index}>
+            <TypeMoves>{ModifayFirstLetter(move.move.name)}</TypeMoves>
+            </div>
+            );
+          })}
+          </div>
+        </MoviesPokemon>
+        <Pokemon src={image} alt="pokemon image" />
+        <Pokeball src={pokeball} alt="pokeball" />
+      </ContainerCard>
+    </DetailPage>
+  );
+};
+