feat: keep search results when coming back from the (new/edit) flag page

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 (
     <Paper
@@ -44,14 +44,16 @@ const SearchInput = props => {
         autoFocus
         className={classes.input}
         disableUnderline
-        onChange={e => handler(e.target.value || undefined)}
+        defaultValue={search}
+        onChange={e => handler(e.target.value)}
       />
     </Paper>
   );
 };
 
 SearchInput.propTypes = {
   className: PropTypes.string,
+  search: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   style: PropTypes.object,
 };

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 (
     <div className={classes.root}>
-      <FlagsToolbar onSearch={v => {
-        setSearch(v);
-        setPage(0)
-      }}/>
+      <FlagsToolbar
+        search={search}
+        onSearch={v => {
+          setSearch(v);
+          sessionStorage.setItem(searchKey, v);
+          setPage(0);
+        }}
+      />
       <div className={classes.content}>
         {content}
       </div>

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 => {
       <div className={classes.row}>
         <SearchInput
           className={classes.searchInput}
+          search={search}
           onChange={onSearch}
           placeholder="Search flag"
         />
@@ -45,6 +46,7 @@ const FlagsToolbar = props => {
 
 FlagsToolbar.propTypes = {
   className: PropTypes.string,
+  search: PropTypes.string,
   onSearch: PropTypes.func.isRequired,
 };