🚧 WIP getRandomCat gif, not working

src/components/cat/cat.stories.ts

@@ -1,10 +1,20 @@
 import "./cat.css";
-import { helloCat } from "./randomcat";
+import { displayCat } from "./randomcat";
 import { createElement } from "../../utils/createElement";
+import { getRandomCat } from "../../utils/api";
 
 export default {
   title: "Components/Hello Cat",
   parameters: { layout: "centered" },
 };
 
-export const helloucat = () => helloCat;
+//Get Random Cat Gif from API
+export const CatFromAPI = (args, { loaded: { cat } }) => {
+  return displayCat(cat);
+};
+
+CatFromAPI.loaders = [
+  async () => ({
+    cat: await getRandomCat(),
+  }),
+];

src/components/cat/randomcat.ts

@@ -1,5 +1,9 @@
 import { createElement } from "../../utils/createElement";
 
-export const helloCat = createElement("p", {
-  innerText: "Hello cats!",
-});
+export function displayCat({ url }) {
+  return createElement("img", {
+    className: "catImg",
+    src: url,
+    alt: "cat",
+  });
+}

src/utils/api.ts

@@ -0,0 +1,34 @@
+import { ClassificationType } from "typescript";
+
+// Schema von CatAPI
+export type Cat = {
+  breeds: string[];
+  categories: string[];
+  id: string;
+  url: string;
+};
+
+// Infos die ich brauch von der CatAPI
+export type RandomCat = {
+  imgSrc: string;
+};
+
+function convertToImage(randomCat: Cat): RandomCat {
+  return {
+    imgSrc: randomCat.url,
+  };
+}
+
+export async function getRandomCat() {
+  const response = await fetch(
+    `https://api.thecatapi.com/v1/images/search?mime_types=gif`,
+    {
+      headers: {
+        "x-api-key": "4ed34816-c19f-4144-9082-b2ffc3df0e40",
+      },
+    }
+  );
+  const result = (await response.json()) as Cat;
+  const test = convertToImage(result);
+  return test;
+}