Merge pull request #445 from icssc/events-filter

filter events by restaurant, add events to global state

apps/expo/src/app/events/event/[id].tsx → apps/expo/src/app/events/event/[title].tsx

@@ -1,5 +1,5 @@
-import React, { useContext } from "react";
-import { Stack, useGlobalSearchParams } from "expo-router";
+import React from "react";
+import { Redirect, Stack, useGlobalSearchParams } from "expo-router";
 import {
   CalendarClock,
   ChevronDown,
@@ -22,21 +22,32 @@ import {
 
 import type { Event } from "@zotmeal/db";
 
-import { useMenuStore } from "~/utils";
-
-import { useEvents } from "../eventsContext";
+import useZotmealStore from "~/utils/useZotmealStore";
 
 export default function Event() {
-  const { id } = useGlobalSearchParams();
-  const { selectedRestaurant } = useMenuStore();
-  const { events } = useEvents()
-  const eventData = events[Number(id)]!
+  const { title } = useGlobalSearchParams();
+
+  if (!title || typeof title !== "string")
+    throw new Error("title is not a string");
+
+  const { selectedRestaurant, anteateryEvents, brandywineEvents } =
+    useZotmealStore();
+
+  const events =
+    selectedRestaurant === "anteatery" ? anteateryEvents : brandywineEvents;
+
+  const event = events.find((event) => event.title === title);
+
+  // TODO: Log error if event is not found
+  if (!event) return <Redirect href="/events/" />;
 
   return (
     <>
       <Stack.Screen
         options={{
-          headerTitle: eventData.title
+          headerTitle: event.title,
+          headerBackTitle: "Events",
+          headerTitleStyle: { color: "white" },
         }}
       />
       <ScrollView
@@ -61,15 +72,15 @@ export default function Event() {
           <Image
             resizeMode="contain"
             source={{
-              uri: eventData.image ?? require("../example-event-image.png"),
+              uri: event.image ?? require("../example-event-image.png"),
             }}
             minWidth={100}
             maxWidth="100%"
             height={200}
           />
         </YStack>
         <YStack padding={20} gap="$2" marginVertical="$4">
-          <H3>{eventData.title}</H3>
+          <H3>{event.title}</H3>
           <Separator marginBottom="$2" />
           <XStack alignItems="center" padding={0} gap="$2">
             <MapPin />
@@ -81,13 +92,13 @@ export default function Event() {
           <XStack alignItems="center" padding={0} gap="$2">
             <CalendarClock />
             <Text>
-              {format(eventData.start.toString(), "LLL do p")} -{" "}
-              {format(eventData.end.toString(), "LLL do p")}
+              {format(event.start.toString(), "LLL do p")} -{" "}
+              {format(event.end.toString(), "LLL do p")}
             </Text>
           </XStack>
           <XStack alignItems="center" padding={0} gap="$2">
             <Info />
-            <Text>{eventData.shortDescription}</Text>
+            <Text>{event.shortDescription}</Text>
           </XStack>
         </YStack>
         <Accordion overflow="hidden" width="95%" type="multiple">
@@ -115,7 +126,7 @@ export default function Event() {
               borderTopLeftRadius={0}
               borderTopRightRadius={0}
             >
-              <Paragraph>{eventData.longDescription}</Paragraph>
+              <Paragraph>{event.longDescription}</Paragraph>
             </Accordion.Content>
           </Accordion.Item>
         </Accordion>

apps/expo/src/app/events/index.tsx

@@ -1,18 +1,17 @@
-import { useEffect} from "react";
+import { useEffect } from "react";
 import { Link } from "expo-router";
 import { format } from "date-fns";
-import { H3, Image, ScrollView, Text, YStack } from "tamagui";
+import { H3, Image, Tabs, Text, YStack } from "tamagui";
 
 import type { Event } from "@zotmeal/db";
-import { useEvents } from "./eventsContext";
+import { getRestaurantNameById } from "@zotmeal/utils";
 
 import { RestaurantTabs } from "~/components";
-
 import { api } from "~/utils/api";
-
+import useZotmealStore from "~/utils/useZotmealStore";
 
 // Create a context for events, default value is a test event
-const testData: Event = {
+const _testData = {
   start: new Date("2022-01-01 12:00:00"),
   end: new Date(),
   title: "Test Event",
@@ -25,17 +24,76 @@ const testData: Event = {
   restaurantId: "3314",
 } satisfies Event;
 
+const EventCard = ({ event }: Readonly<{ event: Event }>) => (
+  <Link
+    href={{
+      pathname: "/events/event/[title]",
+      params: { title: event.title },
+    }}
+    asChild
+  >
+    <YStack
+      borderWidth={1.5}
+      borderRadius="$8"
+      borderColor="$borderColor"
+      width="90%"
+      padding="$4"
+      marginVertical="$4"
+      justifyContent="center"
+      alignItems="center"
+      alignContent="center"
+      alignSelf="center"
+      elevation={10}
+    >
+      <YStack
+        justifyContent="center"
+        width="100%"
+        backgroundColor="$borderColor"
+        borderRadius="$6"
+      >
+        <Image
+          resizeMode="contain"
+          source={{
+            uri: event.image ?? "https://via.placeholder.com/150",
+          }}
+          minWidth={100}
+          maxWidth="100%"
+          height={175}
+        />
+      </YStack>
+      <H3>{event.title}</H3>
+      <Text color="gray">
+        {format(event.start.toString(), "LLL do p")} -{" "}
+        {format(event.end.toString(), "LLL do p")}
+      </Text>
+    </YStack>
+  </Link>
+);
+
 // Events Component
 export default function Events() {
-  const { events, setEvents } = useEvents();
+  const {
+    anteateryEvents,
+    brandywineEvents,
+    setAnteateryEvents,
+    setBrandywineEvents,
+  } = useZotmealStore();
 
   const eventsQuery = api.event.get.useQuery({});
 
   useEffect(() => {
-    if (eventsQuery?.data) {
-      setEvents(eventsQuery.data);
-    }
-  }, [eventsQuery?.data]);
+    if (!eventsQuery?.data) return;
+
+    const anteateryEvents = eventsQuery.data.filter(
+      (event: Event) => event.restaurantId === "3056",
+    );
+    const brandywineEvents = eventsQuery.data.filter(
+      (event: Event) => event.restaurantId === "3314",
+    );
+
+    setAnteateryEvents(anteateryEvents);
+    setBrandywineEvents(brandywineEvents);
+  }, [eventsQuery.data, setAnteateryEvents, setBrandywineEvents]);
 
   if (eventsQuery?.isLoading) {
     return <Text>Loading...</Text>;
@@ -44,61 +102,25 @@ export default function Events() {
   if (eventsQuery?.isError) {
     return <Text>Error: {eventsQuery.error.message}</Text>;
   }
+
+  if (!anteateryEvents || !brandywineEvents) {
+    return <Text>No events found</Text>;
+  }
+
   return (
     <RestaurantTabs>
-      <ScrollView
-        contentInset={{
-          top: 50,
-          bottom: 200,
-        }}
-      >
-        {events.map((event: Event, index: number) => (
-          <Link
-            key={index}
-            href={{
-              pathname: "/events/event/[id]",
-              params: { id: index },
-            }}
-            asChild
-          >
-            <YStack
-              borderWidth={1.5}
-              borderRadius="$8"
-              borderColor="$borderColor"
-              width="90%"
-              padding="$4"
-              marginVertical="$4"
-              justifyContent="center"
-              alignItems="center"
-              alignContent="center"
-              alignSelf="center"
-              elevation={10}
-            >
-              <YStack
-                justifyContent="center"
-                width="100%"
-                backgroundColor="$borderColor"
-                borderRadius="$6"
-              >
-                <Image
-                  resizeMode="contain"
-                  source={{
-                    uri: event.image ?? "https://via.placeholder.com/150",
-                  }}
-                  minWidth={100}
-                  maxWidth="100%"
-                  height={175}
-                />
-              </YStack>
-              <H3>{event.title}</H3>
-              <Text color="gray">
-                {format(event.start.toString(), "LLL do p")} -{" "}
-                {format(event.end.toString(), "LLL do p")}
-              </Text>
-            </YStack>
-          </Link>
-        ))}
-      </ScrollView>
+      {[brandywineEvents, anteateryEvents].map((events, index) => (
+        <Tabs.Content
+          key={index}
+          value={getRestaurantNameById(index === 0 ? "3314" : "3056")}
+        >
+          <YStack>
+            {events.map((event, index) => (
+              <EventCard key={index} event={event} />
+            ))}
+          </YStack>
+        </Tabs.Content>
+      ))}
     </RestaurantTabs>
   );
 }