feat: add fetching to the news slider data wrapper

tolocar-project · Jun 19, 2023 · 2067739 · 2067739
1 parent c86de7e
commit 2067739
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 35 deletions.
diff --git a/src/components/NewsItem.tsx b/src/components/NewsItem.tsx
@@ -11,27 +11,31 @@ interface Props {
 
 const NewsItem: React.FC<Props> = ({ children, href, image, isInstagram }) => (
   <article className="block mr-3 -ml-5 pl-5 sm:-ml-8 sm:pl-8 sm:mr-6 lg:mr-8">
-    <a
-      href={href}
-      target={isInstagram && "_blank"}
-      rel={isInstagram && "noopener nofollow noreferer"}
-      className="group flex flex-col h-full hover:-translate-y-4 transition-transform"
-    >
-      <div className="pb-[100%] h-0 w-full relative overflow-hidden">
-        {isInstagram && (
-          <InstagramIcon className="absolute top-4 left-4 z-10 text-white h-6 w-6" />
-        )}
-        <img
-          src={image}
-          loading="lazy"
-          className="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform"
-        />
-        <ArrowIcon className="absolute bottom-4 right-4 z-10 text-white h-6 w-6" />
-      </div>
-      <div className="bg-white py-6 px-5 grow">
-        <p className="line-clamp-3 text-lg">{children}</p>
-      </div>
-    </a>
+    {href && (
+      <a
+        href={href}
+        target={isInstagram && "_blank"}
+        rel={isInstagram && "noopener nofollow noreferer"}
+        className="group flex flex-col h-full hover:-translate-y-4 transition-transform"
+      >
+        <div className="pb-[100%] h-0 w-full relative overflow-hidden">
+          {isInstagram && (
+            <InstagramIcon className="absolute top-4 left-4 z-10 text-white h-6 w-6" />
+          )}
+          {image && (
+            <img
+              src={image}
+              loading="lazy"
+              className="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform"
+            />
+          )}
+          <ArrowIcon className="absolute bottom-4 right-4 z-10 text-white h-6 w-6" />
+        </div>
+        <div className="bg-white py-6 px-5 grow">
+          <p className="line-clamp-3 text-lg">{children}</p>
+        </div>
+      </a>
+    )}
   </article>
 );
 

diff --git a/src/components/NewsSlider.tsx b/src/components/NewsSlider.tsx
@@ -69,7 +69,7 @@ const NewsSlider: React.FC<Props> = ({ news, headline, ...props }) => {
       </div>
       <div className="overflow-hidden -mt-4" ref={emblaRef}>
         <div className="grid cursor-grab pt-4 active:cursor-grabbing grid-flow-col auto-cols-[80%] xl:auto-cols-[25%] md:auto-cols-[33%] sm:auto-cols-[40%] container-width">
-          {news.map((item, index) => (
+          {news && news.map((item, index) => (
             <NewsItem
               key={index}
               image={item.image}

diff --git a/src/components/NewsSliderDataWrapper.astro b/src/components/NewsSliderDataWrapper.astro
@@ -7,19 +7,40 @@ const { headline, id, ...rest } = Astro.props;
 
 const baseUrl = CommonUtils.getBaseUrl(true);
 
-const rawNews = await Astro.glob<INewsItem>("../pages/en/news/*.mdx");
-
-const news = rawNews
-  .map(({ frontmatter: { image, target, instagram, title, order = 999 } }) => {
-    return {
-      image: baseUrl + image,
-      target,
-      instagram,
-      title,
-      order,
-    };
-  })
-  .sort((a, b) => b.order - a.order);
+const token = import.meta.env.PUBLIC_AIRTABLE_TOKEN;
+
+const options = {
+  method: "GET",
+  headers: {
+    Authorization: `Bearer ${token}`,
+  },
+};
+
+const response = await fetch(
+  "https://api.airtable.com/v0/appXVxxSLF51bHZPf/tbl0L4qXFrr4xop8V",
+  options
+);
+
+const data = await response.json();
+
+let news = [];
+
+if (data.records && data.records.length > 0) {
+  news = data.records
+    .filter((record) => record.fields?.["Instagram URL"])
+    .map((record) => {
+      return {
+        title: record.fields.Name,
+        target: record.fields?.["Instagram URL"],
+        instagram: true,
+        // image: record.fields?.["Selected Photos (from Event)"]
+      };
+    });
+  console.log(news);
+} else {
+  console.log("Error");
+}
+
 ---
 
 <NewsSliderComponent {news} {headline} {id} {...rest} client:idle />