Merge branch 'NCUAppTeam:main' into main

Author: 1989ONCE

src/components/pages/select/belong.tsx

@@ -32,7 +32,12 @@ const SelectionContent: React.FC<SelectionContentProps> = ({options, onSelect})
             key={value}
             onClick={() => onSelect(value)}
             >
-            <Link className="w-full h-full flex justify-center items-center" key={value} to={`/events/create`}>
+            <Link 
+              className="w-full h-full flex justify-center items-center" 
+              key={value} 
+              to="/events/create"
+              search={{ type: value }}
+            >
               { label }
             </Link>
           </button>

src/components/pages/select/scale.tsx

@@ -1,32 +1,21 @@
 interface ScaleContentProps {
-  onNext: (scale: 'small' | 'formal') => void; // 定义 onNext 是一个无参数、无返回值的函数
+  onNext: (scale: 'small' | 'formal') => void;
 }
 
 export default function ScaleContent({onNext}: ScaleContentProps) {
   return (
-    <>
-      <div></div>
-      <div className="flex items-center justify-center">
-        <div className="flex w-full flex-col">
-          <button className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-4 hover:scale-105 transition-transform"
-            onClick={() => onNext('small')}
-            aria-label="Create small event"
-            role="button"
-          >
-            我要揪人!
-          </button>
-          <p className="mx-auto text-xl">快速建立小型活動</p>
-          <div className="divider"></div>
-          <button className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-4 hover:scale-105 transition-transform"
-            onClick={() => onNext('formal')}
-            aria-label="Create formal event"
-            role="button"
-          >
-            我要活動!
-          </button>
-          <p className="mx-auto text-xl">建立正式活動</p>
-        </div>
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="flex w-full flex-col"> 
+        <button 
+          className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-4 hover:scale-105 transition-transform"
+          onClick={() => onNext('small')}
+          aria-label="Create small event"
+          role="button"
+        >
+          我要揪人!
+        </button>
+        <p className="text-xl mx-auto">快速建立小型活動</p> 
       </div>
-    </>
+    </div>
   )
 }

src/components/pages/select/type.tsx

