inmake/irth-new-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: favorites units

Browse Source
This commit is contained in:
c00b3r
2025-04-30 15:20:48 +05:00
parent a3ced4e696
commit e67513cdfe
10 changed files with 208 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+44 -44
View File
@@ -1,111 +1,111 @@
import { Link } from "react-router";
import YoutubeIcon from "./icons/YoutubeIcon";
import InstagramIcon from "./icons/InstagramIcon";
import FacebookIcon from "./icons/FacebookIcon";
import LinkedInIcon from "./icons/LinkedInIcon";
import TwitterIcon from "./icons/TwitterIcon";
import { Link } from 'react-router';
import YoutubeIcon from './icons/YoutubeIcon';
import InstagramIcon from './icons/InstagramIcon';
import FacebookIcon from './icons/FacebookIcon';
import LinkedInIcon from './icons/LinkedInIcon';
import TwitterIcon from './icons/TwitterIcon';
function Footer() {
return (
<footer className="2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white">
<footer className='2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white'>
<img
src="/images/logo.svg"
className="2xl:w-[5.972vw] w-[86px] cursor-pointer"
src='/images/logo.svg'
className='2xl:w-[5.972vw] w-[86px] cursor-pointer'
onClick={() => {
window.location.href = "/";
window.location.href = '/';
}}
alt="IRTH"
alt='IRTH'
/>
<p className="2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 max-md:mt-12">
<p className='2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 max-md:mt-12'>
For more information, visit
<br />
our website: 
<Link
className="text-[#00BED7] md:underline"
to={"https://www.irth.ae"}
className='text-[#00BED7] md:underline'
to={'https://www.irth.ae'}
>
www.irth.ae
</Link>
</p>
<div className="2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6">
<p className="text-s text-[#0D1922]/40">Follow us for more:</p>
<div className="flex 2xl:gap-[0.278vw] gap-1">
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<div className='2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6'>
<p className='text-s text-[#0D1922]/40'>Follow us for more:</p>
<div className='flex 2xl:gap-[0.278vw] gap-1'>
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
<div className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70'>
<YoutubeIcon />
</div>
</div>
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
<div className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70'>
<InstagramIcon />
</div>
</div>
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
<div className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70'>
<FacebookIcon />
</div>
</div>
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
<div className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70'>
<LinkedInIcon />
</div>
</div>
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
<div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
<div className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70'>
<TwitterIcon />
</div>
</div>
</div>
</div>
<div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1 max-md:mt-4">
<div className='2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1 max-md:mt-4'>
<Link
to={"/"}
className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
to={'/'}
className='text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit'
>
Map
</Link>
<Link
to={"/unit-types"}
className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
to={'/unit-types'}
className='text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit'
>
Unit Types
</Link>
<Link
to={"/about-irth"}
className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
to={'/about-irth'}
className='text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit'
>
About IRTH
</Link>
</div>
<div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2 max-2xl:col-span-2 max-md:mt-4">
<div className='2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2 max-2xl:col-span-2 max-md:mt-4'>
<Link
to={"/favourites"}
className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
to={'/favorites'}
className='text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit'
>
Favorites
</Link>
<Link
to={"/search"}
className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
to={'/search'}
className='text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit'
>
Search
</Link>
<Link
to={"/"}
className="text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit"
to={'/'}
className='text-m flex-1 content-center max-2xl:py-2.5 text-[#0D1922]/70 w-fit'
>
Brochures
</Link>
</div>
<div className="content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
<div className='content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]'>
<Link
to={"/"}
className="2xl:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70"
to={'/'}
className='2xl:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70'
>
Privacy Policy
</Link>
src/components/Header.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ function NavBar() {
<NavItem href={"/"} title={"Map"} />
<NavItem href={"/unit-types"} title={"Unit Types"} />
<NavItem href={"/about"} title={"About IRTH"} />
<NavItem href={"/favourites"} title={"Favourites"} />
<NavItem href={"/favorites"} title={"Favorites"} />
<BrochuresDropdown />
<NavItem href={"/search"} title={"Search"} />
</nav>
src/components/UnitCard.tsx
+43 -66
View File
@@ -1,83 +1,60 @@
import { useEffect, useState } from "react";
import { useFavorites } from "../stores/useFavorites";
import { IUnit } from "../types/IUnit";
import HeartIcon from "./icons/HeartIcon";
import Button from "./ui/Button";
import { useFavoritesUnitsStore } from '../stores/useFavoritesUnitsStore';
import { IUnit } from '../types/IUnit';
import FilledHeartIcon from './icons/FilledHeartIcon';
import HeartIcon from './icons/HeartIcon';
import Button from './ui/Button';
function UnitCard({
project,
unitNo,
floor,
unitType,
squareFt,
salesPrice,
id,
noOfBathrooms,
unitView,
suitsArea,
noOfParkingSpace,
state,
balconyArea,
}: IUnit) {
const { units, setUnits} = useFavorites();
const [isFavorite, setIsFavorite] = useState(false);
function UnitCard({ unit }: { unit: IUnit }) {
const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
function handleFavorite() {
setIsFavorite(!isFavorite);
if (isFavorite) {
setUnits(units.filter((unit) => unit.id !== id));
if (favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id)) {
setFavoriteUnits(
favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id)
);
} else {
setUnits([...units, {
id: id,
project: project,
unitNo: unitNo,
floor: floor,
unitType: unitType,
squareFt: squareFt,
salesPrice: salesPrice,
noOfBathrooms: noOfBathrooms,
unitView: unitView,
suitsArea: suitsArea,
noOfParkingSpace: noOfParkingSpace,
state: state,
balconyArea: balconyArea,
}])
setFavoriteUnits([...favoriteUnits, unit]);
}
}
}
useEffect(() => {
setIsFavorite(units.some((unit) => unit.id === id));
}, [id, units]);
return (
<div className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] rounded-2xl flex flex-col justify-between 2xl:gap-[1.111vw] gap-4 bg-white 2xl:aspect-[332/396] md:max-2xl:aspect-[352/396] aspect-[328/396]">
<div className="flex items-center justify-between">
<div className="2xl:space-y-[0.278vw] space-y-1">
<p className="text-s text-[#00BED7]">{project}</p>
<div className="flex items-center 2xl:gap-[0.556vw] gap-2">
<p className="text-caption-m">
{(unitNo.split("-")[0] === "W" ? "West" : "East") + " Wing"}
<div className='2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] rounded-2xl flex flex-col justify-between 2xl:gap-[1.111vw] gap-4 bg-white 2xl:aspect-[332/396] md:max-2xl:aspect-[352/396] aspect-[328/396]'>
<div className='flex items-center justify-between'>
<div className='2xl:space-y-[0.278vw] space-y-1'>
<p className='text-s text-[#00BED7]'>{unit.project}</p>
<div className='flex items-center 2xl:gap-[0.556vw] gap-2'>
<p className='text-caption-m'>
{(unit.unitNo.split('-')[0] === 'W' ? 'West' : 'East') + ' Wing'}
</p>
<div className="2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full" />
<p className="text-caption-m">Floor {floor}</p>
<div className="2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full" />
<p className="text-caption-m">{unitNo}</p>
<div className='2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full' />
<p className='text-caption-m'>Floor {unit.floor}</p>
<div className='2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full' />
<p className='text-caption-m'>{unit.unitNo}</p>
</div>
</div>
<Button onlyIcon variant="secondary">
<span className="2xl:w-[1.389vw] w-5 aspect-square text-[#0D1922]/70">
<HeartIcon onClick={handleFavorite} isFavorite={isFavorite}/>
<Button onlyIcon variant='secondary' onClick={handleFavorite}>
<span className='2xl:w-[1.389vw] w-5 aspect-square text-[#0D1922]/70'>
{favoriteUnits.some(
(favoriteUnit) => favoriteUnit.id === unit.id
) ? (
<FilledHeartIcon />
) : (
<HeartIcon />
)}
</span>
</Button>
</div>
<div className="2xl:space-y-[0.278vw] space-y-1">
<p className="text-s">
{unitType},{" "}
{squareFt.toLocaleString(undefined, { maximumFractionDigits: 2 })}{" "}
Sqft
<div className='2xl:space-y-[0.278vw] space-y-1'>
<p className='text-s'>
{`${unit.unitType}, ${unit.squareFt.toLocaleString(undefined, {
maximumFractionDigits: 2,
})} Sqft`}
</p>
<p className="text-[#00BED7] text-subheadline-s font-medium">
AED {Intl.NumberFormat("en").format(salesPrice)}
<p className='text-[#00BED7] text-subheadline-s font-medium'>
{`AED ${Intl.NumberFormat('ar-AE', {
currency: 'AED',
minimumFractionDigits: 0,
}).format(unit.salesPrice)}`}
</p>
</div>
</div>
src/components/icons/FilledHeartIcon.tsx
+15
View File
@@ -0,0 +1,15 @@
function FilledHeartIcon() {
return (
<svg viewBox="0 0 20 20" fill='currentColor' xmlns="http://www.w3.org/2000/svg" >
<path
d="M15.683 5.965a3.404 3.404 0 0 0-4.75 0L10 6.881l-.934-.916a3.404 3.404 0 0 0-4.75 0 3.25 3.25 0 0 0 0 4.66L10 16.666l5.683-6.043a3.25 3.25 0 0 0 0-4.659Z"
stroke="currentColor"
strokeOpacity={0.7}
strokeWidth={1.5}
strokeLinecap="round"
/>
</svg>
);
}
export default FilledHeartIcon;
src/components/icons/HeartIcon.tsx
+5 -5
View File
@@ -1,12 +1,12 @@
function HeartIcon({ onClick, isFavorite }: { onClick: () => void, isFavorite: boolean }) {
function HeartIcon() {
return (
<svg viewBox="0 0 20 20" fill={isFavorite ? 'black' : 'none'} xmlns="http://www.w3.org/2000/svg" onClick={() => { onClick() }}>
<svg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d="M15.683 5.965a3.404 3.404 0 0 0-4.75 0L10 6.881l-.934-.916a3.404 3.404 0 0 0-4.75 0 3.25 3.25 0 0 0 0 4.66L10 16.666l5.683-6.043a3.25 3.25 0 0 0 0-4.659Z"
stroke="currentColor"
d='M15.683 5.965a3.404 3.404 0 0 0-4.75 0L10 6.881l-.934-.916a3.404 3.404 0 0 0-4.75 0 3.25 3.25 0 0 0 0 4.66L10 16.666l5.683-6.043a3.25 3.25 0 0 0 0-4.659Z'
stroke='currentColor'
strokeOpacity={0.7}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinecap='round'
/>
</svg>
);
src/main.tsx
+3 -3
View File
@@ -9,7 +9,7 @@ import ComplexPage from "./pages/ComplexPage.tsx";
import FloorsPage from "./pages/FloorsPage.tsx";
import UnitTypesPage from "./pages/UnitTypesPage.tsx";
import AboutPage from "./pages/AboutPages.tsx";
import FavouritesPage from "./pages/FavouritesPage.tsx";
import FavoritesPage from "./pages/FavouritesPage.tsx";
import SearchPage from "./pages/SearchPage.tsx";
import LayoutWithoutFooter from "./layout/LayoutWithoutFooter.tsx";
import { queryClient } from "./lib/queryClient.ts";
@@ -27,8 +27,8 @@ const route = createBrowserRouter([
element: <AboutPage />,
},
{
path: "/favourites",
element: <FavouritesPage />,
path: "/favorites",
element: <FavoritesPage />,
},
{
path: "/search",
src/pages/FavouritesPage.tsx
+25 -25
View File
@@ -4,10 +4,11 @@ import { projects } from '../data/projects';
import Select from '../components/ui/Select';
import Button from '../components/ui/Button';
import ChartIcon from '../components/icons/ChartIcon';
import { useFavorites } from '../stores/useFavorites';
import { useFavoritesUnitsStore } from '../stores/useFavoritesUnitsStore';
import UnitCard from '../components/UnitCard';
function FavouritesPage() {
const { units } = useFavorites();
function FavoritesPage() {
const { favoriteUnits } = useFavoritesUnitsStore();
return (
<div className='flex flex-col gap-6'>
<div
@@ -17,7 +18,7 @@ function FavouritesPage() {
)}
>
<div className='2xl:space-y-[1.111vw] space-y-4'>
<p className='2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-semibold leading-[135%]'>
<p className='2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-medium leading-[135%]'>
Favorites
</p>
<ProjectSelect
@@ -28,29 +29,28 @@ function FavouritesPage() {
</div>
</div>
<div className='px-8'>
<div className='flex gap-4'>
<Select
options={['All', 'Favorites']}
onSelect={() => {}}
defaultOption='All'
className='w-[22.778vw]'
/>
<Button variant='secondary' size='large' className='text-black'>
<div className='2xl:w-[1.667vw] 2xl:h-[1.667vw] w-6 h-6'>
<ChartIcon />
</div>
<p className='text-m leading-0'>Compare</p>
</Button>
<div className='flex gap-4'>
<Select
options={['All', 'Favorites']}
onSelect={() => {}}
defaultOption='All'
className='w-[22.778vw]'
/>
<Button variant='secondary' size='large' className='text-black'>
<div className='2xl:w-[1.667vw] 2xl:h-[1.667vw] w-6 h-6'>
<ChartIcon />
</div>
<p className='text-m leading-0'>Compare</p>
</Button>
</div>
<div className='2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4 py-6'>
{favoriteUnits.map((unit) => (
<UnitCard key={unit.id} unit={unit} />
))}
</div>
</div>
<div className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4 py-6">
{units.map((unit) => (
<UnitCard key={unit.id} {...unit} />
))}
</div>
</div>
</div>
);
}
export default FavouritesPage;
export default FavoritesPage;
src/pages/SearchPage.tsx
+54 -54
View File
@@ -1,23 +1,23 @@
import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
import { api } from "../api/ky";
import { IUnit } from "../types/IUnit";
import UnitCard from "../components/UnitCard";
import { useEffect, useRef, useState } from "react";
import SearchFilters, { Filters } from "../components/SearchFilters";
import { useSearchParams } from "react-router";
import Button from "../components/ui/Button";
import FiltersIcon from "../components/icons/FiltersIcon";
import RestartIcon from "../components/icons/RestartIcon";
import clsx from "clsx";
import { AnimatePresence, motion } from "motion/react";
import { useDebounce } from "../hooks/useDebounce";
import Select from "../components/ui/Select";
import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
import { api } from '../api/ky';
import { IUnit } from '../types/IUnit';
import UnitCard from '../components/UnitCard';
import { useEffect, useRef, useState } from 'react';
import SearchFilters, { Filters } from '../components/SearchFilters';
import { useSearchParams } from 'react-router';
import Button from '../components/ui/Button';
import FiltersIcon from '../components/icons/FiltersIcon';
import RestartIcon from '../components/icons/RestartIcon';
import clsx from 'clsx';
import { AnimatePresence, motion } from 'motion/react';
import { useDebounce } from '../hooks/useDebounce';
import Select from '../components/ui/Select';
const SORT_OPTIONS = {
"Sort by ascending price": "cost asc",
"Sort by descending price": "cost desc",
"Sort by ascending area": "sqft asc",
"Sort by descending area": "sqft desc",
'Sort by ascending price': 'cost asc',
'Sort by descending price': 'cost desc',
'Sort by ascending area': 'sqft asc',
'Sort by descending area': 'sqft desc',
};
const STEP = 12;
@@ -25,9 +25,9 @@ const STEP = 12;
function SearchPage() {
const [searchParams] = useSearchParams();
const project = searchParams.get("project");
const unitTypes = searchParams.getAll("unitTypes");
const view = searchParams.get("view");
const project = searchParams.get('project');
const unitTypes = searchParams.getAll('unitTypes');
const view = searchParams.get('view');
const [filtersInModal, setFiltersInModal] = useState(false);
@@ -40,14 +40,14 @@ function SearchPage() {
const debouncedArea = useDebounce(area, 500);
const [sort, setSort] = useState<keyof typeof SORT_OPTIONS>(
"Sort by ascending price"
'Sort by ascending price'
);
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
useInfiniteQuery({
initialPageParam: 0,
queryKey: [
"units",
'units',
project,
unitTypes,
view,
@@ -68,22 +68,22 @@ function SearchPage() {
await api
.get(
`units?offset=${pageParam}&limit=${STEP}${
project ? `&project=${project}` : ""
}${unitTypes.map((unitType) => `&unitTypes=${unitType}`).join("")}${
view ? `&view=${view}` : ""
project ? `&project=${project}` : ''
}${unitTypes.map((unitType) => `&unitTypes=${unitType}`).join('')}${
view ? `&view=${view}` : ''
}${
debouncedCost.length > 0
? `&cost=${debouncedCost.map(Math.round).join(",")}`
: ""
? `&cost=${debouncedCost.map(Math.round).join(',')}`
: ''
}${
debouncedFloor.length > 0
? `&floor=${debouncedFloor.map(Math.round).join(",")}`
: ""
? `&floor=${debouncedFloor.map(Math.round).join(',')}`
: ''
}${
debouncedArea.length > 0
? `&area=${debouncedArea.map(Math.round).join(",")}`
: ""
}${sort ? `&order=${SORT_OPTIONS[sort].split(" ").join(",")}` : ""}`
? `&area=${debouncedArea.map(Math.round).join(',')}`
: ''
}${sort ? `&order=${SORT_OPTIONS[sort].split(' ').join(',')}` : ''}`
)
.json<IUnit[]>(),
getNextPageParam: (lastPage, _, lastPageIndex) =>
@@ -100,7 +100,7 @@ function SearchPage() {
(entries) => {
if (entries[0].isIntersecting) fetchNextPage();
},
{ rootMargin: "-200px" }
{ rootMargin: '-200px' }
);
if (observerElement) observer.observe(observerElement);
@@ -126,7 +126,7 @@ function SearchPage() {
const [footerReached, setFooterReached] = useState(false);
useEffect(() => {
const footer = document.querySelector("footer");
const footer = document.querySelector('footer');
const observer = new IntersectionObserver((entries) =>
setFooterReached(entries[0].isIntersecting)
);
@@ -142,7 +142,7 @@ function SearchPage() {
const queryClient = useQueryClient();
useEffect(() => {
const filters = queryClient.getQueryData<Filters>(["filters", project]);
const filters = queryClient.getQueryData<Filters>(['filters', project]);
if (filters) {
setActiveFiltersCount(
+!!view +
@@ -176,15 +176,15 @@ function SearchPage() {
setInModal={setFiltersInModal}
{...{ area, cost, floor, setArea, setCost, setFloor }}
/>
<div className="2xl:p-[2.222vw] p-4 min-h-dvh 2xl:space-y-[1.111vw] space-y-4">
<div className='2xl:p-[2.222vw] p-4 min-h-dvh 2xl:space-y-[1.111vw] space-y-4'>
<Select
options={Object.keys(SORT_OPTIONS)}
defaultOption={sort}
onSelect={(opt) => setSort(opt as keyof typeof SORT_OPTIONS)}
className="2xl:max-w-[22.778vw] md:max-2xl:max-w-[45.833vw]"
className='2xl:max-w-[22.778vw] md:max-2xl:max-w-[45.833vw]'
/>
<hr className="2xl:h-[0.069vw] border-[#E2E2DC]" />
<AnimatePresence mode="wait">
<hr className='2xl:h-[0.069vw] border-[#E2E2DC]' />
<AnimatePresence mode='wait'>
{project &&
unitTypes &&
debouncedCost &&
@@ -204,10 +204,10 @@ function SearchPage() {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4"
className='2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4'
>
{data?.pages.map((page) =>
page.map((unit) => <UnitCard key={unit.id} {...unit} />)
page.map((unit) => <UnitCard key={unit.id} unit={unit} />)
)}
</motion.div>
)}
@@ -216,34 +216,34 @@ function SearchPage() {
{showButtons && (
<div
className={clsx(
"fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all",
'fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all',
footerReached && !hasNextPage
? "top-[calc(100dvh-17.222vw)] translate-y-0"
: "top-[calc(100dvh-2.222vw)] -translate-y-full"
? 'top-[calc(100dvh-17.222vw)] translate-y-0'
: 'top-[calc(100dvh-2.222vw)] -translate-y-full'
)}
>
<Button onClick={() => setFiltersInModal(true)} className="relative">
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white">
<Button onClick={() => setFiltersInModal(true)} className='relative'>
<span className='2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white'>
<FiltersIcon />
</span>
<span className="text-caption-m">Filters</span>
<span className='text-caption-m'>Filters</span>
{!!activeFiltersCount && (
<div className="absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 text-caption-s aspect-square bg-white text-[#00BED7]">
<div className='absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 text-caption-s aspect-square bg-white text-[#00BED7]'>
{activeFiltersCount}
</div>
)}
</Button>
<Button
variant="secondary"
className="2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]"
variant='secondary'
className='2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]'
onClick={() => {
window.location.href = "/search";
window.location.href = '/search';
}}
>
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-[#0D1922]/70">
<span className='2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-[#0D1922]/70'>
<RestartIcon />
</span>
<span className="text-caption-m">Reset</span>
<span className='text-caption-m'>Reset</span>
</Button>
</div>
)}
src/stores/useFavorites.ts
-18
View File
@@ -1,18 +0,0 @@
import { create } from 'zustand';
import { IUnit } from '../types/IUnit';
import { persist } from 'zustand/middleware';
export interface FavoriteStore {
units: IUnit[];
setUnits: (units: IUnit[]) => void;
}
export const useFavorites = create<FavoriteStore>()(
persist(
(set) => ({
units: [],
setUnits: (units: IUnit[]) => set({ units }),
}),
{ name: 'favorites' }
)
);
src/stores/useFavoritesUnitsStore.ts
+18
View File
@@ -0,0 +1,18 @@
import { create } from 'zustand';
import { IUnit } from '../types/IUnit';
import { persist } from 'zustand/middleware';
export interface FavoriteStore {
favoriteUnits: IUnit[];
setFavoriteUnits: (units: IUnit[]) => void;
}
export const useFavoritesUnitsStore = create<FavoriteStore>()(
persist(
(set) => ({
favoriteUnits: [],
setFavoriteUnits: (units: IUnit[]) => set({ favoriteUnits: units }),
}),
{ name: 'favorites' }
)
);