93 lines
2.9 KiB
TypeScript
93 lines
2.9 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import Button from "../Button";
|
|
import HeartIcon from "../icons/Heart";
|
|
import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
|
|
import { IAparmentRes } from "../../types/apartmentsRes";
|
|
import useFavorites from "../../store/useFavorites";
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface ButtonPanelProps {
|
|
currentApartment: IAparmentRes;
|
|
}
|
|
|
|
const ButtonPanel = ({ currentApartment }: ButtonPanelProps) => {
|
|
const navigate = useNavigate();
|
|
const unitNo = currentApartment.Unit_No.split("-")[1];
|
|
const [isFavorite, setIsFavorite] = useState(false);
|
|
const { setFavorites } = useFavorites();
|
|
|
|
const handleOnBackClick = () => {
|
|
navigate("../search");
|
|
};
|
|
|
|
const handleOnFavoriteClick = (
|
|
e: React.MouseEvent<HTMLButtonElement, MouseEvent>
|
|
) => {
|
|
e.stopPropagation();
|
|
const favorites = localStorage.getItem("Favorites");
|
|
|
|
if (!favorites) {
|
|
setIsFavorite(true);
|
|
const updatedFavorites = JSON.stringify([currentApartment]);
|
|
|
|
localStorage.setItem("Favorites", updatedFavorites);
|
|
} else {
|
|
const _favorites = JSON.parse(favorites) as IAparmentRes[];
|
|
|
|
if (_favorites.some((apart) => apart.id === currentApartment.id)) {
|
|
setIsFavorite(false);
|
|
const updatedFavorites = [..._favorites].filter(
|
|
(apart) => apart.id !== currentApartment.id
|
|
);
|
|
const convertedFavorites = JSON.stringify(updatedFavorites);
|
|
setFavorites(updatedFavorites);
|
|
localStorage.setItem("Favorites", convertedFavorites);
|
|
} else {
|
|
setIsFavorite(true);
|
|
const updatedFavorites = [..._favorites, currentApartment];
|
|
setFavorites(updatedFavorites);
|
|
const convertedFavorites = JSON.stringify(updatedFavorites);
|
|
localStorage.setItem("Favorites", convertedFavorites);
|
|
}
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const favorites = localStorage.getItem("Favorites");
|
|
if (favorites) {
|
|
const _isFavorite = (JSON.parse(favorites) as IAparmentRes[]).some(
|
|
(apart) => apart.id === currentApartment.id
|
|
);
|
|
setIsFavorite(_isFavorite);
|
|
}
|
|
}, [currentApartment.id]);
|
|
|
|
return (
|
|
<div className="flex justify-between w-full gap-4 items-center pb-3">
|
|
<div className="flex gap-4 items-center ">
|
|
<Button
|
|
icon={<LeftArrowSliderIcon />}
|
|
buttonType="cta"
|
|
onClick={handleOnBackClick}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-[#73787C] text-caption-m font-semibold">
|
|
№ {unitNo}
|
|
</p>
|
|
<h2 className="text-subheadline-s font-semibold text-[#0D1922]">
|
|
{currentApartment.Unit_Type}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
buttonType="favorite"
|
|
icon={<HeartIcon isFilled={isFavorite} />}
|
|
isCircleRounded
|
|
onClick={handleOnFavoriteClick}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ButtonPanel;
|