@@ -1,35 +1,65 @@
+import { Link } from '@tanstack/react-router';
+import { useEffect, useState } from 'react';
+import { supabase } from '../../../utils/supabase';
+
+interface EventType {
+  type_id: number;
+  type_name: string;
+  hashtag_relation: number[];
+}
+
 interface TypeContentProps {
-  onNext: () => void; // 定义 onNext 是一个无参数、无返回值的函数
+  onNext: () => void;
 }
 
 export default function TypeContent({onNext}: TypeContentProps) {
+  const [eventTypes, setEventTypes] = useState<EventType[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchEventTypes() {
+      try {
+        setLoading(true);
+        // Fetch only the big types (where hashtag_relation contains 0)
+        const { data, error } = await supabase
+          .from('event_type')
+          .select('*')
+          .contains('hashtag_relation', [0])
+          .order('type_id', { ascending: true });
+
+        if (error) throw error;
+        setEventTypes(data || []);
+      } catch (error) {
+        console.error('Error fetching event types:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchEventTypes();
+  }, []);
+
   return (
     <>
-      <div></div>
       <div className="flex items-center justify-center">
-        <div className="flex w-full flex-col">
-          <button className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-8 hover:scale-105 transition-transform"
-            onClick={onNext}
-          >
-            揪人共乘
-          </button>
-          <button className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-8 hover:scale-105 transition-transform"
-            onClick={onNext}
-          >
-            揪人運動
-          </button>
-          <button className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-8 hover:scale-105 transition-transform"
-            onClick={onNext}
-          >
-            揪人遊戲
-          </button>
-          <button className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-8 hover:scale-105 transition-transform"
-            onClick={onNext}
-          >
-            其他
-          </button>
+        <div className="flex w-full flex-col justify-center min-h-screen">
+          {loading ? (
+            <div className="text-center py-8">載入中...</div>
+          ) : (
+            eventTypes.map((type) => (
+              <Link 
+                key={type.type_id}
+                to="/events/create"
+                search={{ type: type.type_id.toString() }}
+                className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-8 hover:scale-105 transition-transform"
+                onClick={onNext}
+              >
+                {type.type_name}
+              </Link>
+            ))
+          )}
         </div>
       </div>
     </>
-  )
+  );
 }

src/routes/events/$eventId.tsx

@@ -1,4 +1,5 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { ArrowLeft } from "flowbite-react-icons/outline";
 import { useState } from 'react';
 import { Header } from '../../components';
 import { supabase } from '../../utils/supabase';
@@ -47,6 +48,13 @@ function EventDetails() {
     <div className="container mx-auto">
       <div className="relative z-10">
         <Header />
+        <Link
+          to="/events"
+          className="absolute top-4 left-4 w-10 h-10 flex items-center justify-center bg-white bg-opacity-70 rounded-full shadow-md hover:bg-opacity-100 transition-all duration-300"
+          aria-label="Return to events"
+        >
+          <ArrowLeft className="w-5 h-5" />
+        </Link>
       </div>      
       <div className='bg-gray-800'>
 

src/routes/events/create.tsx

@@ -5,12 +5,22 @@ import { UserController } from '../../controllers/user';
 import { AuthGuard } from '../../utils/auth';
 import { supabase } from '../../utils/supabase';
 
+interface EventTag {
+  type_id: number;
+  type_name: string;
+  hashtag_relation: number[];
+}
+
 export const Route = createFileRoute('/events/create')({
   beforeLoad: AuthGuard,
-  component: CreateEventScreen
+  component: CreateEventScreen,
+  validateSearch: (search: Record<string, unknown>) => {
+    return {
+      type: search.type as string
+    };
+  }
 })
 
-
 const styles = {
   container: {
     flex: 1,
@@ -30,17 +40,74 @@ const styles = {
 }
 
 function CreateEventScreen() {
-  const navigate = Route.useNavigate()
-  const [selectedPhotos, setSelectedPhotos] = useState<File>()
-  const [preview, setPreview] = useState<string>()
+  const navigate = Route.useNavigate();
+  const { type } = Route.useSearch();
+  const selectedType = type ? parseInt(type) : null;
+  const [selectedPhotos, setSelectedPhotos] = useState<File>();
+  const [preview, setPreview] = useState<string>();
   const [inputs, setInputs] = useState({
     name: '',
     start_time: '',
     end_time: '',
     location: '',
     fee: 0,
-    description: ''
-  })
+    description: '',
+    type: selectedType,
+  });
+  const [eventTypeInfo, setEventTypeInfo] = useState<{ type_id: number, type_name: string } | null>(null);
+  const [eventTags, setEventTags] = useState<EventTag[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedHashtags, setSelectedHashtags] = useState<number[]>([]);
+  // Fetch event type information
+  useEffect(() => {
+    async function fetchTypeInfo() {
+      if (selectedType) {
+        const { data, error } = await supabase
+          .from('event_type')
+          .select('type_id, type_name')
+          .eq('type_id', selectedType)
+          .single();
+          
+        if (!error && data) {
+          setEventTypeInfo(data);
+        }
+      }
+    }
+    
+    fetchTypeInfo();
+  }, [selectedType]);
+
+  useEffect(() => {
+    async function fetchEventTags() {
+      try {
+        setLoading(true);
+        
+        if (!selectedType) {
+          setEventTags([]);
+          return;
+        }
+        
+        // Find all hashtags that are associated with this event type
+        // These are records where hashtag_relation contains the selected type_id
+        const { data, error } = await supabase
+          .from('event_type')
+          .select('*')
+          .not('hashtag_relation', 'eq', [0])  // Exclude main event types
+          .contains('hashtag_relation', [selectedType])  // Find hashtags related to this event type
+          .order('type_id', { ascending: true });
+
+        if (error) throw error;
+        
+        setEventTags(data || []);
+      } catch (error) {
+        console.error('Error fetching event tags:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchEventTags();
+  }, [selectedType]);
 
   // create a preview as a side effect, whenever selected file is changed
   useEffect(() => {
@@ -64,28 +131,47 @@ function CreateEventScreen() {
     setSelectedPhotos(e.target.files[0])
   }
 
-
   async function addEvent(e: FormEvent) {
     e.preventDefault()
-    const { data, error } = await supabase
-      .from('events')
-      .insert({
+    
+    if (!selectedType) {
+      alert('請先選擇活動類型');
+      navigate({ to: '/events/select' });
+      return;
+    }
+    
+    try {
+      // Insert the event with the basic data and hashtags
+      const eventInsertData = {
         ...inputs,
-        user_id: (await UserController.get()).id
-      })
-      .select('*')
-      .single()
+        user_id: (await UserController.get()).id,
+        type: selectedType,
+        // Store the selected hashtags as an array (even if empty)
+        hashtags: selectedHashtags
+      };
+      
+      // Insert the event
+      const { data: createdEvent, error: eventError } = await supabase
+        .from('events')
+        .insert(eventInsertData)
+        .select('*')
+        .single();
 
-    if (error !== null) {
-      throw error
-    }
+      if (eventError) throw eventError;
+      
+      console.log('Event created with hashtags:', selectedHashtags);
 
-    navigate({
-      to: '/events/$eventId',
-      params: {
-        'eventId': data.id.toString()
-      }
-    })
+      // Navigate to the event page
+      navigate({
+        to: '/events/$eventId',
+        params: {
+          'eventId': createdEvent.id.toString()
+        }
+      });
+    } catch (error) {
+      console.error('Error creating event:', error);
+      alert('建立活動時發生錯誤');
+    }
   }
 
   return (
@@ -96,6 +182,50 @@ function CreateEventScreen() {
         </Link>
         <h1 className='text-xl text-white' style={{ marginLeft: 60 }}>新增活動</h1>
       </div>
+      
+      {/* Display selected type */}
+      <div className="px-4 py-2">
+        <div className="bg-gray-700 rounded-lg p-3 mb-4">
+          <h3 className="text-white font-bold mb-2">已選擇的類型</h3>
+          <div className="flex flex-wrap gap-2">
+            {eventTypeInfo && (
+              <span className="badge badge-primary badge-lg">{eventTypeInfo.type_name}</span>
+            )}
+          </div>
+        </div>
+      </div>
+      
+      {/* Display hashtags selection */}
+      <div className="px-4 py-2">
+        <div className="bg-gray-700 rounded-lg p-3 mb-4">
+          <h3 className="text-white font-bold mb-2">選擇標籤 (可多選)</h3>
+          <div className="flex flex-wrap gap-2">
+            {loading ? (
+              <p className="text-white">載入中...</p>
+            ) : eventTags.length > 0 ? (
+              eventTags.map((tag) => (
+                <button
+                  key={tag.type_id}
+                  type="button" 
+                  className={`badge ${selectedHashtags.includes(tag.type_id) ? 'badge-primary' : 'badge-outline'} badge-lg cursor-pointer`}
+                  onClick={() => {
+                    setSelectedHashtags(prev => 
+                      prev.includes(tag.type_id)
+                        ? prev.filter(id => id !== tag.type_id)
+                        : [...prev, tag.type_id]
+                    );
+                  }}
+                >
+                  {tag.type_name}
+                </button>
+              ))
+            ) : (
+              <p className="text-white">沒有可用的標籤</p>
+            )}
+          </div>
+        </div>
+      </div>
+      
       <div className="grid gap-3 grid-cols-1">
         <h2 style={styles.text}>活動名稱</h2>
         <input