Add comparison buttons and comparison drawer to Favorites page

MetaPhase-Consulting · Mar 22, 2019 · 78bb583 · 78bb583
1 parent 1d3528d
commit 78bb583
Show file tree

Hide file tree

Showing 20 changed files with 88 additions and 132 deletions.
diff --git a/src/Components/FavoritePositions/FavoritePositions.jsx b/src/Components/FavoritePositions/FavoritePositions.jsx
@@ -42,6 +42,7 @@ bidList, onSortChange }) => (
       refreshFavorites
       showBidListButton
       useShortFavButton
+      showCompareButton
     />
   </div>
 );

diff --git a/src/Components/FavoritePositions/__snapshots__/FavoritePositions.test.jsx.snap b/src/Components/FavoritePositions/__snapshots__/FavoritePositions.test.jsx.snap
@@ -560,6 +560,7 @@ exports[`FavoritePositionsComponent matches snapshot 1`] = `
     }
     refreshFavorites={true}
     showBidListButton={true}
+    showCompareButton={true}
     title="favorites"
     type="default"
     useShortFavButton={true}

diff --git a/src/Components/HomePagePositionsList/HomePagePositionsList.jsx b/src/Components/HomePagePositionsList/HomePagePositionsList.jsx
@@ -13,6 +13,7 @@ const propTypes = {
   title: PropTypes.string.isRequired, // should be unique per page, since its used a react key
   showBidListButton: PropTypes.bool,
   useShortFavButton: PropTypes.bool,
+  showCompareButton: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -23,27 +24,29 @@ const defaultProps = {
   refreshFavorites: false,
   showBidListButton: false,
   useShortFavButton: false,
+  showCompareButton: false,
 };
 
-const HomePagePositionsList = ({ positions, favorites, isLoading,
-    bidList, type, refreshFavorites, title, showBidListButton, useShortFavButton }) => (
-      <div className={`condensed-card-highlighted ${isLoading ? 'results-loading' : ''}`}>
-        <div className="usa-grid-full condensed-card-grid">
-          {positions.map(p => (
-            <div key={`${title}-row-${p.id}`} className="usa-width-one-third condensed-card">
-              <ResultsCondensedCard
-                favorites={favorites}
-                position={p}
-                bidList={bidList}
-                type={type}
-                refreshFavorites={refreshFavorites}
-                showBidListButton={showBidListButton}
-                useShortFavButton={useShortFavButton}
-              />
-            </div>
-          ))}
+const HomePagePositionsList = ({ positions, favorites, isLoading, bidList, type,
+refreshFavorites, title, showBidListButton, useShortFavButton, showCompareButton }) => (
+  <div className={`condensed-card-highlighted ${isLoading ? 'results-loading' : ''}`}>
+    <div className="usa-grid-full condensed-card-grid">
+      {positions.map(p => (
+        <div key={`${title}-row-${p.id}`} className="usa-width-one-third condensed-card">
+          <ResultsCondensedCard
+            favorites={favorites}
+            position={p}
+            bidList={bidList}
+            type={type}
+            refreshFavorites={refreshFavorites}
+            showBidListButton={showBidListButton}
+            useShortFavButton={useShortFavButton}
+            showCompareButton={showCompareButton}
+          />
         </div>
-      </div>
+      ))}
+    </div>
+  </div>
 );
 
 HomePagePositionsList.propTypes = propTypes;

diff --git a/src/Components/HomePagePositionsList/__snapshots__/HomePagePositionsList.test.jsx.snap b/src/Components/HomePagePositionsList/__snapshots__/HomePagePositionsList.test.jsx.snap
@@ -240,6 +240,7 @@ exports[`HomePagePositionsList displays two rows 1`] = `
         }
         refreshFavorites={false}
         showBidListButton={false}
+        showCompareButton={false}
         type="default"
         useShortFavButton={false}
       />
@@ -477,6 +478,7 @@ exports[`HomePagePositionsList displays two rows 1`] = `
         }
         refreshFavorites={false}
         showBidListButton={false}
+        showCompareButton={false}
         type="default"
         useShortFavButton={false}
       />
@@ -714,6 +716,7 @@ exports[`HomePagePositionsList displays two rows 1`] = `
         }
         refreshFavorites={false}
         showBidListButton={false}
