Pokemonpage

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import { Route } from 'react-router';
 import { Store } from 'redux';
 import { Persistor } from 'redux-persist';
 import { PersistGate } from 'redux-persist/integration/react';
+import { GlobalStyle } from './Global.style';
 
 import Root from './components/Root';
 import Routes from './routes';
@@ -21,6 +22,7 @@ interface Props {
 
 const RootComponentWithRoutes: React.FunctionComponent = () => (
   <Root>
+    <GlobalStyle />
     <Routes />
   </Root>
 );

frontend/src/pages/Home/Global.style.tsx → frontend/src/Global.style.tsx

@@ -3,7 +3,7 @@ import { createGlobalStyle } from 'styled-components';
 export const GlobalStyle = createGlobalStyle`
   @font-face {
     font-family: "Pokemon";
-    src: url("Pokemon.ttf");
+    src: url("/Pokemon.ttf");
   }
 
   body {

frontend/src/components/Pokemon/Pokemon.style.tsx

@@ -1,20 +1,35 @@
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 export default {
-  Intro: styled.div`
+  Intro: styled(Link)`
     width: 200px;
     border: 5px double black;
     font-size: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 10px;
-    margin-right: 10px;
-    margin-bottom: 10px;
+    margin: 5px 10px 5px 10px;
     line-height: 15px;
+    text-decoration: none;
+    color: inherit;
 
-    .numberElement{
-      font-weight:600;
+    .numberElement {
+      font-weight: 600;
+    }
+    .turnIcon {
+      position: absolute;
+      left: 75px;
+    }
+    .imageContainer {
+      position: relative;
+      width: 100px;
+    }
+    .link {
+      height: 100%;
+      display: block;
+      width: 100%;
     }
   `,
 };

frontend/src/components/Pokemon/Pokemon.tsx

@@ -1,5 +1,6 @@
-import * as React from 'react';
+import React, { useState } from 'react';
 
