tm_panel/src/components/Tables/notification-history/index.tsx

"use client";
import { EyeIcon } from "@/assets/icons";
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
import IsVisible from "@/components/ui/IsVisible";
import Pagination from "@/components/ui/pagination";
import Status from "@/components/ui/Status";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { _TooltipDefaultParams } from "@/constants/tooltip";
import {
  getPaginatedRowNumber,
  truncateString,
  unixToDate,
} from "@/utils/shared";
import { Tooltip } from "react-tooltip";

import Boolean from "@/components/ui/Boolean";
import ListHeader from "@/components/ui/ListHeader";
import ListWrapper from "@/components/ui/ListWrapper";
import Modal from "@/components/ui/modal";
import NotificationHistoryListFilters from "./NotificationHistoryListFilters";
import useNotificationHistoryTablePresenter from "./useNotificationHistoryTablePresenter";

const NotificationHistoryTable = () => {
  const {
    columns,
    isLoading,
    metadata,
    notificationHistory,
    pathName,
    router,
    isFilterModalOpen,
    setIsFilterModalOpen,
    setParams,
    handleSubmit,
    register,
    setValue,
    watch,
    search,
    isMutating,
    shouldShowPagination,
  } = useNotificationHistoryTablePresenter();

  return (
    <>
      <ListWrapper>
        <ListHeader
          createButtonText="Create notification"
          onFilter={() => setIsFilterModalOpen(true)}
        />
        <Table>
          <TableHeader>
            <TableRow>
              {columns.map((column) => (
                <TableHead key={column}>
                  {column}
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>
          {isLoading && (
            <TableSkeleton column={columns.length} cellColSpan={1} />
          )}
          <TableBody>
            <EmptyListWrapper
              list={notificationHistory ?? []}
              columns={columns}
              emptyMessage="No notifications were found"
            >
              {(notificationHistory ?? []).map((item, index) => (
                <TableRow key={item.id}>
                  <TableCell>
                    {getPaginatedRowNumber({
                      index,
                      page: metadata?.page,
                      limit: metadata?.limit,
                    })}
                  </TableCell>
                  <TableCell>{item.title}</TableCell>
                  <TableCell>{item.event_type}</TableCell>
                  <TableCell>
                    {unixToDate({
                      hasTime: true,
                      unix: item.created_at,
                    })}
                  </TableCell>
                  <TableCell>
                    {item.recipient?.full_name}
                  </TableCell>
                  <TableCell className="truncate">
                    {truncateString(item.message, 20, 20)}
                  </TableCell>
                  <TableCell className="capitalize">
                    {item.priority}
                  </TableCell>
                  <TableCell className="capitalize">
                    {item.type}
                  </TableCell>
                  <TableCell className="capitalize">
                    <Boolean value={item.seen} />
                  </TableCell>
                  <TableCell>
                    <Status status={item.status}>{item.status}</Status>
                  </TableCell>
                  <TableCell>
                    <button
                      data-tooltip-id="details"
                      data-tooltip-content="Details"
                      data-tooltip-place="top"
                      onClick={() => {
                        router.push(`${pathName}/${item.id}`);
                      }}
                    >
                      <Tooltip
                        {..._TooltipDefaultParams({
                          id: "details",
                        })}
                      />
                      <EyeIcon />
                    </button>
                  </TableCell>
                </TableRow>
              ))}
            </EmptyListWrapper>
          </TableBody>
        </Table>
        <IsVisible condition={shouldShowPagination}>
          <Pagination
            currentPage={metadata?.page ? metadata?.page - 1 : 0}
            totalPages={metadata?.pages ?? 1}
            onPageChange={(e) => {
              setParams((currentParams: Record<string, any>) => ({
                ...currentParams,
                offset: e.selected * (metadata?.limit ?? 10),
                limit: metadata?.limit ?? 10,
              }));
            }}
          />
        </IsVisible>
      </ListWrapper>
      <Modal
        isOpen={isFilterModalOpen}
        onClose={() => setIsFilterModalOpen(false)}
        showButtons={false}
      >
        <NotificationHistoryListFilters
          filterRegister={register}
          handleFilterSubmit={handleSubmit}
          isMutating={isMutating}
          watch={watch}
          setValue={setValue}
          setIsFilterModalOpen={setIsFilterModalOpen}
          search={search}
        />
      </Modal>
    </>
  );
};

export default NotificationHistoryTable;