+        showCompareButton={false}
         type="default"
         useShortFavButton={false}
       />
@@ -951,6 +954,7 @@ exports[`HomePagePositionsList displays two rows 1`] = `
         }
         refreshFavorites={false}
         showBidListButton={false}
+        showCompareButton={false}
         type="default"
         useShortFavButton={false}
       />
@@ -1188,6 +1192,7 @@ exports[`HomePagePositionsList displays two rows 1`] = `
         }
         refreshFavorites={false}
         showBidListButton={false}
+        showCompareButton={false}
         type="default"
         useShortFavButton={false}
       />
@@ -1425,6 +1430,7 @@ exports[`HomePagePositionsList displays two rows 1`] = `
         }
         refreshFavorites={false}
         showBidListButton={false}
+        showCompareButton={false}
         type="default"
         useShortFavButton={false}
       />
@@ -1662,6 +1668,7 @@ exports[`HomePagePositionsList displays two rows 1`] = `
         }
         refreshFavorites={false}
         showBidListButton={false}
+        showCompareButton={false}
         type="default"
         useShortFavButton={false}
       />

diff --git a/src/Components/HomePagePositionsSection/__snapshots__/HomePagePositionsSection.test.jsx.snap b/src/Components/HomePagePositionsSection/__snapshots__/HomePagePositionsSection.test.jsx.snap
@@ -344,6 +344,7 @@ exports[`HomePagePositionsSection matches snapshot 1`] = `
     }
     refreshFavorites={false}
     showBidListButton={false}
+    showCompareButton={false}
     title="Title"
     type="default"
     useShortFavButton={false}

diff --git a/src/Components/ResultsCard/ResultsCard.jsx b/src/Components/ResultsCard/ResultsCard.jsx
@@ -54,7 +54,6 @@ const ResultsCard = (props) => {
   const {
     id,
     result,
-    onToggle,
     favorites,
   } = props;
 
@@ -102,7 +101,6 @@ const ResultsCard = (props) => {
   options.compare = {
     as: 'div',
     refKey: position,
-    onToggle,
   };
 
   return (
@@ -162,7 +160,6 @@ const ResultsCard = (props) => {
 ResultsCard.propTypes = {
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   result: POSITION_DETAILS.isRequired,
-  onToggle: PropTypes.func.isRequired,
   favorites: FAVORITE_POSITIONS_ARRAY,
 };
 

diff --git a/src/Components/ResultsCondensedCard/ResultsCondensedCard.jsx b/src/Components/ResultsCondensedCard/ResultsCondensedCard.jsx
@@ -17,6 +17,7 @@ const ResultsCondensedCard = (
     isProjectedVacancy,
     isRecentlyAvailable,
     useShortFavButton,
+    showCompareButton,
   }) => (
     <BoxShadow className="usa-grid-full condensed-card-inner">
       <ResultsCondensedCardTop
@@ -34,6 +35,7 @@ const ResultsCondensedCard = (
         showBidListButton={showBidListButton && !isProjectedVacancy}
         showBidCount={!isProjectedVacancy}
         useShortFavButton={useShortFavButton}
+        showCompareButton={showCompareButton}
       />
       <ResultsCondensedCardFooter
         position={position}
@@ -51,6 +53,7 @@ ResultsCondensedCard.propTypes = {
   isProjectedVacancy: PropTypes.bool,
   isRecentlyAvailable: PropTypes.bool,
   useShortFavButton: PropTypes.bool,
+  showCompareButton: PropTypes.bool,
 };
 
 ResultsCondensedCard.defaultProps = {
@@ -60,6 +63,7 @@ ResultsCondensedCard.defaultProps = {
   isProjectedVacancy: false,
   isRecentlyAvailable: false,
   useShortFavButton: false,
+  showCompareButton: false,
 };
 
 export default ResultsCondensedCard;
diff --git a/src/Components/ResultsCondensedCard/__snapshots__/ResultsCondensedCard.test.jsx.snap b/src/Components/ResultsCondensedCard/__snapshots__/ResultsCondensedCard.test.jsx.snap
@@ -326,6 +326,7 @@ exports[`ResultsCondensedCardComponent matches snapshot 1`] = `
     refreshFavorites={false}
     showBidCount={true}
     showBidListButton={false}
