completed search page, some chasnges buttons in sequence

2025-04-30 13:05:02 +05:00
parent 8af3ed8f5e
commit f0f4e6f234
11 changed files with 189 additions and 69 deletions
@@ -6,7 +6,7 @@ interface CompassProps {

 function Compass({ imgStyle }: CompassProps) {
  return (
-    <div className="select-none">
+    <div>
      <img
        src="/images/map/compass.png"
        className={clsx(
@@ -16,7 +16,7 @@ function Compass({ imgStyle }: CompassProps) {
      />
      <img
        src="/images/map/compass-mobile.png"
-        className="min-w-10 w-[12.345vw] pointer-events-none absolute left-3 bottom-3 md:hidden"
+        className="min-w-10 w-10 pointer-events-none absolute left-4 bottom-4 md:hidden"
      />
    </div>
  );
@@ -8,11 +8,11 @@ export default function BottomButton() {

  return (
    <Button
-      size="medium"
+      size="small"
      variant="secondary"
      onClick={() => setModal(<DisclaimerModal />)}
    >
-      <span className="w-5 h-5 2xl:w-[1.389vw] 2xl:h-[1.389vw]">
+      <span className="w-4 h-4 2xl:w-[1.111vw] 2xl:h-[1.111vw]">
        <DisclaimerIcon />
      </span>
      <span>Disclaimer</span>
@@ -30,14 +30,8 @@ function FullScreenButton({
  if (isMobileSafari) return null;

  return (
-    <Button
-      onlyIcon
-      size="small"
-      variant="secondary"
-      className="absolute 2xl:top-[2.222vw] 2xl:right-[2.222vw] top-4 right-4"
-      onClick={handleClick}
-    >
-      <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
+    <Button onlyIcon size="small" variant="secondary" onClick={handleClick}>
+      <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
        {isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
      </span>
    </Button>
@@ -13,7 +13,7 @@ export default function PrivacyPolicyButton() {
      onlyIcon
      onClick={() => setModal(<PrivacyPolicyModal />)}
    >
-      <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+      <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
        <QuestionIcon />
      </span>
    </Button>
@@ -15,6 +15,7 @@ import Select from "./ui/Select";
 import { AnimatePresence, motion } from "motion/react";
 import CloseIcon from "./icons/CloseIcon";
 import Project from "../types/Project";
+import FiltersIcon from "./icons/FiltersIcon";

 export interface Filters {
  unitTypes: string[];
@@ -206,16 +207,16 @@ function SearchFilters({
    <>
      {inModal && (
        <div
-          className="fixed inset-0 2xl:top-[4.444vw] bg-[#0D1922]/40 cursor-pointer"
+          className="fixed inset-0 z-20 bg-[#0D1922]/40 cursor-pointer"
          onClick={handleClose}
        />
      )}
      <div
        ref={ref}
        className={clsx(
-          "2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] rounded-b-3xl 2xl:space-y-[2.222vw] md:max-2xl:space-y-8 space-y-4",
+          "2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] md:rounded-t-3xl 2xl:space-y-[2.222vw] space-y-8",
          inModal &&
-            "fixed 2xl:top-[calc(2.778vw+4.444vw)] 2xl:left-[2.778vw] 2xl:right-[2.778vw] 2xl:rounded-[1.667vw] rounded-3xl md:max-2xl:left-6 md:max-2xl:right-6 md:max-2xl:top-24"
+            "fixed z-20 max-md:pb-0 max-md:pt-6 2xl:top-[calc(2.778vw+4.444vw)] max-md:w-full 2xl:left-[2.222vw] 2xl:right-[2.222vw] 2xl:rounded-[1.667vw] md:max-2xl:rounded-3xl md:max-2xl:left-6 md:max-2xl:right-6 md:max-2xl:top-24 max-md:bottom-0 max-md:overflow-auto max-md:!rounded-t-3xl max-md:max-h-[calc(100dvh-40px)]"
        )}
      >
        {inModal && (
@@ -229,22 +230,38 @@ function SearchFilters({
            </div>
          </Button>
        )}
-        <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%]">
-            Search
-          </p>
-          {project && (
-            <ProjectSelect
-              projects={projects}
-              onSelect={handleSelectProject}
-              defaultProject={projects.find(({ title }) => title === project)!}
-            />
-          )}
+        <div className="2xl:space-y-[2.222vw] space-y-8">
+          <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%]">
+              {inModal ? "Filters" : "Search"}
+            </p>
+            <div className={clsx(!inModal && "max-md:hidden")}>
+              {project && (
+                <ProjectSelect
+                  projects={projects}
+                  onSelect={handleSelectProject}
+                  defaultProject={
+                    projects.find(({ title }) => title === project)!
+                  }
+                />
+              )}
+            </div>
+          </div>
+          <hr
+            className={clsx(
+              "2xl:h-[0.069vw] h-px border-[#E2E2DC]",
+              !inModal && "max-md:hidden"
+            )}
+          />
        </div>
-        <hr className="2xl:h-[0.069vw] h-px border-[#E2E2DC]" />
        {filters && (
          <>
-            <div className="2xl:space-y-[0.556vw] space-y-2">
+            <div
+              className={clsx(
+                "2xl:space-y-[0.556vw] space-y-2",
+                !inModal && "max-md:hidden"
+              )}
+            >
              <p className="text-s text-[#0D1922]/70">Apartment type</p>
              <UnitTypesSelect
                unitTypes={filters.unitTypes}
@@ -252,7 +269,12 @@ function SearchFilters({
                defaultSelected={unitTypes}
              />
            </div>
-            <div className="grid 2xl:grid-cols-4 md:max-2xl:grid-cols-2 md:max-2xl:grid-rows-2 2xl:gap-[1.111vw] gap-4">
+            <div
+              className={clsx(
+                "grid 2xl:grid-cols-4 md:max-2xl:grid-cols-2 md:max-2xl:grid-rows-2 2xl:gap-[1.111vw] gap-6",
+                !inModal && "max-md:hidden"
+              )}
+            >
              <MultiRangeSlider
                min={filters?.cost[0]}
                max={filters?.cost[1]}
@@ -287,9 +309,15 @@ function SearchFilters({
                onSelect={handleSelectView}
              />
            </div>
-            <div className="flex items-center 2xl:gap-[1.111vw] md:max-2xl:gap-4">
+            <div
+              className={clsx(
+                "flex items-center 2xl:gap-[1.111vw] md:max-2xl:gap-4 gap-2",
+                inModal &&
+                  "max-md:flex-col max-md:sticky max-md:shadow-[0px_-4px_20px_rgba(0,0,0,0.05)] max-md:rounded-t-2xl max-md:-m-4 max-md:p-4 bottom-0 bg-white"
+              )}
+            >
              {inModal ? (
-                <Button onClick={applyFilters}>
+                <Button onClick={applyFilters} className="max-md:w-full">
                  Show{" "}
                  <AnimatePresence mode="wait">
                    {count !== undefined && (
@@ -313,18 +341,49 @@ function SearchFilters({
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
-                      className="text-[#00BED7] text-s"
+                      className={clsx(
+                        "text-[#00BED7] text-s",
+                        !inModal && "max-md:hidden"
+                      )}
                    >
                      {count} Apartments found
                    </motion.p>
                  )}
                </AnimatePresence>
              )}
-              <Button variant="secondary" onClick={resetFilters}>
+              <Button
+                variant="secondary"
+                className={clsx(
+                  "hidden",
+                  !inModal && "max-md:flex !justify-center flex-1 !bg-[#F3F3F2]"
+                )}
+                onClick={() => setInModal(true)}
+              >
+                <div className="w-5 h-5">
+                  <FiltersIcon />
+                </div>
+                <p className="text-sm leading-0">Filters</p>
+              </Button>
+              <Button
+                variant="secondary"
+                onlyIcon={!inModal && innerWidth < 768}
+                onClick={resetFilters}
+                className={clsx(
+                  !inModal && "max-md:bg-[#F3F3F2]",
+                  "max-md:!transition-none"
+                )}
+              >
                <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
                  <RestartIcon />
                </span>
-                <p className="text-s">Reset filters</p>
+                <p
+                  className={clsx(
+                    "text-s max-md:w-full",
+                    !inModal && "max-md:hidden"
+                  )}
+                >
+                  Reset filters
+                </p>
              </Button>
            </div>
          </>
@@ -10,7 +10,6 @@ import Compass from "./Compass";
 import { useNavigate } from "react-router";
 import InfoIcon from "./icons/InfoIcon";
 import FullScreenButton from "./FullScreenButton";
-import BottomButton from "./DisclaimerButton";
 import PrivacyPolicyButton from "./PrivacyPolicyButton";
 import DisclaimerButton from "./DisclaimerButton";

@@ -167,9 +166,8 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
      </AnimatePresence>
      {imageLoaded === FRAME_COUNT && (
        <>
-          <div className="absolute flex 2xl:gap-[0.556vw] gap-2 2xl:left-[1.667vw] 2xl:top-[1.667vw] left-4 top-4">
+          <div className="absolute flex 2xl:gap-[0.556vw] justify-between gap-2 2xl:left-[2.222vw] 2xl:right-[2.222vw] 2xl:top-[2.222vw] max-w-full md:max-2xl:left-6 md:max-2xl:right-6 md:max-2xl:top-6 left-4 right-4 top-4">
            <Button
-              onlyIcon
              variant="secondary"
              className="!bg-white"
              onClick={() => navigate("/")}
@@ -177,54 +175,52 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
              <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
                <ArrowLeftIcon />
              </span>
+              <span className="max-md:hidden">Map</span>
            </Button>
            <Button variant="secondary" size="small" className="max-md:hidden">
              <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
                <InfoIcon />
              </span>
-              <span>About Complex</span>
+              <span>About</span>
            </Button>
          </div>
          <p className="absolute text-xl font-bold text-white -translate-x-1/2 select-none left-1/2 top-9 max-md:hidden">
            ROVE Home Marasi Drive
          </p>

-          <FullScreenButton
-            isFullScreen={isFullScreen}
-            onFullScreenChange={setIsFullScreen}
-            onClick={handleFullScreenClick}
-          />
-
          <Button
            onlyIcon
            variant="secondary"
-            className="absolute top-1/2 -translate-y-1/2 2xl:left-[1.111vw] left-4"
+            className="absolute top-1/2 -translate-y-1/2 2xl:left-[31.111vw] md:max-2xl:left-[8.854vw] left-4 !bg-[#0D1922]/40 backdrop-blur-md"
            roundedFull
            disabled={isAnimating || !isShowVideo}
            onClick={() => handleSwipe("prev")}
          >
-            <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+            <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white">
              <ArrowLeftIcon />
            </span>
          </Button>
          <Button
            onlyIcon
            variant="secondary"
-            className="absolute top-1/2 -translate-y-1/2 2xl:right-[1.111vw] right-4"
+            className="absolute top-1/2 -translate-y-1/2 2xl:right-[31.111vw] md:max-2xl:right-[8.854vw] right-4 !bg-[#0D1922]/40 backdrop-blur-md"
            roundedFull
            disabled={isAnimating || !isShowVideo}
            onClick={() => handleSwipe("next")}
          >
-            <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+            <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white">
              <ArrowRightIcon />
            </span>
          </Button>
-          <div className="max-md:hidden">
-            <Compass imgStyle={{ transform: `rotate(${currentIndex}deg)` }} />
-            <div className="absolute right-[28px] bottom-[32px] flex gap-2">
-              <DisclaimerButton />
-              <PrivacyPolicyButton />
-            </div>
+          <Compass imgStyle={{ transform: `rotate(${currentIndex}deg)` }} />
+          <div className="absolute 2xl:bottom-[2.222vw] 2xl:right-[2.222vw] 2xl:left-[2.222vw] max-w-full flex justify-end items-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:bottom-6 md:max-2xl:left-6 md:max-2xl:right-6 bottom-4 left-4 right-4">
+            <DisclaimerButton />
+            <PrivacyPolicyButton />
+            <FullScreenButton
+              isFullScreen={isFullScreen}
+              onFullScreenChange={setIsFullScreen}
+              onClick={handleFullScreenClick}
+            />
          </div>
        </>
      )}
@@ -19,7 +19,7 @@ function UnitTypesSelect({
  useEffect(() => onSelect(selectedUnitTypes), [selectedUnitTypes]);

  return (
-    <div className="flex 2xl:gap-[0.556vw] gap-2">
+    <div className="flex flex-wrap 2xl:gap-[0.556vw] gap-2">
      {unitTypes.map((unitType) => (
        <p
          key={unitType}
@@ -0,0 +1,14 @@
+function SortIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5 7h6.533M5 12h10M5 17h14"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export default SortIcon;
@@ -38,7 +38,7 @@ function Select({
      )}
      <button
        className={clsx(
-          "2xl:px-[1.111vw] px-4 2xl:py-[0.833vw] py-3 2xl:rounded-[0.833vw] rounded-xl 2xl:ring-[0.069vw] ring-1 transition-[box-shadow] w-full text-left flex items-center justify-between group",
+          "2xl:px-[1.111vw] px-4 2xl:py-[0.833vw] py-3 2xl:rounded-[0.833vw] rounded-xl 2xl:ring-[0.069vw] ring-1 transition-[box-shadow] w-full text-left flex items-center justify-between group bg-white",
          isShow ? " ring-[#00BED7]" : "ring-[#E2E2DC]"
        )}
        onClick={() => setIsShow(!isShow)}
@@ -1,5 +1,4 @@
 import "./index.css";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router";
@@ -61,7 +60,6 @@ createRoot(document.getElementById("root")!).render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={route} />
      <ModalContainer />
-      <ReactQueryDevtools />
    </QueryClientProvider>
  </>
 );
@@ -1,22 +1,29 @@
-import { useInfiniteQuery } from "@tanstack/react-query";
+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 from "../components/SearchFilters";
-import { useNavigate, useSearchParams } from "react-router";
+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",
+};

 const STEP = 12;

 function SearchPage() {
  const [searchParams] = useSearchParams();
-  const navigate = useNavigate();

  const project = searchParams.get("project");
  const unitTypes = searchParams.getAll("unitTypes");
@@ -32,6 +39,10 @@ function SearchPage() {
  const debouncedFloor = useDebounce(floor, 500);
  const debouncedArea = useDebounce(area, 500);

+  const [sort, setSort] = useState<keyof typeof SORT_OPTIONS>(
+    "Sort by ascending price"
+  );
+
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteQuery({
      initialPageParam: 0,
@@ -43,6 +54,7 @@ function SearchPage() {
        debouncedCost,
        debouncedFloor,
        debouncedArea,
+        sort,
      ],
      enabled:
        !!project &&
@@ -71,7 +83,7 @@ function SearchPage() {
              debouncedArea.length > 0
                ? `&area=${debouncedArea.map(Math.round).join(",")}`
                : ""
-            }`
+            }${sort ? `&order=${SORT_OPTIONS[sort].split(" ").join(",")}` : ""}`
          )
          .json<IUnit[]>(),
      getNextPageParam: (lastPage, _, lastPageIndex) =>
@@ -125,6 +137,37 @@ function SearchPage() {
    };
  }, []);

+  const [activeFiltersCount, setActiveFiltersCount] = useState(0);
+
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    const filters = queryClient.getQueryData<Filters>(["filters", project]);
+    if (filters) {
+      setActiveFiltersCount(
+        +!!view +
+          +!!unitTypes.length +
+          +(debouncedCost[0] !== filters.cost[0]) +
+          +(debouncedCost[1] !== filters.cost[1]) +
+          +(debouncedArea[0] !== filters.area[0]) +
+          +(debouncedArea[1] !== filters.area[1]) +
+          +(debouncedFloor[0] !== filters.floor[0]) +
+          +(debouncedFloor[1] !== filters.floor[1])
+      );
+    }
+  }, [
+    queryClient,
+    unitTypes,
+    view,
+    project,
+    debouncedCost,
+    cost,
+    debouncedArea,
+    area,
+    debouncedFloor,
+    floor,
+  ]);
+
  return (
    <>
      <SearchFilters
@@ -133,13 +176,21 @@ function SearchPage() {
        setInModal={setFiltersInModal}
        {...{ area, cost, floor, setArea, setCost, setFloor }}
      />
-      <div className="2xl:p-[2.222vw] p-4 min-h-dvh">
+      <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]"
+        />
+        <hr className="2xl:h-[0.069vw] border-[#E2E2DC]" />
        <AnimatePresence mode="wait">
          {project &&
            unitTypes &&
            debouncedCost &&
            debouncedArea &&
-            debouncedFloor && (
+            debouncedFloor &&
+            sort && (
              <motion.div
                key={
                  project +
@@ -147,7 +198,8 @@ function SearchPage() {
                  view +
                  debouncedCost +
                  debouncedArea +
-                  debouncedFloor
+                  debouncedFloor +
+                  sort
                }
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
@@ -170,16 +222,23 @@ function SearchPage() {
              : "top-[calc(100dvh-2.222vw)] -translate-y-full"
          )}
        >
-          <Button onClick={() => setFiltersInModal(true)}>
+          <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>
+            {!!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]">
+                {activeFiltersCount}
+              </div>
+            )}
          </Button>
          <Button
            variant="secondary"
            className="2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]"
-            onClick={() => navigate("/search")}
+            onClick={() => {
+              window.location.href = "/search";
+            }}
          >
            <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-[#0D1922]/70">
              <RestartIcon />