108 lines
2.5 KiB
TypeScript
108 lines
2.5 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
DialogTitle,
|
|
Box,
|
|
CircularProgress,
|
|
} from "@mui/material";
|
|
import { styled } from "@mui/system";
|
|
import {
|
|
fetchAvailableSlots,
|
|
} from "../../redux/slices/slotSlice"; // Update with the correct import path
|
|
|
|
const SlotButton = styled(Button)<{ selected: boolean }>(({ selected }) => ({
|
|
backgroundColor: selected ? "#1976d2" : "#333",
|
|
color: "#fff",
|
|
border: "1px solid #555",
|
|
width: "120px",
|
|
height: "40px",
|
|
margin: "5px",
|
|
"&:hover": {
|
|
backgroundColor: selected ? "#1565c0" : "#444",
|
|
},
|
|
}));
|
|
|
|
const AvailableSlotsModal = ({
|
|
open,
|
|
onClose,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}) => {
|
|
const dispatch = useDispatch();
|
|
|
|
// Fetch slots from the Redux store
|
|
const { availableSlots, loading, error } = useSelector(
|
|
(state: any) => state.slotReducer.availableSlots
|
|
); // Adjust selector path
|
|
const [selectedSlot, setSelectedSlot] = useState<typeof availableSlots | null>(
|
|
null
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
// Fetch available slots when the modal opens
|
|
dispatch(fetchAvailableSlots());
|
|
}
|
|
}, [open, dispatch]);
|
|
|
|
const handleSlotSelect = (slot: typeof availableSlots) => {
|
|
setSelectedSlot(slot); // Update the selected slot
|
|
};
|
|
|
|
const handleSave = () => {
|
|
// Save the selected slot (you can dispatch an action here if needed)
|
|
console.log("Selected Slot: ", selectedSlot);
|
|
onClose(); // Close the modal after saving
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onClose={onClose}>
|
|
<DialogTitle sx={{ color: "#fff", background: "#222" }}>
|
|
Available Slots
|
|
</DialogTitle>
|
|
<Box
|
|
sx={{
|
|
background: "#111",
|
|
padding: "20px",
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
{loading ? (
|
|
<CircularProgress color="primary" />
|
|
) : error ? (
|
|
<div style={{ color: "red" }}>Error: {error}</div>
|
|
) : Array.isArray(availableSlots) &&
|
|
availableSlots.length > 0 ? (
|
|
availableSlots.map((slot: availableSlots) => (
|
|
<SlotButton
|
|
key={slot?.id}
|
|
onClick={() => handleSlotSelect(slot)}
|
|
selected={selectedSlot?.id === slot?.id}
|
|
>
|
|
{`${slot?.startTime} - ${slot?.endTime}`}
|
|
</SlotButton>
|
|
))
|
|
) : (
|
|
<div>No available slots</div>
|
|
)}
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
sx={{ marginTop: "10px" }}
|
|
onClick={handleSave}
|
|
disabled={!selectedSlot}
|
|
>
|
|
Save
|
|
</Button>
|
|
</Box>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default AvailableSlotsModal;
|