Add name field to the filter subscription dialog

client/src/actions/index.js

@@ -398,10 +398,10 @@ export const addFilterRequest = createAction('ADD_FILTER_REQUEST');
 export const addFilterFailure = createAction('ADD_FILTER_FAILURE');
 export const addFilterSuccess = createAction('ADD_FILTER_SUCCESS');
 
-export const addFilter = url => async (dispatch) => {
+export const addFilter = (url, name) => async (dispatch) => {
     dispatch(addFilterRequest());
     try {
-        await apiClient.addFilter(url);
+        await apiClient.addFilter(url, name);
         dispatch(addFilterSuccess(url));
         dispatch(getFilteringStatus());
     } catch (error) {

client/src/api/Api.js

@@ -167,10 +167,11 @@ export default class Api {
         return this.makeRequest(path, method);
     }
 
-    addFilter(url) {
+    addFilter(url, name) {
         const { path, method } = this.FILTERING_ADD_FILTER;
-        const parameter = 'url';
-        const requestBody = `${parameter}=${url}`;
+        const urlParameter = 'url';
+        const nameParameter = 'name';
+        const requestBody = `${urlParameter}=${url}&${nameParameter}=${name}`;
         const config = {
             data: requestBody,
             header: { 'Content-Type': 'text/plain' },

client/src/components/ui/Modal.js

@@ -7,12 +7,15 @@ import './Modal.css';
 
 ReactModal.setAppElement('#root');
 
-export default class Modal extends Component {
-    state = {
+const initialState = {
     url: '',
+    name: '',
     isUrlValid: false,
 };
 
+export default class Modal extends Component {
+    state = initialState;
+
     // eslint-disable-next-line
     isUrlValid = url => {
         return R_URL_REQUIRES_PROTOCOL.test(url);
@@ -27,33 +30,48 @@ export default class Modal extends Component {
         }
     };
 
+    handleNameChange = (e) => {
+        const { value: name } = e.currentTarget;
+        this.setState({ ...this.state, name });
+    };
+
     handleNext = () => {
-        this.props.addFilter(this.state.url);
+        this.props.addFilter(this.state.url, this.state.name);
         setTimeout(() => {
             if (this.props.isFilterAdded) {
-                this.props.toggleModal();
+                this.closeModal();
             }
         }, 2000);
     };
+
+    closeModal = () => {
+        this.props.toggleModal();
+        this.setState({ ...this.state, ...initialState });
+    }
+
     render() {
         const {
             isOpen,
-            toggleModal,
             title,
             inputDescription,
         } = this.props;
-        const { isUrlValid, url } = this.state;
-        const inputClass = classnames({
+        const { isUrlValid, url, name } = this.state;
+        const inputUrlClass = classnames({
             'form-control mb-2': true,
             'is-invalid': url.length > 0 && !isUrlValid,
             'is-valid': url.length > 0 && isUrlValid,
         });
+        const inputNameClass = classnames({
+            'form-control mb-2': true,
+            'is-valid': name.length > 0,
+        });
 
         const renderBody = () => {
             if (!this.props.isFilterAdded) {
                 return (
                     <React.Fragment>
-                        <input type="text" className={inputClass} placeholder="Enter URL or path" onChange={this.handleUrlChange}/>
+                        <input type="text" className={inputNameClass} placeholder="Enter name" onChange={this.handleNameChange} />
+                        <input type="text" className={inputUrlClass} placeholder="Enter URL" onChange={this.handleUrlChange} />
                         {inputDescription &&
                             <div className="description">
                                 {inputDescription}
@@ -68,21 +86,21 @@ export default class Modal extends Component {
             );
         };
 
-        const isValidForSubmit = !(url.length > 0 && isUrlValid);
+        const isValidForSubmit = !(url.length > 0 && isUrlValid && name.length > 0);
 
         return (
             <ReactModal
                 className="Modal__Bootstrap modal-dialog modal-dialog-centered"
                 closeTimeoutMS={0}
                 isOpen={ isOpen }
-                onRequestClose={toggleModal}
+                onRequestClose={this.closeModal}
             >
                 <div className="modal-content">
                     <div className="modal-header">
                     <h4 className="modal-title">
                         {title}
                     </h4>
-                    <button type="button" className="close" onClick={toggleModal}>
+                    <button type="button" className="close" onClick={this.closeModal}>
                         <span className="sr-only">Close</span>
                     </button>
                     </div>
@@ -92,7 +110,7 @@ export default class Modal extends Component {
                     {
                         !this.props.isFilterAdded &&
                             <div className="modal-footer">
-                                <button type="button" className="btn btn-secondary" onClick={toggleModal}>Cancel</button>
+                                <button type="button" className="btn btn-secondary" onClick={this.closeModal}>Cancel</button>
                                 <button type="button" className="btn btn-success" onClick={this.handleNext} disabled={isValidForSubmit}>Add filter</button>
                             </div>
                     }