feat: baan api integration (#54)

* feat: get group * feat: join group * refactor: id -> token * feat: leave group * feat: upgrade join baan page style * feat: fetch all baans * feat: save selected baans * feat: get current baan * fix: z-10 on profile star * fix: remove dead file * chore: minor changes --------- Co-authored-by: shalluv <[email protected]>
isd-sgcu · Jul 16, 2023 · f65e2d3 · f65e2d3
1 parent 601999a
commit f65e2d3
Show file tree

Hide file tree

Showing 16 changed files with 276 additions and 258 deletions.
diff --git a/src/components/Profile/BaanSelection/components/BaanPanel.tsx b/src/components/Profile/BaanSelection/components/BaanPanel.tsx
@@ -1,31 +1,61 @@
 import Image from 'next/image';
 import { SelectedBaan } from '..';
-import { CheckCircleIcon } from '@heroicons/react/24/outline';
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/outline';
+import { useRouter } from 'next/router';
+import { useAuth } from '@/context/AuthContext';
+import { useMemo } from 'react';
 import Link from 'next/link';
 
 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 },
-    ];
+    const router = useRouter();
+    const { user, group, isAuthenticated } = useAuth();
+
+    const baans = useMemo(() => {
+        const gBaans = (group?.baans ?? []).map(
+            (baan, index) =>
+                ({
+                    id: baan.id,
+                    name: baan.name,
+                    imgUrl: baan.imageUrl,
+                    size: '69XL',
+                    num: index + 1,
+                } satisfies SelectedBaan & { id: string })
+        );
+
+        while (gBaans.length < 3) {
+            gBaans.push({
+                id: '-1',
+                name: '-',
+                imgUrl: profilePic,
+                size: '-',
+                num: gBaans.length + 1,
+            });
+        }
+
+        return gBaans;
+    }, [group?.baans]);
+
+    const isNotGroupOwner = useMemo(
+        () => !isAuthenticated || group?.leaderID !== user?.id,
+        [isAuthenticated, group, user]
+    );
 
     return (
-        <div className="flex flex-col rounded-xl bg-white p-4 ring-8 ring-white ring-opacity-25">
+        <div className="flex w-full flex-col rounded-xl bg-white p-4 ring-8 ring-white ring-opacity-25">
             <p className="mb-4 text-center text-xl font-bold text-purple-400 lg:text-3xl">
                 บ้านรับเพื่อนที่เลือก
             </p>
-            <div className="flex flex-col items-center justify-center gap-4 lg:flex-row">
-                {baan.map((data: SelectedBaan) => {
+            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+                {baans.map((data) => {
                     return (
                         <div
-                            key={data.name}
+                            key={`${data.num}-${data.id}`}
                             className="flex h-full w-full flex-col items-center justify-center gap-4 px-4"
                         >
-                            <div className="relative aspect-3/4 w-full max-w-xxs overflow-clip rounded-lg border-2 border-purple-400 lg:w-28">
-                                <p className="text-md absolute flex h-7 items-center justify-center rounded-br-lg bg-purple-400 px-2 font-bold leading-none lg:h-7 lg:text-lg">
+                            <div className="relative aspect-3/4 w-32 max-w-full overflow-clip rounded-lg border-2 border-purple-400">
+                                <p className="text-md absolute z-10 flex h-7 items-center justify-center rounded-br-lg bg-purple-400 px-2 font-bold leading-none lg:h-7 lg:text-lg">
                                     {data.num}
                                 </p>
                                 <Image fill src={data.imgUrl} alt={data.name} />
@@ -38,16 +68,25 @@ export default function BaanPanel() {
                     );
                 })}
             </div>
-            <div className="mt-6 flex flex-col place-items-center items-center justify-center gap-2 text-center text-sm text-green">
-                <p className="relative flex items-center justify-center">
-                    <CheckCircleIcon className="h-8" />
-                    ระบบได้ทำการบันทึกเรียบร้อยแล้ว
-                </p>
-                <Link href="/baan-selection">
-                    <button className="mx-auto rounded-lg bg-pink-400 px-3 py-2 text-xl text-white ring-4 ring-pink-400/30 transition-all duration-500 hover:ring-8">
-                        เปลี่ยนอันดับ
-                    </button>
-                </Link>
+            <div className="mt-6 flex flex-col place-items-center items-center justify-center gap-2 text-center text-sm">
+                {isNotGroupOwner ? (
+                    <p className="relative flex items-center justify-center text-pink-500">
+                        <XCircleIcon className="h-8" />
+                        หัวหน้ากลุ่มเท่านั้นที่สามารถเปลี่ยนบ้านได้
+                    </p>
+                ) : (
+                    <hr className="h-8" />
+                )}
+
+                <button
+                    className="mx-auto rounded-lg bg-pink-400 px-3 py-2 text-xl text-white ring-4 ring-pink-400/30 transition-all duration-500 enabled:hover:ring-8 disabled:bg-pink-300"
+                    onClick={() => {
+                        router.push('/baan-selection');
+                    }}
+                    disabled={isNotGroupOwner}
+                >
+                    เปลี่ยนอันดับ
+                </button>
             </div>
         </div>
     );

diff --git a/src/components/Profile/BaanSelection/components/GroupPanel.tsx b/src/components/Profile/BaanSelection/components/GroupPanel.tsx
@@ -1,49 +1,67 @@
 import Image from 'next/image';
-import { GroupMember } from '..';
+import { useAuth } from '@/context/AuthContext';
+import { IShortUser } from '@/types/user';
+import { useMemo } from 'react';
+import { httpDelete } from '@/utils/axios';
 
 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: '' },
-    ];
+    const { user, group, isAuthenticated } = useAuth();
+
+    const members = useMemo(() => {
+        const gMembers = [...(group?.members ?? [])];
+
+        while (gMembers.length < 3) {
+            gMembers.push({
+                id: `placeholder-${gMembers.length}`,
+                firstname: '',
+                lastname: '',
+                image_url: profilePic,
+            } satisfies IShortUser);
+        }
+
+        return gMembers;
+    }, [group]);
 
     return (
-        <div className="flex flex-col gap-4 rounded-xl bg-white p-4 ring-8 ring-white/30">
+        <div className="flex w-full flex-col gap-4 rounded-xl bg-white p-4 ring-8 ring-white/30">
             <p className="h-12 text-center text-xl font-bold text-purple-400 lg:text-3xl">
-                สมาชิกในกลุ่ม(2/3)
+                สมาชิกในกลุ่ม ({group?.members.length ?? 1}/3)
             </p>
-            <div className="flex h-full flex-col justify-center gap-4 lg:flex-row">
-                {group.map((data: GroupMember) => {
+            <div className="flex h-full flex-col justify-center gap-4 sm:flex-row">
+                {members.map((data) => {
                     return (
                         <div
                             className="relative flex h-full w-full flex-col items-center gap-4 px-4"
-                            key={data.name}
+                            key={data.id}
                         >
-                            <div className="relative aspect-3/4 w-full max-w-xxs overflow-clip rounded-lg border-2 border-purple-400 lg:w-28">
-                                <Image src={data.imgUrl} fill alt={data.name} />
+                            <div className="relative aspect-3/4 w-32 max-w-full overflow-clip rounded-lg border-2 border-purple-400">
+                                <Image
+                                    src={data.image_url}
+                                    fill
+                                    alt={data.firstname}
+                                />
                             </div>
                             <div className="relative z-0 flex select-none flex-col text-center text-lg leading-none text-purple-400">
-                                <p>{data.name}</p>
-                                <p>{data.surname}</p>
+                                <p>{data.firstname}</p>
+                                <p>{data.lastname}</p>
                             </div>
                         </div>
                     );
                 })}
             </div>
-            <button className="mx-auto mt-6 rounded-lg bg-pink-400 px-3 py-2 text-xl text-white ring-4 ring-pink-400/30 transition-all duration-500 hover:ring-8">
+            <button
+                className="mx-auto mt-6 rounded-lg bg-pink-400 px-3 py-2 text-xl text-white ring-4 ring-pink-400/30 transition-all duration-500 enabled:hover:ring-8 disabled:bg-pink-300"
+                onClick={async () => {
+                    const { status } = await httpDelete('/group/leave');
+
+                    if (status === 200) {
+                        window.location.reload();
+                    }
+                }}
+                disabled={!isAuthenticated || group?.leaderID === user?.id}
+            >
                 ออกจากกลุ่ม
             </button>
         </div>

diff --git a/src/components/Profile/BaanSelection/components/InviteLink.tsx b/src/components/Profile/BaanSelection/components/InviteLink.tsx
@@ -6,7 +6,7 @@ export default function InviteLink() {
 
     const inviteLink = `${
         process.env.NEXT_PUBLIC_APP_BASE_URL
-    }/?join=${encodeURIComponent(
+    }/join?token=${encodeURIComponent(
         group ? group.token : 'GROUP_TOKEN_NOT_FOUND'
     )}`;
 

diff --git a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx
@@ -1,19 +1,27 @@
+import { useAuth } from '@/context/AuthContext';
 import { StarIcon } from '@heroicons/react/24/solid';
 import Image from 'next/image';
 
 const profilePic = '/images/pfp-placeholder.svg';
 
 export default function ProfileInfoPanel() {
+    const { user } = useAuth();
+
     return (
         <div className="flex min-h-full flex-col items-center justify-center gap-8 rounded-t-2xl bg-white p-12 xl:rounded-l-2xl xl:rounded-tr-none">
             <div className="relative aspect-3/4 w-full max-w-xxs rounded-lg ring-8 ring-gray-300">
-                <StarIcon className="absolute h-14 -translate-x-1/2 -translate-y-1/2 rounded-full bg-yellow stroke-orange stroke-2 p-2" />
-                <Image src={profilePic} fill alt="profile pic" />
+                <StarIcon className="absolute z-10 h-14 -translate-x-1/2 -translate-y-1/2 rounded-full bg-yellow stroke-orange stroke-2 p-2" />
+                <Image
+                    src={user?.imageUrl || profilePic}
+                    fill
+                    alt="profile pic"
+                />
             </div>
             <div className="flex flex-col">
                 <p className="select-none text-center text-3xl font-bold text-purple-400">
-                    แจฮยอน <br /> คงแก่การเรียน
+                    {user?.firstname} <br /> {user?.lastname}
                 </p>
+
                 <button className="mx-auto mt-8 w-36 rounded-lg bg-pink-400 py-2 text-xl ring-4 ring-pink-400/30 transition-all duration-500 hover:ring-8">
                     แก้ไขข้อมูล
                 </button>

diff --git a/src/components/Profile/BaanSelection/index.tsx b/src/components/Profile/BaanSelection/index.tsx
@@ -29,7 +29,7 @@ const BaanSelection = () => {
         <div className="mx-auto flex min-h-screen w-full max-w-min items-center justify-center py-16 text-white">
             <div className="flex h-full min-h-max w-full flex-col justify-center px-4 xl:flex-row">
                 <ProfileInfoPanel />
-                <div className="flex min-h-full w-full flex-col items-center justify-center gap-8 rounded-b-2xl bg-black/50 p-8 lg:w-auto lg:rounded-r-2xl lg:rounded-bl-none">
+                <div className="flex min-h-full w-full flex-col items-center justify-center gap-8 rounded-b-2xl bg-black/50 p-8 xl:rounded-r-2xl xl:rounded-bl-none">
                     <InviteLink />
                     <div className="flex w-full flex-col justify-center gap-8 xl:flex-row">
                         <GroupPanel />

diff --git a/src/components/baan-selection/ListBaan.tsx b/src/components/baan-selection/ListBaan.tsx
@@ -1,7 +1,13 @@
 import Image from 'next/image';
 import { convertSize, isAdded } from '@/utils/baan-selection/utility';
 import { IBaan } from '@/types/baan';
-const ListBaan = (props: any) => {
+import { SelectedBaanRank } from '@/utils/baan-selection/types';
+
+const ListBaan = (props: {
+    baan: IBaan[];
+    input: string;
+    selectedBaan: SelectedBaanRank[];
+}) => {
     return props.baan
         .filter(
             (e: IBaan) =>

diff --git a/src/components/baan-selection/SelectedBaan.tsx b/src/components/baan-selection/SelectedBaan.tsx
@@ -15,13 +15,13 @@ const SelectedBaan = (props: any) => {
                 <p className="text-md absolute left-0 top-0 z-10 flex h-7 items-center justify-center rounded-br-lg bg-purple-400 px-2 font-bold leading-none text-white lg:h-7 lg:text-lg">
                     {props.num}
                 </p>
-                {props.id === -1 ? (
+                {props.id === '' ? (
                     <p className="text-gray-500">Null</p>
                 ) : (
                     <Image src={props.imageUrl} alt={props.name} fill />
                 )}
             </div>
-            {props.id === -1 ? (
+            {props.id === '' ? (
                 <p>ท่านยังไม่ได้เลือกบ้าน</p>
             ) : (
                 <div className="flex flex-col items-center gap-2 lg:flex-row">
@@ -36,7 +36,7 @@ const SelectedBaan = (props: any) => {
                                 name: '',
                                 size: BaanSize._,
                                 imageUrl: '',
-                                id: -1,
+                                id: '',
                             };
                             props.setSelectedBaan(resetBaan);
                         }}

diff --git a/src/dto/baanDTO.ts b/src/dto/baanDTO.ts
@@ -1,20 +1,20 @@
 import { BaanSize } from '@/types/baan';
 
 export interface ShortBaanDTO {
-    id: number;
-    nameEN: string;
-    nameTH: string;
-    imageUrl: string;
+    id: string;
+    name_en: string;
+    name_th: string;
+    image_url: string;
 }
 
 export interface BaanDTO extends ShortBaanDTO {
     size: BaanSize;
-    descriptionEN: string;
-    descriptionTH: string;
+    description_en: string;
+    description_th: string;
     facebook: string;
-    facebookUrl: string;
+    facebook_url: string;
     instagram: string;
-    instagramUrl: string;
+    instagram_url: string;
     line: string;
-    lineUrl: string;
+    line_url: string;
 }
diff --git a/src/dto/groupDTO.ts b/src/dto/groupDTO.ts
@@ -11,7 +11,7 @@ export interface Member {
 
 export interface GroupDTO {
     id: string;
-    leaderID: string;
+    leader_id: string;
     members: IShortUser[];
     baans: ShortBaanDTO[];
     token: string;