From 1539a030846f517e77b57d9efe62724ec714ff17 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Fri, 28 Jun 2024 18:35:03 +0200
Subject: [PATCH] make api call on the server add tests

---
 TODO.md                   |   6 +--
 bun.lockb                 | Bin 418114 -> 418066 bytes
 composables/useRecipe.ts  |  61 ------------------------
 nuxt.config.ts            |   1 -
 pages/index.vue           |   4 +-
 pages/random.vue          |   6 ++-
 server/api/recipes.get.ts |  12 +++++
 types/recipe.ts           |   2 +-
 utils/recipes.test.ts     |  95 ++++++++++++++++++++++++++++++++++++++
 utils/recipes.ts          |  33 +++++++++++++
 10 files changed, 151 insertions(+), 69 deletions(-)
 delete mode 100644 composables/useRecipe.ts
 create mode 100644 server/api/recipes.get.ts
 create mode 100644 utils/recipes.test.ts
 create mode 100644 utils/recipes.ts

diff --git a/TODO.md b/TODO.md
index 5bbe111..de9f0fc 100644
--- a/TODO.md
+++ b/TODO.md
@@ -4,10 +4,10 @@
 - [x] use nuxt framework
 - [x] rewrite the random page, the current landing page
 - [x] rewrite the recipe page
-- [ ] deploy
-- [ ] nuxt image
+- [x] deploy
+- [x] nuxt image
 - [x] prettier and eslint
 - [ ] transition
 - [ ] pwa
 - [ ] seo, robots.txt
