Untitled

"use client";
import { useEffect, useMemo, useState } from "react";
import { type MRT_ColumnDef, MRT_PaginationState } from "mantine-react-table";
import { useGetDailyMannasQuery, useDeleteDailyMannaMutation } from "@/features/daily-manna/dailyMannaApi";

import CustomTable from "../../../../../components/ui/CustomTable";
import { routes } from "@/config/routes";
import dayjs from "dayjs";

interface DailyManna {
  title: string;
  description: string;
  date: string;
}

export default function DailyMannaTable() {
  // const { contents, pagination } = useSelector(
  //   (state: RootState) => ({
  //     contents: state.contentStore.contents,
  //     pagination: state.contentStore.pagination
  //   }),
  //   shallowEqual
  // );
  const [pagination, setPagination] = useState<MRT_PaginationState>({
    pageIndex: 0,
    pageSize: 10
  });
  useEffect(() => {
    // dispatch(
    //   setValue({
    //     target: "pagination",
    //     value: { ...pagination, page: pagination.page + 1, ...(pagination.pageSize && { limit: pagination.pageSize }) }
    //   })
    // );
  }, [pagination]);

  const { isLoading, data: mannaData } = useGetDailyMannasQuery({
    page: pagination.pageIndex + 1,
    limit: pagination.pageSize
  });

  const [deleteDailyManna] = useDeleteDailyMannaMutation();

  const data: DailyManna[] = mannaData?.data?.docs ? mannaData?.data?.docs : [];

  const modifiedData = data.map((item) => ({
    ...item,
    description: item?.description?.replace(/<[^>]+>/g, ""),
    date: dayjs(dayjs(item.date, "DD/MM/YYYY").toISOString()).format("DD/MM/YYYY")
  }));

  const columns = useMemo<MRT_ColumnDef<DailyManna>[]>(
    () => [
      {
        accessorFn: (originalRow) => originalRow.title,
        id: "title",
        header: "Title",
        Header: <i style={{ color: "green" }}>Ttile</i>
      },
      {
        accessorFn: (originalRow) => originalRow.description,
        id: "description",
        header: "Description",
        Header: <i style={{ color: "green" }}>Description</i>
      },
      {
        accessorFn: (originalRow) => originalRow.date,
        id: "date",
        header: "Date",
        Header: <i style={{ color: "green" }}>Date</i>
      }
    ],
    []
  );

  return isLoading ? (
    <h1>Loading...</h1>
  ) : (
    <CustomTable<DailyManna>
      columns={columns}
      data={modifiedData}
      pagination={pagination}
      setPagination={setPagination}
      totalDocs={mannaData?.data?.totalDocs}
      deleteRow={deleteDailyManna}
      editRow={routes?.admin?.dailyManna?.edit}
    />
  );
}