import React from 'react';

import Button from 'react-bootstrap/Button';

import app from '../Firebase/';
import Header from '../Header/';
import AddTripModal from './add-trip-modal.js'
import TripsContainer from './trips-container.js';

const db = app.firestore();

/**
 * ViewTrips component that defines the page where a user can view and manage
 * their current trips.
 */
class ViewTrips extends React.Component {
  /** @inheritdoc */
  constructor() {
    super();
    this.state = { showModal: false,
                   refreshTripsContainer: false,
                   refreshAddTripModal: false
                 };
  }

  /**
   * Flips `refreshTripsContainer` property which causes that TripsContainer
   * component to be reloaded.
   *
   * This allows a trip creator's view trips page to be updated in real time.
   *
   * In the future, the use of refreshTripContainer and the key prop on Trips
   * container should be removed with the addition of real time listening with
   * onShapshot (Issue #62).
   */
  refreshTripsContainer = () => {
    this.setState({ refreshTripsContainer: !this.state.refreshTripsContainer });
  }

  /**
   * Flips `refreshAddTripModal` property which causes that AddTripModal
   * component to be reloaded.
   *
   * This was done to prevent bugs where multiple component input fields would
   * persist from one instance of the modal to the next when view trips page
   * was not refreshed in between.
   */
  refreshAddTripModal = () => {
    this.setState({ refreshAddTripModal: !this.state.refreshAddTripModal });
  }

  /** Property that refreshes and displays add trip page. */
  showAddTripModal = () => {
    this.refreshAddTripModal()
    this.setState({ showModal: true });
  }

  /** Property that sets `showModal` to false --> hides add trip page. */
  hideAddTripModal = () => { this.setState({ showModal: false }); }

  /** @inheritdoc */
  render() {
    return (
      <div className="view-trips-page">
        <Header />
        <AddTripModal
          db={db}
          show={this.state.showModal}
          handleClose={this.hideAddTripModal}
          refreshTripsContainer={this.refreshTripsContainer}
          key={this.state.refreshAddTripModal}
        />
        <div className="manage-trips-bar">
          <Button type='button' onClick={this.showAddTripModal}>
            + New Trip
          </Button>
        </div>
        <TripsContainer
          db={db}
          key={this.state.refreshTripsContainer}
        />
      </div>
    );
  }
}

export default ViewTrips;

@@ -568,35 +568,36 @@
          refresh
-Add
+Save
 TripModal: false
@@ -1157,27 +1157,28 @@
 ips %60refresh
-Add
+Save
 TripModal%60 p
@@ -1203,28 +1203,30 @@
 es that 
-AddTripModal
+save/edit trip
 %0A   * co
@@ -1452,35 +1452,36 @@
 %0A   */%0A  refresh
-Add
+Save
 TripModal = () =
@@ -1507,27 +1507,28 @@
 te(%7B refresh
-Add
+Save
 TripModal: !
@@ -1537,35 +1537,36 @@
 is.state.refresh
-Add
+Save
 TripModal %7D);%0A  
@@ -1611,19 +1611,28 @@
 isplays 
-add
+the add/edit
  trip pa
@@ -1640,27 +1640,28 @@
 e. */%0A  show
-Add
+Save
 TripModal = 
@@ -1676,35 +1676,36 @@
     this.refresh
-Add
+Save
 TripModal()%0A    
@@ -1699,16 +1699,17 @@
 pModal()
+;
 %0A    thi
@@ -1770,47 +1770,26 @@
 hat 
-sets %60showModal%60 to false --%3E hides add
+hides the add/edit
  tri
@@ -1801,27 +1801,28 @@
 e. */%0A  hide
-Add
+Save
 TripModal = 
@@ -2085,19 +2085,20 @@
 his.hide
-Add
+Save
 TripModa
@@ -2194,19 +2194,20 @@
 .refresh
-Add
+Save
 TripModa

Update AddTripModal refrences to SaveTripModal or add/edit trip modal.