grouping by date

JSConfCL · Jul 9, 2024 · 14d39d5 · 14d39d5
1 parent 361d285
commit 14d39d5
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 33 deletions.
diff --git a/app/components/MyEvents/MyTicketsList.tsx b/app/components/MyEvents/MyTicketsList.tsx
@@ -1,7 +1,12 @@
 import { formatDistanceToNow, subDays, format } from "date-fns";
 import { ArrowRight } from "lucide-react";
+import { useMemo } from "react";
 
-import { useMyEventsSuspenseQuery } from "~/components/MyEvents/graphql/myEvents.generated";
+import {
+  MyEventsQuery,
+  useMyEventsSuspenseQuery,
+} from "~/components/MyEvents/graphql/myEvents.generated";
+import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 import { Card, CardTitle } from "~/components/ui/card";
 import { urls } from "~/utils/urls";
@@ -33,44 +38,108 @@ export const MyTicketsList = ({
     },
   });
 
+  const { groupedByDate, orderedDates } = useMemo(() => {
+    const groupedByDate = data.searchEvents.data.reduce(
+      (acc, event) => {
+        const date = event.startDateTime as string;
+        // const date = format(parsedDate, "cccc - d 'de' MMMM, yyyy");
+
+        if (!acc[date]) {
+          acc[date] = [];
+        }
+
+        acc[date].push(event);
+
+        return acc;
+      },
+      {} as Record<string, MyEventsQuery["searchEvents"]["data"]>,
+    );
+
+    const orderedDates = Object.keys(groupedByDate).sort((a, b) => {
+      const dateA = new Date(a);
+      const dateB = new Date(b);
+
+      if (dateA > dateB) {
+        return -1;
+      }
+
+      if (dateA < dateB) {
+        return 1;
+      }
+
+      return 0;
+    });
+
+    return {
+      groupedByDate,
+      orderedDates,
+    };
+  }, [data.searchEvents.data]);
+
+  // We go over the groupedByDateArray object in order
+  // to render the events grouped by date
+
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-12">
       {!data.searchEvents.data.length && (
         <div className="text-center text-gray-400">No hay eventos</div>
       )}
-      {data.searchEvents.data.map((event) => {
-        const parsedDate = new Date(event.startDateTime as string);
-        const isOverAWeekFromNow = parsedDate > subDays(new Date(), 7);
-        const relativeDate = formatDistanceToNow(parsedDate, {
-          addSuffix: true,
-        });
-        const formattedDate = format(parsedDate, "cccc - d 'de' MMMM, yyyy");
-        const date = isOverAWeekFromNow ? formattedDate : relativeDate;
-
-        const formattedTime = format(parsedDate, "hh:mm aaa");
-
+      {orderedDates.map((event) => {
         return (
-          <Card
-            key={event.id}
-            className="flex w-full max-w-2xl flex-col gap-3 bg-gray-900/40 p-5"
-          >
-            <div className="flex flex-col gap-1 text-xs text-gray-400">
-              <span className="capitalize">{date}</span>
-              <span>{formattedTime}</span>
-            </div>
-            <CardTitle className="text-xl ">{event.name}</CardTitle>
+          <div key={event} className="flex flex-col gap-6">
             <div>
-              <Button asChild variant="secondary">
-                <a
-                  href={urls.myEvents.myTickets(event.id)}
-                  className="flex items-center gap-2"
-                >
-                  <span>Ver {event.usersTickets.length} tickets</span>
-                  <ArrowRight size={16} />
-                </a>
-              </Button>
+              <Badge className="text-base" variant="secondary">
+                {format(event, "d 'de' MMMM, yyyy")}
+              </Badge>
             </div>
-          </Card>
+            {groupedByDate[event].map((event) => {
+              const parsedDate = new Date(event.startDateTime as string);
+              const isOverAWeekFromNow = parsedDate > subDays(new Date(), 7);
+              const relativeDate = formatDistanceToNow(parsedDate, {
+                addSuffix: true,
+              });
+              const formattedDate = format(
+                parsedDate,
+                "cccc - d 'de' MMMM, yyyy",
+              );
+              const date = isOverAWeekFromNow ? formattedDate : relativeDate;
+
+              const formattedTime = format(parsedDate, "hh:mm aaa");
+
+              return (
+                <Card
+                  key={event.id}
+                  className="flex w-full max-w-2xl flex-col gap-5 bg-gray-900/40 p-6"
+                >
+                  <div className="flex flex-col gap-1 text-sm text-gray-400">
+                    <span className="capitalize">{date}</span>
+                    <span>{formattedTime}</span>
+                  </div>
+                  <CardTitle className="text-xl">{event.name}</CardTitle>
+                  <div className="flex items-end justify-between">
+                    <div>
+                      <Button asChild variant="secondary">
+                        <a
+                          href={urls.myEvents.myTickets(event.id)}
+                          className="flex items-center gap-2"
+                        >
+                          <span className="capitalize">
+                            {event.usersTickets.length} tickets
+                          </span>
+                          <ArrowRight size={16} />
+                        </a>
+                      </Button>
+                    </div>
+                    <div>
+                      <Badge variant="outline" className="text-sm">
+                        {event.community?.name}
+                      </Badge>
+                    </div>
+                  </div>
+                </Card>
+              );
+            })}
+          </div>
         );
       })}
     </div>

diff --git a/app/components/ui/badge.tsx b/app/components/ui/badge.tsx
@@ -1,5 +1,5 @@
-import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
 import { cn } from "~/utils/utils";