diff --git a/.env.example b/.env.example deleted file mode 100644 index 2bb19b6..0000000 --- a/.env.example +++ /dev/null @@ -1,2 +0,0 @@ -VITE_SUPABASE_URL=http://127.0.0.1:54321 -VITE_SUPABASE_ANON_KEY= diff --git a/src/components/icons/ClockIcon.tsx b/src/components/icons/ClockIcon.tsx new file mode 100644 index 0000000..feb0e0a --- /dev/null +++ b/src/components/icons/ClockIcon.tsx @@ -0,0 +1,12 @@ + +import React from 'react'; +import IconProps from '../interface/IconProps'; +import { BasicIcon } from './BasicIcon'; + +export const ClockIcon: React.FC = ({ fill, stroke, size }) => ( + + + +); + +export default ClockIcon; diff --git a/src/components/icons/PinIcon.tsx b/src/components/icons/PinIcon.tsx new file mode 100644 index 0000000..4fdd14c --- /dev/null +++ b/src/components/icons/PinIcon.tsx @@ -0,0 +1,12 @@ + +import React from 'react'; +import IconProps from '../interface/IconProps'; +import { BasicIcon } from './BasicIcon'; + +export const PinIcon: React.FC = ({ fill, stroke, size }) => ( + + + +); + +export default PinIcon; diff --git a/src/components/index.ts b/src/components/index.ts index 44eef03..0391eae 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -7,7 +7,9 @@ export { Header } from './Header'; // Icons export { BellIcon } from './icons/BellIcon'; export { CalendarIcon } from './icons/CalendarIcon'; +export { ClockIcon } from './icons/ClockIcon'; export { LogoutIcon } from './icons/LogoutIcon'; +export { PinIcon } from './icons/PinIcon'; export { PlusIcon } from './icons/PlusIcon'; export { SidebarArrowDownIcon } from './icons/SidebarArrowDownIcon'; export { SidebarArrowRightIcon } from './icons/SidebarArrowRightIcon'; diff --git a/src/routes/events/create.tsx b/src/routes/events/create.tsx index 0fa6ae3..7eced56 100644 --- a/src/routes/events/create.tsx +++ b/src/routes/events/create.tsx @@ -35,6 +35,11 @@ function CreateEventScreen() { const [preview, setPreview] = useState() const [inputs, setInputs] = useState({ name: '', + start_time: '', + end_time: '', + location: '', + fee: 0, + description: '' }) // create a preview as a side effect, whenever selected file is changed @@ -106,6 +111,8 @@ function CreateEventScreen() { type="datetime-local" id="start-time" name="start-time" + value={inputs.start_time} + onChange={(text) => { setInputs({ ...inputs, start_time: text.target.value }) }} />
@@ -114,6 +121,8 @@ function CreateEventScreen() { type="datetime-local" id="end-time" name="end-time" + value={inputs.end_time} + onChange={(text) => { setInputs({ ...inputs, end_time: text.target.value }) }} />

活動地點

@@ -121,18 +130,24 @@ function CreateEventScreen() { style={styles.input} className="rounded" placeholder="請輸入活動地點" + value={inputs.location} + onChange={(text) => { setInputs({ ...inputs, location: text.target.value }) }} />

參加費用

{ setInputs({ ...inputs, fee: Number(text.target.value) }) }} />

活動介紹

{ setInputs({ ...inputs, description: text.target.value }) }} />
diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx index 6909804..b834045 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -1,14 +1,21 @@ -import { createFileRoute, Link } from '@tanstack/react-router'; -import { BellIcon, Header, PlusIcon } from '../../components'; +import { createFileRoute } from '@tanstack/react-router'; +import { Clock } from "flowbite-react-icons/solid"; +import { BellIcon, Header, PinIcon, PlusIcon } from '../../components'; import { AuthGuard } from '../../utils/auth'; import { supabase } from '../../utils/supabase'; +interface Event { + created_at: string; + description: string | null; + end_time: string | null; + fee: number | null; + id: number; + name: string | null; + start_time: string | null; + type: number | null; + user_id: string; + location: string | null; +} -const styles = { - container: { - flex: 1, - backgroundColor: '#333333', - }, -}; export const Route = createFileRoute('/events/')({ beforeLoad: AuthGuard, loader: async () => { @@ -19,7 +26,6 @@ export const Route = createFileRoute('/events/')({ if (error !== null) { throw error } - return { events: data } }, component: EventIndex @@ -28,23 +34,41 @@ export const Route = createFileRoute('/events/')({ function EventIndex() { const { events } = Route.useLoaderData() const navigate = Route.useNavigate(); + + // console.log(events[0].start_time) + return ( <>
-
-

活動列表

- { - events.map((event) => ( - {event.name} - )) - } +
+

最新揪人

+
+
+ {events.map((event) => ( + + ))} +
+
+ +

最新活動

+
+
+ {events.map((event) => ( + + ))} +
+
- +
{/* This button will close the dialog */} @@ -67,3 +96,28 @@ function EventIndex() { ) } + +function EventCard({ event }: { event: Event }) { + const startTime = event.start_time ? new Date(event.start_time) : new Date(); + return ( +
+
+
+

{event.name}

+

+ + {startTime.toLocaleString('zh-TW', { + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + })} +

+

+ + {event.location || '位置未提供'} +

+
+
+ ); +} diff --git a/src/utils/database.types.ts b/src/utils/database.types.ts index c199ae4..c8e5726 100644 --- a/src/utils/database.types.ts +++ b/src/utils/database.types.ts @@ -56,6 +56,7 @@ export type Database = { end_time: string | null fee: number | null id: number + location: string | null name: string | null start_time: string | null type: number | null @@ -67,6 +68,7 @@ export type Database = { end_time?: string | null fee?: number | null id?: number + location?: string | null name?: string | null start_time?: string | null type?: number | null @@ -78,6 +80,7 @@ export type Database = { end_time?: string | null fee?: number | null id?: number + location?: string | null name?: string | null start_time?: string | null type?: number | null diff --git a/supabase/migrations/20241114141253_remote_schema.sql b/supabase/migrations/20241114141253_remote_schema.sql new file mode 100644 index 0000000..36989d5 --- /dev/null +++ b/supabase/migrations/20241114141253_remote_schema.sql @@ -0,0 +1,3 @@ +alter table "public"."events" add column "location" text; + +