fix: venue fetch fix, sidebar properly grouped. add sem hint

nthumodifications · Jun 10, 2024 · 55210a2 · 55210a2
1 parent 6d90a55
commit 55210a2
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/src/app/[lang]/(mods-pages)/(venues)/venues/@content/[locationId]/page.tsx b/src/app/[lang]/(mods-pages)/(venues)/venues/@content/[locationId]/page.tsx
@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { ArrowLeft } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import dynamic from 'next/dynamic';
+import { toPrettySemester } from '@/helpers/semester';
 
 const VenueTimetableDynamic = dynamic(() => import('@/app/[lang]/(mods-pages)/(venues)/venues/@content/[locationId]/VenueTimetable'), { ssr: false });
 
@@ -16,7 +17,7 @@ type Props = {
 }
 
 const getCoursesWithVenue = async (venueId: string) => {
-    const { data, error } = await supabase.from('courses').select('*').eq('semester', lastSemester.id).containedBy('venues', [venueId]);
+    const { data, error } = await supabase.from('courses').select('*').eq('semester', lastSemester.id).contains('venues', [venueId]);
     if (error) throw error;
     else return data;
 }
@@ -45,7 +46,7 @@ const MapPage = async ({
                 </Link>
             </div>
             <div className='py-4 flex flex-col items-center space-y-2 px-2 md:px-6'>
-                <h2 className='font-semibold text-xl'>{venueId}</h2>
+                <h2 className='font-semibold text-xl'>{venueId} - {toPrettySemester(lastSemester.id)}學期</h2>
                 <VenueTimetableDynamic courses={courses as MinimalCourse[]}/>
                 {/* <Suspense fallback={<h1>Map failed to load</h1>}>
                     <NTHUMap marker={[24.791513, 120.994123]}/>

diff --git a/src/components/Venue/VenueList.tsx b/src/components/Venue/VenueList.tsx
@@ -19,18 +19,33 @@ const VenueList = ({ venues }: { venues: string[]}) => {
         })()
     }, [venues, textSearch])
 
+    // group each venue by the first few characters before the CJK character
+    // example: BMES醫環101 => BMES : [BMES醫環101]
+    const grouped = (textSearch == '' ? venues: filtered.map(mod => mod.item)).reduce((acc, venue) => {
+        const key = venue.match(/^[a-zA-Z0-9]+/)?.[0] || 'Other';
+        if (!acc[key]) acc[key] = [];
+        acc[key].push(venue);
+        return acc;
+    }, {} as Record<string, string[]>);
+
+
     return <div className="px-8 py-4 space-y-4">
             <Input className='sticky top-0' placeholder="Search..." value={textSearch} onChange={(e) => setTextSearch(e.target.value)}/>
-            <div className="grid grid-cols-2 md:grid-cols-3">
-                {(textSearch == '' ? venues: filtered.map(mod => mod.item)).map((venue, i) => <Link 
-                    key={i} 
-                    href={`/${language}/venues/${venue}`}>
-                    <Button 
-                        className="text-gray-400" 
-                        variant="ghost" 
-                    >{venue}</Button>
-                </Link>)}
-            </div>
+            {Object.keys(grouped).map((ven, i) => {
+                return <div className='flex flex-col gap-2'>
+                    <h2 className='text-lg font-semibold'>{ven}</h2>
+                    <div className="grid grid-cols-2 md:grid-cols-3">
+                        {grouped[ven].map((venue, i) => <Link 
+                            key={i} 
+                            href={`/${language}/venues/${venue}`}>
+                            <Button 
+                                className="text-gray-400" 
+                                variant="ghost" 
+                            >{venue}</Button>
+                        </Link>)}
+                    </div>
+                </div>
+            })}
         </div>
 }