filter.js

This snippet defines a React functional component called Logs. It uses various hooks such as useState and useEffect to manage state and lifecycle, and imports several external modules and components like Kendo Grid and moment.js for date handling.
mail@pastecode.io avatar
unknown
javascript
6 days ago
6.1 kB
3
Indexable
Never
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;
Leave a Comment