send data location with url to doctors and get it and show in page doctors

2025-05-03 06:50:02 +03:30
parent ad2d5a9b79
commit 5df5ffc1f9
4 changed files with 54 additions and 36 deletions
@@ -20,10 +20,12 @@ function ButtonFilter({ selected, setOpen }) {
        <p
          className={`text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
                    md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1
-                    ${selected && selected.first && selected.second ? "" : ""}`}
+                    ${
+                      selected && selected.province && selected.city ? "" : ""
+                    }`}
        >
-          {selected && selected.first && selected.second
-            ? `${selected.first} | ${selected.second}`
+          {selected && selected.province && selected.city
+            ? `${selected.province} | ${selected.city}`
            : "انتخاب شهر"}
        </p>
        <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
@@ -14,8 +14,8 @@ import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";

 function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
-  const secondSelected = selected.second;
-  const firstSelected = selected.first;
+  const provinceSelected = selected.province;
+  const citySelected = selected.city;
  const [states, setStates] = useState([]);
  const [cities, setCities] = useState([]);
  const [filteredCities, setFilteredCities] = useState([]);
@@ -43,9 +43,9 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {

  // Filter cities when state is selected
  useEffect(() => {
-    if (firstSelected) {
+    if (provinceSelected) {
      const selectedState = states.find(
-        (state) => state.label === firstSelected
+        (state) => state.label === provinceSelected
      );
      if (selectedState) {
        const stateId = selectedState.id;
@@ -56,14 +56,14 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
      }
    } else {
      setFilteredCities([]);
-      setSelected({ ...selected, second: "" });
+      setSelected({ ...selected, city: "" });
    }
-  }, [firstSelected, cities, states]);
+  }, [provinceSelected, cities, states]);

  const updateData = (event, name) => {
-    if (name === "first" && event !== firstSelected) {
+    if (name === "province" && event !== provinceSelected) {
      // If state changes, reset city selection
-      setSelected({ first: event, second: "" });
+      setSelected({ province: event, city: "" });
    } else {
      setSelected({ ...selected, [name]: event });
    }
@@ -89,25 +89,23 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
            <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
              <AutoCompleteSelect
                updateData={updateData}
-                value={selected && firstSelected}
+                value={selected && provinceSelected}
                list={states}
                label="استان"
-                name="first"
+                name="province"
              />
              <AutoCompleteSelect
                updateData={updateData}
                value={
                  selected &&
-                  secondSelected &&
-                  filteredCities.find(
-                    (item) => item.label === secondSelected
-                  ) &&
-                  secondSelected
+                  citySelected &&
+                  filteredCities.find((item) => item.label === citySelected) &&
+                  citySelected
                }
                list={filteredCities}
-                name="second"
+                name="city"
                label="شهر"
-                disabled={!firstSelected || filteredCities.length === 0}
+                disabled={!provinceSelected || filteredCities.length === 0}
              />
            </div>
            <div className="w-full flex justify-end">
@@ -116,7 +114,7 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
                onClick={handleClose}
                variant="contained"
                color="primary"
-                disabled={!firstSelected || !secondSelected}
+                disabled={!provinceSelected || !citySelected}
              >
                تایید و ادامه
                <ArrowLeftM />
@@ -5,9 +5,15 @@ import SearchBar from "./search";
 import SortList from "./sortlist";
 import ListDoctors from "./listDoctors";
 import LocationD from "../icons/LocationD";
+import { useSearchParams } from "next/navigation";

 function DoctorsPage() {
  const [loading, setLoading] = useState(true);
+  const searchParams = useSearchParams();
+  const locationSelected = {
+    province: searchParams.get("province"),
+    city: searchParams.get("city"),
+  };
  const [data, setData] = useState({
    expertise: "",
    gender: 0,
@@ -27,14 +33,16 @@ function DoctorsPage() {
        <div className="flex items-center justify-start gap-2 w-full">
          <LocationD />
          <p className="text-[#525252] text-[16px] font-semibold">
-            خوزستان / اهواز
+            {" "}
+            {locationSelected.province || "استان"} /{" "}
+            {locationSelected.city || "شهر"}
          </p>
        </div>
        <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
          <SearchBar data={data} setData={setData} />
          <SortList data={data} setData={setData} />
        </div>
-      </div> 
+      </div>
      <ListDoctors loading={loading} />
    </div>
  );
@@ -6,23 +6,23 @@ import SearchD from "@/components/icons/SearchD";
 import ModalSearchCity from "@/app/component/modalSearchCity";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
 import { useState } from "react";
+import Link from "next/link";

 function SearchBar() {
  const [selected, setSelected] = useState({
-    first: "",
-    second: "",
+    province: "",
+    city: "",
  });
  const [open, setOpen] = useState(false);
-  console.log(selected);

  return (
    <ButtonGroup
      variant="contained"
      className="
-            !py-[4px] sm:!py-[7px] md:!py-[10px] lg:!py-[12px] !gap-3
-            !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px] !mt-[22px] sm:!mt-[34px] md:!mt-[46px] lg:!mt-[60px]
-            !bg-[#FAFAFA] !transition-all !duration-500 !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
-            "
+        !py-[4px] sm:!py-[7px] md:!py-[10px] lg:!py-[12px] !gap-3
+        !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px] !mt-[22px] sm:!mt-[34px] md:!mt-[46px] lg:!mt-[60px]
+        !bg-[#FAFAFA] !transition-all !duration-500 !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
+      "
    >
      <ModalSearchCity
        open={open}
@@ -54,12 +54,22 @@ function SearchBar() {
        dir="rtl"
        className={`!shadow-none !w-full lg:!w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !rounded-0 !font-normal !text-[#6C757D]`}
      />
-      <Button className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]">
-        <div className="min-w-[20px] min-h-[20px]">
-          <Search />
-        </div>
-        <p>جستجو</p>
-      </Button>
+      <Link
+        href={{
+          pathname: "/doctors",
+          query: {
+            province: selected.province,
+            city: selected.city,
+          },
+        }}
+      >
+        <Button className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]">
+          <div className="min-w-[20px] min-h-[20px]">
+            <Search />
+          </div>
+          <p>جستجو</p>
+        </Button>
+      </Link>
      <Button
        className="!flex lg:!hidden !rounded-[4px] 
                !w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px]