From 16d33c3c5bae177033c397e71ee6913d133d4e80 Mon Sep 17 00:00:00 2001 From: yusufvalid <103932140+yusufvalid@users.noreply.github.com> Date: Sat, 3 Aug 2024 10:11:42 +0700 Subject: [PATCH] feat: improve search places --- bun.lockb | Bin 185338 -> 185338 bytes src/routes/places/index.tsx | 52 ++++++++++++++++++++++++------------ 2 files changed, 35 insertions(+), 17 deletions(-) diff --git a/bun.lockb b/bun.lockb index d558f09065a72d8e36deb6f0a0be35231462daf2..4992cd43d5726d740b7d618265df1ab3e9c04c41 100755 GIT binary patch delta 277 zcmeyhocq^u?uIRlL1*NQ^^6%@7#J7?7#JElb}zdmQGQW}gE7v~LeE&wfMI&U8Aef4 zLvtXr1gJ<7s3`5G{iaY|i>E+E=6Yb6UZ9KwP)15{bzjG;=6s-xv7Y(#U1u2m&5Rfr zP64H*fzrPweVG$2@XQq`ZJ=kOXUV`&kY8MqTwKf$lX&jb8y}8Fpo|4j#>8N{{aHo{ zQ*#D}4?w+KK)v%-8+5c=Q<H!yO!Z9lOc)r-GD}i{k_;LwnF8*dzbe2o#(JjPd(JXu zG0Gb288Yl*WMJR~YOa>B{*~DtlEwt}mf>{a^Nik%rrYDsGfpjKG}`{vg^9Hv0NN-` A!T<mO delta 277 zcmeyhocq^u?uIRlL1*NQ^vuj$7#J7?7#JElb}zdmQGQW}gE7v~LeEIg$Y^@O8Aef4 zBRvBKh7zD6NuZ*%oA#SRbuFF(6`2Fo0A+fCG7>-;DZ$l!9j}`6filK=rqg$wVe~fx zN}mEsO9Q2UP5Lq?THu*0P})GxM9++Yp&-AwB)PblAtv$MsW(0xjX)U-pp3EQbo;Z6 z5~d~$3?G1cxqy1-t2XFpx27fmRhWVt#=uaPS&|BrWYA#A6maMKRRNVT*xqxNF^f?a w<gi_g3=Et=&D9dtzcSlH(wLy$GMFxWp3$4pWPAL1#;K)@2HU^7FtPRn0OH3@tpET3 diff --git a/src/routes/places/index.tsx b/src/routes/places/index.tsx index 0565be5..d78acbe 100644 --- a/src/routes/places/index.tsx +++ b/src/routes/places/index.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; -import { FeaturedPlace, Place } from "@/types/places"; +import { Place } from "@/types/places"; import "mapbox-gl/dist/mapbox-gl.css"; import Map, { MapRef, PointLike, Source } from "react-map-gl"; import Layer from "react-map-gl/dist/esm/components/layer"; @@ -27,7 +27,7 @@ export async function loader({ request }: LoaderFunctionArgs) { const [responsePlaces, responseTopDestinations] = await Promise.all([ api<responsePlaces>(`places?search=${keyword ?? ""}`), - api<{ data: Array<FeaturedPlace> }>("/places/featured"), + api<responsePlaces>("/places/featured"), ]); return { @@ -38,7 +38,7 @@ export async function loader({ request }: LoaderFunctionArgs) { } export function PlacesIndexRoute() { - const { places, keyword } = useLoaderData() as Awaited< + const { places, keyword, topDestinations } = useLoaderData() as Awaited< ReturnType<typeof loader> >; @@ -150,7 +150,11 @@ export function PlacesIndexRoute() { <aside className="w-[720px] h-screen flex flex-col"> <PlacesSidebarHeader /> <div className="p-6 h-[85%]"> - <PlaceDetailPlaceholder places={places} keyword={keyword} /> + <PlaceDetailPlaceholder + places={places} + keyword={keyword} + topDestinations={topDestinations} + /> </div> </aside> @@ -214,46 +218,60 @@ function PlacesSidebarHeader() { function PlaceDetailPlaceholder({ places, keyword, + topDestinations, }: { places: Place[]; keyword: string; + topDestinations: Place[]; }) { + const placeList = keyword !== "" ? places : topDestinations; + return ( <div className="h-[100%]"> - <p className="font-medium text-xl mb-6">Show result of "{keyword}"</p> + <p className="font-medium text-xl mb-6"> + {keyword !== "" ? `Show result of "${keyword}"` : "Top destinations:"} + </p> <ScrollArea className="h-[100%]"> - {places.map((place, index) => ( + {placeList.map((place, index) => ( <div className="flex flex-row gap-4 mb-4 min-h-[145px] w-full" key={index} > - <img - className="object-cover rounded-lg w-[198px] h-[145px]" - src={place.imageUrl} - alt={place.title} - /> + <Link to={`/places/${place.slug}`}> + <img + className="object-cover rounded-lg w-[198px] h-[145px]" + src={place.imageUrl} + alt={place.title} + /> + </Link> <div className="flex flex-col gap-2 flex-1 overflow-hidden"> - <p className="text-xl font-bold">{place.title}</p> + <Link + to={`/places/${place.slug}`} + className="text-xl font-bold hover:underline" + > + {place.title} + </Link> <div className="flex flex-row gap-4 "> {place.categories.map((category, index) => ( - <div + <Link + to={`/places?q=${category.name}`} key={index} - className="px-[10px] py-[5px] bg-blue-200 rounded-3xl" + className="px-[10px] py-[5px] bg-blue-200 rounded-3xl hover:bg-blue-300" > <p className="font-bold text-xs text-blue-600"> {category.name} </p> - </div> + </Link> ))} </div> - <p className="text-sm font-medium text-gray-500 truncate text-ellipsis"> + <p className="text-sm font-medium text-gray-500 truncate text-ellipsis max-w-[390px]"> {place.description} </p> - <p className="text-sm font-medium text-gray-500 truncate text-ellipsis"> + <p className="text-sm font-medium text-gray-500 truncate text-ellipsis max-w-[390px]"> {place.address} </p> </div>