TM-410 - display favorites list as 4 across above the large break poi…

…nt (#66) * fix: display favorites list as 4 across above the large break point * fix: display favorites list as 4 across above the large break point
MetaPhase-Consulting · Feb 11, 2019 · fc757c2 · fc757c2
1 parent e319608
commit fc757c2
Show file tree

Hide file tree

Showing 9 changed files with 322 additions and 82 deletions.
diff --git a/src/Components/FavoritePositions/FavoritePositions.jsx b/src/Components/FavoritePositions/FavoritePositions.jsx
@@ -40,6 +40,7 @@ bidList, onSortChange }) => (
       title="favorites"
       maxLength={300}
       refreshFavorites
+      itemsPerRow={4}
     />
   </div>
 );

diff --git a/src/Components/FavoritePositions/__snapshots__/FavoritePositions.test.jsx.snap b/src/Components/FavoritePositions/__snapshots__/FavoritePositions.test.jsx.snap
@@ -386,6 +386,7 @@ exports[`FavoritePositionsComponent matches snapshot 1`] = `
       ]
     }
     isLoading={false}
+    itemsPerRow={4}
     maxLength={300}
     positions={
       Array [

diff --git a/src/Components/HomePagePositionsList/HomePagePositionsList.jsx b/src/Components/HomePagePositionsList/HomePagePositionsList.jsx
@@ -4,70 +4,48 @@ import ResultsCondensedCard from '../ResultsCondensedCard';
 import { POSITION_DETAILS_ARRAY, FAVORITE_POSITIONS_ARRAY, BID_RESULTS, HOME_PAGE_CARD_TYPE } from '../../Constants/PropTypes';
 
 const propTypes = {
-  maxLength: PropTypes.number,
   positions: POSITION_DETAILS_ARRAY,
   favorites: FAVORITE_POSITIONS_ARRAY,
   isLoading: PropTypes.bool,
   bidList: BID_RESULTS.isRequired,
   type: HOME_PAGE_CARD_TYPE,
-  title: PropTypes.string.isRequired, // should be unique per page, since its used a react key
   refreshFavorites: PropTypes.bool,
+  title: PropTypes.string.isRequired, // should be unique per page, since its used a react key
+  itemsPerRow: PropTypes.number,
 };
 
 const defaultProps = {
-  maxLength: 3,
   positions: [],
   favorites: [],
   isLoading: false,
   type: 'default',
   refreshFavorites: false,
+  itemsPerRow: 3,
 };
 
-const HomePagePositionsList = ({ maxLength, positions, favorites, isLoading,
-    bidList, type, title, refreshFavorites }) => {
-  // create an initial array with x groups of 3
-  // because our grid is in thirds
-  const numberOfRows = maxLength / 3;
-  const rows = Array(numberOfRows).fill(null);
-
-  // Form positions into component and add them to array
-  for (let i = 0; i < numberOfRows; i += 1) {
-    // load positions into an array of 3
-    const positionList = Array(3).fill(null);
+const widthClass = {
+  3: 'usa-width-one-third',
+  4: 'usa-width-one-fourth',
+};
 
-    // copy prop list of positions, copy
-    // and push postions into a list
-    const positionsCopy = positions;
-    positionsCopy.slice((i * 3), ((i + 1) * 3)).forEach((p, j) => {
-      positionList[j] = (
-        <div className="usa-width-one-third condensed-card">
-          <ResultsCondensedCard
-            favorites={favorites}
-            position={p}
-            bidList={bidList}
-            type={type}
-            refreshFavorites={refreshFavorites}
-          />
+const HomePagePositionsList = ({ positions, favorites, isLoading,
+    bidList, type, refreshFavorites, title, itemsPerRow }) => (
+      <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={`${widthClass[itemsPerRow]} condensed-card`}>
+              <ResultsCondensedCard
+                favorites={favorites}
+                position={p}
+                bidList={bidList}
+                type={type}
+                refreshFavorites={refreshFavorites}
+              />
+            </div>
+          ))}
         </div>
-      );
-    });
-
-    // load into rows array
-    rows.push(
-      <div key={`${title}-row-${i}`} className="usa-grid-full">
-        {positionList[0]}
-        {positionList[1]}
-        {positionList[2]}
-      </div>,
-    );
-  }
-
-  return (
-    <div className={`usa-grid-full condensed-card-highlighted ${isLoading ? 'results-loading' : ''}`}>
-      {rows}
-    </div>
-  );
-};
+      </div>
+);
 
 HomePagePositionsList.propTypes = propTypes;
 

diff --git a/src/Components/HomePagePositionsList/HomePagePositionsList.test.jsx b/src/Components/HomePagePositionsList/HomePagePositionsList.test.jsx
@@ -14,7 +14,6 @@ describe('HomePagePositionsList', () => {
 
   it('is defined', () => {
     const wrapper = shallow(<HomePagePositionsList
-      maxLength={3}
       positions={resultsObject.results}
       {...props}
     />);
@@ -23,7 +22,6 @@ describe('HomePagePositionsList', () => {
 
   it('renders the results-loading class if isLoading is true', () => {
     const wrapper = shallow(<HomePagePositionsList
-      maxLength={3}
       positions={resultsObject.results}
       {...props}
       isLoading
@@ -33,15 +31,13 @@ describe('HomePagePositionsList', () => {
 
   it('displays two rows', () => {
         // test with 7 positions and a max of 6
-    const maxLength = 6;
     const positions = Array(7).fill(resultsObject.results[0]);
 
     const wrapper = shallow(<HomePagePositionsList
-      maxLength={maxLength}
       positions={positions}
       {...props}
     />);
-    expect(wrapper.find('.condensed-card').length).toEqual(maxLength);
+    expect(wrapper.find('.condensed-card').length).toEqual(positions.length);
     expect(toJSON(wrapper)).toMatchSnapshot();
   });
 });