refactor: react-table --> tanstack

package.json

@@ -18,6 +18,8 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@reduxjs/toolkit": "^2.0.1",
+    "@tanstack/match-sorter-utils": "^8.11.8",
+    "@tanstack/react-table": "^8.12.0",
     "bootstrap": "^5.3.2",
     "firebase": "^10.7.2",
     "formik": "^2.4.5",
@@ -29,27 +31,21 @@
     "react-router-dom": "^6.21.2",
     "react-scripts": "^5.0.1",
     "react-spinners": "^0.13.8",
-    "react-table": "^6.10.0",
     "react-vega": "^7.6.0",
     "redux": "^5.0.1",
     "sass": "^1.69.7",
     "seamless-immutable": "^7.1.4",
-    "table": "^5.4.1",
     "vega": "^5.27.0",
     "vega-lite": "^5.16.3",
     "yup": "^1.3.3"
   },
   "devDependencies": {
     "@brown-ccv/eslint-config": "^0.3.0",
     "@brown-ccv/prettier-config": "^0.3.0",
-    "chromedriver": "^83.0.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "firebase-admin": "^12.0.0",
     "firebase-tools": "^13.0.3",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
-    "nightwatch": "^1.3.6",
     "prettier": "^3.2.4"
   },
   "eslintConfig": {

src/App.js

@@ -13,16 +13,14 @@ export function App() {
   return (
     <div aria-live="polite">
       <Navbar />
-      <div className="App">
-        <BrowserRouter>
-          <main>
-            <Routes>
-              <Route exact path="/" element={<ContentPage />} />
-            </Routes>
-          </main>
-        </BrowserRouter>
-        <Footer />
-      </div>
+      <BrowserRouter>
+        <main className="main">
+          <Routes>
+            <Route exact path="/" element={<ContentPage />} />
+          </Routes>
+        </main>
+      </BrowserRouter>
+      <Footer />
     </div>
   );
 }

src/components/AddPublicationModal.tsx

@@ -51,7 +51,7 @@ export function AddPublicationModal() {
 
   return (
     <>
-      <Button variant="contained" color="primary" onClick={handleShow}>
+      <Button variant="primary" onClick={handleShow}>
         Add Publication
       </Button>
 
@@ -149,7 +149,7 @@ const SearchDoiForm = ({
         >
           Enter Manually
         </Button>
-        <LoadingButton loading={loading} type="submit" variant="contained" form={searchFormId}>
+        <LoadingButton loading={loading} type="submit" variant="primary" form={searchFormId}>
           Search
         </LoadingButton>
       </Modal.Footer>
@@ -324,7 +324,7 @@ const ManualForm = ({
         >
           Back
         </Button>
-        <LoadingButton loading={loading} type="submit" variant="contained" form={manualFormId}>
+        <LoadingButton loading={loading} type="submit" variant="primary" form={manualFormId}>
           Submit
         </LoadingButton>
       </Modal.Footer>

src/components/ColumnFilter.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { DebouncedInput } from './DebouncedInput.tsx';
+
+export function ColumnFilter({ column, table }) {
+  const firstValue = table.getPreFilteredRowModel().flatRows[0]?.getValue(column.id);
+
+  const columnFilterValue = column.getFilterValue();
+
+  const sortedUniqueValues = React.useMemo(
+    () =>
+      typeof firstValue === 'number'
+        ? []
+        : Array.from(column.getFacetedUniqueValues().keys()).sort(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [column.getFacetedUniqueValues()]
+  );
+
+  return typeof firstValue === 'number' ? (
+    <div className="d-flex">
+      <DebouncedInput
+        type="number"
+        min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
+        max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
+        value={(columnFilterValue as [number, number])?.[0] ?? ''}
+        onChange={(value) => column.setFilterValue((old: [number, number]) => [value, old?.[1]])}
+        placeholder="min"
+      />
+      <DebouncedInput
+        type="number"
+        min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
+        max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
+        value={(columnFilterValue as [number, number])?.[1] ?? ''}
+        onChange={(value) => column.setFilterValue((old: [number, number]) => [old?.[0], value])}
+        placeholder="max"
+      />
+    </div>
+  ) : (
+    <>
+      <datalist id={column.id + 'list'}>
+        {sortedUniqueValues.slice(0, 5000).map((value) => (
+          <option value={value} key={value} />
+        ))}
+      </datalist>
+      <DebouncedInput
+        type="text"
+        value={(columnFilterValue ?? '') as string}
+        onChange={(value) => column.setFilterValue(value)}
+        list={column.id + 'list'}
+      />
+      <div className="h-1" />
+    </>
+  );
+}

src/components/ContentPage.jsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBook } from '@fortawesome/free-solid-svg-icons';
 import { useSelector } from 'react-redux';
 import { selectPublications, selectUser } from '../store/slice/appState';
-import { PubsTable } from './PubsTable';
+import { PublicationsTable } from './PublicationsTable.tsx';
 import Spinner from './Spinner';
 import { AddPublicationModal } from './AddPublicationModal.tsx';
 import { YearChart } from './YearChart.tsx';
@@ -13,34 +13,33 @@ export function ContentPage() {
   const user = useSelector(selectUser);
 
   return (
-    <div className="ContentPage main-content">
+    <div className="main-content d-flex flex-column align-items-center">
       {user ? (
-        <div align="right">
+        <div className="align-self-end">
           <AddPublicationModal />
         </div>
       ) : null}
-      <div className="d-flex flex-row justify-content-center align-items-center">
-        <div className="pub-title bg-dark rounded-circle p-2 mx-2">
-          <FontAwesomeIcon icon={faBook} color="white" />
-        </div>
-        <h1 className="pl-2">Publications</h1>
+
+      <div className="d-flex flex-row align-items-center justify-content-center">
+        <FontAwesomeIcon icon={faBook} color="dark" size="2xl" />
+        <h1 className="mx-2">Publications</h1>
       </div>
 
       <Spinner loading={publications.length === 0} className="spinner" size={100} />
 
       {publications.length !== 0 && (
-        <div id="main-content">
-          <div className="PubsTable-CP">
-            <PubsTable />
-          </div>
+        <>
+          <PublicationsTable />
 
-          {/* TODO: Word Cloud */}
-          <h3 className="word-cloud-title pt-4 mt-4">What are these publications all about? </h3>
+          {/* TODO: Word Cloud #58 */}
+          <h2 className="title pt-4 m-4 is-2 text-center">
+            What are these publications all about?
+          </h2>
           {/*<div className="viz d-flex justify-content-center pt-5">*/}
           {/*  <WordCloud />*/}
           <YearChart />
           {/*</div>*/}
-        </div>
+        </>
       )}
     </div>
   );

src/components/DebouncedInput.tsx

@@ -0,0 +1,34 @@
+// A debounced input react component
+import React from 'react';
+import Form from 'react-bootstrap/Form';
+
+export function DebouncedInput({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number;
+  onChange: (value: string | number) => void;
+  debounce?: number;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {
+  const [value, setValue] = React.useState(initialValue);
+
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  React.useEffect(
+    () => {
+      const timeout = setTimeout(() => {
+        onChange(value);
+      }, debounce);
+
+      return () => clearTimeout(timeout);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value]
+  );
+
+  return <Form.Control {...props} value={value} onChange={(e) => setValue(e.target.value)} />;
+}