Skip to content

Commit 3be4bbb

Browse files
tonyqiu123tonyqiu123
committed
tighter mobile events page
1 parent 9b7d819 commit 3be4bbb

File tree

3 files changed

+93
-89
lines changed

3 files changed

+93
-89
lines changed

‎backend/tests/test_openai_service.py‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,8 @@
88
from services.openai_service import extract_events_from_caption
99

1010

11-
image_url = "https://cdn.discordapp.com/attachments/715319623637270638/1434992256691081277/6ebcb7f6-e9a3-4f92-81ee-694c55b039ce.png?ex=690a582e&is=690906ae&hm=dae3dda56c30ee2da72fb70133a32a6cd8ff8423ca27712925db43322399405b"
12-
post_caption="""It’s time to spread some ✨Jewish Joy✨ across campus!
13-
Join us all week long for food, fun, and community — here’s what’s coming up:
14-
🍔 Monday: BBQ with @standwithuscanada
15-
📱 Tuesday: Instagram Challenges (join the fun on our stories!)
16-
🥯 Wednesday: Bagel Brunch sponsored by FJMC
17-
💛 Thursday: Boothing at Laurier
18-
🕯️ Friday: Shabbat Dinner with @aepiwaterloo + @tailormadebirthright
19-
Let’s make it a week full of connection, pride, and joy 💫
20-
Check out our full lineup on our story — and don’t forget to bring your friends!"""
11+
image_url = "https://media.discordapp.net/attachments/715319623637270638/1434995045269897277/Screenshot_2025-11-03_at_2.57.51_PM.png?ex=690a5ac7&is=69090947&hm=28813841083723f2071222b18790c8ac6bb2777382b66c11c9db2478abb46cc6&=&format=webp&quality=lossless&width=1064&height=1344"
12+
post_caption="""Correction"""
2113

2214
# Test AI client
2315
result = extract_events_from_caption(post_caption, image_url)

‎frontend/src/features/events/pages/EventsPage.tsx‎

