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, };