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} +
+

{`${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.num}

+
+ {e.id === -1 ? ( +

Null

+ ) : ( + {e.name} + )} +
+ {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.num}

-
- {e.id === -1 ? ( -

Null

- ) : ( - {e.name} - )} -
- {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} -
-

{`${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 = () => {
{ 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" />
@@ -458,7 +334,11 @@ const BaanChoosing = () => {
- {listBaan} +