Lines changed: 90 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,11 @@ import { LAST_UPDATED, RECOMMENDED_FILTERS } from "@/data/staticData";
2424
function EventsPage() {
2525
const [searchParams, setSearchParams] = useSearchParams();
2626
const view = (searchParams.get("view") as "grid" | "calendar") || "grid";
27-
const randomFilter = useMemo(() =>
28-
RECOMMENDED_FILTERS[Math.floor(Math.random() * RECOMMENDED_FILTERS.length)][2],
27+
const randomFilter = useMemo(
28+
() =>
29+
RECOMMENDED_FILTERS[
30+
Math.floor(Math.random() * RECOMMENDED_FILTERS.length)
31+
][2],
2932
[]
3033
);
3134
const placeholder = searchParams.get("placeholder") || randomFilter;
@@ -42,7 +45,7 @@ function EventsPage() {
4245
const {
4346
events,
4447
isLoading,
45-
error,
48+
error,
4649
dtstart_utc,
4750
addedAt,
4851
searchTerm,
@@ -60,7 +63,9 @@ function EventsPage() {
6063
} = useEventSelection(view);
6164

6265
const todayString = getTodayString();
63-
const isShowingPastEvents = Boolean(dtstart_utc && dtstart_utc !== todayString);
66+
const isShowingPastEvents = Boolean(
67+
dtstart_utc && dtstart_utc !== todayString
68+
);
6469
const isShowingNewEvents = Boolean(addedAt);
6570

6671
const getEventTypeText = () => {
@@ -71,7 +76,7 @@ function EventsPage() {
7176
};
7277

7378
return (
74-
<div className="flex flex-col gap-4">
79+
<>
7580
<SEOHead
7681
title="Events - Discover University of Waterloo Club Events"
7782
description="Browse and discover exciting club events at the University of Waterloo. Find upcoming events, filter by date, and stay connected with campus activities."
@@ -87,90 +92,97 @@ function EventsPage() {
8792
"campus activities",
8893
]}
8994
/>
90-
<div className="sm:text-left">
91-
<h1 className="sm:text-3xl text-2xl font-bold mb-2">
92-
<NumberFlow
93-
value={events.length}
94-
suffix={` ${getEventTypeText()} events`}
95-
/>
96-
</h1>
97-
<p className="text-gray-600 dark:text-gray-400">Updated {formatRelativeDateTime(LAST_UPDATED)}</p>
98-
</div>
99-
10095
<div className="flex flex-col gap-4">
101-
<div className="flex items-center gap-4">
102-
<SearchInput placeholder={placeholder} className="flex-1" />
103-
<Tabs
104-
value={view}
105-
onValueChange={(value) =>
106-
handleViewChange(value as "grid" | "calendar")
107-
}
108-
>
109-
<TabsList>
110-
<TabsTrigger value="grid" className="flex items-center gap-2">
111-
<LayoutGrid className="h-4 w-4" />
112-
Grid
113-
</TabsTrigger>
114-
<TabsTrigger value="calendar" className="flex items-center gap-2">
115-
<Calendar className="h-4 w-4" />
116-
Calendar
117-
</TabsTrigger>
118-
</TabsList>
119-
</Tabs>
96+
<div className="sm:text-left">
97+
<h1 className="sm:text-3xl text-2xl font-bold mb-2 -mt-3 sm:mt-0">
98+
<NumberFlow
99+
value={events.length}
100+
suffix={` ${getEventTypeText()} events`}
101+
/>
102+
</h1>
103+
<p className="text-gray-600 dark:text-gray-400">
104+
Updated {formatRelativeDateTime(LAST_UPDATED)}
105+
</p>
120106
</div>
121107

122-
<QuickFilters />
123-
124-
<div className="flex items-center justify-between">
125-
<div className="flex gap-2">
126-
<FilterButton
127-
isActive={isShowingNewEvents}
128-
onToggle={handleToggleNewEvents}
129-
icon={<Sparkles className="h-4 w-4" />}
108+
<div className="flex flex-col sm:gap-4 gap-3.5">
109+
<div className="flex items-center sm:gap-4 gap-2">
110+
<SearchInput placeholder={placeholder} className="flex-1" />
111+
<Tabs
112+
value={view}
113+
onValueChange={(value) =>
114+
handleViewChange(value as "grid" | "calendar")
115+
}
130116
>
131-
Newly Added
132-
</FilterButton>
133-
{!isShowingNewEvents && (
134-
<FilterButton
135-
isActive={isShowingPastEvents}
136-
onToggle={handleToggleStartDate}
137-
icon={<History className="h-4 w-4" />}
138-
>
139-
Past
140-
</FilterButton>
141-
)}
142-
{view === "grid" && (
117+
<TabsList>
118+
<TabsTrigger value="grid" className="flex items-center gap-2">
119+
<LayoutGrid className="h-4 w-4" />
120+
Grid
121+
</TabsTrigger>
122+
<TabsTrigger
123+
value="calendar"
124+
className="flex items-center gap-2"
125+
>
126+
<Calendar className="h-4 w-4" />
127+
Calendar
128+
</TabsTrigger>
129+
</TabsList>
130+
</Tabs>
131+
</div>
132+
133+
<QuickFilters />
134+
135+
<div className="flex items-center justify-between">
136+
<div className="flex gap-2">
143137
<FilterButton
144-
isActive={isSelectMode}
145-
onToggle={toggleSelectMode}
146-
icon={<Calendar className="h-4 w-4" />}
138+
isActive={isShowingNewEvents}
139+
onToggle={handleToggleNewEvents}
140+
icon={<Sparkles className="h-4 w-4" />}
147141
>
148-
Export
142+
Newly Added
149143
</FilterButton>
150-
)}
144+
{!isShowingNewEvents && (
145+
<FilterButton
146+
isActive={isShowingPastEvents}
147+
onToggle={handleToggleStartDate}
148+
icon={<History className="h-4 w-4" />}
149+
>
150+
Past
151+
</FilterButton>
152+
)}
153+
{view === "grid" && (
154+
<FilterButton
155+
isActive={isSelectMode}
156+
onToggle={toggleSelectMode}
157+
icon={<Calendar className="h-4 w-4" />}
158+
>
159+
Export
160+
</FilterButton>
161+
)}
162+
</div>
151163
</div>
152164
</div>
153-
</div>
154165

155-
<EventsContent
156-
view={view}
157-
data={events}
158-
isSelectMode={isSelectMode}
159-
selectedEvents={selectedEvents}
160-
onToggleEvent={toggleEventSelection}
161-
isLoading={isLoading}
162-
error={error}
163-
/>
166+
<EventsContent
167+
view={view}
168+
data={events}
169+
isSelectMode={isSelectMode}
170+
selectedEvents={selectedEvents}
171+
onToggleEvent={toggleEventSelection}
172+
isLoading={isLoading}
173+
error={error}
174+
/>
164175

165-
<FloatingEventExportBar
166-
view={view}
167-
isSelectMode={isSelectMode}
168-
selectedEvents={selectedEvents}
169-
onCancel={toggleSelectMode}
170-
onExportICalendar={exportToCalendar}
171-
onExportGoogleCalendar={exportToGoogleCalendar}
172-
/>
173-
</div>
176+
<FloatingEventExportBar
177+
view={view}
178+
isSelectMode={isSelectMode}
179+
selectedEvents={selectedEvents}
180+
onCancel={toggleSelectMode}
181+
onExportICalendar={exportToCalendar}
182+
onExportGoogleCalendar={exportToGoogleCalendar}
183+
/>
184+
</div>
185+
</>
174186
);
175187
}
176188

‎frontend/src/features/search/components/SearchInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const SearchInput = memo(
3535

3636
return (
3737
<div
38-
className={`relative ${className} border border-gray-300 h-9 shadow-s dark:border-gray-700 overflow-hidden rounded-xl`}
38+
className={`relative ${className} border border-gray-300 h-9 dark:border-gray-700 overflow-hidden rounded-xl`}
3939
>
4040
<Input
4141
ref={inputRef}

0 commit comments

Comments
 (0)