IRTH-Touch/client/src/pages/Favorites.tsx

import { useState, useEffect } from "react";
import { sortCardBy } from "../calc/sortCard";
import Button from "../components/Button";
import Footer from "../components/Footer";
import TrashIcon from "../components/icons/TrashIcon";
import SortButton from "../components/searchPage/SortButton";
import { initialSortList } from "../consts/initialSearchPage";
import { ILayoutCard } from "../types/layoutCard";
import Switch from "../components/Switch";
import { ISwitcher } from "../types/switcher";
import FavoritesSlider from "../components/favoritesPage/FavoriteSlider";
import FavoriteCardList from "../components/favoritesPage/FavoriteCardList";

const favoriteCards: ILayoutCard[] = [
  {
    id: "1",
    roveHome: "Marasi Drive",
    apartmentType: "Studio Flex",
    wing: "East Wing",
    floorStart: 11,
    floorEnd: 35,
    units: 234,
    cost: 10488888,
    square: 619,
  },
  {
    id: "2",
    roveHome: "Marasi Drive",
    apartmentType: "1 Bedroom",
    wing: "East Wing",
    floorStart: 11,
    floorEnd: 35,
    units: 234,
    cost: 1668888,
    square: 619,
  },
  {
    id: "3",
    roveHome: "Marasi Drive",
    apartmentType: "1 Bedroom",
    wing: "East Wing",
    floorStart: 11,
    floorEnd: 35,
    units: 234,
    cost: 1668888,
    square: 609,
  },
  {
    id: "4",
    roveHome: "Marasi Drive",
    apartmentType: "1 Bedroom",
    wing: "East Wing",
    floorStart: 11,
    floorEnd: 35,
    units: 234,
    cost: 1138888,
    square: 609,
  },
  {
    id: "5",
    roveHome: "Marasi Drive",
    apartmentType: "Studio Flex",
    wing: "East Wing",
    floorStart: 11,
    floorEnd: 35,
    units: 234,
    cost: 10488888,
    square: 609,
  },
  {
    id: "6",
    roveHome: "Marasi Drive",
    apartmentType: "1 Bedroom",
    wing: "East Wing",
    floorStart: 11,
    floorEnd: 35,
    units: 234,
    cost: 1668888,
    square: 609,
  },
  {
    id: "7",
    roveHome: "Marasi Drive",
    apartmentType: "1 Bedroom",
    wing: "East Wing",
    floorStart: 11,
    floorEnd: 35,
    units: 234,
    cost: 1668888,
    square: 609,
  },
  {
    id: "8",
    roveHome: "Marasi Drive",
    apartmentType: "1 Bedroom",
    wing: "East Wing",
    floorStart: 11,
    floorEnd: 35,
    units: 234,
    cost: 1138888,
    square: 609,
  },
  {
    id: "9",
    roveHome: "Marasi Drive",
    apartmentType: "Studio Flex",
    wing: "East Wing",
    floorStart: 11,
    floorEnd: 35,
    units: 234,
    cost: 10488888,
    square: 609,
  },
  {
    id: "10",
    roveHome: "Marasi Drive",
    apartmentType: "1 Bedroom",
    wing: "East Wing",
    floorStart: 11,
    floorEnd: 35,
    units: 234,
    cost: 1668888,
    square: 609,
  },
  {
    id: "11",
    roveHome: "Marasi Drive",
    apartmentType: "1 Bedroom",
    wing: "East Wing",
    floorStart: 11,
    floorEnd: 35,
    units: 234,
    cost: 1668888,
    square: 609,
  },
  {
    id: "12",
    roveHome: "Marasi Drive",
    apartmentType: "1 Bedroom",
    wing: "East Wing",
    floorStart: 11,
    floorEnd: 35,
    units: 234,
    cost: 1138888,
    square: 609,
  },
];

const initialCollectionCompareSwitcher: ISwitcher = {
  id: "1",
  title: "collection/compare",
  isSwitched: false,
};

const Favorites = () => {
  const [sortList, setSortList] = useState(initialSortList);
  const [cards, setCards] = useState(favoriteCards);
  const [switcher, setSwitcher] = useState(initialCollectionCompareSwitcher);

  const handleOnSortClick = (sortId: string) => {
    const updatedSortList = sortList.map((sort) => {
      const isSelected = sort.id === sortId;
      return { ...sort, isSelected: isSelected };
    });
    setSortList(updatedSortList);
  };

  const handleOnSwitchClick = () => {
    setSwitcher((prev) => {
      return { ...prev, isSwitched: !prev.isSwitched };
    });
  };

  useEffect(() => {
    const sortedCards = sortCardBy(sortList, favoriteCards);

    setCards(sortedCards);
  }, [sortList]);

  return (
    <div className="overflow-scroll h-screen w-screen pt-14">
      <div className="p-6 pb-16">
        <div className="pb-6">
          <div className="flex justify-between w-full items-center border-b pb-[11px]">
            <div className="flex items-center gap-8">
              <div className="flex gap-4 font-semibold text-subheadline-s leading-7 py-[6px]">
                <h2 className="text-[#0D1922]">Units</h2>
                <p className="text-[#73787C]">145</p>
              </div>
              <SortButton sortList={sortList} onClick={handleOnSortClick} />
            </div>
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-2">
                <Button
                  buttonType="tertiary"
                  icon={<TrashIcon />}
                  className="text-[#73787C]"
                  text="Remove all"
                />
                <div className="flex gap-2 items-center text-s">
                  <p
                    className={`transition-all duration-300 ease-in-out ${
                      !switcher.isSwitched ? "text-[#0D1922]" : "text-[#73787C]"
                    }`}
                  >
                    Collection
                  </p>
                  <Switch switcher={switcher} onClick={handleOnSwitchClick} />
                  <p
                    className={`transition-all duration-300 ease-in-out ${
                      switcher.isSwitched ? "text-[#0D1922]" : "text-[#73787C]"
                    }`}
                  >
                    Compare
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        {switcher.isSwitched ? (
          <FavoritesSlider cards={cards} />
        ) : (
          <FavoriteCardList cards={cards} />
        )}
      </div>
      <Footer />
    </div>
  );
};

export default Favorites;