diff --git a/.claude/prompt/fix-doctors-filter-performance.md b/.claude/prompt/fix-doctors-filter-performance.md new file mode 100644 index 0000000..798c236 --- /dev/null +++ b/.claude/prompt/fix-doctors-filter-performance.md @@ -0,0 +1,196 @@ +# فیکس کندی و باگ‌های فیلتر صفحه پزشکان + +## پروژه + +`nobat724_front` + +## زمینه + +صفحه `/doctors` بعد از `npm run build && npm run start` (production mode) سه مشکل دارد: +۱. سرعت کلی سایت کند می‌شود +۲. مودال انتخاب شهر/استان بعد از کلیک «تایید و ادامه» دیر بسته می‌شود و فیلتر با تاخیر اعمال می‌شود +۳. دسته‌بندی (category/specialty) در مودال فیلتر درست کار نمی‌کند + +## فایل‌های مرتبط + +| فایل | نقش | +|------|-----| +| `nobat724_front/app/component/modalSearchCity/Content.js` | مودال انتخاب شهر/استان — دکمه «تایید و ادامه» | +| `nobat724_front/app/component/modalSearchCity/index.js` | wrapper مودال شهر | +| `nobat724_front/components/doctors/modal/ButtonApply.js` | دکمه «اعمال تغییرات» در مودال فیلتر | +| `nobat724_front/components/doctors/modal/Content.js` | محتوای مودال فیلتر (category/specialty) | +| `nobat724_front/components/doctors/modal/form/index.js` | فرم فیلتر — CateSelector برای category و specialty | +| `nobat724_front/components/doctors/head/index.js` | `sendReq` — تابع اصلی fetch | +| `nobat724_front/helper/index.js` (خط ۴۲۰) | `QueryForDoctorsReq` — تبدیل filter به params | +| `nobat724_front/helper/index.js` (خط ۲۱۵) | `filterList` — تولید parentList و childrenList | + +## وضعیت فعلی + +### باگ ۱ — مودال شهر/استان دیر بسته می‌شود + +`Content.js` خط ۲۴: `getStateInfoClient()` در هر render صدا زده می‌شود: + +```js +// app/component/modalSearchCity/Content.js +const { matchedState } = getStateInfoClient(); +``` + +و دکمه «تایید و ادامه» منتظر `sendReq()` می‌ماند قبل از بستن: + +```js +const handleClick = () => { + setLoading(true); + sendReq().finally(() => { + setLoading(false); + handleClose(); // ← مودال فقط بعد از پایان fetch بسته می‌شود + }); +}; +``` + +`sendReq` در `head/index.js` یک HTTP request کامل است — تا پایان fetch مودال باز می‌ماند. + +همچنین دو `disabled` prop روی دکمه تایید وجود دارد (یکی `loading` و یکی `!filter?.city || !filter?.state`) که در JSX اشتباه است — دومی override می‌کند. + +### باگ ۲ — دسته‌بندی کار نمی‌کند + +در `modal/Content.js`: + +```js +function Content({ filter, setFilter, updateData, setDataInURL }) { + const changeSpecialty = (name, value) => { + const newFilter = { ...filter, [name]: value }; + + if (name === "category") { + const childrenList = specialties.filter((item) => item.parent); + const filteredChildrenList = childrenList.filter( + (item) => item.parent === value.id // ← value می‌تواند null باشد (وقتی clear می‌شود) + ); + const firstChildren = filteredChildrenList[0]; + newFilter.specialty = firstChildren || ""; + } + + setFilter(newFilter); + setDataInURL(newFilter); + return newFilter; + }; +``` + +وقتی `value` (category) null است (کاربر انتخاب را پاک می‌کند)، `value.id` crash می‌کند. + +و `filterList` در `helper/index.js`: + +```js +export const filterList = (data) => { + const parentList = specialties.filter((item) => !item.parent); + const childrenList = specialties.filter((item) => item.parent); + + const filteredChildrenList = + data && data.category + ? childrenList.filter((item) => item.parent === data.category.id) + : []; + // ← item.parent (string از JSON) vs data.category.id (ممکن است number باشد) +``` + +`specialties.json` فیلد `parent` را به‌صورت string ذخیره می‌کند (مثلاً `"1"`) اما `category.id` ممکن است number باشد — type mismatch. + +### باگ ۳ — کندی کلی + +احتمال اصلی: `getStateInfoClient()` و `cities.filter()` و `states.find()` در هر render اجرا می‌شوند بدون memoization. همچنین `sendReq` در `ButtonApply` و `Content` هر دو منتظر کامل شدن fetch قبل از بستن مودال هستند. + +## وظایف + +### ۱. فیکس بستن سریع مودال شهر/استان + +در `app/component/modalSearchCity/Content.js` مودال را فوری ببند و fetch در پس‌زمینه ادامه یابد: + +```js +const handleClick = () => { + handleClose(); // فوری ببند + sendReq(); // fetch در background +}; +``` + +همچنین دو `disabled` را روی دکمه یکی کن: + +```jsx +