Remove RefSelector and use new Table and DataTable

paranext · Jul 8, 2024 · 4d55823 · 4d55823
1 parent 479c4a7
commit 4d55823
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 93 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
     "@swc/core": "^1.4.11",
+    "@tanstack/react-table": "^8.19.2",
     "@types/node": "^20.12.2",
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.23",
@@ -93,7 +94,9 @@
     "webpack-merge": "^5.10.0",
     "zip-folder-promise": "^1.2.0"
   },
-  "workspaces": ["src/*"],
+  "workspaces": [
+    "src/*"
+  ],
   "volta": {
     "node": "20.11.1"
   }

diff --git a/src/paratext-bible-word-list/src/word-content-viewer.component.tsx b/src/paratext-bible-word-list/src/word-content-viewer.component.tsx
@@ -1,9 +1,16 @@
 import { useState, useEffect } from 'react';
 import { Canon } from '@sillsdev/scripture';
-import { Table } from 'platform-bible-react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from 'platform-bible-react';
 import type { WordListEntry } from 'paratext-bible-word-list';
 
-type Row = {
+type WordData = {
   reference: string;
   text: string;
 };
@@ -13,42 +20,42 @@ function generateTableData(selectedWord: WordListEntry) {
     Canon.bookNumberToId(selectedWord.scrRefs[0].bookNum),
   );
 
-  const newRows: Row[] = [];
+  const newWordData: WordData[] = [];
   for (let id = 0; id < selectedWord.scrRefs.length; id++) {
     const { chapterNum } = selectedWord.scrRefs[id];
     const { verseNum } = selectedWord.scrRefs[id];
     const fullReference: string = `${bookName} ${chapterNum}:${verseNum}`;
-    newRows.push({ reference: fullReference, text: selectedWord.scriptureSnippets[id] });
+    newWordData.push({ reference: fullReference, text: selectedWord.scriptureSnippets[id] });
   }
 
-  return newRows;
+  return newWordData;
 }
 
 export default function WordContentViewer({ selectedWord }: { selectedWord: WordListEntry }) {
-  const [rows, setRows] = useState<Row[]>([]);
+  const [wordData, setWordData] = useState<WordData[]>([]);
 
   useEffect(() => {
-    setRows([]);
+    setWordData([]);
 
-    setRows(generateTableData(selectedWord));
+    setWordData(generateTableData(selectedWord));
   }, [selectedWord]);
 
   return (
-    <Table<Row>
-      columns={[
-        {
-          key: 'reference',
-          name: 'Reference',
-          width: 150,
-        },
-        {
-          key: 'text',
-          name: 'Text',
-        },
-      ]}
-      rows={rows}
-      rowHeight={30}
-      headerRowHeight={50}
-    />
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Reference</TableHead>
+          <TableHead>Text</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {wordData.map((result) => (
+          <TableRow>
+            <TableCell>{result.reference}</TableCell>
+            <TableCell>{result.text}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
   );
 }
diff --git a/src/paratext-bible-word-list/src/word-list.web-view.tsx b/src/paratext-bible-word-list/src/word-list.web-view.tsx
@@ -1,7 +1,7 @@
 import { useSetting, useData } from '@papi/frontend/react';
 import { WebViewProps } from '@papi/core';
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
-import { ComboBox, RefSelector, ScriptureReference, Switch, TextField } from 'platform-bible-react';
+import { ComboBox, ScriptureReference, Switch, TextField } from 'platform-bible-react';
 import type { WordListEntry } from 'paratext-bible-word-list';
 import WordContentViewer from './word-content-viewer.component';
 import WordTable from './word-table.component';
@@ -59,7 +59,7 @@ globalThis.webViewComponent = function WordListWebView({
   projectId,
   useWebViewState,
 }: WebViewProps) {
-  const [scrRef, setScrRef] = useSetting('platform.verseRef', defaultScrRef);
+  const [scrRef] = useSetting('platform.verseRef', defaultScrRef);
   const [scope, setScope] = useWebViewState<Scope>('scope', Scope.Book);
   const [wordFilter, setWordFilter] = useState<string>('');
   const [selectedWord, setSelectedWord] = useState<WordListEntry>();
@@ -116,12 +116,6 @@ globalThis.webViewComponent = function WordListWebView({
 
   return (
     <div className="word-list">
-      <RefSelector
-        scrRef={scrRef}
-        handleSubmit={(newScrRef) => {
-          setScrRef(newScrRef);
-        }}
-      />
       <div className="filters">
         <ComboBox
           title="Scope"

diff --git a/src/paratext-bible-word-list/src/word-table.component.tsx b/src/paratext-bible-word-list/src/word-table.component.tsx
@@ -1,60 +1,63 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Table, TableCellClickArgs, TableSortColumn } from 'platform-bible-react';
+import { useMemo } from 'react';
+import { Button, DataTable } from 'platform-bible-react';
 import type { WordListEntry } from 'paratext-bible-word-list';
+import { ColumnDef, Row, SortDirection } from '@tanstack/react-table';
 
-type Row = {
+type WordData = {
   word: string;
   count: number;
 };
 
-const defaultSortColumns: TableSortColumn[] = [{ columnKey: 'word', direction: 'ASC' }];
-
 type WordTableProps = {
   wordList: WordListEntry[];
   fullWordCount: number;
   onWordClick: (word: string) => void;
 };
 
-export default function WordTable({ wordList, fullWordCount, onWordClick }: WordTableProps) {
-  const [sortColumns, setSortColumns] = useState<TableSortColumn[]>(defaultSortColumns);
-  const onSortColumnsChange = useCallback((changedSortColumns: TableSortColumn[]) => {
-    setSortColumns(changedSortColumns.slice(-1));
-  }, []);
+const getSortingIcon = (sortDirection: false | SortDirection): string => {
+  if (sortDirection === 'asc') {
+    return '↑';
+  }
+  if (sortDirection === 'desc') {
+    return '↓';
+  }
+  return '↕';
+};
 
-  const rows = useMemo(() => {
-    const newRows: Row[] = [];
+const columns = (wordColumnTitle: string): ColumnDef<WordData>[] => [
+  {
+    accessorKey: 'word',
+    header: ({ column }) => {
+      return (
+        <Button onClick={() => column.toggleSorting(undefined)}>
+          {`${wordColumnTitle} ${getSortingIcon(column.getIsSorted())}`}
+        </Button>
+      );
+    },
+  },
+  {
+    accessorKey: 'count',
+    header: ({ column }) => {
+      return (
+        <Button onClick={() => column.toggleSorting(undefined)}>
+          {`Count ${getSortingIcon(column.getIsSorted())}`}
+        </Button>
+      );
+    },
+  },
+];
+
+export default function WordTable({ wordList, fullWordCount, onWordClick }: WordTableProps) {
+  const wordData = useMemo(() => {
+    const newWordData: WordData[] = [];
     wordList.forEach((word) => {
-      newRows.push({ word: word.word, count: word.scrRefs.length });
+      newWordData.push({ word: word.word, count: word.scrRefs.length });
     });
-    return newRows;
+    return newWordData;
   }, [wordList]);
 
-  const sortedRows = useMemo((): readonly Row[] => {
-    if (sortColumns.length === 0) return rows;
-    const { columnKey, direction } = sortColumns[0];
-
-    let sortedRowsLocal: Row[] = [...rows];
-
-    switch (columnKey) {
-      case 'word':
-        sortedRowsLocal = sortedRowsLocal.sort((a, b) => a[columnKey].localeCompare(b[columnKey]));
-        break;
-      case 'count':
-        sortedRowsLocal = sortedRowsLocal.sort((a, b) => a[columnKey] - b[columnKey]);
-        break;
-      default:
-    }
-    return direction === 'DESC' ? sortedRowsLocal.reverse() : sortedRowsLocal;
-  }, [rows, sortColumns]);
-
-  useEffect(() => {
-    if (sortColumns.length === 0) {
-      setSortColumns(defaultSortColumns);
-    }
-  }, [sortColumns]);
-
-  const onCellClick = (args: TableCellClickArgs<Row>) => {
-    onWordClick(args.row.word);
+  const onCellClick = (row: Row<WordData>): void => {
+    onWordClick(row.getValue('word'));
   };
 
   const wordColumnTitle = useMemo(() => {
@@ -64,26 +67,12 @@ export default function WordTable({ wordList, fullWordCount, onWordClick }: Word
   }, [fullWordCount, wordList.length]);
 
   return (
-    <Table<Row>
-      columns={[
-        {
-          key: 'word',
-          name: wordColumnTitle,
-        },
-        {
-          key: 'count',
-          name: 'Count',
-        },
-      ]}
-      rows={sortedRows}
-      rowKeyGetter={(row: Row) => {
-        return row.word;
-      }}
-      sortColumns={sortColumns}
-      onSortColumnsChange={onSortColumnsChange}
-      rowHeight={30}
-      headerRowHeight={50}
-      onCellClick={onCellClick}
+    <DataTable
+      enablePagination
+      showPaginationControls
+      columns={columns(wordColumnTitle)}
+      data={wordData}
+      onRowClickHandler={onCellClick}
     />
   );
 }