Add filter input.

src/views/HomePage.js

 import React, { useEffect, useState } from "react";
 import Api from "../utils/api";
 
+import debounce from "lodash/debounce";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
@@ -11,6 +12,7 @@ import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
 import Pagination from "@material-ui/lab/Pagination";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import TextField from "@material-ui/core/TextField";
 import { useHistory } from "react-router-dom";
 
 const useStyles = makeStyles((theme) => ({
@@ -77,21 +79,36 @@ const DataTable = ({ rows }) => {
   );
 };
 
+const queryBuilder = ({ max = 15, skip = 0, filter, sortBy }) => {
+  return `max=${max}&skip=${skip}`;
+};
+
 const HomePage = () => {
   const [data, setData] = useState([]);
-  const [{ max, skip, count }, setPagination] = useState({
+  const [{ max, skip, count, filterValue }, setPagination] = useState({
     max: 15,
     skip: 0,
-    count: 0
+    count: 0,
+    filterValue: ""
   });
   const [initialized, setInitialized] = useState(false);
+  const [filter, setFilter] = useState("");
+  const handleFilter = ({ target: { value } }) => {
+    setFilter(value);
+  };
+  const onFilter = () =>
+    setPagination((prevPagination) => ({
+      ...prevPagination,
+      filterValue: filter
+    }));
+
   const handlePagination = (_event, page) => {
     setPagination((prevPagination) => ({
       ...prevPagination,
       skip: (page - 1) * prevPagination.max
     }));
   };
-  const query = `max=${max}&skip=${skip}`;
+  const query = queryBuilder({ max, skip, filterValue });
   useEffect(() => {
     setInitialized(false);
     Promise.all([
@@ -100,7 +117,7 @@ const HomePage = () => {
         setPagination((prevPagination) => ({ ...prevPagination, count: data["COUNT "] }))
       )
     ]).then(() => setInitialized(true));
-  }, [skip]);
+  }, [skip, filterValue]);
 
   if (!initialized) {
     return (
@@ -117,6 +134,7 @@ const HomePage = () => {
       <h1>Home page</h1>
       <button onClick={addMessage}>Add message</button>
       <button onClick={replaceMessage}>replace message</button>
+      <TextField onBlur={onFilter} type="number" label="Filter by year" value={filter} onChange={handleFilter} />
       <Pagination count={Math.ceil(count / max)} page={skip / max + 1} onChange={handlePagination} />
       <DataTable rows={data} />
     </div>