+import { Link } from 'react-router-dom';
 import Style from './Pokemon.style';
 
 interface Props {
@@ -9,35 +10,38 @@ interface Props {
   height: number;
 }
 
-class Pokemon extends React.Component<Props> {
-  displayName(): string {
-    return this.props.name.charAt(0).toUpperCase() + this.props.name.slice(1);
-  }
+function Pokemon(props: Props) {
+  const [clicked, setClicked] = useState(false);
 
-  render(): React.ReactNode {
-    const pokemon = 'Carapuce';
-
-    return (
-      <Style.Intro>
-        <div>{this.displayName()}</div>
+  return (
+    <Style.Intro to={`pokemon/${props.id}`}>
+      <div>{props.name.charAt(0).toUpperCase() + props.name.slice(1)}</div>
+      <div className="imageContainer">
         <img
-          alt={this.props.name}
-          src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${
-            this.props.id
-          }.png`}
+          alt={props.name}
+          src={
+            !clicked
+              ? `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${
+                  props.id
+                }.png`
+              : `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/${
+                  props.id
+                }.png`
+          }
         />
-        <div>
-          Id: <span className='numberElement'>{this.props.id}</span>
-        </div>
-        <div>
-          Weight: <span className='numberElement'>{this.props.weight}</span> kg
-        </div>
-        <div>
-          Height: <span className='numberElement'>{this.props.height}</span> cm
-        </div>
-      </Style.Intro>
-    );
-  }
+        <img className="turnIcon" src={'/turn-ico.svg'} onClick={() => setClicked(!clicked)} />
+      </div>
+      <div>
+        Id: <span className="numberElement">{props.id}</span>
+      </div>
+      <div>
+        Weight: <span className="numberElement">{props.weight}</span> kg
+      </div>
+      <div>
+        Height: <span className="numberElement">{props.height}</span> cm
+      </div>
+    </Style.Intro>
+  );
 }
 
 export default Pokemon;

frontend/src/pages/Home/Home.tsx

@@ -1,53 +1,55 @@
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import Pokemon from 'components/Pokemon/Pokemon';
 import { makeGetRequest } from 'services/networking/request';
-import { GlobalStyle } from './Global.style';
 import Style from './Home.style';
 
-interface State {
-  pokemons: Array<{
-    id: number;
-    name: string;
-    weight: number;
-    height: number;
-  }>;
+interface PokemonData {
+  id: number;
+  name: string;
+  weight: number;
+  height: number;
 }
 
-class Home extends React.Component<{}, State> {
-  constructor(props: any) {
-    super(props);
-    this.state = { pokemons: [] };
-  }
+function Home() {
+  const [pokemons, setPokemons] = useState([]);
+  const [errorHappened, setErrorHappened] = useState(false);
 
-  componentDidMount() {
-    makeGetRequest('/pokemon').then(response => {
-      this.setState({ pokemons: response.body });
-    });
-  }
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await makeGetRequest('/pokemon');
+        setPokemons(response.body);
+      } catch (err) {
+        setErrorHappened(true);
+      }
+    };
+    fetchData();
+  }, []);
 
-  render(): React.ReactNode {
-    return (
-      <Style.Homepage>
-        <GlobalStyle />
-        <Style.Title>Pokedex</Style.Title>
-        <Style.Pokedex>
-          {this.state.pokemons.length > 0 ? (
-            this.state.pokemons.map(pokemonData => (
+  return (
+    <Style.Homepage>
+      <Style.Title>Pokedex</Style.Title>
+      <Style.Pokedex>
+        {pokemons.length > 0 ? (
+          errorHappened ? (
+            <div>The app could not retrieve pokemons</div>
+          ) : (
+            pokemons.map((pokemonData: PokemonData) => (
               <Pokemon
                 name={pokemonData.name}
                 id={pokemonData.id}
                 weight={pokemonData.weight}
                 height={pokemonData.height}
               />
             ))
-          ) : (
-            <img src="loader.svg" alt="loader" />
-          )}
-        </Style.Pokedex>
-      </Style.Homepage>
-    );
-  }
+          )
+        ) : (
+          <img src="loader.svg" alt="loader" />
+        )}
+      </Style.Pokedex>
+    </Style.Homepage>
+  );
 }
 
 export default Home;

frontend/src/pages/Pokemon/Pokemon.style.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export default {
+  PokemonPage: styled.div`
+    flex-direction: column;
+    justify-content: center;
+    display: flex;
+  `,
+  PokemonContainer: styled.div`
+    display: inline-block;
+    margin: auto;
+  `,
+  Title: styled.h1`
+    text-align: center;
+    font-size: 30px;
+    margin: 20px;
+  `,
+};

frontend/src/pages/Pokemon/Pokemon.tsx

@@ -0,0 +1,58 @@
+import Pokemon from 'components/Pokemon/Pokemon';
+import React, { useEffect, useState } from 'react';
+import { makeGetRequest } from 'services/networking/request';
+import style from './Pokemon.module.scss';
+import Style from './Pokemon.style';
+
+interface PokemonData {
+  id: number;
+  name: string;
+  weight: number;
+  height: number;
+}
+
+function PokemonPage() {
+  const [pokemon, setPokemon] = useState({
+    id: -1,
+    name: 'test',
+    weight: -1,
+    height: -1,
+  });
+  const [errorHappened, setErrorHappened] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await makeGetRequest('/pokemon/2');
+        setPokemon(response.body);
+      } catch (err) {
+        setErrorHappened(true);
+      }
+    };
+    fetchData();
+  }, []);
+
+  return (
+    <Style.PokemonPage>
+      {pokemon.id !== -1 ? (
+        errorHappened ? (
+          <div>The app could not retrieve pokemon</div>
+        ) : (
+          <Style.PokemonContainer>
+            <Style.Title>{pokemon.name}</Style.Title>
+            <Pokemon
+              name={pokemon.name}
+              id={pokemon.id}
+              weight={pokemon.weight}
+              height={pokemon.height}
+            />
+          </Style.PokemonContainer>
+        )
+      ) : (
+        <img src={process.env.PUBLIC_URL + '/loader.svg'} alt="loader" />
+      )}
+    </Style.PokemonPage>
+  );
+}
+
+export default PokemonPage;

frontend/src/pages/Pokemon/index.tsx

@@ -0,0 +1 @@
+export { default } from './Pokemon';

frontend/src/routes.tsx

@@ -2,11 +2,13 @@ import React, { lazy, Suspense } from 'react';
 import { Route, Switch } from 'react-router';
 
 const Home = lazy(() => import('./pages/Home'));
+const PokemonPage = lazy(() => import('./pages/Pokemon'));
 
 const routes = () => (
   <Suspense fallback={<div>Loading...</div>}>
     <Switch>
       <Route exact path="/" component={Home} />
+      <Route exact path="/pokemon/:id" component={PokemonPage} />
     </Switch>
   </Suspense>
 );