68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import CustomTable, { Column } from "../../components/CustomTable/customTable";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { RootState, AppDispatch } from "../../redux/store/store";
|
|
|
|
import {
|
|
fetchAvailableSlots,
|
|
|
|
} from "../../redux/slices/slotSlice";
|
|
import dayjs from "dayjs";
|
|
|
|
export default function EVSlotList() {
|
|
|
|
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
const availableSlots = useSelector(
|
|
(state: RootState) => state?.slotReducer.availableSlots
|
|
);
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchAvailableSlots());
|
|
}, [dispatch]);
|
|
|
|
|
|
|
|
const slotColumns: Column[] = [
|
|
{ id: "srno", label: "Sr No" },
|
|
{ id: "name", label: "Station Name" },
|
|
{ id: "stationId", label: "Station Id" },
|
|
{ id: "date", label: "Date" },
|
|
{ id: "startTime", label: "Start Time" },
|
|
{ id: "endTime", label: "End Time" },
|
|
{ id: "isAvailable", label: "Is Available", align: "center" },
|
|
|
|
];
|
|
|
|
const slotRows = availableSlots?.length
|
|
? availableSlots.map((slot, index) => {
|
|
const formattedDate = dayjs(slot?.date).format("YYYY-MM-DD");
|
|
const startTime = dayjs(slot?.startTime).format("HH:mm");
|
|
const endTime = dayjs(slot?.endTime).format("HH:mm");
|
|
|
|
return {
|
|
srno: index + 1,
|
|
id: slot?.id ?? "NA",
|
|
stationId: slot?.stationId ?? "NA",
|
|
name: slot?.ChargingStation?.name ?? "NA",
|
|
date: formattedDate ?? "NA",
|
|
startTime: startTime ?? "NA",
|
|
endTime: endTime ?? "NA",
|
|
isAvailable: slot?.isAvailable ? "Yes" : "No",
|
|
};
|
|
})
|
|
: [];
|
|
|
|
return (
|
|
<>
|
|
<CustomTable
|
|
columns={slotColumns}
|
|
rows={slotRows}
|
|
tableType="all-available-slots"
|
|
|
|
/>
|
|
|
|
</>
|
|
);
|
|
}
|