From 67a54a96ffd804ab88938b15a224900443936f51 Mon Sep 17 00:00:00 2001
From: Victor Tavares <vtavares@utilitywarehouse.co.uk>
Date: Sat, 2 May 2020 23:42:36 +0100
Subject: [PATCH] feat: keep search results when coming back from the
 (new/edit) flag page

---
 web/src/components/SearchInput/SearchInput.js     | 10 ++++++----
 web/src/views/FlagList/FlagList.js                | 15 ++++++++++-----
 .../components/FlagsToolbar/FlagsToolbar.js       |  4 +++-
 3 files changed, 19 insertions(+), 10 deletions(-)

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 (
     <Paper
@@ -44,7 +44,8 @@ const SearchInput = props => {
         autoFocus
         className={classes.input}
         disableUnderline
-        onChange={e => handler(e.target.value || undefined)}
+        defaultValue={search}
+        onChange={e => handler(e.target.value)}
       />
     </Paper>
   );
@@ -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 (
     <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>
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 => {
       <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,
 };