Chart.jsx

import { Box, Button, Container, Paper, Typography } from "@mui/material";
import {
  Outlet,
  useFetcher,
  useLoaderData,
  useTransition,
} from "@remix-run/react";
import React, { useEffect, useState } from "react";
import { json } from "@remix-run/node";
import BlocksChart from "../src/Components/Charts/BlocksChart";
import PoolSpaceChart from "../src/Components/Charts/PoolSpaceChart";
import ParentSize from "@visx/responsive/lib/components/ParentSize";
import NetspaceChart from "../src/Components/Charts/NetspaceChart";
import { useTheme } from "@emotion/react";
import { secondsToHm } from "./../src/utils/Utils";
import fileSize from "filesize";
import { DataGrid } from "@mui/x-data-grid";

// const data = cityTemperature.slice(225, 275);

const LIMIT = 15;

const getOffest = (searchParams) => ({
  offset: Number(searchParams.get("offset") || "0"),
});

export const loader = async ({ request }) => {
  const { offset } = getOffest(new URL(request.url).searchParams);
  const p = await new Promise((resolve) => setTimeout(resolve, 1000));
  const data = await fetch(
    `https://openchia.io/api/v1.0/launcher/?limit=${LIMIT}&offset=${offset}`
  );
  return data;
};

const columns = [
  {
    field: "index",
    headerName: "test",
    renderCell: (params) => {
      console.log(params);
      return (
        <strong>
          {/* {params.value.getFullYear()} */}
          <Button
            variant="contained"
            color="primary"
            size="small"
            style={{ marginLeft: 16 }}
          >
            Open
          </Button>
        </strong>
      );
    },
    width: 100,
  },
  {
    field: "id",
    headerName: "Launcher Id",
    valueGetter: (params) => params.row.name || params.row.launcher_id,
    width: 400,
  },
  {
    field: "points_pplns",
    headerName: "Points (24 hours)",
    width: 150,
  },
  {
    field: "difficulty",
    headerName: "Difficulty",
    width: 150,
  },
  {
    field: "share_pplns",
    headerName: "Utilization Space",
    valueFormatter: (params) => {
      if (params.value == null) {
        return "";
      }

      const valueFormatted = Number(params.value * 100).toLocaleString();
      return `${valueFormatted} %`;
    },
    width: 150,
  },
  {
    field: "estimated_size",
    headerName: "Estimated Space",
    valueFormatter: (params) => {
      if (params.value == null) {
        return "";
      }

      return fileSize(params.value, { base: 2, standard: "iec" });
    },
    width: 150,
  },
];

export default function Index() {
  const data = useLoaderData();
  const transition = useTransition();
  const fetcher = useFetcher();
  const [items, setItems] = useState(data.results);
  const [allItems, setAllItems] = useState({ 0: data.results });
  const [rowCount, setRowCount] = useState(100);
  const theme = useTheme();
  const [offset, setOffset] = useState(0);

  const [rowsState, setRowsState] = React.useState({
    page: 0,
    pageSize: LIMIT,
    // offset: 0,
  });

  useEffect(() => {
    setItems(allItems[rowsState.page]);
  }, [allItems]);

  useEffect(() => {
    if (fetcher.data) {
      setAllItems((prevItems) => ({
        ...prevItems,
        [rowsState.page]: [...fetcher.data.results],
      }));
    }
  }, [fetcher.data]);

  useEffect(() => {
    if (rowsState.page * rowsState.pageSize <= offset) return;
    fetcher.load(`/farmers?offset=${offset + LIMIT}`);
    setOffset((prev) => prev + LIMIT);
  }, [offset, fetcher, rowsState]);

  return (
    <Container
      maxWidth="lg"
      sx={{
        alignItems: "center",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div style={{ marginTop: theme.spacing(8), width: "100%" }}>
        <DataGrid
          columns={columns}
          rows={items}
          // pageSize={LIMIT}
          rowCount={rowCount}
          loading={transition.state === "loading"}
          {...rowsState}
          getRowId={(row) => row.launcher_id}
          rowsPerPageOptions={[LIMIT]}
          paginationMode="server"
          pagination
          autoHeight
          onPageChange={(page) => {
            if (offset >= page * rowsState.pageSize) {
              setItems(allItems[page]);
              console.log("Load data locally");
            }
            setRowsState((prev) => ({
              ...prev,
              page,
              // offset: prev.offset + LIMIT,
            }));
          }}
          // onPageSizeChange={(pageSize) =>
          //   setRowsState((prev) => ({ ...prev, pageSize }))
          // }
        />
      </div>
    </Container>
  );
}