diff --git a/public/images/delete.svg b/public/images/delete.svg
deleted file mode 100644
index 1310589..0000000
--- a/public/images/delete.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/public/images/home.svg b/public/images/home.svg
deleted file mode 100644
index f0f0fd5..0000000
--- a/public/images/home.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-
diff --git a/public/images/search.svg b/public/images/search.svg
deleted file mode 100644
index 8fc7983..0000000
--- a/public/images/search.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/src/pages/BaanSelection/components/ListBaan.tsx b/src/pages/BaanSelection/components/ListBaan.tsx
new file mode 100644
index 0000000..851b1a4
--- /dev/null
+++ b/src/pages/BaanSelection/components/ListBaan.tsx
@@ -0,0 +1,40 @@
+import Image from 'next/image';
+import { convertSize, isAdded } from '../hooks/hooks';
+import { IBaan } from '@/types/baan';
+const ListBaan = (props: any) => {
+ return props.baan
+ .filter(
+ (e: IBaan) =>
+ e.name.includes(props.input) && isAdded(props.selectedBaan, e)
+ ) //Filter when typing the search bar
+ .map((e: IBaan) => {
+ return (
+
+
+ event.dataTransfer.setData(
+ 'Data',
+ JSON.stringify(e)
+ )
+ } //Handle dragging event
+ >
+
+
+
{`${e.name} (${convertSize.get(e.size)})`}
+
+ );
+ });
+};
+
+export default ListBaan;
diff --git a/src/pages/BaanSelection/components/SelectedBaan.tsx b/src/pages/BaanSelection/components/SelectedBaan.tsx
new file mode 100644
index 0000000..f626022
--- /dev/null
+++ b/src/pages/BaanSelection/components/SelectedBaan.tsx
@@ -0,0 +1,68 @@
+import TrashIcon from '@heroicons/react/24/solid/TrashIcon';
+import { SelectedBaanRank } from '../hooks/types';
+import Image from 'next/image';
+import { BaanSize } from '@/types/baan';
+import { convertSize } from '../hooks/hooks';
+const SelectedBaan = (props: any) => {
+ return props.baan.map((e: SelectedBaanRank) => {
+ //Convert chosen baans to TSX (a bit messy, sry)
+ return (
+ Go to line 349...
+ onDragOver={(e) => e.preventDefault()}
+ >
+
+
+ {e.id === -1 ? (
+
Null
+ ) : (
+
+ )}
+
+ {e.id === -1 ? (
+
+
ท่านยังไม่ได้เลือกบ้าน
+
+ ) : (
+
+
{`${
+ e.name
+ } (${convertSize.get(e.size)})`}
+
+
+ )}
+
+ );
+ });
+};
+export default SelectedBaan;
diff --git a/src/pages/BaanSelection/hooks/hooks.tsx b/src/pages/BaanSelection/hooks/hooks.tsx
new file mode 100644
index 0000000..f7394b9
--- /dev/null
+++ b/src/pages/BaanSelection/hooks/hooks.tsx
@@ -0,0 +1,19 @@
+import { BaanSize, IBaan } from '@/types/baan';
+import { SelectedBaan } from './types';
+
+export const isAdded = (selectedBaan: SelectedBaan[], other: IBaan) => {
+ //Check if the baan is selected and will not be visualized in Baan list
+ for (let i: number = 0; i < 3; i++) {
+ if (selectedBaan[i].id === other.id) return false;
+ }
+ return true;
+};
+
+export const convertSize: Map = new Map([
+ //Convert Baansize type to string (Hope there are better ways)
+ [BaanSize.Small, 'S'],
+ [BaanSize.Medium, 'M'],
+ [BaanSize.Large, 'L'],
+ [BaanSize.ExtraLarge, 'XL'],
+ [BaanSize.ExtraExtraLarge, 'XXL'],
+]);
diff --git a/src/pages/BaanSelection/hooks/types.tsx b/src/pages/BaanSelection/hooks/types.tsx
new file mode 100644
index 0000000..768d14b
--- /dev/null
+++ b/src/pages/BaanSelection/hooks/types.tsx
@@ -0,0 +1,7 @@
+import { BaanSize, IShortBaan } from '@/types/baan';
+
+export interface SelectedBaanRank extends IShortBaan {
+ //Interface for selected baans (3 baans)
+ size: BaanSize;
+ num: number;
+}
diff --git a/src/pages/baan-choosing.tsx b/src/pages/BaanSelection/index.tsx
similarity index 63%
rename from src/pages/baan-choosing.tsx
rename to src/pages/BaanSelection/index.tsx
index 066d0f9..7489e78 100644
--- a/src/pages/baan-choosing.tsx
+++ b/src/pages/BaanSelection/index.tsx
@@ -1,14 +1,11 @@
-import { ChangeEvent, ReactNode, useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
+import SelectedBaan from './components/SelectedBaan';
+import ListBaan from './components/ListBaan';
import { BaanSize, IBaan } from '@/types/baan';
-import React from 'react';
-import Image from 'next/image';
-import Delete from '@/public/images/delete.svg';
-import Search from '@/public/images/search.svg';
-import Home from '@/public/images/home.svg';
+import { HomeIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+import { SelectedBaanRank } from './hooks/types';
const picTest1: string = '/images/rocket.svg'; //Pictures for testing...
-const picTest2: string = '/images/rocket.svg';
-const picTest3: string = '/images/home.svg';
const testBaanData: IBaan[] = [
//Test Data
@@ -49,7 +46,7 @@ const testBaanData: IBaan[] = [
id: 3,
name: 'บ้านนอก',
size: BaanSize.Small,
- imageUrl: picTest3,
+ imageUrl: picTest1,
description: '',
facebook: '',
ig: '',
@@ -104,7 +101,7 @@ const testBaanData: IBaan[] = [
id: 8,
name: 'บ้าน Dota',
size: BaanSize.Large,
- imageUrl: picTest2,
+ imageUrl: picTest1,
description: '',
facebook: '',
ig: '',
@@ -191,23 +188,7 @@ const BaanChoosing = () => {
'unClickedSizeButton',
]);
const [baan, setBaan] = useState(testBaanData); //The list of every baans in RPKM...
- const convertSize: Map = new Map([
- //Convert Baansize type to string (Hope there are better ways)
- [BaanSize.Small, 'S'],
- [BaanSize.Medium, 'M'],
- [BaanSize.Large, 'L'],
- [BaanSize.ExtraLarge, 'XL'],
- [BaanSize.ExtraExtraLarge, 'XXL'],
- ]);
- interface SelectedBaan {
- //Interface for selected baans (3 baans)
- id: number;
- imageUrl: string;
- size: BaanSize;
- name: string;
- num: number;
- }
- const [selectedBaan, setSelectedBaan] = useState([
+ const [selectedBaan, setSelectedBaan] = useState([
//Baans that the user chooses
{
id: -1,
@@ -231,107 +212,7 @@ const BaanChoosing = () => {
num: 3,
},
]);
- const usedSelectedBaan: ReactNode = selectedBaan.map((e: SelectedBaan) => {
- //Convert chosen baans to TSX (a bit messy, sry)
- return (
- handleDrop(f, e.num)} //Handle the event that user drag new Baan to the div => Go to line 349...
- onDragOver={(e) => e.preventDefault()}
- >
-
-
- {e.id === -1 ? (
-
Null
- ) : (
-
- )}
-
- {e.id === -1 ? (
-
-
ท่านยังไม่ได้เลือกบ้าน
-
- ) : (
-
-
{`${
- e.name
- } (${convertSize.get(e.size)})`}
-
-
- )}
-
- );
- });
- const isAdded = (other: IBaan) => {
- //Check if the baan is selected and will not visualize in Baan list
- for (let i: number = 0; i < 3; i++) {
- if (selectedBaan[i].id === other.id) return false;
- }
- return true;
- };
- const listBaan: ReactNode = baan //convert list of all Baans in RPKM to TSX
- .filter((e) => e.name.includes(input) && isAdded(e)) //Filter when typing the search bar
- .map((e: IBaan) => {
- return (
-
-
- event.dataTransfer.setData(
- 'Data',
- JSON.stringify(e)
- )
- } //Handle dragging event
- >
-
-
-
{`${e.name} (${convertSize.get(e.size)})`}
-
- );
- });
+
const filterBaan = (f: BaanSize, n: number) => {
//Handle when clicking on the filter button by size
setBaan(testBaanData); //Reset the data in Baan
@@ -356,11 +237,11 @@ const BaanChoosing = () => {
const handleDrop = (e: React.DragEvent, n: number) => {
//Handle event when dragging
if (selectedBaan[n - 1].id !== -1) return; //If there is already a data in the div (not null), exit function
- const widget: SelectedBaan = JSON.parse(
- //Convert JSON string to SelectedBaan
+ const widget: SelectedBaanRank = JSON.parse(
+ //Convert JSON string to SelectedBaanRank
e.dataTransfer.getData('Data') as string
);
- const data: SelectedBaan[] = [...selectedBaan];
+ const data: SelectedBaanRank[] = [...selectedBaan];
data[n - 1] = {
...data[n - 1],
name: widget.name,
@@ -381,7 +262,11 @@ const BaanChoosing = () => {
เลือก 3 บ้านที่สนใจมากที่สุด
- {usedSelectedBaan}
+
@@ -391,13 +276,7 @@ const BaanChoosing = () => {
@@ -458,7 +334,11 @@ const BaanChoosing = () => {
- {listBaan}
+