I adjusted the menu colors and called the api from pokeapi

aline-borges · Oct 14, 2020 · 40e92ec · 40e92ec
1 parent 74f0c71
commit 40e92ec
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 175 deletions.
diff --git a/src/components/atoms/buttons/index.js b/src/components/atoms/buttons/index.js
@@ -10,7 +10,7 @@ const Button = (props) => {
       >
         {props.text}
         <Icon src={props.src} />
-      </TextButton>
+      </TextButton> 
     </ButtonStyle>
   );
 }

diff --git a/src/components/atoms/input/index.js b/src/components/atoms/input/index.js
@@ -1,44 +1,12 @@
-import styled from 'styled-components';
-
-export const Input = styled.input`
-  border-top: none;
-  border-left: none;
-  border-right: none;
-  border-bottom: 1px solid;
-  min-width: 10rem;
-  font-family: ${props => props.theme.font[1]};
-  font-size: ${props => props.theme.fontSize.small};
-  font-weight: ${props => props.theme.fontWeight.bold};
-  background-color: transparent;
-  outline: none;
-  margin: 1.6rem;
-`;
-
-export const YellowInput = styled(Input)`
-  border-color: ${props => props.theme.color.yellow};
-  color: ${props => props.theme.color.yellow};
-`;
-
-export const GreyInput = styled(Input)`
-  border-color: ${props => props.theme.color.grey};
-  color: ${props => props.theme.color.grey};
-`;
-
-export const Label = styled.label`
-  font-family: ${props => props.theme.font[1]};
-  font-size: ${props => props.theme.fontSize.small};
-  font-weight: ${props => props.theme.fontWeight.bold};
-`;
-
-export const YellowLabel = styled(Input)`
-  color: ${props => props.theme.color.yellow};
-`;
-
-export const GreyLabel = styled(Input)`
-  color: ${props => props.theme.color.grey};
-`;
-
-export const RadioButtonContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
+import React from 'react';
+import InputStyle from './style/style';
+
+const Input = (props) => {
+  return(
+    <InputStyle yellow={props.yellow} onChange={props.onChange}>
+      {props.children}
+    </InputStyle>
+  );
+}
+
+export default Input 
diff --git a/src/components/atoms/input/style/style.js b/src/components/atoms/input/style/style.js
@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const InputStyle = styled.input`
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: 1px solid;
+  min-width: 10rem;
+  font-family: ${props => props.theme.font[1]};
+  font-size: ${props => props.theme.fontSize.small};
+  font-weight: ${props => props.theme.fontWeight.bold};
+  background-color: transparent;
+  outline: none;
+  margin: 1.6rem;
+  border-color: ${props => props.yellow ? props.theme.color.yellow : props.theme.color.grey};
+  color: ${props => props.yellow ? props.theme.color.yellow : props.theme.color.grey};
+`;
+
+export const RadioButtonContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export default InputStyle
diff --git a/src/components/molecules/header/index.js b/src/components/molecules/header/index.js
@@ -1,93 +1,31 @@
 import React from 'react';
-import styled from 'styled-components';
-import logo from '../../../assets/logos/yellow.png';
-import darkLogo from '../../../assets/logos/dark.png';
 import { Link } from 'react-router-dom';
 
-export const Menu = styled.nav`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 2rem 0;
-`;
-
-export const MenuList = styled.ul`
-  display: flex;
-  justify-align: space-between;
-  align-items: center;
-`;
-
-export const MenuOption = styled.li`
-  padding: 8px 16px;
-  margin-left: 0.5rem;
-  text-transform: uppercase;
-  font-family: ${props => props.theme.font[1]};
-  font-size: ${props => props.theme.fontSize.superSmall};
-  font-weight: ${props => props.theme.fontWeight.extraBold};
-  color: ${props => props.theme.color.yellow};
-  cursor: pointer;
-
-  a {
-    color: ${props => props.theme.color.yellow};
-  }
-
-  &:hover {
-    padding: 8px 16px;
-    background-color: ${props => props.theme.color.yellow};
-    color: ${props => props.theme.color.grey};
-    border-radius: 2.0rem;
-
-    a {
-      color: ${props => props.theme.color.grey};
-    }
-  }
-`;
-
-export const DarkMenuOption = styled(MenuOption)`
-  color: ${props => props.theme.color.grey};
-
-  a {
-    color: ${props => props.theme.color.grey};
-  }
-
-  &:hover {
-    padding: 8px 16px;
-    background-color: ${props => props.theme.color.grey};
-    color: ${props => props.theme.color.yellow};
-
-    a {
-    color: ${props => props.theme.color.yellow};
-    }
-  }
-`;
-
-export const AppName = styled.div`
-  margin-right: 5rem;
-`;
+import { Menu, AppName, MenuList, MenuOption, Logo } from './style/style';
+import logo from '../../../assets/logos/yellow.png';
+import darkLogo from '../../../assets/logos/dark.png';
 
-export const Logo = styled.img`
-`;
 
