#46 WIP table and grid using react-query

ARGA-Genomes · Dec 16, 2022 · 00c8dff · 00c8dff
1 parent 8a41520
commit 00c8dff
Show file tree

Hide file tree

Showing 11 changed files with 223 additions and 149 deletions.
diff --git a/packages/react/src/App.js b/packages/react/src/App.js
@@ -9,7 +9,7 @@ import {
   useQuery,
 } from '@tanstack/react-query'
 import './assets/App.css'
-import config from './components/config'
+import config from './config/global-conf'
 import theme from './components/theme'
 import AppContainer from './components/AppContainer'
 

diff --git a/packages/react/src/components/DataTable.js b/packages/react/src/components/DataTable.js
@@ -3,7 +3,13 @@ import { DataGrid } from '@mui/x-data-grid'
 import { GlobalStyles } from '@mui/material'
 import theme from './theme'
 
-function DataTable({ columns, pageState, setPageState, setRecordState }) {
+function DataTable({
+  columns,
+  solrData,
+  pageState,
+  setPageState,
+  setRecordState,
+}) {
   useEffect(() => {
     setPageState((old) => ({ ...old, groupResults: false, pageSize: 25 }))
   }, [pageState.groupResults, pageState.pageState])
@@ -21,8 +27,8 @@ function DataTable({ columns, pageState, setPageState, setRecordState }) {
         // ref={datagridRef}
         style={{ backgroundColor: 'white' }}
         columns={columns}
-        rows={pageState.data}
-        rowCount={pageState.total}
+        rows={solrData.docs}
+        rowCount={solrData.total}
         loading={pageState.isLoading}
         rowsPerPageOptions={[10, 25, 50, 70, 100]}
         // pagination

diff --git a/packages/react/src/components/GridView.js b/packages/react/src/components/GridView.js
@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 import { Box, Grid, TablePagination } from '@mui/material'
 import SpeciesCard from './SpeciesCard'
 
-function GridView({ pageState, setPageState, setRecordState }) {
+function GridView({ pageState, solrData, setPageState, setRecordState }) {
   useEffect(() => {
     setPageState((old) => ({ ...old, groupResults: true, pageSize: 24 }))
   }, [pageState.groupResults, pageState.pageState])
@@ -12,7 +12,7 @@ function GridView({ pageState, setPageState, setRecordState }) {
   return (
     <>
       <Grid container spacing={2} sx={{}}>
-        {pageState.species?.map((record, index) => (
+        {solrData.species?.map((record, index) => (
           <Grid
             item
             xs={12}

diff --git a/packages/react/src/components/MapDataLayer.js b/packages/react/src/components/MapDataLayer.js
@@ -11,7 +11,7 @@ import {
 import { darken } from '@mui/material/styles'
 import '../assets/leaflet/leaflet.draw.css'
 import MapGridPopup from './MapGridPopup'
-import config from './config'
+import config from '../config/global-conf'
 import theme from './theme'
 
 const SERVER_URL_PREFIX = config.solr_uri

diff --git a/packages/react/src/components/RecordSection.js b/packages/react/src/components/RecordSection.js
@@ -13,7 +13,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
 import { startCase, words, replace, uniqueId } from 'lodash'
 import ReactMarkdown from 'react-markdown'
-import config from './config'
+import config from '../config/global-conf'
 import cleanupJsonAndParse from '../utils/parseBpaJson'
 import SequenceDownload from './SequenceDownload'
 

diff --git a/packages/react/src/components/Search-js.js b/packages/react/src/components/Search-js.js
@@ -19,7 +19,7 @@ import GridView from './GridView'
 import DataTable from './DataTable'
 import MapView from './MapView'
 import theme from './theme'
-import config from './config'
+import config from '../config/global-conf'
 
 // Config variables
 // TODO: move into `config.js` if likely needing to be tweaked