Moved management of filtering options to own reducer

src/short-urls/SearchBar.js

@@ -1,15 +1,57 @@
-import React from 'react';
 import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import React from 'react';
+import { connect } from 'react-redux';
+import { updateShortUrlsList } from './reducers/shortUrlsList';
 import './SearchBar.scss';
 
-export default class SearchBar extends React.Component {
+export class SearchBar extends React.Component {
+  state = {
+    showClearBtn: false,
+    searchTerm: '',
+  };
+  timer = null;
+
   render() {
     return (
       <div className="search-bar">
-        <input type="text" className="form-control form-control-lg search-bar__input" placeholder="Search..." />
+        <input type="text"
+               className="form-control form-control-lg search-bar__input"
+               placeholder="Search..."
+               onChange={e => this.searchTermChanged(e.target.value)}
+               value={this.state.searchTerm}
+        />
         <FontAwesomeIcon icon={searchIcon} className="search-bar__icon" />
+        <div className="close search-bar__close"
+             hidden={! this.state.showClearBtn}
+             onClick={() => this.searchTermChanged('')}
+             id="search-bar__close"
+        >
+          &times;
+        </div>
       </div>
     );
   }
+
+  searchTermChanged(searchTerm) {
+    this.setState({
+      showClearBtn: searchTerm !== '',
+      searchTerm: searchTerm,
+    });
+
+    const resetTimer = () => {
+      clearTimeout(this.timer);
+      this.timer = null;
+    };
+    resetTimer();
+
+    this.timer = setTimeout(() => {
+      this.props.updateShortUrlsList({ ...this.props.shortUrlsListParams, searchTerm });
+      resetTimer();
+    }, 500);
+  }
 }
+
+export default connect(state => (
+  { shortUrlsListParams: state.shortUrlsListParams }
+), { updateShortUrlsList })(SearchBar);

src/short-urls/SearchBar.scss

@@ -6,6 +6,7 @@
 
 .search-bar__input.search-bar__input {
   padding-left: 40px;
+  padding-right: 40px;
 }
 
 .search-bar__icon {
@@ -13,3 +14,8 @@
   left: 15px;
   color: #707581;
 }
+
+.search-bar__close {
+  @include vertical-align();
+  right: 15px;
+}

src/short-urls/ShortUrlsList.js

@@ -16,7 +16,14 @@ import './ShortUrlsList.scss';
 export class ShortUrlsList extends React.Component {
   componentDidMount() {
     const { match } = this.props;
-    this.props.listShortUrls(match.params.serverId, { page: match.params.page });
+    console.log(this.props.shortUrlsListParams, match.params, {
+      ...this.props.shortUrlsListParams,
+      page: match.params.page
+    });
+    this.props.listShortUrls(match.params.serverId, {
+      ...this.props.shortUrlsListParams,
+      page: match.params.page
+    });
   }
 
   render() {
@@ -129,4 +136,5 @@ class RowMenu extends React.Component {
 export default connect(state => ({
   shortUrlsList: state.shortUrlsList,
   selectedServer: state.selectedServer,
+  shortUrlsListParams: state.shortUrlsListParams,
 }), { listShortUrls })(ShortUrlsList);

src/short-urls/reducers/shortUrlsList.js

@@ -1,10 +1,11 @@
-import { LIST_SHORT_URLS } from '../../reducers/types';
+import { LIST_SHORT_URLS, UPDATE_SHORT_URLS_LIST } from '../../reducers/types';
 import ServersService from '../../servers/services';
 import ShlinkApiClient from '../../api/ShlinkApiClient';
 
 export default function shortUrlsListReducer(state = [], action) {
   switch (action.type) {
     case LIST_SHORT_URLS:
+    case UPDATE_SHORT_URLS_LIST:
       return action.shortUrls;
     default:
       return state;
@@ -20,3 +21,10 @@ export const listShortUrls = (serverId, params = {}) => {
     dispatch({ type: LIST_SHORT_URLS, shortUrls, selectedServer });
   };
 };
+
+export const updateShortUrlsList = (params = {}) => {
+  return async dispatch => {
+    const shortUrls = await ShlinkApiClient.listShortUrls(params);
+    dispatch({ type: UPDATE_SHORT_URLS_LIST, shortUrls, params });
+  };
+};

src/short-urls/reducers/shortUrlsListParams.js

@@ -0,0 +1,10 @@
+import { UPDATE_SHORT_URLS_LIST } from '../../reducers/types';
+
+export default function shortUrlsListReducer(state = { page: 1 }, action) {
+  switch (action.type) {
+    case UPDATE_SHORT_URLS_LIST:
+      return { ...state, ...action.params };
+    default:
+      return state;
+  }
+}