<commit_before>import * as React from "react"
import { useState, useEffect, useMemo, useCallback } from "react"
import { useTable, usePagination, useSortBy } from "react-table"
import { NaturalNumberEditor } from "./natural-number-editor"

function PaginationSentence({
  pageOffset,
  pageCount,
  matchCount,
  isFiltered,
}: {
  pageOffset: number
  pageCount: number
  matchCount: number
  isFiltered: boolean
}) {
  return (
    <span>
      Showing {pageOffset + 1} to {pageOffset + pageCount} of {matchCount}{" "}
      {isFiltered && "filtered"} dances.
    </span>
  )
}

type SortByElement =
  | "title"
  | "choreographer_name"
  | "user_name"
  | "created_at"
  | "updated_at"

type SortBy = SortByElement

function Table({
  columns,
  dancesGetJson,
  fetchData,
  loading,
  pageCount: controlledPageCount,
  initialSortBy, //  = 'title'
  onSortByChange,
}: {
  columns: any
  dancesGetJson: DancesGetJson
  fetchData: Function
  loading: boolean
  pageCount: number
  initialSortBy: any // SortBy
  onSortByChange: (sortBy: any) => void
}) {
  // const tableState = useTableState({ pageIndex: 0 })
  // const [{ pageIndex, pageSize }] = tableState

  const tableOptions = {
    columns,
    data: dancesGetJson.dances,
    manualPagination: true,
    pageCount: controlledPageCount,
    initialState: { sortBy: initialSortBy },
  }
  const {
    getTableProps,
    headerGroups,
    prepareRow,
    page, // new
    canPreviousPage, // new
    canNextPage, // new
    pageOptions, // new
    pageCount, // new
    gotoPage, // new
    nextPage, // new
    previousPage, // new
    setPageSize, // new
    getTableBodyProps,
    rows,
    pageIndex,
    pageSize,
    state: { sortBy },
  } = useTable(tableOptions, useSortBy, usePagination)

  // again, need to worry about the return value of this first arg to useEffect
  useEffect(() => fetchData({ pageIndex, pageSize }), [
    fetchData,
    pageIndex,
    pageSize,
  ])

  console.log("render table")

  return (
    <>
      <table
        {...getTableProps()}
        className="table table-bordered table-hover table-condensed dances-table-react"
      >
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                  {column.render("Header")}
                  {/* Add a sort direction indicator */}
                  <span>
                    {column.isSorted
                      ? column.isSortedDesc
                        ? " 🔽"
                        : " 🔼"
                      : ""}
                  </span>
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                })}
              </tr>
            )
          })}
        </tbody>
      </table>
      <div className="dance-table-footer">
        <div className="form-inline">
          <PaginationSentence
            pageOffset={pageIndex * pageSize}<commit_msg>sorting direction glyphicons<commit_after>import * as React from "react"
import { useState, useEffect, useMemo, useCallback } from "react"
import { useTable, usePagination, useSortBy } from "react-table"
import { NaturalNumberEditor } from "./natural-number-editor"

function PaginationSentence({
  pageOffset,
  pageCount,
  matchCount,
  isFiltered,
}: {
  pageOffset: number
  pageCount: number
  matchCount: number
  isFiltered: boolean
}) {
  return (
    <span>
      Showing {pageOffset + 1} to {pageOffset + pageCount} of {matchCount}{" "}
      {isFiltered && "filtered"} dances.
    </span>
  )
}

type SortByElement =
  | "title"
  | "choreographer_name"
  | "user_name"
  | "created_at"
  | "updated_at"

type SortBy = SortByElement

function Table({
  columns,
  dancesGetJson,
  fetchData,
  loading,
  pageCount: controlledPageCount,
  initialSortBy, //  = 'title'
  onSortByChange,
}: {
  columns: any
  dancesGetJson: DancesGetJson
  fetchData: Function
  loading: boolean
  pageCount: number
  initialSortBy: any // SortBy
  onSortByChange: (sortBy: any) => void
}) {
  // const tableState = useTableState({ pageIndex: 0 })
  // const [{ pageIndex, pageSize }] = tableState

  const tableOptions = {
    columns,
    data: dancesGetJson.dances,
    manualPagination: true,
    pageCount: controlledPageCount,
    initialState: { sortBy: initialSortBy },
  }
  const {
    getTableProps,
    headerGroups,
    prepareRow,
    page, // new
    canPreviousPage, // new
    canNextPage, // new
    pageOptions, // new
    pageCount, // new
    gotoPage, // new
    nextPage, // new
    previousPage, // new
    setPageSize, // new
    getTableBodyProps,
    rows,
    pageIndex,
    pageSize,
    state: { sortBy },
  } = useTable(tableOptions, useSortBy, usePagination)

  // again, need to worry about the return value of this first arg to useEffect
  useEffect(() => fetchData({ pageIndex, pageSize }), [
    fetchData,
    pageIndex,
    pageSize,
  ])

  console.log("render table")

  return (
    <>
      <table
        {...getTableProps()}
        className="table table-bordered table-hover table-condensed dances-table-react"
      >
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                    }}
                  >
                    {column.render("Header")}{" "}
                    {/* Add a sort direction indicator */}
                    {column.isSorted ? (
                      <span
                        className={
                          "glyphicon " +
                          (column.isSortedDesc
                            ? "glyphicon-sort-by-attributes-alt"
                            : "glyphicon-sort-by-attributes")
                        }
                        style={{ opacity: 0.5 }}
                      ></span>
                    ) : (
                      <span
                        className="glyphicon glyphicon-sort"
                        style={{ opacity: 0.2 }}
                      ></span>
                    )}
                  </div>
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                })}
              </tr>
            )
          })}
        </tbody>
      </table>
      <div className="dance-table-footer">
        <div className="form-inline">
          <PaginationSentence
            pageOffset={pageIndex * pageSize}
{'fraction_non_alphanumeric': 0.123411732900784, 'fraction_numerical': 0.0010813733441470668, 'mean_word_length': 1.7424017790956263, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 61, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1659705', 'n_tokens_mistral': 2200, 'n_tokens_neox': 2128, 'n_words': 452}