Merge pull request #5470 from topcoder-platform/gig-filters-url

Gig filters url

Author: luizrrodrigues

.circleci/config.yml

@@ -275,8 +275,7 @@ workflows:
           filters:
             branches:
               only:
-                - recruit-apis
-                - feature/recommender-sync-develop
+                - develop
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
@@ -291,22 +290,21 @@ workflows:
           filters:
             branches:
               only:
-                - bug-bash
+                - free
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global
           filters:
             branches:
               only:
-                - bug-bash
+                - free
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global         
           filters:
             branches:
               only:
                 - develop
-                - feature/recommender-sync-develop
       - "approve-smoke-test-on-staging":
           type: approval
           requires:

src/shared/components/GUIKit/JobListCard/index.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 /**
- * SearchCombo component.
+ * Job card component.
  */
 import React from 'react';
 import PT from 'prop-types';

src/shared/components/GUIKit/Paginate/index.jsx

@@ -5,21 +5,25 @@
 import React from 'react';
 import ReactPaginate from 'react-paginate';
 import PT from 'prop-types';
+import { useMediaQuery } from 'react-responsive';
 import './style.scss';
 
 function Paginate({
   pages,
   page,
   onChange,
 }) {
+  const isMobile = useMediaQuery({
+    query: '(max-device-width: 768px)',
+  });
   return (
     <div styleName="container">
       <ReactPaginate
         pageCount={pages}
         initialPage={page}
         forcePage={page}
-        pageRangeDisplayed={3}
-        marginPagesDisplayed={2}
+        pageRangeDisplayed={isMobile ? 1 : 3}
+        marginPagesDisplayed={isMobile ? 1 : 2}
         onPageChange={onChange}
         activeClassName="active"
         previousLabel="PREV"

src/shared/components/GUIKit/SearchCombo/index.jsx

@@ -1,7 +1,7 @@
 /**
  * SearchCombo component.
  */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PT from 'prop-types';
 import './style.scss';
 import IconClearSearch from 'assets/images/icon-clear-search.svg';
@@ -13,6 +13,7 @@ function SearchCombo({
   onSearch,
 }) {
   const [inputVal, setVal] = useState(term);
+  useEffect(() => setVal(term), [term]);
   const clearSearch = () => {
     setVal('');
     onSearch('');

src/shared/containers/Gigs/RecruitCRMJobs.jsx

@@ -12,6 +12,7 @@ import Dropdown from 'components/GUIKit/Dropdown';
 import PT from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
+import { getQuery, updateQuery } from 'utils/url';
 import './jobLisingStyles.scss';
 
 const GIGS_PER_PAGE = 10;
@@ -48,14 +49,23 @@ class RecruitCRMJobsContainer extends React.Component {
       getJobs,
       jobs,
     } = this.props;
-
+    const { state } = this;
+    const q = getQuery();
     // This gets all jobs.
     // Pagination and filtering on front-side
     if (!jobs.length) {
       getJobs({
         job_status: 1, // Open jobs only
       });
     }
+    // handle URL query if present
+    if (q && q.search) {
+      const stateUpdate = {
+        ...state,
+        term: q.search,
+      };
+      this.setState(stateUpdate);
+    }
   }
 
   /**
@@ -64,7 +74,6 @@ class RecruitCRMJobsContainer extends React.Component {
    */
   onFilter(newState) {
     // Do updates
-
     // update the state
     this.setState(newState);
   }
@@ -74,12 +83,20 @@ class RecruitCRMJobsContainer extends React.Component {
       term: newTerm,
       page: 0,
     });
+    // update the URL query
+    updateQuery({
+      search: newTerm,
+    });
   }
 
   onPaginate(newPage) {
     this.onFilter({
       page: newPage.selected,
     });
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
   }
 
   onLocation(newLocation) {

src/shared/containers/Gigs/jobLisingStyles.scss

@@ -30,6 +30,7 @@
 
       @include xs-to-sm {
         margin-right: 0;
+        margin-bottom: 15px;
       }
 
       &:first-child {