WIP: new feature to show pokemon

src/models/pokemon.ts

@@ -7,6 +7,13 @@ interface PokemonData {
   description: string;
 }
 
+export class NotFoundError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "NotFoundError";
+  }
+}
+
 export class Pokemon implements PokemonData {
   id: number;
   name: string;
@@ -35,4 +42,22 @@ export class Pokemon implements PokemonData {
       });
     });
   }
+
+  static getById(db: Database, id: string) {
+    return new Promise<Pokemon>((resolve, reject) => {
+      console.log(id);
+      db.get(`SELECT * FROM POKEDEX WHERE id = ${id};`, (error, row) => {
+        if (error) {
+          console.error(error);
+          reject(error);
+        } else if (row) {
+          const pokemonData: PokemonData = row as PokemonData;
+          const pokemon = new Pokemon(pokemonData);
+          resolve(pokemon);
+        } else {
+          reject(new NotFoundError(`Pokemon with id ${id} not found`));
+        }
+      });
+    });
+  }
 }

src/routes.ts

@@ -1,5 +1,5 @@
 import { Request, Router, Response } from "express";
-import { Pokemon } from "./models/pokemon.js";
+import { NotFoundError, Pokemon } from "./models/pokemon.js";
 import { Subscriber } from "./models/subscriber.js";
 import { db } from "./db.js";
 
@@ -13,6 +13,22 @@ export async function home(_req: Request, res: Response) {
   }
 }
 
+export async function getPokemon(req: Request, res: Response) {
+  const { pokemonId } = req.params;
+  try {
+    const pokemon = await Pokemon.getById(db, pokemonId);
+    res.render("pokemon", { pokemon, pokemonId });
+  } catch (error) {
+    if (error instanceof NotFoundError) {
+      res
+        .status(404)
+        .render("pokemon", { error: "Pokemon not found", pokemonId });
+    } else {
+      res.status(500).send("An error occurred, please try again later.");
+    }
+  }
+}
+
 export async function subscribe(req: Request, res: Response) {
   const { email } = req.body;
   try {
@@ -36,3 +52,4 @@ export async function subscribe(req: Request, res: Response) {
 export const router = Router();
 router.get("/", home);
 router.post("/subscriptions", subscribe);
+router.get("/pokemon/:pokemonId", getPokemon);

src/views/home.handlebars

@@ -2,11 +2,13 @@
   <h1>Pokedex</h1>
 </div>
 
-<div class="container d-flex flex-row flex-wrap justify-content-start align-items-center text-center mt-3">
+<div
+  class="container d-flex flex-row flex-wrap justify-content-start align-items-center text-center mt-3"
+>
   {{#pokemon}}
     <div class="col-6 col-md-4 col-lg-3 p-2">
-      <img alt="{{ description }}" title="{{ description }}" src="{{ imageUrl }}" />
-      <p>{{ name }} #{{ id }}</p>
+      <img alt="{{description}}" title="{{description}}" src="{{imageUrl}}" />
+      <p><a href="/pokemon/{{id}}">{{name}} #{{id}}</a></p>
     </div>
   {{/pokemon}}
 </div>
@@ -21,16 +23,27 @@
           <div class="col-md-5 col-12">
             {{#if error}}
               <div class="alert alert-danger" role="alert">
-                {{ error }}
+                {{error}}
               </div>
             {{/if}}
             <div class="form-outline form-white mb-4">
-              <input type="text" value="{{ email }}" class="form-control" id="input_email" name="email" aria-describedby="emailHelp">
-              <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
+              <input
+                type="text"
+                value="{{email}}"
+                class="form-control"
+                id="input_email"
+                name="email"
+                aria-describedby="emailHelp"
+              />
+              <div id="emailHelp" class="form-text">We'll never share your email
+                with anyone else.</div>
             </div>
           </div>
           <div class="col-auto">
-            <button type="submit" class="btn btn-outline-light mb-4">Subscribe</button>
+            <button
+              type="submit"
+              class="btn btn-outline-light mb-4"
+            >Subscribe</button>
           </div>
         </div>
       </form>

src/views/pokemon.handlebars

@@ -0,0 +1,19 @@
+<div
+  class="full-page d-flex flex-wrap justify-content-center align-items-center"
+>
+  <div
+    class="container d-flex flex-column flex-wrap justify-content-start align-items-center text-center py-5 m-auto margin-mobile"
+  >
+    {{#if pokemon}}
+    <h1>{{pokemon.name}} #{{{pokemonId}}} </h1>
+    <div
+      class="flex-row container d-flex flex-wrap justify-content-center align-items-center text-center mt-2"
+    >
+      <img src="{{pokemon.imageUrl}}" alt="{{pokemon.name}}" />
+    </div>
+    <p>{{pokemon.description}}</p>
+    {{else}}
+    <h1>404 - Pokemon #{{{pokemonId}}} not found</h1>
+    {{/if}}
+  </div>
+</div>