hamedandClaude Opus 4.8
e820cc88ee
The backend already returns is_available:false for past slots, but a slot can lapse after the list is loaded. Disable any slot whose start (unix seconds) is before now in the time grid, so a just-passed slot can't be clicked. The grid disabling makes a SendAppo-level guard redundant — a past slot can no longer be selected. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
48 lines
1.7 KiB
JavaScript
48 lines
1.7 KiB
JavaScript
import { Button } from "@mui/material";
|
||
import React from "react";
|
||
|
||
function List({ appo, hour, setHour, value }) {
|
||
const list = appo && appo[value ? "evening" : "morning"];
|
||
const checkHour = (item) => JSON.stringify(item) === JSON.stringify(hour);
|
||
const isSelectable = (item) =>
|
||
item.is_available && !(item?.start && item.start * 1000 < Date.now());
|
||
|
||
if (list && list.length) {
|
||
return (
|
||
<ul className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]">
|
||
{list.map((item, idx) => (
|
||
<li key={idx}>
|
||
<Button
|
||
onClick={() => setHour(item)}
|
||
disabled={!isSelectable(item)}
|
||
className={`
|
||
!w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
|
||
${checkHour(item) ? "!bg-[#F79463] " : ""}
|
||
`}
|
||
>
|
||
<p
|
||
className={`
|
||
text-[16px] font-semibold text-[#525252]
|
||
${isSelectable(item) ? "text-[#525252]" : "text-[#D7D7D7]"}
|
||
${checkHour(item) ? "!text-[#FAFAFA] " : ""}
|
||
`}
|
||
>
|
||
{item.start_time}
|
||
</p>
|
||
</Button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
);
|
||
} else {
|
||
return (
|
||
<p className="text-[#525252] text-[14px] md:text-[16px] font-medium py-[56px]">
|
||
در حال حاضر، نوبتی برای ساعتهای {[value ? "بعد از ظهر" : "صبح"]} موجود
|
||
نمیباشد.
|
||
</p>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default List;
|