Merge pull request #2090 from G-Ambatte/addQueryToUserPageUrl

Add UserPage filtering to/from URL

client/homebrew/homebrew.jsx

@@ -49,7 +49,7 @@ const Homebrew = createClass({
 						<Route path='/share/:id' component={(routeProps)=><SharePage id={routeProps.match.params.id} brew={this.props.brew} />}/>
 						<Route path='/new/:id' component={(routeProps)=><NewPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
 						<Route path='/new' exact component={(routeProps)=><NewPage />}/>
-						<Route path='/user/:username' component={(routeProps)=><UserPage username={routeProps.match.params.username} brews={this.props.brews} />}/>
+						<Route path='/user/:username' component={(routeProps)=><UserPage username={routeProps.match.params.username} brews={this.props.brews} query={queryString.parse(routeProps.location.search)}/>}/>
 						<Route path='/print/:id' component={(routeProps)=><PrintPage brew={this.props.brew} query={queryString.parse(routeProps.location.search)} />}/>
 						<Route path='/print' exact component={(routeProps)=><PrintPage query={queryString.parse(routeProps.location.search)} />}/>
 						<Route path='/changelog' exact component={()=><SharePage brew={this.props.brew} />}/>

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,35 @@ const ListPage = createClass({
 
 	handleFilterTextChange : function(e){
 		this.setState({
-			filterString : e.target.value
+			filterString : e.target.value,
 		});
+		this.updateUrl(e.target.value);
 		return;
 	},
 
+	updateUrl : function(filterTerm){
+		const url = new URL(window.location.href);
+		const urlParams = new URLSearchParams(url.search);
+		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);
+	},
+
 	renderFilterOption : function(){
 		return <td>
 			<label>
 				<i className='fas fa-search'></i>
 				<input
 					type='search'
-					placeholder='search title/description'
+					autoFocus={true}
+					placeholder='filter title/description'
 					onChange={this.handleFilterTextChange}
+					value={this.state.filterString}
 				/>
 			</label>
 		</td>;

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 <ListPage brewCollection={this.state.brewCollection} navItems={this.navItems()}></ListPage>;
+		return <ListPage brewCollection={this.state.brewCollection} navItems={this.navItems()} query={this.props.query}></ListPage>;
 	}
 });