filter.js

import React, { useCallback, useState, useEffect } from "react";
import { Grid, GridColumn } from "@progress/kendo-react-grid";
import moment from "moment";
import Loader from "../../control-components/loader/loader";
import FilterModel from "./filter-model";
import TruncatedCell from "./truncate-cell";
import { LogsService } from "../../services/logsService";

const DATA_ITEM_KEY = "id";
const SELECTED_FIELD = "selected";

const Logs = () => {
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [sort, setSort] = useState([]);
  const [logs, setLogs] = useState([]);
  const [metaData, setMetaData] = useState({});
  const [skip, setSkip] = useState(0);
  

  const [filters, setFilters] = useState({
    staffId: null,
    clinicId: null,
    startDate: moment().subtract(3, "days").startOf("day").toISOString(),
    endDate: moment().endOf("day").toISOString(),
  });

  const fetchLogs = useCallback(() => {
    setLoading(true);

    LogsService.getLogs(
      filters.staffId,
      filters.clinicId,
      filters.startDate,
      filters.endDate,
      pageSize,
      page
    )
      .then((response) => {
        setLogs(response.resultData);
        setMetaData(response.metaData);
        setLoading(false);
      })
      .catch((error) => {
        console.error("Error fetching logs:", error);
        setLoading(false);
      });
  }, [filters, page, pageSize]);

  useEffect(() => {
    fetchLogs();
  }, [fetchLogs]);


  const pageChange = (event) => {
    const newPage = event.page.skip / event.page.take + 1;
    setSkip(event.page.skip);
    setPage(newPage);
    setPageSize(event.page.take);
  };

  return (
    <>
      {loading && <Loader />}
      <h4 className="address-title text-grey">
        <span className="f-24">Logs</span>
      </h4>
      <FilterModel
        filters={filters}
        updateFilters={setFilters}
        page={page}
        pageSize={pageSize}
        onPageChange={pageChange}
        onLogsUpdate={(newLogs, newMetaData) => {
          setLogs(newLogs);
          setMetaData(newMetaData);
        }}
      />
      <div className="grid-table filter-grid">
        <div className="mt-3">
          <div className="inner-section-edit position-relative text-center">
            <div className="grid-table filter-grid header-blue">
              <div className="mt-3">
                <Grid
                  data={logs}
                  skip={skip}
                  take={pageSize}
                  total={metaData?.totalCount || 0}
                  onPageChange={pageChange}
                  pageable={{
                    pageSizes: [10, 25, 50, 100, 250, 500],
                  }}
                  selectedField={SELECTED_FIELD}
                  dataItemKey={DATA_ITEM_KEY}
                  sort={sort}
                  sortable={true}
                  onSortChange={(e) => {
                    if (e.sort) {
                      setSort(e.sort);
                    }
                  }}
                >
                  <GridColumn field="id" title="Id" width="100" />
                  <GridColumn
                    field="message"
                    title="Message"
                    width="300"
                    cell={TruncatedCell}
                  />
                  <GridColumn
                    field="callsite"
                    title="Callsite"
                    width="300"
                    cell={TruncatedCell}
                  />
                  <GridColumn
                    field="exception"
                    title="Exception"
                    width="300"
                    cell={TruncatedCell}
                  />
                  <GridColumn
                    field="request"
                    title="Request"
                    width="300"
                    cell={TruncatedCell}
                  />
                  <GridColumn
                    field="messageId"
                    title="Message Id"
                    width="250"
                    cell={TruncatedCell}
                  />
                  <GridColumn field="url" title="URL" width="250" cell={TruncatedCell} />
                  <GridColumn
                    field="querystring"
                    title="Querystring"
                    width="250"
                    cell={TruncatedCell}
                  />
                  <GridColumn
                    field="region"
                    title="Region"
                    width="150"
                    cell={TruncatedCell}
                  />
                  <GridColumn
                    field="staffId"
                    title="Staff Id"
                    width="150"
                    cell={TruncatedCell}
                  />
                  <GridColumn
                    field="clinicId"
                    title="Clinic Id"
                    width="150"
                    cell={TruncatedCell}
                  />
                  <GridColumn
                    field="logger"
                    title="Logger"
                    width="200"
                    cell={TruncatedCell}
                  />
                  <GridColumn field="level" title="Level" width="150" cell={TruncatedCell} />
                  <GridColumn
                    field="utcTimeStamp"
                    title="UTC Time Stamp"
                    width="250"
                    cell={(props) => {
                      const field = moment(props.dataItem.utcTimeStamp).format(
                        "MM/DD/YYYY HH:mm:ss"
                      );
                      return <td className="cursor-default">{field}</td>;
                    }}
                  />
                </Grid>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Logs;