+    showCompareButton={false}
     type="default"
     useShortFavButton={false}
   />

diff --git a/src/Components/ResultsCondensedCardBottom/ResultsCondensedCardBottom.jsx b/src/Components/ResultsCondensedCardBottom/ResultsCondensedCardBottom.jsx
@@ -7,6 +7,7 @@ import Favorite from '../../Containers/Favorite';
 import BidListButton from '../../Containers/BidListButton';
 import PermissionsWrapper from '../../Containers/PermissionsWrapper';
 import ResultsCondensedCardStats from '../ResultsCondensedCardStats';
+import CompareCheck from '../CompareCheck';
 
 const ResultsCondensedCardBottom = (
   { position,
@@ -15,6 +16,7 @@ const ResultsCondensedCardBottom = (
     showBidListButton,
     showBidCount,
     useShortFavButton,
+    showCompareButton,
   }) => (
     <div className="condensed-card-bottom-container">
       <div className="usa-grid-full condensed-card-bottom">
@@ -40,6 +42,10 @@ const ResultsCondensedCardBottom = (
               />
             </PermissionsWrapper>
           }
+          {
+            showCompareButton &&
+            <CompareCheck as="div" refKey={position.position_number} />
+          }
         </div>
       </div>
     </div>
@@ -52,6 +58,7 @@ ResultsCondensedCardBottom.propTypes = {
   showBidListButton: PropTypes.bool,
   showBidCount: PropTypes.bool,
   useShortFavButton: PropTypes.bool,
+  showCompareButton: PropTypes.bool,
 };
 
 ResultsCondensedCardBottom.defaultProps = {
@@ -60,6 +67,7 @@ ResultsCondensedCardBottom.defaultProps = {
   showBidListButton: false,
   showBidCount: true,
   useShortFavButton: false,
+  showCompareButton: false,
 };
 
 export default ResultsCondensedCardBottom;
diff --git a/src/Components/ResultsContainer/ResultsContainer.jsx b/src/Components/ResultsContainer/ResultsContainer.jsx
@@ -27,7 +27,7 @@ class ResultsContainer extends Component {
   render() {
     const { results, isLoading, hasErrored, sortBy, pageSize, hasLoaded, totalResults,
             defaultSort, pageSizes, defaultPageSize, refreshKey, pillFilters, userProfile,
-            defaultPageNumber, queryParamUpdate, onToggle, onQueryParamToggle,
+            defaultPageNumber, queryParamUpdate, onQueryParamToggle,
             newSavedSearchHasErrored, saveSearch, newSavedSearchSuccess,
             currentSavedSearch, newSavedSearchIsSaving, resetSavedSearchAlerts, bidList,
       } = this.props;
@@ -75,7 +75,6 @@ class ResultsContainer extends Component {
             }
             <ResultsList
               key={refreshKey}
-              onToggle={onToggle}
               results={results}
               isLoading={!hasLoaded}
               favorites={userProfile.favorite_positions}
@@ -114,7 +113,6 @@ ResultsContainer.propTypes = {
   defaultPageNumber: PropTypes.number,
   pageSize: PropTypes.number.isRequired,
   hasLoaded: PropTypes.bool.isRequired,
-  onToggle: PropTypes.func.isRequired,
   refreshKey: PropTypes.number, // refresh components that rely on local storage
   pillFilters: PILL_ITEM_ARRAY,
   scrollToTop: PropTypes.func,

diff --git a/src/Components/ResultsContainer/__snapshots__/ResultsContainer.test.jsx.snap b/src/Components/ResultsContainer/__snapshots__/ResultsContainer.test.jsx.snap
@@ -229,7 +229,6 @@ exports[`ResultsContainerComponent matches snapshot 1`] = `
       bidList={Array []}
       favorites={Array []}
       isLoading={false}
-      onToggle={[Function]}
       results={
         Object {
           "count": 2,

diff --git a/src/Components/ResultsFilterContainer/ResultsFilterContainer.jsx b/src/Components/ResultsFilterContainer/ResultsFilterContainer.jsx
@@ -7,33 +7,17 @@ import SearchFiltersContainer from '../SearchFilters/SearchFiltersContainer/Sear
 import ResetFilters from '../ResetFilters/ResetFilters';
 
 class ResultsFilterContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.onQueryParamUpdate = this.onQueryParamUpdate.bind(this);
-    this.onQueryParamToggle = this.onQueryParamToggle.bind(this);
-  }
-
   shouldComponentUpdate(nextProps) {
     if (this.props !== nextProps) {
       return true;
     }
     return false;
   }
 
-  onQueryParamUpdate(e) {
-    this.props.onQueryParamUpdate(e);
-    this.props.onChildToggle();
-  }
-
-  onQueryParamToggle(param, value, remove) {
-    this.props.onQueryParamToggle(param, value, remove);
-    this.props.onChildToggle();
-  }
-
   render() {
     const { filters, resetFilters, setAccordion, selectedAccordion,
       fetchMissionAutocomplete, missionSearchResults, missionSearchIsLoading,
-      missionSearchHasErrored, fetchPostAutocomplete,
+      missionSearchHasErrored, fetchPostAutocomplete, onQueryParamUpdate, onQueryParamToggle,
       postSearchResults, postSearchIsLoading, postSearchHasErrored } = this.props;
     return (
       <div className="filter-container">
@@ -47,8 +31,8 @@ class ResultsFilterContainer extends Component {
           <div className="usa-grid-full search-filters-container">
             <SearchFiltersContainer
               filters={filters}
-              queryParamUpdate={this.onQueryParamUpdate}
-              queryParamToggle={this.onQueryParamToggle}
+              queryParamUpdate={onQueryParamUpdate}
+              queryParamToggle={onQueryParamToggle}
               selectedAccordion={selectedAccordion}
               setAccordion={setAccordion}
               fetchMissionAutocomplete={fetchMissionAutocomplete}
@@ -70,7 +54,6 @@ class ResultsFilterContainer extends Component {
 ResultsFilterContainer.propTypes = {
   filters: FILTER_ITEMS_ARRAY.isRequired,
   onQueryParamUpdate: PropTypes.func.isRequired,
-  onChildToggle: PropTypes.func.isRequired,
   onQueryParamToggle: PropTypes.func.isRequired,
   resetFilters: PropTypes.func.isRequired,
   setAccordion: PropTypes.func.isRequired,

diff --git a/src/Components/ResultsFilterContainer/ResultsFilterContainer.test.jsx b/src/Components/ResultsFilterContainer/ResultsFilterContainer.test.jsx
@@ -1,7 +1,6 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import toJSON from 'enzyme-to-json';
-import sinon from 'sinon';
 import ResultsFilterContainer from './ResultsFilterContainer';
 import { bidderUserObject } from '../../__mocks__/userObject';
 
@@ -13,7 +12,6 @@ describe('ResultsFilterContainerComponent', () => {
   const props = {
     filters: items,
     onQueryParamUpdate: () => {},
-    onChildToggle: () => {},
     onQueryParamToggle: () => {},
     resetFilters: () => {},
     setAccordion: () => {},
@@ -51,34 +49,6 @@ describe('ResultsFilterContainerComponent', () => {
     expect(wrapper).toBeDefined();
   });
 
-  it('can call the onQueryParamUpdate function', () => {
-    const value = 1;
-    const queryUpdateSpy = sinon.spy();
-    const toggleSpy = sinon.spy();
-    const wrapper = shallow(<ResultsFilterContainer
-      {...props}
-      onQueryParamUpdate={queryUpdateSpy}
-      onChildToggle={toggleSpy}
-    />);
-    wrapper.instance().onQueryParamUpdate(value);
-    sinon.assert.calledOnce(queryUpdateSpy);
-    sinon.assert.calledOnce(toggleSpy);
-  });
-
-  it('can call the onQueryParamToggle function', () => {
-    const value = 1;
-    const queryToggleSpy = sinon.spy();
-    const toggleSpy = sinon.spy();
-    const wrapper = shallow(<ResultsFilterContainer
-      {...props}
-      onChildToggle={toggleSpy}
-      onQueryParamToggle={queryToggleSpy}
-    />);
-    wrapper.instance().onQueryParamToggle(value, value, value);
-    sinon.assert.calledOnce(queryToggleSpy);
-    sinon.assert.calledOnce(toggleSpy);
-  });
-
   it('matches snapshot', () => {
     const wrapper = shallow(<ResultsFilterContainer
       {...props}