56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
"use client";
|
|
|
|
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({ matchedCity, matchedState }) {
|
|
const [loading, setLoading] = useState(true);
|
|
const [search, setSearch] = useState("");
|
|
const [filteredClinics, setFilteredClinics] = useState(clinics)
|
|
|
|
const [selected, setSelected] = useState({
|
|
province: matchedState?.name || "",
|
|
city: matchedCity?.name || "",
|
|
});
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
}, 2000);
|
|
}, []);
|
|
|
|
const changeSearch = text => setSearch(text);
|
|
|
|
const handleSearch = () => {
|
|
const searchOnName = searchOnList(clinics, search, 'title')
|
|
const searchOnLocation = searchOnList(searchOnName, selected.city, 'city')
|
|
setFilteredClinics(searchOnLocation);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<HeadPageList
|
|
title="لیست کلینیک ها و درمانگاه های تخصصی"
|
|
detail="در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید"
|
|
>
|
|
<SearchBar
|
|
search={search}
|
|
selected={selected}
|
|
setSelected={setSelected}
|
|
state={matchedState?.name}
|
|
changeSearch={changeSearch}
|
|
handleSearch={handleSearch}
|
|
/>
|
|
</HeadPageList>
|
|
<List loading={loading} selected={selected} clinics={filteredClinics} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ClinicsPage;
|