Merge pull request #837 from MetaPhase-Consulting/feature/export-bidl…

…ist-csv

Add export bid list button to personal bid tracker

src/Components/BidTracker/BidTracker.jsx

@@ -2,9 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { get, find, orderBy, reverse } from 'lodash';
 import Alert from 'Components/Alert';
+import ExportButton from 'Components/ExportButton';
 import SearchAsClientButton from 'Components/BidderPortfolio/SearchAsClientButton/SearchAsClientButton';
 import SelectForm from 'Components/SelectForm';
 import { BID_STATUS_ORDER } from 'Constants/BidStatuses';
+import { downloadBidlistData } from 'actions/bidList';
 import { BID_LIST, NOTIFICATION_LIST, USER_PROFILE } from '../../Constants/PropTypes';
 import BidTrackerCardList from './BidTrackerCardList';
 import ProfileSectionTitle from '../ProfileSectionTitle';
@@ -30,13 +32,18 @@ class BidTracker extends Component {
     super(props);
     this.state = {
       sortValue: find(SORT_OPTIONS, f => f.defaultSort).value,
+      exportIsLoading: false,
     };
   }
 
   onSelectOption = e => {
     this.setState({ sortValue: get(e, 'target.value') });
   };
 
+  setIsLoading = exportIsLoading => {
+    this.setState({ exportIsLoading });
+  };
+
   getSortedBids() {
     const { sortValue } = this.state;
     const results = get(this.props, 'bidList.results', []);
@@ -58,8 +65,19 @@ class BidTracker extends Component {
     return results$;
   }
 
+  exportBidlistData = () => {
+    this.setIsLoading(true);
+    downloadBidlistData()
+      .then(() => {
+        this.setIsLoading(false);
+      })
+      .catch(() => {
+        this.setIsLoading(false);
+      });
+  }
+
   render() {
-    const { sortValue } = this.state;
+    const { exportIsLoading, sortValue } = this.state;
     const { bidList, bidListIsLoading, acceptBid, declineBid, submitBid, deleteBid,
       notifications, notificationsIsLoading, markBidTrackerNotification, userProfile,
       userProfileIsLoading, isPublic, useCDOView } = this.props;
@@ -113,6 +131,12 @@ class BidTracker extends Component {
               onSelectOption={this.onSelectOption}
             />
           </div>
+          {
+            !isPublic &&
+              <div className="export-button-container">
+                <ExportButton onClick={this.exportBidlistData} isLoading={exportIsLoading} />
+              </div>
+          }
         </div>
         <div className="bid-tracker-content-container">
           {

src/Components/BidTracker/__snapshots__/BidTracker.test.jsx.snap

@@ -123,6 +123,17 @@ exports[`BidTrackerComponent matches snapshot 1`] = `
         transformValue={[Function]}
       />
     </div>
+    <div
+      className="export-button-container"
+    >
+      <ExportButton
+        className=""
+        isLoading={false}
+        onClick={[Function]}
+        primaryClass="usa-button-secondary"
+        text="Export"
+      />
+    </div>
   </div>
   <div
     className="bid-tracker-content-container"
@@ -483,6 +494,17 @@ exports[`BidTrackerComponent matches snapshot when bidListIsLoading is true 1`]
         transformValue={[Function]}
       />
     </div>
+    <div
+      className="export-button-container"
+    >
+      <ExportButton
+        className=""
+        isLoading={false}
+        onClick={[Function]}
+        primaryClass="usa-button-secondary"
+        text="Export"
+      />
+    </div>
   </div>
   <div
     className="bid-tracker-content-container"

src/actions/bidList.js

@@ -1,11 +1,25 @@
 import { batch } from 'react-redux';
 import axios from 'axios';
 import { get } from 'lodash';
+import { downloadFromResponse } from 'utilities';
 import api from '../api';
 import { toastSuccess, toastError } from './toast';
 import { userProfilePublicFetchData } from './userProfilePublic';
 import * as SystemMessages from '../Constants/SystemMessages';
 
+export function downloadBidlistData() {
+  return api().get('/fsbid/bidlist/export/', {
+    responseType: 'stream',
+  })
+    .then((response) => {
+      downloadFromResponse(response, 'TalentMap_BidList_export');
+    })
+    .catch(() => {
+      // eslint-disable-next-line global-require
+      require('../store').store.dispatch(toastError('Export unsuccessful. Please try again.', 'Error exporting'));
+    });
+}
+
 export function bidListHasErrored(bool) {
   return {
     type: 'BID_LIST_HAS_ERRORED',

src/sass/_bidTracker.scss

@@ -6,9 +6,17 @@ $draft-icon-offset: 120px;
   position: relative;
 
   .searches-top-section {
+    display: flex;
+    justify-content: flex-end;
     margin-bottom: 1.2em;
   }
 
+  .export-button-container {
+    button {
+      margin-top: 0;
+    }
+  }
+
   .results-dropdown-sort {
     float: right;
   }