From 75057fc58fb4024a86f0652640bfbbdb3ce61577 Mon Sep 17 00:00:00 2001 From: nelsonkct Date: Thu, 14 Nov 2024 22:17:47 +0800 Subject: [PATCH 1/5] feat : complete event index page --- .env.example | 2 - src/components/icons/ClockIcon.tsx | 12 +++ src/components/icons/PinIcon.tsx | 12 +++ src/components/index.ts | 2 + src/routes/events/create.tsx | 15 ++++ src/routes/events/index.tsx | 74 ++++++++++++++----- src/utils/database.types.ts | 3 + .../20241114141253_remote_schema.sql | 3 + 8 files changed, 104 insertions(+), 19 deletions(-) delete mode 100644 .env.example create mode 100644 src/components/icons/ClockIcon.tsx create mode 100644 src/components/icons/PinIcon.tsx create mode 100644 supabase/migrations/20241114141253_remote_schema.sql 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..01515be 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -1,14 +1,20 @@ -import { createFileRoute, Link } from '@tanstack/react-router'; -import { BellIcon, Header, PlusIcon } from '../../components'; +import { createFileRoute } from '@tanstack/react-router'; +import { BellIcon, ClockIcon, 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 +25,6 @@ export const Route = createFileRoute('/events/')({ if (error !== null) { throw error } - return { events: data } }, component: EventIndex @@ -28,18 +33,28 @@ 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 */} @@ -86,12 +100,12 @@ 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', From ceabeb141cdb7d2af836399fa50ca37c78119b72 Mon Sep 17 00:00:00 2001 From: Susan Chen <92381825+1989ONCE@users.noreply.github.com> Date: Wed, 27 Nov 2024 14:48:37 +0800 Subject: [PATCH 3/5] Update src/routes/events/index.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- src/routes/events/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx index 3c22c7d..f05a003 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -98,7 +98,7 @@ function EventIndex() { } function EventCard({ event }: { event: Event }) { - const startTime = event.start_time ? new Date(event.start_time) : new Date(); + const startTime = event.start_time ? new Date(event.start_time) : null; return (

From f8128789c14e748740c8a601b1fbb3d9d04cf3a7 Mon Sep 17 00:00:00 2001 From: Susan Chen <92381825+1989ONCE@users.noreply.github.com> Date: Wed, 27 Nov 2024 14:49:34 +0800 Subject: [PATCH 4/5] Update src/routes/events/index.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- src/routes/events/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx index f05a003..251b3fb 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -115,7 +115,7 @@ function EventCard({ event }: { event: Event }) {

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

From 2281b077be98959274a71342d292d057b6ef7f25 Mon Sep 17 00:00:00 2001 From: Susan Chen <92381825+1989ONCE@users.noreply.github.com> Date: Wed, 27 Nov 2024 15:37:08 +0800 Subject: [PATCH 5/5] Update index.tsx --- src/routes/events/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx index 251b3fb..b834045 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -98,7 +98,7 @@ function EventIndex() { } function EventCard({ event }: { event: Event }) { - const startTime = event.start_time ? new Date(event.start_time) : null; + const startTime = event.start_time ? new Date(event.start_time) : new Date(); return (