only show one berlin stories and icymi article in homepage latest art…

…icles section. (#124)

lib/contentful/pages/home.ts

@@ -35,7 +35,7 @@ export async function getHomePage() {
       latestArticles: articleCollection(
         order: date_DESC
         where: { isFeatured: false }
-        limit: 6
+        limit: 20
       ) {
         items {
           ...ArticlePreviewFragment
@@ -56,14 +56,42 @@ export async function getHomePage() {
 
   const data = await graphql(HomePageQuery);
 
+  let latestArticles = extractCollection<ArticleInterface>(
+    data,
+    "latestArticles"
+  );
+  let icymi = false;
+  let bs = false;
+
+  const filteredArticles = latestArticles.filter((article) => {
+    if (article.title.includes("ICYMI")) {
+      if (!icymi) {
+        icymi = true;
+        return true;
+      }
+      return false;
+    } else if (article.title.includes("Berlin Stories")) {
+      if (!bs) {
+        bs = true;
+        return true;
+      }
+      return false;
+    }
+    return true;
+  });
+
+  // latestArticles.filter(article => {
+  //   return article.title.includes("Berlin Stories") && !icymi
+  // })
+
   return {
     featuredArticles: extractCollection<ArticleInterface>(
       data,
       "featuredArticles"
     ),
     featuredShows: extractPage<HomePageData>(data, "pageHome")
       .featuredShowsCollection.items,
-    latestArticles: extractCollection<ArticleInterface>(data, "latestArticles"),
+    latestArticles: filteredArticles.slice(0, 6),
     nextUp: extractPage<NextUpSection>(data, "nextUp"),
   };
 }

views/home/latestNews.tsx

@@ -3,12 +3,16 @@ import ArticlePreview from "../../components/articlePreview";
 import Pill from "../../components/pill";
 import { Arrow } from "../../icons/arrow";
 import { ArticleInterface } from "../../types/shared";
+import { useState } from "react";
 
 export default function LatestNews({
   articles,
 }: {
   articles: ArticleInterface[];
 }) {
+  const [icymi, setIcymi] = useState(false);
+  const [bs, setBs] = useState(false);
+
   return (
     <section>
       <div className="p-4 sm:p-8">