OwlCyberSecurity - MANAGER

Edit File: TopVideos.js

const { __ } = wp.i18n;
const { useEffect } = wp.element;
const { compose } = wp.compose;

import { history } from "@/router/context";
import withDataList from "../hocs/withDataList";
import { convertDateTimeToAbsoluteDate } from "../util";
import DataTable from "./DataTable";

export default compose([withDataList()])(
  ({
    loading,
    page,
    setPage,
    total,
    totalPages,
    data,
    error,
    fetchData,
    startDate,
    endDate,
    userId,
  }) => {
    // 10 per page
    const per_page = 10;

// fetch data when page changes
    useEffect(() => {
      fetchData({
        endpoint: "/presto-player/v1/analytics/top-videos",
        params: {
          per_page,
          ...(startDate
            ? { start: convertDateTimeToAbsoluteDate(startDate) }
            : {}),
          ...(endDate ? { end: convertDateTimeToAbsoluteDate(endDate) } : {}),
          ...(userId ? { user_id: userId } : {}),
        },
      });
    }, [page, startDate, endDate]);

const navigate = (id) => {
      const { search } = history.location;
      history.push(`${search}#/video/${id}`);
    };

if (error) {
      return { error };
    }

return (
      <DataTable
        title={__("Top Media", "presto-player")}
        perPage={per_page}
        page={page}
        setPage={setPage}
        loading={loading}
        total={total}
        totalPages={totalPages}
        columns={columns}
        data={data}
        onSelect={(row) => {
          navigate(row?.video?.id);
        }}
      />
    );
  }
);