Skip to content

Commit

Permalink
Connected events to main events page
Browse files Browse the repository at this point in the history
  • Loading branch information
@bjsilva1
bjsilva1 committed May 19, 2024
1 parent 823a6c8 commit bf7b236
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 80 deletions.
30 changes: 11 additions & 19 deletions apps/expo/src/app/events/event/[id].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useContext } from "react";
import { Stack, useGlobalSearchParams } from "expo-router";
import {
CalendarClock,
Expand All @@ -24,26 +24,18 @@ import type { Event } from "@zotmeal/db";

import { useMenuStore } from "~/utils";

import { EventContext } from "..";

export default function Event() {
const { id } = useGlobalSearchParams();
const { selectedRestaurant } = useMenuStore();

const testData = {
title: "Test Event",
start: new Date("2022-01-01 12:00:00"),
end: new Date(),
image:
"https://uci.campusdish.com/-/media/Feature/Articles/DefaultEventImage.ashx?mh=350&mw=350&hash=B788068F09F0E38D1D19756934E293E4C1379BBF",
shortDescription: "This is a test event with a short description!",
longDescription: `This is a long description of the event. It's so long that it wraps around multiple lines. It's a very long description, but it's also very interesting. You should definitely read it.`,
restaurantId: "3314",
} satisfies Event;
const eventData = useContext(EventContext)

return (
<>
<Stack.Screen
options={{
headerTitle: testData.title,
headerTitle: eventData.title,
headerBackTitle: "Events",
headerTitleStyle: { color: "white" },
}}
Expand All @@ -70,15 +62,15 @@ export default function Event() {
<Image
resizeMode="contain"
source={{
uri: testData.image ?? require("../example-event-image.png"),
uri: eventData.image ?? require("../example-event-image.png"),
}}
minWidth={100}
maxWidth="100%"
height={200}
/>
</YStack>
<YStack padding={0} gap="$2" marginVertical="$4">
<H3>{testData.title}</H3>
<H3>{eventData.title}</H3>
<Separator marginBottom="$2" />
<XStack alignItems="center" padding={0} gap="$2">
<MapPin />
Expand All @@ -90,13 +82,13 @@ export default function Event() {
<XStack alignItems="center" padding={0} gap="$2">
<CalendarClock />
<Text>
{format(testData.start.toString(), "LLL do p")} -{" "}
{format(testData.end.toString(), "LLL do p")}
{format(eventData.start.toString(), "LLL do p")} -{" "}
{format(eventData.end.toString(), "LLL do p")}
</Text>
</XStack>
<XStack alignItems="center" padding={0} gap="$2">
<Info />
<Text>{testData.shortDescription}</Text>
<Text>{eventData.shortDescription}</Text>
</XStack>
</YStack>
<Accordion overflow="hidden" width="95%" type="multiple">
Expand Down Expand Up @@ -124,7 +116,7 @@ export default function Event() {
borderTopLeftRadius={0}
borderTopRightRadius={0}
>
<Paragraph>{testData.longDescription}</Paragraph>
<Paragraph>{eventData.longDescription}</Paragraph>
</Accordion.Content>
</Accordion.Item>
</Accordion>
Expand Down
138 changes: 77 additions & 61 deletions apps/expo/src/app/events/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,50 @@
import { Link } from "expo-router";
import { createContext, useEffect, useState } from "react";
import { Link, Stack } from "expo-router";
import { format } from "date-fns";
import { H3, Image, ScrollView, Text, YStack } from "tamagui";

import type { Event } from "@zotmeal/db";

import { RestaurantTabs } from "~/components";

// import { api } from "~/utils/api";
import { api } from "~/utils/api";


// Create a context for events, default value is a test event
const testData: Event = {
start: new Date("2022-01-01 12:00:00"),
end: new Date(),
title: "Test Event",
shortDescription: "This is a test event",
longDescription: `This is a long description of the event. It's so long that it wraps
around multiple lines. It's a very long description, but it's also
very interesting. You should definitely read it.`,
image:
"https://uci.campusdish.com/-/media/Feature/Articles/DefaultEventImage.ashx?mh=350&mw=350&hash=B788068F09F0E38D1D19756934E293E4C1379BBF",
restaurantId: "3314",
} satisfies Event;

export const EventContext = createContext(testData)

// Events Component
export default function Events() {
// const { data, error } = api.event.get.useQuery({});
const [events, setEvents] = useState<Event[]>([]);

const eventsQuery = api.event.get.useQuery({});

const testData: Event[] = Array(5).fill({
start: new Date("2022-01-01 12:00:00"),
end: new Date(),
title: "Test Event",
shortDescription: "This is a test event",
longDescription: `This is a long description of the event. It's so long that it wraps
around multiple lines. It's a very long description, but it's also
very interesting. You should definitely read it.`,
image:
"https://uci.campusdish.com/-/media/Feature/Articles/DefaultEventImage.ashx?mh=350&mw=350&hash=B788068F09F0E38D1D19756934E293E4C1379BBF",
restaurantId: "3314",
} satisfies Event) as Event[];
useEffect(() => {
if (eventsQuery?.data) {
setEvents(eventsQuery.data);
}
}, [eventsQuery?.data]);

// if (!data) {
// return <Text>Loading...</Text>;
// }
if (eventsQuery?.isLoading) {
return <Text>Loading...</Text>;
}

// if (error) {
// return <Text>Error: {error.message}</Text>;
// }
if (eventsQuery?.isError) {
return <Text>Error: {eventsQuery.error.message}</Text>;
}
return (
<RestaurantTabs>
<ScrollView
Expand All @@ -39,51 +53,53 @@ export default function Events() {
bottom: 200,
}}
>
{testData.map((event: Event, index: number) => (
<Link
key={index}
href={{
pathname: "/events/event/[id]",
params: { id: 2 },
}}
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}
{events.map((event: Event, index: number) => (
<EventContext.Provider value={event}>
<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"
width="100%"
backgroundColor="$borderColor"
borderRadius="$6"
alignItems="center"
alignContent="center"
alignSelf="center"
elevation={10}
>
<Image
resizeMode="contain"
source={{
uri: event.image ?? "https://via.placeholder.com/150",
}}
minWidth={100}
maxWidth="100%"
height={175}
/>
<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>
<H3>{event.title}</H3>
<Text color="gray">
{format(event.start.toString(), "LLL do p")} -{" "}
{format(event.end.toString(), "LLL do p")}
</Text>
</YStack>
</Link>
</Link>
</EventContext.Provider>
))}
</ScrollView>
</RestaurantTabs>
Expand Down
5 changes: 5 additions & 0 deletions packages/api/src/services/getWeekInfo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { z } from "zod";
import type { Drizzle } from "@zotmeal/db";
import { RestaurantSchema } from "@zotmeal/db";
import { DateRegex } from "@zotmeal/validators";
import { scrapeCampusDishEvents } from "../events";

import type { UpdateDailyParams } from "./updateDaily";
import { logger } from "../../logger";
Expand All @@ -24,6 +25,10 @@ export async function getWeekInfo(
const { date: dateString, restaurant } = params;
const startDate = new Date(dateString);

// Scrape and insert new events into db
const eventResults = await scrapeCampusDishEvents(db)

// Update menus for each day
const results = await Promise.allSettled(
Array.from({ length: NUM_DAYS_UPDATE }).map((_, i) => {
const insertDate = new Date();
Expand Down

0 comments on commit bf7b236

Please sign in to comment.