fix: minor touchups

frontend/app/(authenticated)/events/[id]/event-details.tsx

@@ -1,4 +1,3 @@
-import { format } from "date-fns";
 import { ClockIcon, LayoutDashboardIcon, NewspaperIcon } from "lucide-react";
 
 import { EventDTO } from "@/client";
@@ -8,6 +7,7 @@ import {
   categoriesToIconsMap,
   getCategoryFor,
 } from "@/types/categories";
+import { parseDate } from "@/utils/date";
 
 interface Props {
   event: EventDTO;
@@ -47,7 +47,7 @@ const EventDetails = ({ event }: Props) => {
           Event date
         </span>
         <span className="col-span-1  md:col-span-8 xl:col-span-9 text-black font-normal">
-          {format(event.date, "d MMM yyyy")}
+          {parseDate(event.date)}
         </span>
       </div>
 

frontend/app/(authenticated)/events/[id]/event-source.tsx

@@ -8,6 +8,7 @@ import {
   articleSourceToDisplayNameMap,
   articleSourceToIconMap,
 } from "@/types/events";
+import { parseDate } from "@/utils/date";
 
 interface EventSourceProps {
   originalSource: ArticleDTO;
@@ -40,7 +41,7 @@ const EventSource = ({ originalSource }: EventSourceProps) => {
                     {articleSourceToDisplayNameMap[originalSource.source]}
                   </span>
                   <Separator className="h-5" orientation="vertical" />
-                  <span>{originalSource.date}</span>
+                  <span>{parseDate(originalSource.date)}</span>
                 </div>
               </div>
             </div>

frontend/components/news/news-article.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 import { ArrowUpRightIcon } from "lucide-react";
 
 import { CategoryDTO, MiniEventDTO } from "@/client";
@@ -11,10 +12,12 @@ import {
   Category,
   getCategoryFor,
 } from "@/types/categories";
+import { parseDate } from "@/utils/date";
 
 const NewsArticle = (props: { newsEvent: MiniEventDTO }) => {
   const newsEvent = props.newsEvent;
   const newsArticle = newsEvent.original_article;
+  const router = useRouter();
   const [categories, setCategories] = useState<Category[]>([]);
   const IMG_HEIGHT = 154;
 
@@ -31,20 +34,15 @@ const NewsArticle = (props: { newsEvent: MiniEventDTO }) => {
     }
   }, [newsEvent]);
 
-  const parseDate = (dateString: string) => {
-    const PLACEHOLDER_DATE = "-";
-
-    try {
-      const date: Date = new Date(dateString);
-      return date.toDateString();
-    } catch (error) {
-      console.log(error);
-      return PLACEHOLDER_DATE;
-    }
+  const onClick = () => {
+    router.push(`/events/${newsEvent.id}`);
   };
 
   return (
-    <div className="flex flex-col-reverse py-10 lg:flex-row w-auto lg:py-6 xl:py-4 gap-x-16 border-y-[1px] lg:border-y-[0px] hover:bg-muted/70 lg:rounded-md px-4 md:px-8">
+    <div
+      className="flex flex-col-reverse py-10 lg:flex-row w-auto lg:py-6 xl:py-4 gap-x-16 border-y-[1px] lg:border-y-[0px] hover:bg-muted/70 lg:rounded-md px-4 md:px-8 cursor-pointer"
+      onClick={onClick}
+    >
       <div className="flex flex-col w-full lg:w-7/12 2xl:w-9/12 3xl:w-10/12">
         <div className="flex w-full justify-between text-sm text-offblack">
           <span>

frontend/utils/date.ts

@@ -0,0 +1,10 @@
+import { format } from "date-fns";
+
+export const parseDate = (date: string): string => {
+  const PLACEHOLDER_DATE = "-";
+  try {
+    return format(date, "d MMM yyyy");
+  } catch {
+    return PLACEHOLDER_DATE;
+  }
+};