Feat/add search bar endpoints 1014

webapp/src/components/SearchBar/index.js

@@ -13,6 +13,8 @@ import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
 import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined'
 
+import useDebounceState from '../../hooks/customHooks/useDebounceState'
+
 import styles from './styles'
 
 const useStyles = makeStyles(styles)
@@ -21,15 +23,17 @@ const SearchBar = ({
   filters: rootFilters,
   onChange,
   chips,
-  translationScope
+  translationScope,
+  delay,
 }) => {
   const classes = useStyles()
   const { t } = useTranslation(translationScope)
   const [selected, setSelected] = useState(chips[0]?.name ?? '')
-  const [filters, setFilters] = useState({})
+  const [filters, setFilters] = useState(rootFilters || {})
+  const debouncedFilter = useDebounceState(filters, delay)
 
   const handleOnChange = (key) => (event) => {
-    setFilters({ ...filters, [key]: event.target.value })
+    setFilters(prev => ({ ...prev, [key]: event.target.value }))
   }
 
   const handleOnClick = () => {
@@ -53,65 +57,68 @@ const SearchBar = ({
     setFilters(rootFilters || {})
   }, [rootFilters])
 
+  useEffect(() => {
+    onChange(filters)
+    // eslint-disable-next-line
+  }, [debouncedFilter, onChange])
+
   return (
-    <div>
-      <div>
-        <Card>
-          <CardContent className={classes.cardContent}>
-            <Typography className={classes.title}>
-              {`${t('title')}:`}
-            </Typography>
-            <TextField
-              label={t('placeholder')}
-              variant="outlined"
-              className={classes.formControl}
-              value={filters.owner || ''}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton
-                      onClick={handleOnClick}
-                      edge="end"
-                      aria-label="search"
-                    >
-                      <SearchOutlinedIcon />
-                    </IconButton>
-                  </InputAdornment>
-                )
-              }}
-              onKeyDown={handleOnKeyDown}
-              onChange={handleOnChange('owner')}
-            />
-            <div className={classes.chipWrapper}>
-              {chips.map((chip, index) => (
-                <Chip
-                  key={`chip-${chip.name}-${index}`}
-                  label={t(chip.name)}
-                  clickable
-                  onClick={() => handleOnClickChip(chip.name)}
-                  className={clsx({
-                    [classes.selected]: selected === chip.name
-                  })}
-                />
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
+    <>
+      <Card>
+        <CardContent className={classes.cardContent}>
+          <Typography className={classes.title}>{`${t('title')}:`}</Typography>
+          <TextField
+            label={t('placeholder')}
+            variant="outlined"
+            className={classes.formControl}
+            value={filters.owner || ''}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    onClick={handleOnClick}
+                    edge="end"
+                    aria-label="search"
+                  >
+                    <SearchOutlinedIcon />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+            onKeyDown={handleOnKeyDown}
+            onChange={handleOnChange('owner')}
+          />
+          <div className={classes.chipWrapper}>
+            {chips.map((chip, index) => (
+              <Chip
+                key={`chip-${chip.name}-${index}`}
+                label={t(chip.name)}
+                clickable
+                onClick={() => handleOnClickChip(chip.name)}
+                className={clsx({
+                  [classes.selected]: selected === chip.name,
+                })}
+              />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </>
   )
 }
 
 SearchBar.propTypes = {
   filters: PropTypes.any,
   onChange: PropTypes.func,
   translationScope: PropTypes.string,
-  chips: PropTypes.array
+  chips: PropTypes.array,
+  delay: PropTypes.number,
 }
 
 SearchBar.defaultProps = {
   onChange: () => {},
-  chips: []
+  chips: [],
+  delay: 500,
 }
 
 export default memo(SearchBar)

webapp/src/hooks/customHooks/useBlockProducerState.js

@@ -23,26 +23,19 @@ const CHIPS_NAMES = ['all', ...eosConfig.producerTypes]
 
 const useBlockProducerState = () => {
   const [
-    { filters, pagination, loading, producers, info },
+    { filters, pagination, loading, producers },
     { handleOnSearch, handleOnPageChange, setPagination },
   ] = useSearchState({ query: PRODUCERS_QUERY })
   const { data: dataHistory, loading: loadingHistory } = useSubscription(
     BLOCK_TRANSACTIONS_HISTORY,
   )
-  const [totalPages, setTotalPages] = useState(1)
   const [items, setItems] = useState([])
   const [missedBlocks, setMissedBlocks] = useState({})
 
   const chips = CHIPS_NAMES.map((e) => {
     return { name: e }
   })
 
-  useEffect(() => {
-    if (!info) return
-
-    setTotalPages(Math.ceil(info.producers?.count / pagination.limit))
-  }, [info, pagination.limit])
-
   useEffect(() => {
     if (eosConfig.networkName === 'lacchain') return
 
@@ -79,7 +72,6 @@ const useBlockProducerState = () => {
       chips,
       items,
       loading,
-      totalPages,
       missedBlocks,
       pagination,
     },

webapp/src/hooks/customHooks/useEndpointsState.js

@@ -1,54 +1,34 @@
 import { useState, useEffect, useCallback } from 'react'
-import { useLazyQuery } from '@apollo/client'
 
 import { ENDPOINTS_QUERY } from '../../gql'
 
+import useSearchState from './useSearchState'
+
 const useEndpointsState = ({ useCache }) => {
-  const [load, { loading, data }] = useLazyQuery(ENDPOINTS_QUERY, {
+  const [
+    { pagination, loading, producers, filters },
+    { handleOnSearch, handleOnPageChange, setPagination },
+  ] = useSearchState({
+    query: ENDPOINTS_QUERY,
     pollInterval: useCache ? 0 : 120000,
     fetchPolicy: useCache ? 'cache-first' : 'cache-and-network',
   })
-  const [producers, setProducers] = useState([])
   const [updatedAt, setUpdatedAt] = useState()
-  const [pagination, setPagination] = useState({
-    page: 1,
-    limit: 20,
-    totalPages: 0,
-    where: { nodes: { endpoints: { value: { _gt: '' } } } },
-  })
+  const [items, setItems] = useState()
 
   useEffect(() => {
-    load({
-      variables: {
-        offset: (pagination.page - 1) * pagination.limit,
-        limit: pagination.limit,
-        where: pagination.where,
-        endpointFilter: pagination.endpointFilter,
-      },
-    })
-    // eslint-disable-next-line
-  }, [
-    pagination.page,
-    pagination.where,
-    pagination.limit,
-    pagination.endpointFilter,
-  ])
-
-  useEffect(() => {
-    if (!data?.info) return
-
     setPagination(prev => ({
       ...prev,
-      totalPages: Math.ceil(data?.info.producers?.count / pagination.limit),
+      limit: 20,
+      where: { ...prev.where, nodes: { endpoints: { value: { _gt: '' } } } },
     }))
-    // eslint-disable-next-line
-  }, [data?.info, pagination.limit])
+  }, [setPagination])
 
   useEffect(() => {
-    if (!data?.producers) return
+    if (!producers) return
 
-    setProducers(
-      data.producers.map(producer => {
+    setItems(
+      producers.map(producer => {
         const endpoints = { api: [], ssl: [], p2p: [] }
         const inserted = []
 
@@ -73,20 +53,10 @@ const useEndpointsState = ({ useCache }) => {
       }),
     )
 
-    if (!data.producers?.[0]?.updated_at) return
+    if (!producers?.[0]?.updated_at) return
 
-    setUpdatedAt(data.producers[0].updated_at)
-    // eslint-disable-next-line
-  }, [data?.producers])
-
-  const handleOnPageChange = (_, page) => {
-    if (pagination.page === page) return
-
-    setPagination(prev => ({
-      ...prev,
-      page,
-    }))
-  }
+    setUpdatedAt(producers[0].updated_at)
+  }, [producers])
 
   const handleFilter = useCallback(value => {
     const filter = value
@@ -96,16 +66,16 @@ const useEndpointsState = ({ useCache }) => {
     setPagination(prev => ({
       ...prev,
       page: 1,
-      where: { nodes: { endpoints: filter } },
+      where: { ...prev.where, nodes: { endpoints: filter } },
       endpointFilter: value
         ? { _or: [{ type: { _eq: 'p2p' } }, filter] }
         : undefined,
     }))
-  }, [])
+  }, [setPagination])
 
   return [
-    { loading, pagination, producers, updatedAt },
-    { handleFilter, handleOnPageChange, setPagination },
+    { loading, pagination, producers: items, updatedAt, filters },
+    { handleFilter, handleOnPageChange, handleOnSearch, setPagination },
   ]
 }
 

webapp/src/hooks/customHooks/useNodeState.js

@@ -7,7 +7,7 @@ import useSearchState from './useSearchState'
 
 const useNodeState = () => {
   const [
-    { filters, pagination, loading, producers, info },
+    { filters, pagination, loading, producers },
     { handleOnSearch, handleOnPageChange, setPagination },
   ] = useSearchState({ query: NODES_QUERY })
   const [items, setItems] = useState([])
@@ -40,15 +40,6 @@ const useNodeState = () => {
     }))
   }, [filters.name, setPagination])
 
-  useEffect(() => {
-    if (!info) return
-
-    setPagination((prev) => ({
-      ...prev,
-      pages: Math.ceil(info.producers?.count / prev.limit),
-    }))
-  }, [info, setPagination])
-
   useEffect(() => {
     if (!producers) return