From 7848e7cd90079357577bfe7a88ae59d8d70cee61 Mon Sep 17 00:00:00 2001 From: Lawand Othman Date: Sun, 29 Dec 2019 22:36:57 +0000 Subject: [PATCH 1/8] log pokemon list --- src/index.js | 16 +++++++++++++--- views/index.html | 1 + 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 0abd52f..532fcb0 100644 --- a/src/index.js +++ b/src/index.js @@ -10,9 +10,19 @@ nunjucks.configure("views", { app.use(express.static("public")); -app.get("/", function(request, response) { +app.get("/", async function(req, res) { console.log("Someone is requesting the page /"); - response.render("index.html"); + const url = "https://pokeapi.co/api/v2/pokemon/"; + const pokemonList = await axios.get(url); + console.log(pokemonList); + const promises = pokemonList.data.results.map(pokemon => + axios.get(pokemon.url) + ); + const pokemons = await Promise.all(promises); + console.log(pokemons); + res.render("index.html", { + pokemon: pokemons + }); }); app.get("/pokemon/:id", async (req, res) => { @@ -39,5 +49,5 @@ async function getPokemon(id) { } const listener = app.listen(process.env.PORT || 3000, function() { - console.log("Your app is listening on port " + listener.address().port); + console.log(" Your app is listening on port " + listener.address().port); }); diff --git a/views/index.html b/views/index.html index f73bebf..fc338e0 100644 --- a/views/index.html +++ b/views/index.html @@ -11,6 +11,7 @@

Welcome to My Pokédex

+ \ No newline at end of file From f9f0c0909181efb0cd539887159238d8525db27b Mon Sep 17 00:00:00 2001 From: Lawand Othman Date: Sun, 29 Dec 2019 22:51:37 +0000 Subject: [PATCH 2/8] front end pokemon list --- views/index.html | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/views/index.html b/views/index.html index fc338e0..87b697e 100644 --- a/views/index.html +++ b/views/index.html @@ -11,7 +11,14 @@

Welcome to My Pokédex

- + +
    + {%for pokemons in pokemon%} +

    name: {{pokemons.data.name}}

    + + + {%endfor%} +
\ No newline at end of file From cf170821c9263a17dab925a579f76f4c1a4d9043 Mon Sep 17 00:00:00 2001 From: Lawand Othman Date: Mon, 30 Dec 2019 11:12:50 +0000 Subject: [PATCH 3/8] add type on home page --- src/index.js | 8 +++----- views/index.html | 9 +++++---- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index 532fcb0..d458b78 100644 --- a/src/index.js +++ b/src/index.js @@ -14,19 +14,17 @@ app.get("/", async function(req, res) { console.log("Someone is requesting the page /"); const url = "https://pokeapi.co/api/v2/pokemon/"; const pokemonList = await axios.get(url); - console.log(pokemonList); const promises = pokemonList.data.results.map(pokemon => axios.get(pokemon.url) ); - const pokemons = await Promise.all(promises); - console.log(pokemons); + const pokemon = await Promise.all(promises); res.render("index.html", { - pokemon: pokemons + pokemons: pokemon }); }); 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 = []; diff --git a/views/index.html b/views/index.html index 87b697e..6c3d0d7 100644 --- a/views/index.html +++ b/views/index.html @@ -13,10 +13,11 @@

Welcome to My Pokédex

    - {%for pokemons in pokemon%} -

    name: {{pokemons.data.name}}

    - - + {%for pokemon in pokemons%} +

    {{pokemon.data.name}}

    + +

    {%for type in pokemon.data.types%} {{type.type.name}} {%endfor%}

    +
    {%endfor%}
From 409a61b47c99ebd237855410f09dc2dc988161b6 Mon Sep 17 00:00:00 2001 From: Lawand Othman Date: Mon, 30 Dec 2019 11:26:37 +0000 Subject: [PATCH 4/8] link pokemons in index to their pages --- views/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/views/index.html b/views/index.html index 6c3d0d7..3721368 100644 --- a/views/index.html +++ b/views/index.html @@ -14,8 +14,10 @@

Welcome to My Pokédex

    {%for pokemon in pokemons%} +

    {{pokemon.data.name}}

    +

    {%for type in pokemon.data.types%} {{type.type.name}} {%endfor%}

    {%endfor%} From d2fa4e11ec90f2111bc840deb5823759faf1a3e6 Mon Sep 17 00:00:00 2001 From: Lawand Othman Date: Mon, 30 Dec 2019 11:31:31 +0000 Subject: [PATCH 5/8] power = 100 fix --- views/pokemon.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/views/pokemon.html b/views/pokemon.html index 88abb57..964a371 100644 --- a/views/pokemon.html +++ b/views/pokemon.html @@ -29,7 +29,7 @@

    {{pokemon.id}} {{pokemon.name}}

    {%for move in moves%}

    move name: {{move.data.name}}

    type: {{move.data.type.name}}

    -

    power : {{move.data.power}}

    +

    power : {{move.data.power or '100'}}

    damage class: {{move.data.damage_class.name}}

    accuracy: {{move.data.accuracy or '100'}} %

    power point: {{move.data.pp}}

    From 312949a76061a59438a2270506a02a1454bcf2a1 Mon Sep 17 00:00:00 2001 From: Lawand Othman Date: Mon, 30 Dec 2019 18:14:25 +0000 Subject: [PATCH 6/8] pagination --- src/index.js | 9 +++++++-- views/index.html | 2 ++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index d458b78..8ed7c42 100644 --- a/src/index.js +++ b/src/index.js @@ -11,15 +11,20 @@ nunjucks.configure("views", { app.use(express.static("public")); app.get("/", async function(req, res) { + console.log(req.query.page); + const page = parseInt(req.query.page) || 0; //req.query returns a string ! + const limit = 20; + const offset = page * limit; console.log("Someone is requesting the page /"); - const url = "https://pokeapi.co/api/v2/pokemon/"; + const url = `https://pokeapi.co/api/v2/pokemon/?offset=${offset}&limit=${limit}`; const pokemonList = await axios.get(url); const promises = pokemonList.data.results.map(pokemon => axios.get(pokemon.url) ); const pokemon = await Promise.all(promises); res.render("index.html", { - pokemons: pokemon + pokemons: pokemon, + page }); }); diff --git a/views/index.html b/views/index.html index 3721368..321cf03 100644 --- a/views/index.html +++ b/views/index.html @@ -21,6 +21,8 @@

    Welcome to My Pokédex

    {%for type in pokemon.data.types%} {{type.type.name}} {%endfor%}

    {%endfor%} + Previous + Next
From 9d75b29326a06dad47397411812917f29e608037 Mon Sep 17 00:00:00 2001 From: Lawand Othman Date: Tue, 31 Dec 2019 02:00:55 +0000 Subject: [PATCH 7/8] fix pagination issues --- src/index.js | 5 ++++- views/index.html | 9 +++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 8ed7c42..7098a6d 100644 --- a/src/index.js +++ b/src/index.js @@ -18,13 +18,16 @@ app.get("/", async function(req, res) { console.log("Someone is requesting the page /"); 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 + page, + maxNumOfPages }); }); diff --git a/views/index.html b/views/index.html index 321cf03..4cb5c84 100644 --- a/views/index.html +++ b/views/index.html @@ -21,8 +21,13 @@

Welcome to My Pokédex

{%for type in pokemon.data.types%} {{type.type.name}} {%endfor%}

{%endfor%} - Previous - Next + + {% if (page-1) >= 0%} + Previous + {%endif%} + {%if (page+1) < maxNumOfPages%} + Next + {%endif%} From d2d815b49c158b8a4c8bea663c965c3801d7eef0 Mon Sep 17 00:00:00 2001 From: Lawand Othman Date: Tue, 31 Dec 2019 02:17:54 +0000 Subject: [PATCH 8/8] clean console log --- src/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 7098a6d..0ee2dad 100644 --- a/src/index.js +++ b/src/index.js @@ -11,11 +11,10 @@ nunjucks.configure("views", { app.use(express.static("public")); app.get("/", async function(req, res) { - console.log(req.query.page); 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; - console.log("Someone is requesting the page /"); const url = `https://pokeapi.co/api/v2/pokemon/?offset=${offset}&limit=${limit}`; const pokemonList = await axios.get(url); const maxNumOfPokemons = pokemonList.data.count; @@ -55,5 +54,5 @@ async function getPokemon(id) { } const listener = app.listen(process.env.PORT || 3000, function() { - console.log(" Your app is listening on port " + listener.address().port); + console.log("Your app is listening on port " + listener.address().port); });