-- [ ] update the README
+- [x] update the README
diff --git a/bun.lockb b/bun.lockb
index 98904ee3b98dc6045210651324e64f3c106a6040..819d8b9f569bbffe0ab0587875318f6c672fe032 100755
GIT binary patch
delta 2548
zcmYk6X>6566o$Xc{kl<#0kn$(Wf9q1ij-PPfhq;D!cBn+3MFlUAI8L3qee}zmQog_
zbOQ#ZvM&V^0R^vOLgi{g1E?UNXhdmZqER3={(-vSb8cS~PjWKvJnxy)`DW%e5=m={
zq&3V5tgH^zh61&r9>+t$v9|&v+=^SlqTHIG=LI~^izO}ooA*Fh#7B|0N;M4La<N($
zxE<`5zgkud*7LH~{I6xNxb7Bf#cbL~Y@I8%7VBjtVAa@Gh&r*J=vuK2Vu`S3v3j@D
zS~SQ?!s<g>G>Y{`PmdDMYZAMQ`C+kU*J&*_%ChBawZTndePQdwHpA>}`jK^FTU<dG
zEw-xs9;~}%wWvH9mMpeSbt$m^V%uG#wb-HZG^|W4b9bryUUZwTX}8#Yu!z_m*I_O8
z${K)GhPK!zHV|DQwqGnAwp6UuW&KHugR%x=JtON7qsbv;z1X{qb`e8KI~R+?uG(50
zVQOR;St#p$Mk{}SEFmq9i48}$>Qaxp3)bQTEIa9uq<yEwhbkY1?m}C9BsLm-+m9me
zgd6-9Ek4Gws<Griz0Q*=&w!<iwTWfI28n&*Dy_vSSy@=IvLa&RVb^tmpNc&QI{>qH
z^qD(lEl$hI2EC{9c9?zKMDm!}8P(;$w!!S#oppWwro}l~xu7Sp?1_CYHVIt}vnTe2
zSRQ%_?;@4)OIL0!&STkM%qLUO7GJ4+3c6j-=%UzE*aBNXTyjUP#bsFqpv(4)C%zVY
z7(GVp8?i@VnPOL5;2&CiE2|J|vaIi5_J?MWHC&**$nRA*6J4%Lz3Pgs#SgM(VcADn
z{3!Mq`jXf+u_D+Vp4L#t4!6@<{Dfsyv&nMO;%Al5L03eH=lue+orTDyV!yghS`_@I
z@?!95J>2VJb72?6Zivl;1@$2}VLifycY?!%RdF!$?q{?mE64=Z4P&I#dyUNG?agN#
zp}Hz`me@$uy{<a@ag9-3wd#zGRozPTi@X@3${VM`8fIsJix{)SR-sSA7Bh~A*;&+*
zZQYB#394HSE9d=`GG>ddLEnItF-{a)i$0}W&xtZVV;%4aa2ex6DtrTdOe|OIP1tNL
zo&>YatS3vwCabOvHWh7=FSY?a1^ui>JL!6|vx@V54q*$dVFPI=@d8-@!}c1<7Bh+I
zYS@JCg|_P|6l+E&iOmq(2%E+=*%i(d+l0=B*%c0WRB$ts9Kl&)&Q<z;zp5>&x2r6Y
z^_I$wJudb(`W!c7`=2eg6&=xS%@J#X-Q;F0LNNQZcgSS1V%2SfMPj1c^t`!(+kr3X
z#OI0afW0C%Uu-9AG}=zSL~Iv&HED<ZgxGGhJqu$C#P*;|w3&rI$7DO)OWL!rCQqqw
zA9^u`wqOy=_OPEU6)S_;+E(&unAKNk?E$p?i?sTsVh7P>F!Pp)9U8#I9=Dmx1sBF5
zh~HCOMyfwFydu{BBQeQfJZZn*p5e;Aep@gQ=kk;Ni@ke;5=nbANxmDE;&=5Nl*)uS
zKPlRTjfO+1{?Q=`US7BHvP;PGPs9h7jLXQ*$eIv7o9AD>meAh6`>0#PNBhSN4<=km
S@1DQ9rXxKj+>stzUhpr@mJ^8p

delta 2620
zcmYk6X>3(h6oqejuca*%14t<dl$ju4K}3Wy6+r}qQlug>gn~H4#HbMye_&fmnad~~
zkg*I>ra%#V#(_$s0TH8!sHhl8G|n3S7^nk&t6e7UWM{AQ?S1w;_nv*<y4p6iwQbf+
zOgdJYU!I>-p5N$1eyq>6q)B1Hwb=MUC9x<<ilQh5m;JYHgr1XHkD^l75Tbcz3q#WN
zSj(YhP9>9i#;HaBYuU7MLyK}VEt{Jy4h3ql%&9a|WjYGB+$<ekZnna#32eRD%225m
z6;5T4YL3fRnKeU?swYvj+UzFQN6glQt7@^<DQ#cs1Fkb`0b6Fa9;SEG60b1Z5c2A1
zvB~AFNZstzW|wEeGR?NQt~IQk+19XDEw;J54XGSb%I<J^TXc=DX{XsOuv)Xqa78V4
zIn|!jY_x2*SqJnSvpr_nu(@V?L%%<1vCpYaq@Hl9iYVC`*K3p=B<do%;2X^jg;KRR
z%u=KqKH90HM3r~P3vpSsSr2rTFZEbBuNJS6(wpvy>p5j7Tz)IM4lR4ttQY!vydFh~
z(CIH)yhch@eee#R&Np0s8!X%GO|u+WN3*xW(`s?jseYtVoT@Rq9rlYa@NKjHu>CO2
z(W!7sE#7fz0O**@--YSn?!=Fqop#+o*mju4?o4R@H!a?CY7l4|DUH}!v%%;Bm`3b<
zvt0Bn<|2!DE)=Q72c-0iL-E#V*@rG4hCbsl`p9fJY^pY3=R>txeC$*n=%T)O?1I@y
zbZ@gy%<hKem|YA>|Ip%7r$&<+;?!p_{m?yl85gLDyyUtu=ptY07ok8czI19VDIHe!
zmDxD7eqDCiY&`k~qt%7@b*NN}E2LC40WZR3-@1GvdQLrwqVHfjSw243?E7$)7I{Co
zya0UKgZrb|WY~GLpUm!u#rz;Y!;%xDZ^U}Uic?_9btP)c0=%(VH?tRDX=qt@BHN>4
zJl%CYi8^Kpp2LhzA@+i)Un$<ttT#-17viepBP@<`Tv+BpeVKh-xClL;(USFdT{-$J
zY&!7{v&HC>uo=VwFdb$IUgNz3UAGig#GK6}-c`?djAbl-1<oc8a^Z6HDUZisvlXzT
zu!o7cW-HOh&4!p&z$SR_P?!$03ZH2<+;yvA!;4wSMi{O^4?{mm%rjeyzRG)hiZ~Lc
zhU;*>v1jp7Fw)U_e5;b!81H=%-4v}Wyw_|4I>W4Ztl>uB2=1hWIL<7f2f%cP<IOgq
z2b$eywi%|q3yBlVUP5cH4mr_m3tD@{@*7xjw3Wp<?x~zO$%Wg{wZ6Lov+c0oxF*?T
zm>zToo@qA4bvt3Te$|C$m9Xc`9x&Sldp=oXj7>G%jn?Gq8Xh#;gI<j5l}|I<i(YE>
zklD+u3w@aBFdc9ou31u#nXaos&!A5AvvmJD*nSll&h_R4u*YHAFwdJ0qV>nB`bW$T
zp=ZOCd(`YOT9dBaV`e4#*0HWx4KaPl{Qe=H6>p!ImJ<KHNm5#(utmHkmZ38J1*GEX
zp;c!5LfZ@;rWwm7xW-B2(*oAAQTQV>UY9<}Eu-8}*E-%M(J3o_q;pzdeI{5{xHLHa
tda7QCEU_gwe)*fUYwa3t<nu&nyW}3RwA79b>jO)wvy&6m*(pVN{{k<u6{!FK

diff --git a/composables/useRecipe.ts b/composables/useRecipe.ts
deleted file mode 100644
index bf2586a..0000000
--- a/composables/useRecipe.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import type { Recipe } from "~/types/recipe";
-
-type Keyword = "random" | "filter" | "lookup" | "search";
-
-export default async function (keyword: Keyword, param?: string) {
-  const { data, pending, error } = await useAsyncData(
-    keyword,
-    async () => {
-      const config = useRuntimeConfig();
-
-      let url = "";
-
-      switch (keyword) {
-        case "random":
-          url = `${config.apiUrl}random.php`;
-          break;
-        case "filter":
-          url = "";
-          break;
-        case "lookup":
-          url = `${config.apiUrl}${keyword}.php?i=${param}`;
-          break;
-        case "search":
-          url = "";
-          break;
-        default:
-          throw Error("unexpected URI parameters");
-      }
-      return await $fetch(url);
-    },
-    { lazy: true },
-  );
-
-  const tmp = computed(() => data.value?.meals?.[0]);
-
-  const names: string[] = [];
-  const quantities: number[] = [];
-  for (const [k, v] of Object.entries(tmp.value)) {
-    if (k.startsWith("strIngredient") && !!v) {
-      names.push(v);
-    } else if (k.startsWith("strMeasure") && !!v) {
-      quantities.push(v);
-    }
-  }
-
-  const recipe = reactive<Recipe>({
-    title: tmp.value.strMeal,
-    pictureUrl: tmp.value.strMealThumb,
-    videoUrl: tmp.value.strYoutube,
-    category: tmp.value.strCategory,
-    origin: tmp.value.strArea,
-    ingredients: names.map((name, i) => ({ name, quantity: quantities[i] })),
-    instructions: tmp.value.strInstructions,
-  });
-
-  return {
-    recipe,
-    pending,
-    error,
-  };
-}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8defe9f..c81ba69 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,7 +16,6 @@ export default defineNuxtConfig({
     // The private keys which are only available server-side
     apiUrl: "",
     // Keys within public are also exposed client-side
-    public: {},
   },
   ssr: true,
 });
diff --git a/pages/index.vue b/pages/index.vue
index e4df656..71e2c75 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="hero min-h-screen bg-base-200">
+  <div class="hero min-h-full bg-base-200">
     <div class="hero-content flex-col lg:flex-row-reverse">
       <NuxtImg src="/chef.svg" class="max-w-sm rounded-lg shadow-2xl" />
       <div>
         <h1 class="text-5xl font-bold prose">Eat Something New</h1>
         <p class="py-6 prose">Generate a random recipe.</p>
-        <NuxtLink to="/random" class="btn btn-primary" external>
+        <NuxtLink to="/random" class="btn btn-primary">
           Random Recipe Now
         </NuxtLink>
       </div>
diff --git a/pages/random.vue b/pages/random.vue
index 269f3f7..46607ef 100644
--- a/pages/random.vue
+++ b/pages/random.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-const { recipe, pending, error } = await useRecipe("random");
+const {
+  data: recipe,
+  pending,
+  error,
+} = await useFetch("/api/recipes", { lazy: true });
 </script>
 
 <template>
diff --git a/server/api/recipes.get.ts b/server/api/recipes.get.ts
new file mode 100644
index 0000000..9059765
--- /dev/null
+++ b/server/api/recipes.get.ts
@@ -0,0 +1,12 @@
+import { parseRecipeData } from "~/utils/recipes";
+
+export default defineEventHandler(async (_event) => {
+  const { apiUrl } = useRuntimeConfig();
+
+  const data = await $fetch<{ meals: unknown }>(
+    new URL("random.php", apiUrl).toString(),
+  );
+
+  const recipes = parseRecipeData(data);
+  return recipes[0];
+});
diff --git a/types/recipe.ts b/types/recipe.ts
index 3d6c00d..a0c6498 100644
--- a/types/recipe.ts
+++ b/types/recipe.ts
@@ -4,6 +4,6 @@ export type Recipe = {
   videoUrl: string;
   category: string;
   origin: string;
-  ingredients: { name: string; quantity: number }[];
+  ingredients: { name: string; quantity: string }[];
   instructions: string;
 };
diff --git a/utils/recipes.test.ts b/utils/recipes.test.ts
new file mode 100644
index 0000000..2a48b26
--- /dev/null
+++ b/utils/recipes.test.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it } from "vitest";
+import type { Recipe } from "~/types/recipe";
+import { parseRecipeData } from "~/utils/recipes";
+
+const sampleApiResponse = {
+  meals: [
+    {
+      idMeal: "52915",
+      strMeal: "French Omelette",
+      strDrinkAlternate: null,
+      strCategory: "Miscellaneous",
+      strArea: "French",
+      strInstructions:
+        "Get everything ready. Warm a 20cm (measured across the top) non-stick frying pan on a medium heat. Crack the eggs into a bowl and beat them with a fork so they break up and mix, but not as completely as you would for scrambled egg. With the heat on medium-hot, drop one knob of butter into the pan. It should bubble and sizzle, but not brown. Season the eggs with the Parmesan and a little salt and pepper, and pour into the pan.\r\nLet the eggs bubble slightly for a couple of seconds, then take a wooden fork or spatula and gently draw the mixture in from the sides of the pan a few times, so it gathers in folds in the centre. Leave for a few seconds, then stir again to lightly combine uncooked egg with cooked. Leave briefly again, and when partly cooked, stir a bit faster, stopping while there’s some barely cooked egg left. With the pan flat on the heat, shake it back and forth a few times to settle the mixture. It should slide easily in the pan and look soft and moist on top. A quick burst of heat will brown the underside.\r\nGrip the handle underneath. Tilt the pan down away from you and let the omelette fall to the edge. Fold the side nearest to you over by a third with your fork, and keep it rolling over, so the omelette tips onto a plate – or fold it in half, if that’s easier. For a neat finish, cover the omelette with a piece of kitchen paper and plump it up a bit with your fingers. Rub the other knob of butter over to glaze. Serve immediately.",
+      strMealThumb:
+        "https://www.themealdb.com/images/media/meals/yvpuuy1511797244.jpg",
+      strTags: "Egg",
+      strYoutube: "https://www.youtube.com/watch?v=qXPhVYpQLPA",
+      strIngredient1: "Eggs",
+      strIngredient2: "Butter",
+      strIngredient3: "Parmesan",
+      strIngredient4: "Tarragon",
+      strIngredient5: "Parsley",
+      strIngredient6: "Chives",
+      strIngredient7: "Gruyère",
+      strIngredient8: "",
+      strIngredient9: "",
+      strIngredient10: "",
+      strIngredient11: "",
+      strIngredient12: "",
+      strIngredient13: "",
+      strIngredient14: "",
+      strIngredient15: "",
+      strIngredient16: "",
+      strIngredient17: "",
+      strIngredient18: "",
+      strIngredient19: "",
+      strIngredient20: "",
+      strMeasure1: "3",
+      strMeasure2: "2 knobs",
+      strMeasure3: "1 tsp",
+      strMeasure4: "3 chopped",
+      strMeasure5: "1 tbs chopped",
+      strMeasure6: "1 tbs chopped",
+      strMeasure7: "4 tbs",
+      strMeasure8: "",
+      strMeasure9: "",
+      strMeasure10: "",
+      strMeasure11: "",
+      strMeasure12: "",
+      strMeasure13: "",
+      strMeasure14: "",
+      strMeasure15: "",
+      strMeasure16: "",
+      strMeasure17: "",
+      strMeasure18: "",
+      strMeasure19: "",
+      strMeasure20: "",
+      strSource:
+        "https://www.bbcgoodfood.com/recipes/1669/ultimate-french-omelette",
+      strImageSource: null,
+      strCreativeCommonsConfirmed: null,
+      dateModified: null,
+    },
+  ],
+};
+
+describe("parseRecipeData", () => {
+  it("should parse the API response into the Recipe type", () => {
+    const expectedResult: Recipe[] = [
+      {
+        title: "French Omelette",
+        pictureUrl:
+          "https://www.themealdb.com/images/media/meals/yvpuuy1511797244.jpg",
+        videoUrl: "https://www.youtube.com/watch?v=qXPhVYpQLPA",
+        category: "Miscellaneous",
+        origin: "French",
+        ingredients: [
+          { name: "Eggs", quantity: "3" },
+          { name: "Butter", quantity: "2 knobs" },
+          { name: "Parmesan", quantity: "1 tsp" },
+          { name: "Tarragon", quantity: "3 chopped" },
+          { name: "Parsley", quantity: "1 tbs chopped" },
+          { name: "Chives", quantity: "1 tbs chopped" },
+          { name: "Gruyère", quantity: "4 tbs" },
+        ],
+        instructions:
+          "Get everything ready. Warm a 20cm (measured across the top) non-stick frying pan on a medium heat. Crack the eggs into a bowl and beat them with a fork so they break up and mix, but not as completely as you would for scrambled egg. With the heat on medium-hot, drop one knob of butter into the pan. It should bubble and sizzle, but not brown. Season the eggs with the Parmesan and a little salt and pepper, and pour into the pan.\r\nLet the eggs bubble slightly for a couple of seconds, then take a wooden fork or spatula and gently draw the mixture in from the sides of the pan a few times, so it gathers in folds in the centre. Leave for a few seconds, then stir again to lightly combine uncooked egg with cooked. Leave briefly again, and when partly cooked, stir a bit faster, stopping while there’s some barely cooked egg left. With the pan flat on the heat, shake it back and forth a few times to settle the mixture. It should slide easily in the pan and look soft and moist on top. A quick burst of heat will brown the underside.\r\nGrip the handle underneath. Tilt the pan down away from you and let the omelette fall to the edge. Fold the side nearest to you over by a third with your fork, and keep it rolling over, so the omelette tips onto a plate – or fold it in half, if that’s easier. For a neat finish, cover the omelette with a piece of kitchen paper and plump it up a bit with your fingers. Rub the other knob of butter over to glaze. Serve immediately.",
+      },
+    ];
+
+    const result = parseRecipeData(sampleApiResponse);
+    expect(result).toEqual(expectedResult);
+  });
+});
diff --git a/utils/recipes.ts b/utils/recipes.ts
new file mode 100644
index 0000000..38392b9
--- /dev/null
+++ b/utils/recipes.ts
@@ -0,0 +1,33 @@
+import type { Recipe } from "~/types/recipe";
+
+export function parseRecipeData(data: { meals: unknown }): Recipe[] {
+  return data.meals.map((meal: unknown) => {
+    // Extract ingredients and measurements
+    const ingredients: { name: string; quantity: string }[] = [];
+    for (let i = 1; i <= 20; i++) {
+      const ingredientName = meal[`strIngredient${i}`];
+      const ingredientQuantity = meal[`strMeasure${i}`];
+      if (
+        ingredientName &&
+        ingredientName.trim() &&
+        ingredientQuantity &&
+        ingredientQuantity.trim()
+      ) {
+        ingredients.push({
+          name: ingredientName.trim(),
+          quantity: ingredientQuantity.trim(),
+        });
+      }
+    }
+
+    return {
+      title: meal.strMeal,
+      pictureUrl: meal.strMealThumb,
+      videoUrl: meal.strYoutube,
+      category: meal.strCategory,
+      origin: meal.strArea,
+      ingredients: ingredients,
+      instructions: meal.strInstructions,
+    };
+  });
+}