diff --git a/.env b/.env
index e9d4e84..0b988dc 100644
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
-VITE_API_URL=http://194.26.138.94:4002
\ No newline at end of file
+VITE_API_URL=http://localhost:4002
+# VITE_API_URL=http://194.26.138.94:4002
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 7c7bf0b..0b3c2e6 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -145,25 +145,59 @@ function Header() {
Rove Home Marasi Drive
- {[
- "Rove Main Brochure",
- "Rove Amenties Brochure",
- "Rove Technical Brochure",
- ].map((title) => (
-
Rove Home Downtown
- {[
- "Rove Main Brochure",
- "Rove Amenties Brochure",
- "Rove Technical Brochure",
- ].map((title) => (
-
@@ -268,25 +302,59 @@ function BrochuresDropdown() {
Rove Home Marasi Drive
- {[
- "Rove Main Brochure",
- "Rove Amenties Brochure",
- "Rove Technical Brochure",
- ].map((title) => (
-
Rove Home Downtown
- {[
- "Rove Main Brochure",
- "Rove Amenties Brochure",
- "Rove Technical Brochure",
- ].map((title) => (
-
@@ -296,12 +364,29 @@ function BrochuresDropdown() {
);
}
-export function BrochureButton({ title }: { title: string }) {
+export function BrochureButton({
+ title,
+ link,
+}: {
+ title: string;
+ link: string;
+}) {
+ const handleDownload = () => {
+ const anchor = document.createElement("a");
+ anchor.href = link;
+ anchor.download = title; // Use the title as the filename
+ anchor.style.display = "none";
+ document.body.appendChild(anchor);
+ anchor.click();
+ document.body.removeChild(anchor);
+ };
+
return (
{title}
diff --git a/src/components/SearchFilters.tsx b/src/components/SearchFilters.tsx
index 5aff046..56adb0e 100644
--- a/src/components/SearchFilters.tsx
+++ b/src/components/SearchFilters.tsx
@@ -3,7 +3,7 @@ import { useQuery } from "@tanstack/react-query";
import RestartIcon from "./icons/RestartIcon";
import Button from "./ui/Button";
import { api } from "../api/ky";
-import { RefObject, useEffect, useState } from "react";
+import { RefObject, useEffect } from "react";
import { projects } from "../data/projects";
import clsx from "clsx";
import ProjectSelect from "./ProjectSelect";
@@ -29,6 +29,13 @@ function SearchFilters({
view,
setView,
ref,
+ project,
+ setProject,
+ allUnitTypes,
+ allCost,
+ allFloors,
+ allArea,
+ allViews,
}: {
inModal?: boolean;
setInModal: (inModal: boolean) => void;
@@ -43,59 +50,17 @@ function SearchFilters({
setSelectedUnitTypes: (selectedUnitTypes: string[]) => void;
view: string;
setView: (view: string) => void;
+ project: string;
+ setProject: (project: string) => void;
+ allUnitTypes: string[];
+ allCost: { min: number; max: number };
+ allFloors: { min: number; max: number };
+ allArea: { min: number; max: number };
+ allViews: string[];
}) {
- const [project, setProject] = useState("Rove Home Marasi Drive");
+ // const [project, setProject] = useState("Rove Home Marasi Drive");
- const { data: allUnitTypes } = useQuery({
- queryKey: ["filters", "unitTypes", project],
- queryFn: () =>
- api.get(`units/filters/unitTypes?project=${project}`).json(),
- });
- const { data: allViews } = useQuery({
- queryKey: ["filters", "views", project],
- queryFn: () =>
- api.get(`units/filters/views?project=${project}`).json(),
- });
-
- const { data: allFloors } = useQuery({
- queryKey: ["filters", "floors", project],
- queryFn: () =>
- api.get(`units/filters/floor?project=${project}`).json<{
- min: number;
- max: number;
- }>(),
- });
-
- const { data: allCost } = useQuery({
- queryKey: ["filters", "cost", project],
- queryFn: () =>
- api.get(`units/filters/cost?project=${project}`).json<{
- min: number;
- max: number;
- }>(),
- });
-
- const { data: allArea } = useQuery({
- queryKey: ["filters", "area", project],
- queryFn: () =>
- api.get(`units/filters/area?project=${project}`).json<{
- min: number;
- max: number;
- }>(),
- });
-
- useEffect(() => {
- if (allFloors) setFloor([allFloors.min, allFloors.max]);
- }, [allFloors]);
-
- useEffect(() => {
- if (allCost) setCost([allCost.min, allCost.max]);
- }, [allCost]);
-
- useEffect(() => {
- if (allArea) setArea([allArea.min, allArea.max]);
- }, [allArea]);
// useQuery({
// queryKey: ["filters", "unitTypes", project],
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
index 3b86ee0..bdae6cb 100644
--- a/src/pages/SearchPage.tsx
+++ b/src/pages/SearchPage.tsx
@@ -1,4 +1,5 @@
-import { useInfiniteQuery } from "@tanstack/react-query";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
import { api } from "../api/ky";
import { IUnit } from "../types/IUnit";
import UnitCard from "../components/UnitCard";
@@ -18,9 +19,9 @@ const STEP = 12;
function SearchPage() {
const [searchParams] = useSearchParams();
-
- // const project = searchParams.get("project");
- const [project] = useState("Rove Home Marasi Drive");
+ const [project, setProject] = useState(
+ searchParams.get("project") || "Rove Home Marasi Drive"
+ );
const [selectedUnitTypes, setSelectedUnitTypes] = useState([]);
// const unitTypes = searchParams.getAll("unitTypes");
// const view = searchParams.get("view");
@@ -36,6 +37,104 @@ function SearchPage() {
"Sort by ascending price"
);
+ const filtersRef = useRef(null);
+ const observerRef = useRef(null);
+
+ useEffect(() => window.scrollTo({ top: 0, behavior: "smooth" }), []);
+
+ const [showButtons, setShowButtons] = useState(false);
+
+ useEffect(() => {
+ const observerElement = filtersRef.current;
+ const observer = new IntersectionObserver((entries) =>
+ setShowButtons(!entries[0].isIntersecting)
+ );
+ if (observerElement) observer.observe(observerElement);
+
+ return () => {
+ if (observerElement) observer.unobserve(observerElement);
+ };
+ }, []);
+
+ const [footerReached, setFooterReached] = useState(false);
+
+ useEffect(() => {
+ const footer = document.querySelector("footer");
+ const observer = new IntersectionObserver((entries) =>
+ setFooterReached(entries[0].isIntersecting)
+ );
+ if (footer) observer.observe(footer);
+
+ return () => {
+ if (footer) observer.unobserve(footer);
+ };
+ }, []);
+
+ const [activeFiltersCount, setActiveFiltersCount] = useState(0);
+
+ useEffect(
+ () =>
+ setActiveFiltersCount(
+ +searchParams.has("view") +
+ +searchParams.has("unitTypes") +
+ +searchParams.has("cost") +
+ +searchParams.has("floor") +
+ +searchParams.has("area")
+ ),
+ [searchParams]
+ );
+
+ const { data: allUnitTypes } = useQuery({
+ queryKey: ["filters", "unitTypes", project],
+ queryFn: () =>
+ api.get(`units/filters/unitTypes?project=${project}`).json(),
+ });
+
+ const { data: allViews } = useQuery({
+ queryKey: ["filters", "views", project],
+ queryFn: () =>
+ api.get(`units/filters/views?project=${project}`).json(),
+ });
+
+ const { data: allFloors } = useQuery({
+ queryKey: ["filters", "floors", project],
+ queryFn: () =>
+ api.get(`units/filters/floor?project=${project}`).json<{
+ min: number;
+ max: number;
+ }>(),
+ });
+
+ const { data: allCost } = useQuery({
+ queryKey: ["filters", "cost", project],
+ queryFn: () =>
+ api.get(`units/filters/cost?project=${project}`).json<{
+ min: number;
+ max: number;
+ }>(),
+ });
+
+ const { data: allArea } = useQuery({
+ queryKey: ["filters", "area", project],
+ queryFn: () =>
+ api.get(`units/filters/area?project=${project}`).json<{
+ min: number;
+ max: number;
+ }>(),
+ });
+
+ useEffect(() => {
+ if (allFloors) setFloor([allFloors.min, allFloors.max]);
+ }, [allFloors]);
+
+ useEffect(() => {
+ if (allCost) setCost([allCost.min, allCost.max]);
+ }, [allCost]);
+
+ useEffect(() => {
+ if (allArea) setArea([allArea.min, allArea.max]);
+ }, [allArea]);
+
const { data, fetchNextPage, isLoading, hasNextPage, isFetchingNextPage } =
useInfiniteQuery({
initialPageParam: 0,
@@ -83,11 +182,6 @@ function SearchPage() {
lastPage.length < STEP ? undefined : lastPageIndex + STEP,
});
- const filtersRef = useRef(null);
- const observerRef = useRef(null);
-
- useEffect(() => window.scrollTo({ top: 0, behavior: "smooth" }), []);
-
useEffect(() => {
if (!hasNextPage || isFetchingNextPage) return;
const observerElement = observerRef.current;
@@ -104,51 +198,16 @@ function SearchPage() {
};
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
- const [showButtons, setShowButtons] = useState(false);
-
- useEffect(() => {
- const observerElement = filtersRef.current;
- const observer = new IntersectionObserver((entries) =>
- setShowButtons(!entries[0].isIntersecting)
- );
- if (observerElement) observer.observe(observerElement);
-
- return () => {
- if (observerElement) observer.unobserve(observerElement);
- };
- }, []);
-
- const [footerReached, setFooterReached] = useState(false);
-
- useEffect(() => {
- const footer = document.querySelector("footer");
- const observer = new IntersectionObserver((entries) =>
- setFooterReached(entries[0].isIntersecting)
- );
- if (footer) observer.observe(footer);
-
- return () => {
- if (footer) observer.unobserve(footer);
- };
- }, []);
-
- const [activeFiltersCount, setActiveFiltersCount] = useState(0);
-
- useEffect(
- () =>
- setActiveFiltersCount(
- +searchParams.has("view") +
- +searchParams.has("unitTypes") +
- +searchParams.has("cost") +
- +searchParams.has("floor") +
- +searchParams.has("area")
- ),
- [searchParams]
- );
-
return (
<>