-export const Header = () => {
+export const Header = (props) => {
   return(
     <header>
       <Menu>
         <AppName>
           <Link to="/">
-            <Logo src={logo} />
+            <Logo src={ props.yellow ? logo : darkLogo} />
           </Link>
         </AppName>
         <MenuList>
-          <MenuOption>
+          <MenuOption yellow={props.yellow}>
             <Link to="/">Home</Link>
           </MenuOption>
-          <MenuOption>
+          <MenuOption yellow={props.yellow}>
             <Link to="/pokemons">Pokemons</Link>
           </MenuOption>
-          <MenuOption>
+          <MenuOption yellow={props.yellow}>
             <Link to="/trainerform">Be a Trainer</Link>            
           </MenuOption>
-          <MenuOption>
+          <MenuOption yellow={props.yellow}>
             <Link to="/trainers">Trainers</Link>            
           </MenuOption>
         </MenuList>
@@ -96,32 +34,4 @@ export const Header = () => {
   );
 }
 
-export const DarkHeader = () => {
-  return(
-    <header>
-      <Menu>
-        <AppName>
-          <Link to="/">
-            <Logo src={darkLogo} />
-          </Link>
-        </AppName>
-        <MenuList>
-          <DarkMenuOption>
-            <Link to="/">Home</Link>
-          </DarkMenuOption>
-          <DarkMenuOption>
-            <Link to="/pokemons">Pokemons</Link>
-          </DarkMenuOption>
-          <DarkMenuOption>
-            <Link to="/trainerform">Be a Trainer</Link>            
-          </DarkMenuOption>
-          <DarkMenuOption>
-            <Link to="/trainers">Trainers</Link>            
-          </DarkMenuOption>
-        </MenuList>
-      </Menu>
-    </header>
-  );
-}
-
 export default Header 
diff --git a/src/components/molecules/header/style/style.js b/src/components/molecules/header/style/style.js
@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+export const Menu = styled.nav`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2rem 0;
+`;
+
+export const MenuList = styled.ul`
+  display: flex;
+  justify-align: space-between;
+  align-items: center;
+`;
+
+export const MenuOption = styled.li`
+  padding: 8px 16px;
+  margin-left: 0.5rem;
+  text-transform: uppercase;
+  font-family: ${props => props.theme.font[1]};
+  font-size: ${props => props.theme.fontSize.superSmall};
+  font-weight: ${props => props.theme.fontWeight.extraBold};
+  cursor: pointer;
+
+  a {
+    color: ${props => props.yellow ? props.theme.grey.color : props.theme.yellow.color};
+  }
+
+  &:hover {
+    padding: 8px 16px;
+    background-color: ${props => props.yellow ? props.theme.grey.color 
+    : props.theme.yellow.color};
+    border-radius: 2.0rem;
+
+    a {
+      color: ${props => props.yellow ? props.theme.yellow.color : props.theme.grey.color};
+    }
+  }
+`;
+
+export const AppName = styled.div`
+  margin-right: 5rem;
+`;
+
+export const Logo = styled.img`
+`;
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
@@ -12,26 +12,25 @@ import ash from '../../assets/characters/ash.png';
 const Home = () => {
   return(
     <ContainerHalfway>
-      <Header />
+      <Header yellow={true} />
       <ContainerRow>
         <ContainerColumn>
           <PikachuImage src={pikachu} alt="pikachu" />
-          <Button 
-          yellow={true}
-          src={search} 
-          text="Search For Pokemons">
-            <Link to="/pokemons" />
-          </Button>
+          <Link to="/pokemons">
+            <Button 
+            yellow={true}
+            src={search} 
+            text="Search For Pokemons" />
+          </Link>
         </ContainerColumn>
         <ContainerColumn>
           <AshImage src={ash} alt="ash" />
-          <Button
-          src={pokeball} 
-          text="Be a Trainer">
-          >
-            <Link to="/trainerform" />
-          </Button>
-      </ContainerColumn>
+          <Link to="/trainerform">
+            <Button
+            src={pokeball} 
+            text="Be a Trainer" />
+          </Link>
+        </ContainerColumn>
       </ContainerRow>
     </ContainerHalfway>
   );

diff --git a/src/pages/pokemons/index.js b/src/pages/pokemons/index.js
@@ -1,15 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
+import Container from '../../components/atoms/container/';
+import Header from '../../components/molecules/header/';
+import Input from '../../components/atoms/input/';
 import Button from '../../components/atoms/buttons/';
 import search from '../../assets/icons/search.png';
 
 const Pokemons = () => {
-  return(
-    <div>
-      <Button 
-      yellow={true}
-      src={search} 
-      text="Search" />
-    </div>
+  const [name, setName] = useState("");
+
+  const getPokemons = async (name) => {
+    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${name.toLowerCase()}`);
+    const data = await response.json();
+    console.log(data);
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    getPokemons(name);
+  };
+
+  return (
+    <Container>
+      <Header yellow={true} />
+      <form onSubmit={(e) => handleSubmit(e)}>
+        <Input 
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          yellow={'yellow'} 
+        />
+        <Button 
+          type='submit'
+          yellow={true}
+          src={search} 
+          text="Search" 
+        />
+      </form>
+    </Container>
   );
 }
 

diff --git a/src/pages/trainer/index.js b/src/pages/trainer/index.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { DarkHeader } from '../../components/molecules/header/';
+import Header from '../../components/molecules/header/';
 import { ContainerColumn, PokemonContainer, TrainerInformations, 
          PokemonsContainer, TeamContainer } from "../../components/atoms/container/style/";
 import Container from '../../components/atoms/container/';
@@ -58,7 +58,7 @@ const TrainerHomeProfile = () => {
 
   return (
     <Container yellow={true}>
-      <DarkHeader />
+      <Header />
       <ContainerColumn>
         {loading ? (<div>Carregando</div>)
         : (