From 60fe4c8040914abb2fb1131bd2ed6c764013f452 Mon Sep 17 00:00:00 2001 From: Ehsan Date: Thu, 15 May 2025 00:16:09 +0330 Subject: [PATCH] modal search and default valud of province and city and handle search && show searched state in clinics page --- app/clinics/page.js | 5 ++++- app/component/modalSearchCity/index.js | 1 - components/clinics/head/SearchBar.js | 9 +++------ components/clinics/index.js | 25 +++++++++++++++++++++--- components/clinics/list/index.js | 27 ++++++++++++++------------ components/home/TextHeader.js | 10 +++++++--- components/home/search/index.js | 3 +-- components/icons/AText.js | 1 + components/icons/BText.js | 2 +- components/layout/footer/index.js | 2 +- components/specialties/index.js | 8 +++----- helper/index.js | 9 ++++++++- 12 files changed, 66 insertions(+), 36 deletions(-) diff --git a/app/clinics/page.js b/app/clinics/page.js index 4c89a3f..94902b3 100644 --- a/app/clinics/page.js +++ b/app/clinics/page.js @@ -1,10 +1,13 @@ import ClinicsPage from "@/components/clinics"; import Layout from "@/components/layout/StLayout"; +import { getStateInfo } from "@/lib/getStateInfo"; function Clinics() { + const { matchedCity, matchedState } = getStateInfo(); + return ( - + ); } diff --git a/app/component/modalSearchCity/index.js b/app/component/modalSearchCity/index.js index 183e436..7c978fc 100644 --- a/app/component/modalSearchCity/index.js +++ b/app/component/modalSearchCity/index.js @@ -20,7 +20,6 @@ function ModalSearchCity({ children, selected, state, setSelected, open, setOpen const handleClose = () => setOpen(false); useEffect(() => { - if (provinceSelected) { const selectedState = states.find( (state) => state.label === provinceSelected diff --git a/components/clinics/head/SearchBar.js b/components/clinics/head/SearchBar.js index bda6b51..291656e 100644 --- a/components/clinics/head/SearchBar.js +++ b/components/clinics/head/SearchBar.js @@ -1,4 +1,3 @@ -"use client"; import { Button, ButtonGroup, TextField } from "@mui/material"; import SearchD from "@/components/icons/SearchD"; @@ -6,11 +5,7 @@ import ModalSearchCity from "@/app/component/modalSearchCity"; import { useState } from "react"; import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter"; -function SearchBar() { - const [selected, setSelected] = useState({ - province: "", - city: "", - }); +function SearchBar({ selected, setSelected, state, handleSearch }) { const [open, setOpen] = useState(false); return ( @@ -23,6 +18,7 @@ function SearchBar() { > handleSearch(e.target.value)} InputProps={{ disableUnderline: true, }} diff --git a/components/clinics/index.js b/components/clinics/index.js index 4ab57a9..2dd87b5 100644 --- a/components/clinics/index.js +++ b/components/clinics/index.js @@ -3,11 +3,19 @@ import { useEffect, useState } from "react"; import List from "./list"; +import { searchOnList } from "@/helper"; import SearchBar from "./head/SearchBar"; +import clinics from "@/data/clinics.json"; import HeadPageList from "@/app/component/head"; -function ClinicsPage() { +function ClinicsPage({ matchedCity, matchedState }) { const [loading, setLoading] = useState(true); + const [filteredClinics, setFilteredClinics] = useState(clinics) + + const [selected, setSelected] = useState({ + province: matchedState?.name || "", + city: matchedCity?.name || "", + }); useEffect(() => { setTimeout(() => { @@ -15,15 +23,26 @@ function ClinicsPage() { }, 2000); }, []); + const handleSearch = text => { + setFilteredClinics( + searchOnList(clinics, text, 'title') + ); + } + return (
- + - +
); } diff --git a/components/clinics/list/index.js b/components/clinics/list/index.js index 84ec959..4732f3c 100644 --- a/components/clinics/list/index.js +++ b/components/clinics/list/index.js @@ -1,24 +1,27 @@ import Pageguide from "@/app/component/Pageguide"; -import clinics from "@/data/clinics.json"; import ItemClinic from "./ItemClinic"; import Pagination from "@/app/component/Pagination"; -import { useProvince } from "@/context/ProvinceProvider"; -function List({ loading }) { - const { isProvinceInclude } = useProvince(); - const listPage = ["کلینیک ها", isProvinceInclude?.name || ""]; +function List({ loading, selected, clinics }) { + const listPage = ["کلینیک ها", selected?.city || ""]; return (
-
    + کلینیکی با این عنوان یافت نشد! +
+ ) : ( +
    - {clinics.map((item) => ( - - ))} -
+ > + {clinics.map((item) => ( + + ))} + + )}
diff --git a/components/home/TextHeader.js b/components/home/TextHeader.js index fc77290..07fe645 100644 --- a/components/home/TextHeader.js +++ b/components/home/TextHeader.js @@ -12,11 +12,15 @@ function TextHeader() {

- +
+ +
{matchedCity?.slogan} - +
+ +

) diff --git a/components/home/search/index.js b/components/home/search/index.js index 11448f7..0bc36d6 100644 --- a/components/home/search/index.js +++ b/components/home/search/index.js @@ -1,5 +1,4 @@ -import { Button, ButtonGroup, TextField } from "@mui/material"; -import SearchD from "@/components/icons/SearchD"; +import { ButtonGroup } from "@mui/material"; import Fields from "./Fields"; import { getStateInfo } from "@/lib/getStateInfo"; diff --git a/components/icons/AText.js b/components/icons/AText.js index 6d0a517..3ceaa31 100644 --- a/components/icons/AText.js +++ b/components/icons/AText.js @@ -6,6 +6,7 @@ function AText() { height="25" viewBox="0 0 24 25" fill="none" + className="w-full" > {item.icon} -

+

{item.text}

diff --git a/components/specialties/index.js b/components/specialties/index.js index 411e96d..a2718c6 100644 --- a/components/specialties/index.js +++ b/components/specialties/index.js @@ -5,17 +5,15 @@ import List from "./list"; import SmSearch from "../searchHead/SmSearch"; import HeadPageList from "@/app/component/head"; import specialtiesData from "@/data/specialties.json"; +import { searchOnList } from "@/helper"; function SpecialtiesPage() { const [filteredSpecialties, setFilteredSpecialties] = useState(specialtiesData); const searchHandler = (e) => { - const value = e.target.value setFilteredSpecialties( - specialtiesData.filter(item => - item.name.toLowerCase().includes(value) - ) - ) + searchOnList(specialtiesData, e.target.value, 'name') + ); }; return ( diff --git a/helper/index.js b/helper/index.js index fa0b46f..93be8ec 100644 --- a/helper/index.js +++ b/helper/index.js @@ -9,7 +9,6 @@ export const convertToJalali = (date) => { const currentDate = date; const jalaliDate = moment(currentDate).format("jYYYY/jM/jD"); - const jalaliYear = moment(jalaliDate, "jYYYY/jM/jD").jYear(); const jalaliMonth = moment(jalaliDate, "jYYYY/jM/jD").jMonth() + 1; const jalaliDay = moment(jalaliDate, "jYYYY/jM/jD").jDate(); @@ -131,3 +130,11 @@ export function validatePhoneNumber(input) { return { valid: true, text: null }; } + +export const searchOnList = (list, value, name) => { + let newList = list; + newList = list.filter(item => + item[name].toLowerCase().includes(value) + ) + return newList; +} \ No newline at end of file