update modals & text & design

2025-05-09 22:04:56 +03:30
parent 8ee3defdc0
commit a89fc4a3f9
7 changed files with 115 additions and 44 deletions
@@ -10,13 +10,15 @@ function AutoCompleteSelect({
  name,
  label,
  disabled = false,
+  listboxProps
 }) {
  return (
    <Autocomplete
-      value={value || null}
      disablePortal
      options={list}
      disabled={disabled}
+      value={value || null}
+      ListboxProps={listboxProps}
      className="!w-full !rounded-lg auto-complete-selector"
      onChange={(event, newValue) => {
        updateData && updateData(newValue ? newValue.label : "", name);
@@ -25,9 +27,9 @@ function AutoCompleteSelect({
        ...styleTextSelectRight,
        // Hide Icon Number
        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
-          {
-            display: "none",
-          },
+        {
+          display: "none",
+        },
        "& input[type=number]": {
          MozAppearance: "textfield",
        },
@@ -46,13 +48,13 @@ function AutoCompleteSelect({
          border: "1px solid #D7D7D7",
        },
        "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
-          {
-            borderColor: "#D7D7D7 !important",
-          },
+        {
+          borderColor: "#D7D7D7 !important",
+        },
        "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
-          {
-            border: "1px solid #5559CE !important",
-          },
+        {
+          border: "1px solid #5559CE !important",
+        },
        "& .MuiOutlinedInput-notchedOutline": {
          border: isError ? "1px solid red !important" : "",
        },
@@ -1,25 +1,22 @@
 import { TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";

-function Field({
-  title,
-  type,
-  dir,
-  // isPlaceHolder
-}) {
+function Field({ title, type, dir, value, updateState }) {
  return (
    <TextField
      label={title}
      dir={dir || "rtl"}
      type={type || "text"}
+      value={value}
+      onChange={(e) => updateState(e.target.value)}
      className="!w-full !mx-auto !bg-[#FFF]"
      sx={{
        ...styleTextSelectRight,
        // Hide Icon Number
        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
-          {
-            display: "none",
-          },
+        {
+          display: "none",
+        },
        "& input[type=number]": {
          MozAppearance: "textfield",
        },
@@ -15,6 +15,12 @@ function Content({
  isProvinceInclude,
 }) {
  const citySelected = selected.city;
+  const listboxProps = {
+    style: {
+      maxHeight: 200,
+      overflow: "auto",
+    },
+  };

  return (
    <div>
@@ -29,15 +35,17 @@ function Content({
        </p>
        <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 && provinceSelected}
            disabled={isProvinceInclude}
+            listboxProps={listboxProps}
+            updateData={updateData}
            list={states}
            label="استان"
            name="province"
          />
          <AutoCompleteSelect
            updateData={updateData}
+            listboxProps={listboxProps}
            value={
              selected &&
              citySelected &&
@@ -50,8 +58,8 @@ function Content({
            disabled={
              isProvinceInclude
                ? !isProvinceInclude ||
-                  !provinceSelected ||
-                  filteredCities.length === 0
+                !provinceSelected ||
+                filteredCities.length === 0
                : !provinceSelected || filteredCities.length === 0
            }
          />
@@ -13,7 +13,10 @@ import { useProvince } from "@/context/ProvinceProvider";
 function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
  const provinceSelected = selected.province;
  const { isProvinceInclude } = useProvince();
-  const newProvinceData = isProvinceInclude?.id === 63;
+  const newProvinceData =
+    isProvinceInclude && isProvinceInclude.id === "63"
+      ? false
+      : isProvinceInclude;

  const [states, setStates] = useState([]);
  const [cities, setCities] = useState([]);
@@ -21,15 +24,12 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {

  const handleClose = () => setOpen(false);

-  // Load states and cities from JSON files
  useEffect(() => {
-    // Format states data to match the structure expected by AutoCompleteSelect
    const formattedStates = statesData.map((state) => ({
      label: state.name,
      id: state.id,
    }));

-    // Format cities data
    const formattedCities = citiesData.map((city) => ({
      label: city.name,
      id: city.id,
@@ -40,7 +40,6 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
    setCities(formattedCities);
  }, []);

-  // Filter cities when state is selected
  useEffect(() => {
    if (provinceSelected) {
      const selectedState = states.find(
@@ -53,11 +52,11 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
        );
        setFilteredCities(filteredCities);
      }
-    } else if (isProvinceInclude) {
+    } else if (newProvinceData) {
      setSelected({
        ...selected,
        province: statesData.find(
-          (state) => state.id === isProvinceInclude.province_id
+          (state) => state.id === newProvinceData.province_id
        )?.name,
      });
    } else {
@@ -68,7 +67,6 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {

  const updateData = (event, name) => {
    if (name === "province" && event !== provinceSelected) {
-      // If state changes, reset city selection
      setSelected({ province: event, city: "" });
    } else {
      setSelected({ ...selected, [name]: event });
@@ -6,22 +6,46 @@ import SortList from "./sortlist";
 import ListDoctors from "./listDoctors";
 import LocationD from "../icons/LocationD";
 import { useSearchParams } from "next/navigation";
+import ModalSearchCity from "@/app/component/modalSearchCity";
 import { useProvince } from "@/context/ProvinceProvider";
+import { Button } from "@mui/material";
+
+// Data
+import citiesData from "@/data/city.json";
+import statesData from "@/data/state.json";

 function DoctorsPage() {
  const [loading, setLoading] = useState(true);
-  const searchParams = useSearchParams();
+  const [open, setOpen] = useState(false);
  const { isProvinceInclude } = useProvince();
+  const [selected, setSelected] = useState({
+    // province: isProvinceInclude?.name || locationSelected.province,
+    // city: locationSelected.city || newCity,
+    province: isProvinceInclude?.name,
+    city: null,
+  });
+  const searchParams = useSearchParams();
  const locationSelected = {
    province: searchParams.get("province"),
    city: searchParams.get("city"),
  };
+  const provinceId = statesData.find(
+    (state) => state.name === locationSelected?.province
+  );
+
+  const newCity =
+    locationSelected.city ||
+    (provinceId &&
+      citiesData.find((city) => city.province_id === provinceId.id)?.name);
+
  const [data, setData] = useState({
    expertise: "",
    gender: 0,
    degree: 0,
    turn: true,
  });
+  console.log(newCity);
+

  useEffect(() => {
    setTimeout(() => {
@@ -32,16 +56,25 @@ function DoctorsPage() {
  return (
    <div className="pt-[95px] sm:pt-[120px] padding-responsive">
      <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
-        <div className="flex items-center justify-start gap-2 w-full">
-          <LocationD />
-          <p className="text-[#525252] text-[16px] font-semibold">
-            {" "}
-            {isProvinceInclude?.name || locationSelected.province || "استان"}
-            {/* {isProvinceInclude?.name ? "" : " / "} */}
-            {" / "}
-            {locationSelected.city || "شهر"}
-          </p>
-        </div>
+        <ModalSearchCity
+          open={open}
+          setOpen={setOpen}
+          selected={selected}
+          setSelected={setSelected}
+        >
+          <Button
+            className="!flex !ml-auto !w-fit !px-3 !py-1 !items-center !justify-start !gap-2 !cursor-pointer"
+            onClick={() => setOpen(true)}
+          >
+            <LocationD />
+            <p className="text-[#525252] text-[16px] font-semibold">
+              {" "}
+              {selected.province || "استان"}
+              {" / "}
+              {selected.city || "شهر"}
+            </p>
+          </Button>
+        </ModalSearchCity>
        <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} />
@@ -5,15 +5,36 @@ import { Button, ButtonGroup, TextField } from "@mui/material";
 import SearchD from "@/components/icons/SearchD";
 import ModalSearchCity from "@/app/component/modalSearchCity";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import Link from "next/link";

+import statesData from "@/data/state.json";
+import citiesData from "@/data/city.json";
+
+const provinceIdMap = Object.fromEntries(
+  statesData.map((state) => [state.name, state.id])
+);
+const citiesByProvinceId = citiesData.reduce((acc, city) => {
+  if (!acc[city.province_id]) acc[city.province_id] = [];
+  acc[city.province_id].push(city);
+  return acc;
+}, {});
+
 function SearchBar() {
  const [selected, setSelected] = useState({
    province: "",
    city: "",
  });
  const [open, setOpen] = useState(false);
+  const getDefaultCityForProvince = useCallback((provinceName) => {
+    if (!provinceName) return undefined;
+    const provinceId = provinceIdMap[provinceName];
+    return citiesByProvinceId[provinceId]?.[0]?.name;
+  }, []);
+  console.log(getDefaultCityForProvince(selected.province));
+  console.log(selected.province);
+
+

  return (
    <ButtonGroup
@@ -59,7 +80,7 @@ function SearchBar() {
          pathname: "/doctors",
          query: {
            province: selected.province,
-            city: selected.city,
+            city: selected.city || getDefaultCityForProvince(selected.province),
          },
        }}
      >
@@ -1,8 +1,14 @@
 import Field from "@/app/component/element/Field";
 import { Button } from "@mui/material";
 import Link from "next/link";
+import { useState } from "react";

 function LogInPage({ setIsSendMsg, setStep }) {
+  const [num, setNum] = useState("09");
+  const updateNum = (value) => {
+    setNum(value === "0" || !value ? "09" : value);
+  };
+
  return (
    <div
      className="rounded-[16px] mt-[64px] opacity-page sm:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF] 
@@ -15,7 +21,13 @@ function LogInPage({ setIsSendMsg, setStep }) {
        شماره همراه خود را وارد نمایید.
      </p>
      <div className="mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] mb-[40px] sm:mb-[37px] md:mb-[36px] lg:mb-[32px]">
-        <Field type="number" title="شماره همراه" dir="ltr" />
+        <Field
+          dir="ltr"
+          value={num}
+          type="number"
+          title="شماره همراه"
+          updateState={updateNum}
+        />
      </div>
      <Button
        fullWidth