From 1c641e3aff2d21f8eadc57d08a1f21e79a3160b5 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 25 Mar 2022 11:20:16 +1300 Subject: [PATCH 1/4] Initial pass at UserPage filtering to/from URL --- client/homebrew/homebrew.jsx | 2 +- .../pages/basePages/listPage/listPage.jsx | 25 +++++++++++++++++-- client/homebrew/pages/userPage/userPage.jsx | 3 ++- 3 files changed, 26 insertions(+), 4 deletions(-) diff --git a/client/homebrew/homebrew.jsx b/client/homebrew/homebrew.jsx index 54dcf2206..9fae57ae0 100644 --- a/client/homebrew/homebrew.jsx +++ b/client/homebrew/homebrew.jsx @@ -46,7 +46,7 @@ const Homebrew = createClass({ }/> }/> }/> - }/> + }/> }/> }/> }/> diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index e1f300ab2..c359caf02 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -24,7 +24,8 @@ const ListPage = createClass({ return { sortType : 'alpha', sortDir : 'asc', - filterString : '' + filterString : this.props.query?.filter || '', + query : this.props.query }; }, @@ -74,19 +75,39 @@ const ListPage = createClass({ handleFilterTextChange : function(e){ this.setState({ - filterString : e.target.value + filterString : e.target.value, }); return; }, + handleKeys : function(e){ + if(e.key === 'Enter') { + this.updateUrl(e.target.value); + } + }, + + updateUrl : function(filterTerm){ + const url = new URL(window.location.href); + const urlParams = new URLSearchParams(url.search); + if(urlParams.get('filter') == filterTerm) return; + urlParams.set('filter', filterTerm); + if(!filterTerm) urlParams.delete('filter'); + url.search = urlParams; + window.location.replace(url.href); + }, + renderFilterOption : function(){ return ; diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx index a78ba11af..6c3af7907 100644 --- a/client/homebrew/pages/userPage/userPage.jsx +++ b/client/homebrew/pages/userPage/userPage.jsx @@ -19,6 +19,7 @@ const UserPage = createClass({ return { username : '', brews : [], + query : '' }; }, getInitialState : function() { @@ -62,7 +63,7 @@ const UserPage = createClass({ }, render : function(){ - return ; + return ; } }); From 32a5e710153a572893b526bb24fe77c52bd284eb Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 25 Mar 2022 11:28:30 +1300 Subject: [PATCH 2/4] Change verbiage of filter placeholder text --- client/homebrew/pages/basePages/listPage/listPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index c359caf02..5cf337b59 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -103,7 +103,7 @@ const ListPage = createClass({ {e.target.select();}} onKeyDown={(e)=>{this.handleKeys(e);}} From 17dd738ac1375884c92293834bfbb0317204132e Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Fri, 25 Mar 2022 12:23:01 +1300 Subject: [PATCH 3/4] Shift to `history.replaceState` --- client/homebrew/pages/basePages/listPage/listPage.jsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index 5cf337b59..269c6f02c 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -77,15 +77,10 @@ const ListPage = createClass({ this.setState({ filterString : e.target.value, }); + this.updateUrl(e.target.value); return; }, - handleKeys : function(e){ - if(e.key === 'Enter') { - this.updateUrl(e.target.value); - } - }, - updateUrl : function(filterTerm){ const url = new URL(window.location.href); const urlParams = new URLSearchParams(url.search); @@ -93,7 +88,7 @@ const ListPage = createClass({ urlParams.set('filter', filterTerm); if(!filterTerm) urlParams.delete('filter'); url.search = urlParams; - window.location.replace(url.href); + window.history.replaceState(null, null, url); }, renderFilterOption : function(){ @@ -105,8 +100,6 @@ const ListPage = createClass({ autoFocus={true} placeholder='filter title/description' onChange={this.handleFilterTextChange} - onFocus={(e)=>{e.target.select();}} - onKeyDown={(e)=>{this.handleKeys(e);}} value={this.state.filterString} /> From 41c0b7fef9e07ad24f669dbbe4d6f45ee236416e Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Thu, 31 Mar 2022 22:21:58 -0400 Subject: [PATCH 4/4] Formatting --- client/homebrew/pages/basePages/listPage/listPage.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index 269c6f02c..934d147be 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -84,9 +84,12 @@ const ListPage = createClass({ updateUrl : function(filterTerm){ const url = new URL(window.location.href); const urlParams = new URLSearchParams(url.search); - if(urlParams.get('filter') == filterTerm) return; - urlParams.set('filter', filterTerm); - if(!filterTerm) urlParams.delete('filter'); + if(urlParams.get('filter') == filterTerm) + return; + if(!filterTerm) + urlParams.delete('filter'); + else + urlParams.set('filter', filterTerm); url.search = urlParams; window.history.replaceState(null, null, url); },