Merge pull request #2 from fre-ben/getRandomHeadline

✨ Add getRandomHeadline function

notes.md

@@ -46,3 +46,9 @@ const test = convertToImage(result);
 console.log(result);
 return test;
 }
+
+## Currents Api Token
+
+dRj7MBwlYafKn4RJFGHIM--anhE1w_bpXLYKo7hdZIKJW0eX
+
+https://api.currentsapi.services/v1/latest-news?language=de&apiKey=dRj7MBwlYafKn4RJFGHIM--anhE1w_bpXLYKo7hdZIKJW0eX

src/components/cat/cat.stories.ts

@@ -4,7 +4,7 @@ import { createElement } from "../../utils/createElement";
 import { getRandomCat } from "../../utils/api";
 
 export default {
-  title: "Components/Hello Cat",
+  title: "Components/Cat",
   parameters: { layout: "centered" },
 };
 

src/components/headline/headline.stories.ts

@@ -0,0 +1,19 @@
+import "./headline.css";
+import { displayGermanHeadline } from "./headline";
+import { createElement } from "../../utils/createElement";
+import { getRandomHeadlineGerman } from "../../utils/api";
+
+export default {
+  title: "Components/Headline",
+  parameters: { layout: "centered" },
+};
+
+export const HeadlineFromAPI = (args, { loaded: { headline } }) => {
+  return displayGermanHeadline(headline);
+};
+
+HeadlineFromAPI.loaders = [
+  async () => ({
+    headline: await getRandomHeadlineGerman(),
+  }),
+];

src/components/headline/headline.ts

@@ -0,0 +1,17 @@
+import { createElement } from "../../utils/createElement";
+
+export function displayGermanHeadline({ headline, link }) {
+  return createElement("div", {
+    className: "headline__container",
+    childs: [
+      createElement("p", {
+        className: "headline",
+        innerText: headline,
+      }),
+      createElement("a", {
+        href: link,
+        innerText: "Artikel lesen",
+      }),
+    ],
+  });
+}

src/utils/api.ts

@@ -1,5 +1,3 @@
-import { ClassificationType } from "typescript";
-
 //TheCatAPI
 // Schema von CatAPI
 export type Cat = {
@@ -36,3 +34,45 @@ export async function getRandomCat() {
 }
 
 // News API
+// Schema currentsAPI
+export type News = {
+  status: string;
+  news: [
+    {
+      id: string;
+      title: string;
+      description: string;
+      url: string;
+      author: string;
+      image: string;
+      language: string;
+      category: string[];
+      published: string;
+    }
+  ];
+  page: number;
+};
+
+// Was ich brauch von currentsAPI
+export type Headline = {
+  headline: string;
+  link: string;
+};
+
+const randomHeadline = Math.floor(Math.random() * 30);
+
+function convertToText(headline: News): Headline {
+  return {
+    headline: headline.news[randomHeadline].title,
+    link: headline.news[randomHeadline].url,
+  };
+}
+
+export async function getRandomHeadlineGerman() {
+  const response = await fetch(
+    `https://api.currentsapi.services/v1/latest-news?language=de&apiKey=dRj7MBwlYafKn4RJFGHIM--anhE1w_bpXLYKo7hdZIKJW0eX`
+  );
+  const result = (await response.json()) as News;
+  const headline = convertToText(result);
+  return headline;
+}