Merge pull request #7 from lawandothman/develop

#2

src/index.js

@@ -10,13 +10,28 @@ nunjucks.configure("views", {
 
 app.use(express.static("public"));
 
-app.get("/", function(request, response) {
-  console.log("Someone is requesting the page /");
-  response.render("index.html");
+app.get("/", async function(req, res) {
+  const page = parseInt(req.query.page) || 0; //req.query returns a string !
+  console.log(`Someone is requesting the page ${page}`);
+  const limit = 20;
+  const offset = page * limit;
+  const url = `https://pokeapi.co/api/v2/pokemon/?offset=${offset}&limit=${limit}`;
+  const pokemonList = await axios.get(url);
+  const maxNumOfPokemons = pokemonList.data.count;
+  const maxNumOfPages = Math.ceil(maxNumOfPokemons / limit);
+  const promises = pokemonList.data.results.map(pokemon =>
+    axios.get(pokemon.url)
+  );
+  const pokemon = await Promise.all(promises);
+  res.render("index.html", {
+    pokemons: pokemon,
+    page,
+    maxNumOfPages
+  });
 });
 
 app.get("/pokemon/:id", async (req, res) => {
-  console.log("Someone is request a pokemon");
+  console.log("Someone is requesting a pokemon");
   const id = req.params.id;
   const pokemon = await getPokemon(id);
   const moves = [];

views/index.html

@@ -11,6 +11,24 @@
     <div class="container">
         <h1>Welcome to My Pokédex</h1>
     </div>
+
+    <ol>
+    {%for pokemon in pokemons%}
+      <a href = "/pokemon/{{pokemon.data.id}}">
+      <p class = "name"> {{pokemon.data.name}} </p>
+      <img  class = "image" src = "{{pokemon.data.sprites["front_default"]}}">
+      </a>
+      <p class = "type"> {%for type in pokemon.data.types%} {{type.type.name}} {%endfor%}</p>
+      <hr>
+    {%endfor%}
+
+    {% if (page-1) >= 0%}
+        <a href = "/?page={{page-1}}"> Previous </a>
+    {%endif%}
+    {%if (page+1) < maxNumOfPages%}
+        <a href = "/?page={{page+1}}"> Next </a>
+    {%endif%}
+    </ol>
     <script src="../client.js"></script>
 </body>
 </html>

views/pokemon.html

@@ -29,7 +29,7 @@ <h2 class = "card-title">{{pokemon.id}} {{pokemon.name}}</h2>
     {%for move in moves%}
       <p class = "move-name"> move name: {{move.data.name}} </p>
       <p> type: {{move.data.type.name}} </p>
-      <p> power : {{move.data.power}} </p>
+      <p> power : {{move.data.power or '100'}} </p>
       <p> damage class: {{move.data.damage_class.name}} </p>
       <p> accuracy: {{move.data.accuracy or '100'}} %</p>
       <p> power point: {{move.data.pp}} </p>