From 26b359f2c5f6dbe08f4718be07d040aabd78bbb5 Mon Sep 17 00:00:00 2001
From: Ninad-S <144244166+Ninad-S@users.noreply.github.com>
Date: Tue, 29 Oct 2024 18:12:12 -0500
Subject: [PATCH] Changed events to full screen

---
 src/components/events/EventCard.tsx | 171 ++++------------------------
 1 file changed, 25 insertions(+), 146 deletions(-)

diff --git a/src/components/events/EventCard.tsx b/src/components/events/EventCard.tsx
index 4e73c25..c5a0e4f 100644
--- a/src/components/events/EventCard.tsx
+++ b/src/components/events/EventCard.tsx
@@ -1,159 +1,38 @@
 'use server';
-import { format, isSameDay } from 'date-fns';
-import Image from 'next/image';
-import Link from 'next/link';
-import { MoreIcon } from '@src/icons/Icons';
-import { type RouterOutputs } from '@src/trpc/shared';
-import EventLikeButton from './EventLikeButton';
-import { getServerAuthSession } from '@src/server/auth';
-import dynamic from 'next/dynamic';
-
-const EventTimeAlert = dynamic(() => import('./EventTimeAlert'), {
-  ssr: false,
-});
 
-type EventCardProps = {
-  event: RouterOutputs['event']['findByFilters']['events'][number];
-};
+import EventCard from '@src/components/events/EventCard';
+import { api } from '@src/trpc/server';
+import Link from 'next/link';
 
-const HorizontalCard = async ({
-  event,
-}: {
-  event: RouterOutputs['event']['findByFilters']['events'][number];
-}) => {
-  const session = await getServerAuthSession();
-  return (
-    <div className="container flex h-auto w-full flex-row overflow-hidden rounded-lg bg-white shadow-sm transition-shadow hover:shadow-lg">
-      <div className="relative h-[160px] w-1/3 max-w-[300px]">
-        <div className="h-[160px]">
-          <Image
-            fill
-            src={'/event_default.jpg'}
-            alt="event image"
-            className="object-cover object-left"
-          />
-        </div>
-        <div className="absolute inset-0 p-2 text-white">
-          <EventTimeAlert event={event} />
-        </div>
-      </div>
-      <div className="flex w-full flex-row px-6 py-5">
-        <div className="flex flex-col space-y-2.5">
-          <h3 className="font-bold">{event.name}</h3>
-          <h4 className="whitespace-nowrap text-xs font-bold">
-            <Link
-              href={`/directory/${event.clubId ?? ''}`}
-              className="hover:text-blue-primary"
-              scroll
-            >
-              {event.club.name}
-            </Link>{' '}
-            •<wbr />
-            <span className="text-blue-primary">
-              {format(event.startTime, 'E, MMM d, p')}
-              {isSameDay(event.startTime, event.endTime) ? (
-                <> - {format(event.endTime, 'p')}</>
-              ) : (
-                <> - {format(event.endTime, 'E, MMM d, p')}</>
-              )}
-            </span>
-          </h4>
-          <p className="line-clamp-3 overflow-clip text-ellipsis text-xs font-bold">
-            {event.description}
-          </p>
-        </div>
-        <div className="ml-auto flex flex-row space-x-4">
-          {session && (
-            <EventLikeButton liked={event.liked} eventId={event.id} />
-          )}
+const CommunityEvents = async () => {
+  const events = await api.userMetadata.getEvents();
+  if (events.length === 0) {
+    return (
+      <div className="font-bold text-slate-500">
+        <div>You haven&apos;t added any community events yet 😭</div>
+        <div>
+          You can check out new events{' '}
           <Link
-            className=" h-10 w-10 rounded-full bg-blue-primary p-1.5 shadow-lg transition-colors hover:bg-blue-700 active:bg-blue-800"
-            href={`/event/${event.id}`}
-            passHref
+            href={'/events'}
+            className="text-lg text-blue-primary transition-colors hover:text-blue-700"
           >
-            <MoreIcon fill="fill-white" />
+            here
           </Link>
         </div>
       </div>
-    </div>
-  );
-};
-
-const VerticalCard = async ({
-  event,
-}: {
-  event: RouterOutputs['event']['findByFilters']['events'][number];
-}) => {
-  const session = await getServerAuthSession();
+    );
+  }
   return (
-    <div className="container flex h-96 w-64 flex-col overflow-hidden rounded-lg bg-white shadow-sm transition-shadow hover:shadow-lg">
-      <div className="relative">
-        <div className="h-40 w-96">
-          <Image
-            src={'/event_default.jpg'}
-            alt="event image"
-            fill
-            objectFit="cover"
-          />
-          <div className="absolute inset-0 p-2">
-            <EventTimeAlert event={event} />
-          </div>
+    <div
+      className="group flex w-full flex-col space-y-7.5 pt-10"
+      data-view={'list'}
+    >
+      {events.map((event) => (
+        <div className="w-full" key={event.id}>
+          <EventCard event={event} />
         </div>
-      </div>
-      <div className="flex h-full flex-col p-5">
-        <div className="space-y-2.5">
-          <h3 className="font-bold">{event.name}</h3>
-          <h4 className="text-xs font-bold">
-            <Link
-              href={`/directory/${event.clubId ?? ''}`}
-              className="hover:text-blue-primary"
-              scroll
-            >
-              {event.club.name}
-            </Link>
-            <div>
-              <span className="text-blue-primary">
-                {format(event.startTime, 'E, MMM d, p')}
-                {isSameDay(event.startTime, event.endTime) ? (
-                  <> - {format(event.endTime, 'p')}</>
-                ) : (
-                  <>
-                    {' '}
-                    - <br />
-                    {format(event.endTime, 'E, MMM d, p')}
-                  </>
-                )}
-              </span>
-            </div>
-          </h4>
-        </div>
-        <div className="mt-auto flex flex-row space-x-4">
-          <Link
-            className=" h-10 w-10 rounded-full bg-blue-primary p-1.5 shadow-lg transition-colors hover:bg-blue-700 active:bg-blue-800"
-            href={`/event/${event.id}`}
-            passHref
-          >
-            <MoreIcon fill="fill-white" />
-          </Link>
-          {session && (
-            <EventLikeButton liked={event.liked} eventId={event.id} />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const EventCard = ({ event }: EventCardProps) => {
-  return (
-    <div>
-      <div className="hidden lg:group-data-[view=list]:contents">
-        <HorizontalCard event={event} />
-      </div>
-      <div className="contents lg:group-data-[view=list]:hidden">
-        <VerticalCard event={event} />
-      </div>
+      ))}
     </div>
   );
 };
-export default EventCard;
+export default CommunityEvents;