refactor: mainly profile and baan-selection page

src/components/Profile/BaanSelection/components/BaanPanel.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import { SelectedBaan } from '..';
 import { CheckCircleIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
 
 const profilePic = '/images/pfp-placeholder.svg';
 
@@ -23,8 +24,8 @@ export default function BaanPanel() {
                             key={data.name}
                             className="flex h-full w-full flex-col items-center justify-center gap-4 px-4"
                         >
-                            <div className="relative aspect-3/4 w-full rounded-lg border-2 border-purple lg:w-28">
-                                <p className="text-md absolute flex h-7 items-center justify-center rounded-br-lg rounded-tl-lg bg-purple px-2 font-bold leading-none lg:h-7 lg:text-lg">
+                            <div className="relative aspect-3/4 w-full max-w-xxs overflow-clip rounded-lg border-2 border-purple lg:w-28">
+                                <p className="text-md absolute flex h-7 items-center justify-center rounded-br-lg bg-purple px-2 font-bold leading-none lg:h-7 lg:text-lg">
                                     {data.num}
                                 </p>
                                 <Image fill src={data.imgUrl} alt={data.name} />
@@ -42,9 +43,11 @@ export default function BaanPanel() {
                     <CheckCircleIcon className="h-8" />
                     ระบบได้ทำการบันทึกเรียบร้อยแล้ว
                 </p>
-                <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 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>
         </div>
     );

src/components/Profile/BaanSelection/components/GroupPanel.tsx

@@ -25,14 +25,14 @@ export default function GroupPanel() {
             <p className="h-12 text-center text-xl font-bold text-purple lg:text-3xl">
                 สมาชิกในกลุ่ม(2/3)
             </p>
-            <div className="flex h-full flex-col items-center justify-center gap-4 lg:flex-row">
+            <div className="flex h-full flex-col justify-center gap-4 lg:flex-row">
                 {group.map((data: GroupMember) => {
                     return (
                         <div
                             className="relative flex h-full w-full flex-col items-center gap-4 px-4"
                             key={data.name}
                         >
-                            <div className="relative aspect-3/4 w-full overflow-clip rounded-lg border-2 border-purple lg:w-28">
+                            <div className="relative aspect-3/4 w-full max-w-xxs overflow-clip rounded-lg border-2 border-purple lg:w-28">
                                 <Image src={data.imgUrl} fill alt={data.name} />
                             </div>
                             <div className="relative z-0 flex select-none flex-col text-center text-lg leading-none text-purple">

src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx

@@ -6,14 +6,14 @@ const profilePic = '/images/pfp-placeholder.svg';
 export default function ProfileInfoPanel() {
     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 rounded-lg ring-8 ring-gray-300">
+            <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" />
             </div>
             <div className="flex flex-col">
-                <div className="select-none text-center text-3xl font-bold text-purple">
+                <p className="select-none text-center text-3xl font-bold text-purple">
                     แจฮยอน <br /> คงแก่การเรียน
-                </div>
+                </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>

src/components/baan-selection/FilterButton.tsx

@@ -1,34 +1,52 @@
 import { BaanSize } from '@/types/baan';
 
-const FilterButton = (props: any) => {
+interface FilterButtonProps {
+    filter: BaanSize;
+    filterBaan: (f: BaanSize, n: number) => void;
+}
+
+const FilterButton = (props: FilterButtonProps) => {
     return (
-        <div className="mt-8 flex overflow-scroll px-2 py-2 lg:px-4 lg:py-4">
+        <div className="flex w-full flex-wrap gap-6 py-8">
             <button
-                className={`${props.toggleColor[0]} select-size-button whitespace-nowrap`}
+                className={`${
+                    props.filter === BaanSize.Small && 'ring-8 ring-pink-400/50'
+                } w-fit whitespace-nowrap rounded-lg bg-pink-400 px-2 py-1 text-xs ring-4 ring-pink-400/30 transition-all duration-300 ease-in-out hover:ring-8 lg:px-4 lg:py-2 lg:text-sm`}
                 onClick={() => props.filterBaan(BaanSize.Small, 0)}
             >
                 บ้านขนาดเล็ก (S)
             </button>
             <button
-                className={`${props.toggleColor[1]} select-size-button whitespace-nowrap`}
+                className={`${
+                    props.filter === BaanSize.Medium &&
+                    'ring-8 ring-pink-400/50'
+                } w-fit whitespace-nowrap rounded-lg bg-pink-400 px-2 py-1 text-xs ring-4 ring-pink-400/30 transition-all duration-300 ease-in-out hover:ring-8 lg:px-4 lg:py-2 lg:text-sm`}
                 onClick={() => props.filterBaan(BaanSize.Medium, 1)}
             >
                 บ้านขนาดกลาง (M)
             </button>
             <button
-                className={`${props.toggleColor[2]} select-size-button whitespace-nowrap`}
+                className={`${
+                    props.filter === BaanSize.Large && 'ring-8 ring-pink-400/50'
+                } w-fit whitespace-nowrap rounded-lg bg-pink-400 px-2 py-1 text-xs ring-4 ring-pink-400/30 transition-all duration-300 ease-in-out hover:ring-8 lg:px-4 lg:py-2 lg:text-sm`}
                 onClick={() => props.filterBaan(BaanSize.Large, 2)}
             >
                 บ้านขนาดใหญ่ (L)
             </button>
             <button
-                className={`${props.toggleColor[3]} select-size-button whitespace-nowrap`}
+                className={`${
+                    props.filter === BaanSize.ExtraLarge &&
+                    'ring-8 ring-pink-400/50'
+                } w-fit whitespace-nowrap rounded-lg bg-pink-400 px-2 py-1 text-xs ring-4 ring-pink-400/30 transition-all duration-300 ease-in-out hover:ring-8 lg:px-4 lg:py-2 lg:text-sm`}
                 onClick={() => props.filterBaan(BaanSize.ExtraLarge, 3)}
             >
                 บ้านขนาดใหญ่พิเศษ (XL)
             </button>
             <button
-                className={`${props.toggleColor[4]} select-size-button whitespace-nowrap`}
+                className={`${
+                    props.filter === BaanSize.ExtraExtraLarge &&
+                    'ring-8 ring-pink-400/50'
+                } w-fit whitespace-nowrap rounded-lg bg-pink-400 px-2 py-1 text-xs ring-4 ring-pink-400/30 transition-all duration-300 ease-in-out hover:ring-8 lg:px-4 lg:py-2 lg:text-sm`}
                 onClick={() => props.filterBaan(BaanSize.ExtraExtraLarge, 4)}
             >
                 บ้านขนาดใหญ่พิเศษพิเศษ (XXL)

src/components/baan-selection/ListBaan.tsx

@@ -6,32 +6,28 @@ const ListBaan = (props: any) => {
         .filter(
             (e: IBaan) =>
                 e.name.includes(props.input) && isAdded(props.selectedBaan, e)
-        ) //Filter when typing the search bar
+        )
         .map((e: IBaan) => {
             return (
                 <div
                     key={e.name}
-                    className="text-md flex flex-col items-center"
+                    className="text-md mx-auto flex h-min w-min flex-col items-center gap-2"
                 >
                     <div
-                        className={`mx-4 my-4 flex h-32 w-32 items-center justify-center rounded-xl bg-white ring-4 ring-purple lg:h-40 lg:w-40 min-[1600px]:h-56 min-[1600px]:w-56`}
+                        className="relative aspect-square w-36 max-w-full items-center justify-center overflow-clip rounded-xl bg-white ring-4 ring-purple"
                         draggable
                         onDragStart={(event) =>
                             event.dataTransfer.setData(
                                 'Data',
                                 JSON.stringify(e)
                             )
-                        } //Handle dragging event
+                        }
                     >
-                        <Image
-                            src={e.imageUrl}
-                            alt={e.name}
-                            width={300}
-                            height={300}
-                            className="rounded-xl bg-black object-contain"
-                        />
+                        <Image src={e.imageUrl} alt={e.name} fill />
                     </div>
-                    <p>{`${e.name} (${convertSize.get(e.size)})`}</p>
+                    <p>
+                        {e.name} ({convertSize.get(e.size)})
+                    </p>
                 </div>
             );
         });

src/components/baan-selection/SearchBar.tsx

@@ -3,9 +3,9 @@ import { ChangeEvent } from 'react';
 
 const SearchBar = (props: any) => {
     return (
-        <form className="w-full text-black lg:w-full">
+        <form className="relative w-full text-purple">
             <label htmlFor="search">
-                <MagnifyingGlassIcon className="absolute h-5 w-5 translate-x-3 translate-y-[0.22rem] object-contain lg:h-6 lg:w-6 lg:translate-y-[0.35rem]" />
+                <MagnifyingGlassIcon className="absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 lg:h-6 lg:w-6" />
             </label>
             <input
                 type="text"
@@ -16,14 +16,9 @@ const SearchBar = (props: any) => {
                 onChange={(e: ChangeEvent<HTMLInputElement>) => {
                     props.setInput(e.target.value);
                 }}
-                className="w-full rounded-3xl bg-white py-1 pl-11 pr-4 text-sm ring-8 ring-white/20 max-[400px]:placeholder-white lg:text-lg"
+                className="w-full rounded-3xl bg-white py-1 pl-11 text-sm ring-8 ring-white/20 lg:text-lg"
             />
-            <button>
-                <HomeIcon
-                    color="#E95682D6"
-                    className="absolute -translate-x-8 -translate-y-[0.90rem] object-contain max-lg:h-5 max-lg:w-5 lg:-translate-x-11 lg:-translate-y-[1.3rem]"
-                />
-            </button>
+            <HomeIcon className="absolute right-4 top-1/2 w-5 -translate-y-1/2 text-pink-400 lg:w-6" />
         </form>
     );
 };

src/components/baan-selection/SelectedBaan.tsx

@@ -7,55 +7,41 @@ const SelectedBaan = (props: any) => {
     return (
         <div
             key={props.num}
-            className="flex flex-col items-center text-sm lg:flex-row"
-            onDrop={props.handleDrop} //Handle the event that user drag new Baan to the div => Go to line 349...
+            className="flex flex-col items-center gap-2 text-sm text-purple lg:flex-row"
+            onDrop={props.handleDrop}
             onDragOver={(e) => e.preventDefault()}
         >
-            <div
-                className={`mx-4 my-3 flex h-20 w-20 items-center justify-center rounded-lg bg-white ring-2 ring-purple lg:h-24 lg:w-24`}
-            >
-                <div className="absolute flex h-5 w-5 -translate-x-8 -translate-y-8 items-center justify-center rounded-md bg-purple text-white lg:h-7 lg:w-7 lg:-translate-x-9 lg:-translate-y-9">
-                    <p>{props.num}</p>
-                </div>
+            <div className="relative flex aspect-square w-32 max-w-full items-center justify-center overflow-clip rounded-lg border-2 border-purple bg-white">
+                <p className="text-md absolute left-0 top-0 z-10 flex h-7 items-center justify-center rounded-br-lg bg-purple px-2 font-bold leading-none text-white lg:h-7 lg:text-lg">
+                    {props.num}
+                </p>
                 {props.id === -1 ? (
                     <p className="text-gray-500">Null</p>
                 ) : (
-                    <Image
-                        src={props.imageUrl}
-                        alt={props.name}
-                        width={100}
-                        height={100}
-                        className="rounded-lg bg-black object-contain"
-                    />
+                    <Image src={props.imageUrl} alt={props.name} fill />
                 )}
             </div>
             {props.id === -1 ? (
-                <div className="flex w-[8.25rem] flex-col items-center justify-center lg:mx-3 lg:flex-row">
-                    <p>ท่านยังไม่ได้เลือกบ้าน</p>
-                </div>
+                <p>ท่านยังไม่ได้เลือกบ้าน</p>
             ) : (
-                <div className="flex flex-col items-center lg:flex-row">
-                    <p className="mx-3 mb-3 lg:mb-0 lg:w-28">{`${
-                        props.name
-                    } (${convertSize.get(props.size)})`}</p>
-                    <button //Event when clicking on the trash button
+                <div className="flex flex-col items-center gap-2 lg:flex-row">
+                    <p>{`${props.name} (${convertSize.get(props.size)})`}</p>
+                    <button
                         onClick={() => {
                             const resetBaan: SelectedBaanRank[] = [
                                 ...props.baan,
-                            ]; //Copy the data from the selected-baan
+                            ];
                             resetBaan[props.num - 1] = {
-                                //Clear the data inside the index to default
                                 ...resetBaan[props.num - 1],
                                 name: '',
                                 size: BaanSize._,
                                 imageUrl: '',
                                 id: -1,
                             };
                             props.setSelectedBaan(resetBaan);
-                            // setSelectedBaan(resetBaan);
                         }}
                     >
-                        <TrashIcon width={20} height={20} />
+                        <TrashIcon className="w-5 hover:opacity-70" />
                     </button>
                 </div>
             )}

src/context/AuthContext.tsx

@@ -7,7 +7,6 @@ import { useRouter } from 'next/router';
 import {
     ReactNode,
     createContext,
-    use,
     useCallback,
     useContext,
     useEffect,
@@ -80,18 +79,20 @@ const AuthProvider = ({ children }: { children: ReactNode }) => {
         switch (router.pathname) {
             case '/':
                 if (user) {
-                    if (alreadyRegistered) router.push('/wait-baan-selection');
+                    if (alreadyRegistered) router.push('/profile');
                     else router.push('/register');
                 }
                 break;
             case '/register':
                 if (!user) {
                     router.push('/');
                 } else if (alreadyRegistered) {
-                    router.push('/wait-baan-selection');
+                    router.push('/profile');
                 }
                 break;
             case '/wait-baan-selection':
+            case '/profile':
+            case '/baan-selection':
                 if (!user) {
                     router.push('/');
                 } else if (!alreadyRegistered) {