refactor: favorites units

2025-04-30 15:20:48 +05:00
parent a3ced4e696
commit e67513cdfe
10 changed files with 208 additions and 216 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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;
@@ -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>
  );