fix: event source

assumes one event one article (for initial launch)
jippy-the-frog · Sep 25, 2024 · 34790b7 · 34790b7
1 parent 4ff1828
commit 34790b7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 49 deletions.
diff --git a/frontend/app/(authenticated)/events/[id]/event-source.tsx b/frontend/app/(authenticated)/events/[id]/event-source.tsx
@@ -1,6 +1,6 @@
 import { NewspaperIcon } from "lucide-react";
 
-import { ArticleSource } from "@/client";
+import { ArticleDTO } from "@/client";
 import Link from "@/components/navigation/link";
 import { Card } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
@@ -9,29 +9,13 @@ import {
   articleSourceToIconMap,
 } from "@/types/events";
 
-const EventSource = () => {
-  const originalArticles: {
-    name: string;
-    source: ArticleSource;
-    date: string;
-    articleUrl: string;
-  }[] = [
-    {
-      name: "Norris pips Verstappen to dramatic Singapore Grand Prix pole after Sainz crash",
-      source: "CNA",
-      date: "21 Sep 2024",
-      articleUrl:
-        "https://www.channelnewsasia.com/sport/singapore-grand-prix-gp-formula-1-qualifying-lando-norris-pole-4623041",
-    },
-    {
-      name: "Lando Norris wins F1 Singapore Grand Prix despite hitting wall twice – as it happened",
-      source: "GUARDIAN",
-      date: "22 Sep 2024",
-      articleUrl:
-        "https://www.theguardian.com/sport/live/2024/sep/22/singapore-grand-prix-formula-one-live?filterKeyEvents=false&page=with%3Ablock-66f022af8f0801142f2830e7",
-    },
-  ];
+interface EventSourceProps {
+  originalSource: ArticleDTO;
+}
 
+// TODO: Ugly workaround, currently assumes one event only one source
+const EventSource = ({ originalSource }: EventSourceProps) => {
+  const SourceIcon = articleSourceToIconMap[originalSource.source];
   return (
     <div className="flex flex-col px-6 gap-y-8">
       <div className="flex flex-col gap-y-1">
@@ -40,32 +24,27 @@ const EventSource = () => {
           Event source
         </span>
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-4">
-          {originalArticles.map((article) => {
-            const articleSource = article.source;
-            const sourceName = articleSourceToDisplayNameMap[articleSource];
-            const SourceIcon = articleSourceToIconMap[articleSource];
-            return (
-              <Card className="col-span-1" key={article.name}>
-                <div className="flex flex-col items-center h-fit p-6 gap-y-4">
-                  <SourceIcon />
-                  <div className="flex flex-col gap-y-4">
-                    <Link
-                      className="font-medium no-underline hover:underline"
-                      href={article.articleUrl}
-                      isExternal
-                    >
-                      {article.name}
-                    </Link>
-                    <div className="flex items-center text-muted-foreground gap-x-4">
-                      <span>{sourceName}</span>
-                      <Separator className="h-5" orientation="vertical" />
-                      <span>{article.date}</span>
-                    </div>
-                  </div>
+          <Card className="col-span-1" key={originalSource.title}>
+            <div className="flex flex-col items-center h-fit p-6 gap-y-4">
+              <SourceIcon />
+              <div className="flex flex-col gap-y-4">
+                <Link
+                  className="font-medium no-underline hover:underline"
+                  href={originalSource.url}
+                  isExternal
+                >
+                  {originalSource.title}
+                </Link>
+                <div className="flex items-center text-muted-foreground gap-x-4">
+                  <span>
+                    {articleSourceToDisplayNameMap[originalSource.source]}
+                  </span>
+                  <Separator className="h-5" orientation="vertical" />
+                  <span>{originalSource.date}</span>
                 </div>
-              </Card>
-            );
-          })}
+              </div>
+            </div>
+          </Card>
         </div>
       </div>
     </div>

diff --git a/frontend/types/events.ts b/frontend/types/events.ts
@@ -1,6 +1,6 @@
+import { ArticleSource } from "@/client";
 import CnaLogo from "@/public/events/cna-logo";
 import GuardianLogo from "@/public/events/guardian-logo";
-import { ArticleSource } from "@/client";
 
 export interface ArticleSourceLogoProps {
   height?: number;