From c969f1faa0070f0883ec5d0148cb94053089d20b Mon Sep 17 00:00:00 2001 From: betich Date: Fri, 14 Jul 2023 07:46:13 +0700 Subject: [PATCH] style: refactor component structure --- .../BaanSelection/elements/BaanPanel.tsx | 68 ++++++ .../BaanSelection/elements/GroupPanel.tsx | 65 ++++++ .../BaanSelection/elements/InviteLink.tsx | 27 +++ .../elements/ProfileInfoPanel.tsx | 43 ++++ .../Profile/BaanSelection/index.tsx | 49 ++++ .../Profile/WaitForBaan/index.tsx} | 3 +- src/context/AuthContext.tsx | 6 +- src/pages/baan-profile.tsx | 220 ------------------ src/pages/profile.tsx | 4 + 9 files changed, 260 insertions(+), 225 deletions(-) create mode 100644 src/components/Profile/BaanSelection/elements/BaanPanel.tsx create mode 100644 src/components/Profile/BaanSelection/elements/GroupPanel.tsx create mode 100644 src/components/Profile/BaanSelection/elements/InviteLink.tsx create mode 100644 src/components/Profile/BaanSelection/elements/ProfileInfoPanel.tsx create mode 100644 src/components/Profile/BaanSelection/index.tsx rename src/{pages/baan-selection.tsx => components/Profile/WaitForBaan/index.tsx} (94%) delete mode 100644 src/pages/baan-profile.tsx create mode 100644 src/pages/profile.tsx diff --git a/src/components/Profile/BaanSelection/elements/BaanPanel.tsx b/src/components/Profile/BaanSelection/elements/BaanPanel.tsx new file mode 100644 index 0000000..ecbc508 --- /dev/null +++ b/src/components/Profile/BaanSelection/elements/BaanPanel.tsx @@ -0,0 +1,68 @@ +import Image from 'next/image'; +import { SelectedBaan } from '..'; +import { CheckCircleIcon } from '@heroicons/react/24/outline'; + +const profilePic = '/images/pfp-placeholder.svg'; + +export default function BaanPanel() { + const baan: SelectedBaan[] = [ + { name: 'บ้านนอก', imgUrl: profilePic, size: 'M', num: 1 }, + { name: 'บ้านโดต้าทู', imgUrl: profilePic, size: 'XL', num: 2 }, + { name: 'บ้านไำดอไำด', imgUrl: profilePic, size: 'XL', num: 3 }, + ]; + + return ( +
+
+ บ้านรับเพื่อนที่เลือก +
+
+ {baan.map((data: SelectedBaan) => { + return ( +
+
+
+
+
+ {data.num} +
+ {data.name} +
+
+

+ {data.name} +
({data.size}) +

+
+
+
+
+ ); + })} +
+
+
+
+ +
+ ระบบได้ทำการบันทึกเรียบร้อยแล้ว +
+ +
+
+ ); +} diff --git a/src/components/Profile/BaanSelection/elements/GroupPanel.tsx b/src/components/Profile/BaanSelection/elements/GroupPanel.tsx new file mode 100644 index 0000000..956387e --- /dev/null +++ b/src/components/Profile/BaanSelection/elements/GroupPanel.tsx @@ -0,0 +1,65 @@ +import Image from 'next/image'; +import { GroupMember } from '..'; + +const profilePic = '/images/pfp-placeholder.svg'; + +export default function GroupPanel() { + const group: GroupMember[] = [ + { + name: 'แจฮยอน', + surname: 'คงแก่การเรียน', + imgUrl: profilePic, + role: 'member', + }, + { + name: 'Dalai', + surname: 'Salikorn', + imgUrl: profilePic, + role: 'leader', + }, + { name: '', surname: '', imgUrl: profilePic, role: '' }, + ]; + + return ( +
+
+ สมาชิกในกลุ่ม(2/3) +
+
+ {group.map((data: GroupMember) => { + return ( +
+
+
+
+ {data.name} +
+
+

+ {data.name} +
+ {data.surname} +

+
+
+
+
+ ); + })} +
+
+ +
+
+ ); +} diff --git a/src/components/Profile/BaanSelection/elements/InviteLink.tsx b/src/components/Profile/BaanSelection/elements/InviteLink.tsx new file mode 100644 index 0000000..99dbf34 --- /dev/null +++ b/src/components/Profile/BaanSelection/elements/InviteLink.tsx @@ -0,0 +1,27 @@ +import { Square2StackIcon } from '@heroicons/react/24/outline'; + +export default function InviteLink() { + return ( +
+
+
+ +
+
+ rpkm.sgcu.in.th/3D9EKB +
+ +
+
+
+
+ ); +} diff --git a/src/components/Profile/BaanSelection/elements/ProfileInfoPanel.tsx b/src/components/Profile/BaanSelection/elements/ProfileInfoPanel.tsx new file mode 100644 index 0000000..58850b0 --- /dev/null +++ b/src/components/Profile/BaanSelection/elements/ProfileInfoPanel.tsx @@ -0,0 +1,43 @@ +import { StarIcon } from '@heroicons/react/24/solid'; +import Image from 'next/image'; + +const profilePic = '/images/pfp-placeholder.svg'; + +export default function ProfileInfoPanel() { + return ( +
+
+ + profile pic +
+ +
+
+

+ แจฮยอน +
+ คงแก่การเรียน +

+
+ +
+
+ ); +} diff --git a/src/components/Profile/BaanSelection/index.tsx b/src/components/Profile/BaanSelection/index.tsx new file mode 100644 index 0000000..8635dd0 --- /dev/null +++ b/src/components/Profile/BaanSelection/index.tsx @@ -0,0 +1,49 @@ +import Image from 'next/image'; +import React from 'react'; +import { StarIcon, XCircleIcon } from '@heroicons/react/24/solid'; +import { Square2StackIcon, CheckCircleIcon } from '@heroicons/react/24/outline'; +import { IShortUser, IUser } from '@/types/user'; +import { IGroup, IGroupPublic } from '@/types/group'; +import InviteLink from './elements/InviteLink'; +import GroupPanel from './elements/GroupPanel'; +import BaanPanel from './elements/BaanPanel'; +import ProfileInfoPanel from './elements/ProfileInfoPanel'; + +const profilePic = '/images/pfp-placeholder.svg'; + +export interface GroupMember { + name: string; + surname: string; + imgUrl: string; + role: string; +} +export interface SelectedBaan { + name: string; + imgUrl: string; + size: string; + num: number; +} + +const BaanSelection = () => { + return ( + <> +
+
+ + +
+ +
+ + +
+
+
+
+ + ); +}; + +export default BaanSelection; diff --git a/src/pages/baan-selection.tsx b/src/components/Profile/WaitForBaan/index.tsx similarity index 94% rename from src/pages/baan-selection.tsx rename to src/components/Profile/WaitForBaan/index.tsx index 435ca01..f2e938d 100644 --- a/src/pages/baan-selection.tsx +++ b/src/components/Profile/WaitForBaan/index.tsx @@ -2,9 +2,8 @@ import type { NextPage } from 'next'; import Image from 'next/image'; import Rocket from '@/public/images/rocket.svg'; -import { useAuth } from '@/context/AuthContext'; -const WaitForBaanselection: NextPage = () => { +const WaitForBaanselection = () => { return (
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx index 5cb3d9d..bce4c3a 100644 --- a/src/context/AuthContext.tsx +++ b/src/context/AuthContext.tsx @@ -80,7 +80,7 @@ const AuthProvider = ({ children }: { children: ReactNode }) => { switch (router.pathname) { case '/': if (user) { - if (alreadyRegistered) router.push('/baan-selection'); + if (alreadyRegistered) router.push('/profile'); else router.push('/register'); } break; @@ -88,10 +88,10 @@ const AuthProvider = ({ children }: { children: ReactNode }) => { if (!user) { router.push('/'); } else if (alreadyRegistered) { - router.push('/baan-selection'); + router.push('/profile'); } break; - case '/baan-selection': + case '/profile': if (!user) { router.push('/'); } else if (!alreadyRegistered) { diff --git a/src/pages/baan-profile.tsx b/src/pages/baan-profile.tsx deleted file mode 100644 index 87e9a84..0000000 --- a/src/pages/baan-profile.tsx +++ /dev/null @@ -1,220 +0,0 @@ -import Image from 'next/image'; -import React from 'react'; -import { StarIcon, XCircleIcon } from '@heroicons/react/24/solid'; -import { Square2StackIcon, CheckCircleIcon } from '@heroicons/react/24/outline'; -import { IShortUser, IUser } from '@/types/user'; -import { IGroup, IGroupPublic } from '@/types/group'; - -const profilePic = '/images/pfp-placeholder.svg'; - -const BaanProfile = () => { - // testing data not a necessary code can delete - interface GroupMember { - name: string; - surname: string; - imgUrl: string; - role: string; - } - interface SelectedBaan { - name: string; - imgUrl: string; - size: string; - num: number; - } - const group: GroupMember[] = [ - { - name: 'แจฮยอน', - surname: 'คงแก่การเรียน', - imgUrl: profilePic, - role: 'member', - }, - { - name: 'Dalai', - surname: 'Salikorn', - imgUrl: profilePic, - role: 'leader', - }, - { name: '', surname: '', imgUrl: profilePic, role: '' }, - ]; - const baan: SelectedBaan[] = [ - { name: 'บ้านนอก', imgUrl: profilePic, size: 'M', num: 1 }, - { name: 'บ้านโดต้าทู', imgUrl: profilePic, size: 'XL', num: 2 }, - { name: 'บ้านไำดอไำด', imgUrl: profilePic, size: 'XL', num: 3 }, - ]; - - return ( - <> -
-
-
-
- - profile pic -
- -
-
-

- แจฮยอน -
- คงแก่การเรียน -

-
- -
-
- -
-
-
-
- -
-
- rpkm.sgcu.in.th/3D9EKB -
- -
-
-
-
-
-
-
- สมาชิกในกลุ่ม(2/3) -
-
- {group.map((data: GroupMember) => { - return ( -
-
-
-
- {data.name} -
-
-

- {data.name} -
- {data.surname} -

-
-
-
-
- ); - })} -
-
- -
-
-
-
- บ้านรับเพื่อนที่เลือก -
-
- {baan.map((data: SelectedBaan) => { - return ( -
-
-
-
-
- {data.num} -
- {data.name} -
-
-

- {data.name} -
( - {data.size}) -

-
-
-
-
- ); - })} -
-
-
-
- -
- ระบบได้ทำการบันทึกเรียบร้อยแล้ว -
- -
-
-
-
-
-
- - ); -}; - -export default BaanProfile; diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx new file mode 100644 index 0000000..f365097 --- /dev/null +++ b/src/pages/profile.tsx @@ -0,0 +1,4 @@ +// import WaitForBaanselection from "@/components/Profile/WaitForBaan"; +import BaanSelection from '@/components/Profile/BaanSelection'; + +export default BaanSelection;