Technical Assessment stuck

I got a technical assessment that I've been messing with but can't get working. I need to get this HTML form working. The API call has to be done on the backend using isomorphic-fetch, their rules. What needs to happen to meet MVP I guess is that form needs to send the backend the search term, the backend needs to call the dog API for a photo of the dog from the search term, and that data needs to be sent back to the front, and then displayed. Seems easy but I'm struggling to get it working. Any help would be appreciated, thank you. Even just some help getting these params passed from front to back would be awesome. I've used express but not koa, and that was over a year ago.

Here is the code.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
    <title>Lots of dogs! 🐕</title>
</head>
<body>
    <h1>Lots of dogs! 🐕</h1>
    <p>See photos of your favorite dogs</p>
    <form>
        <input type="text" name="breed" placeholder="Enter a dog breed">
        <button type="submit">Fetch</button>
    </form>
</body>
</html>




import Koa from "koa";
import Router from "@koa/router";
import cors from "@koa/cors";
import fetch from "isomorphic-fetch";

const app = new Koa();
const router = new Router();
const port = 3011;

app.use(cors({ origin: "*" }));

router.get("/", (ctx) => {
  ctx.body = "hello!";
});

app.use(async (ctx, next) => {
  await next();
  const rt = ctx.response.get("X-Response-Time");
  console.log(`${ctx.method} ${ctx.url} - ${rt}`);
});

app.use(async (ctx, next) => {
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  ctx.set("X-Response-Time", `${ms}ms`);
});

router.get("/:searchTerm", async (ctx, next) => {
  const breed = req.params;
  console.log(`breed: ${breed}`);
});

const fetchBreedImage = () => {
  fetch("https://dog.ceo/api/breed/hound/images").then((data) =>
    console.log(data)
  );
};

app.use(router.routes());

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

Upvotes: 0

Answers (2)

Lucas Paixão

Reputation: 981

The problem:

router.get("/:searchTerm", async (ctx, next) => {
  const breed = req.params;
  console.log(`breed: ${breed}`);
});

The variable req is not declared in this context, do access the :searchTerm param, you need to use ctx.params.searchTerm

How to solve:

First, you need to use ctx.params.searchTerm

You need to pass the searchTerm the URL API: https://dog.ceo/api/breed/${searchTerm}/images

const fetchBreedImage = breed =>
fetch(`https://dog.ceo/api/breed/${breed}/images`)
   .then((res) => res.json())
   .catch((err) => console.log({ err }));

You need to return the result of fetchBreedImage to the client:

router.get("/search/:searchTerm", async (ctx, next) => {

    const { searchTerm } = ctx.params;
    const { message } = await fetchBreedImage(searchTerm);
    ctx.body = message;
})

The final code:

Here is an example with the code applying all recommendations above.

import Koa from "koa";
import Router from "@koa/router";
import cors from "@koa/cors";
import fetch from "isomorphic-fetch";
import serve from "koa-static";

const app = new Koa();
const router = new Router();
const port = 8000;

const format = str =>
  str.toLowerCase()
     .replace(/\s/g, '');

app.use(cors({ origin: "*" }));

router.get("/", (ctx) => {
  ctx.body = "hello!";
});

app.use(async (ctx, next) => {
  await next();
  const rt = ctx.response.get("X-Response-Time");
  console.log(`${ctx.method} ${ctx.url} - ${rt}`);
});

app.use(async (ctx, next) => {
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  ctx.set("X-Response-Time", `${ms}ms`);
});

router.get("/search/:breed", async (ctx, next) => {
  const { breed } = ctx.params;
  const { message } = await fetchBreedImage(format(breed));
  ctx.body = message;
});

const fetchBreedImage = breed =>
  fetch(`https://dog.ceo/api/breed/${breed}/images`)
    .then((res) => res.json())
    .catch((err) => console.log({ err }));

app.use(serve("./static"));

app.use(router.routes());

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

Try this:

URL: https://codesandbox.io/s/sharp-galois-nq9zf9

Remarks:

If this answer was not satisfactory, or confusing, or did not answer what was asked, please comment so I can edit it.

It's worth mentioning that I'm using google translator to answer, I apologize for any inconvenience

Upvotes: 1

Brendan F

Reputation: 19

Thank you Lucas Paixao for the answer. I have multiple days left until this assessments due and this put me ahead. I got an answer within 2 hours of posting and I have one week to complete it. The answer I wanted was how to pass the params from front to back. I'd used express but not koa, same founders. I guess ctx confused me. express I could just put req.params but in koa it would be ctx.params.

The answer I received....

import Koa from "koa";
import Router from "@koa/router";
import cors from "@koa/cors";
import fetch from "isomorphic-fetch";
import serve from "koa-static";

const app = new Koa();
const router = new Router();
const port = 8000;

const format = str =>
  str.toLowerCase()
     .replace(/\s/g, '');

app.use(cors({ origin: "*" }));

router.get("/", (ctx) => {
  ctx.body = "hello!";
});

app.use(async (ctx, next) => {
  await next();
  const rt = ctx.response.get("X-Response-Time");
  console.log(`${ctx.method} ${ctx.url} - ${rt}`);
});

app.use(async (ctx, next) => {
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  ctx.set("X-Response-Time", `${ms}ms`);
});

router.get("/search/:breed", async (ctx, next) => {
  const { breed } = ctx.params;
  const { message } = await fetchBreedImage(format(breed));
  ctx.body = message;
});

const fetchBreedImage = breed =>
  fetch(`https://dog.ceo/api/breed/${breed}/images`)
    .then((res) => res.json())
    .catch((err) => console.log({ err }));

app.use(serve("./static"));

app.use(router.routes());

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});