diff --git a/web/src/components/SearchInput/SearchInput.js b/web/src/components/SearchInput/SearchInput.js
index 044f271..0f611cc 100755
--- a/web/src/components/SearchInput/SearchInput.js
+++ b/web/src/components/SearchInput/SearchInput.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { debounce } from 'lodash';
@@ -27,10 +27,10 @@ const useStyles = makeStyles(theme => ({
}));
const SearchInput = props => {
- const { className, onChange, style, ...rest } = props;
+ const { className, search, onChange, style, ...rest } = props;
const classes = useStyles();
- const handler = useCallback(debounce(onChange, 300), []);
+ const handler = debounce(onChange, 300);
return (
{
autoFocus
className={classes.input}
disableUnderline
- onChange={e => handler(e.target.value || undefined)}
+ defaultValue={search}
+ onChange={e => handler(e.target.value)}
/>
);
@@ -52,6 +53,7 @@ const SearchInput = props => {
SearchInput.propTypes = {
className: PropTypes.string,
+ search: PropTypes.string,
onChange: PropTypes.func.isRequired,
style: PropTypes.object,
};
diff --git a/web/src/views/FlagList/FlagList.js b/web/src/views/FlagList/FlagList.js
index 3631453..dd21c01 100755
--- a/web/src/views/FlagList/FlagList.js
+++ b/web/src/views/FlagList/FlagList.js
@@ -18,6 +18,7 @@ const useStyles = makeStyles(theme => ({
}));
const rowsPerPageKey = 'rowsPerPage';
+const searchKey = 'flagSearch';
const rowsPerPageOptions = [10, 25, 50, { value: -1, label: 'All' }];
function EmptyMessage({ message }) {
@@ -30,7 +31,7 @@ function EmptyMessage({ message }) {
const FlagList = () => {
const classes = useStyles();
- const [search, setSearch] = useState();
+ const [search, setSearch] = useState(sessionStorage.getItem(searchKey) || '');
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(Number(localStorage.getItem(rowsPerPageKey) || 25));
const { loading, error, data } = useQuery(FLAGS_QUERY, {
@@ -68,10 +69,14 @@ const FlagList = () => {
return (
-
{
- setSearch(v);
- setPage(0)
- }}/>
+ {
+ setSearch(v);
+ sessionStorage.setItem(searchKey, v);
+ setPage(0);
+ }}
+ />
{content}
diff --git a/web/src/views/FlagList/components/FlagsToolbar/FlagsToolbar.js b/web/src/views/FlagList/components/FlagsToolbar/FlagsToolbar.js
index 7176887..b57e18f 100755
--- a/web/src/views/FlagList/components/FlagsToolbar/FlagsToolbar.js
+++ b/web/src/views/FlagList/components/FlagsToolbar/FlagsToolbar.js
@@ -22,7 +22,7 @@ const useStyles = makeStyles(theme => ({
}));
const FlagsToolbar = props => {
- const { className, onSearch, ...rest } = props;
+ const { className, search, onSearch, ...rest } = props;
const classes = useStyles();
@@ -34,6 +34,7 @@ const FlagsToolbar = props => {
@@ -45,6 +46,7 @@ const FlagsToolbar = props => {
FlagsToolbar.propTypes = {
className: PropTypes.string,
+ search: PropTypes.string,
onSearch: PropTypes.func.isRequired,
};