From fff10d30024b018332bb7e11839ccbb0bdd8801b Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Tue, 14 Jul 2020 22:23:17 -0400 Subject: [PATCH 01/20] Enfore consistent import statement groupings: React|other external libs|local files. --- frontend/src/components/ViewTrips/add-trip-modal.js | 1 + frontend/src/components/ViewTrips/create-new-trip.js | 1 + frontend/src/components/ViewTrips/create-new-trip.test.js | 2 +- frontend/src/components/ViewTrips/trip.js | 1 + frontend/src/components/ViewTrips/trips-container.js | 2 +- 5 files changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/ViewTrips/add-trip-modal.js b/frontend/src/components/ViewTrips/add-trip-modal.js index 115cfcfc..fa90fe72 100644 --- a/frontend/src/components/ViewTrips/add-trip-modal.js +++ b/frontend/src/components/ViewTrips/add-trip-modal.js @@ -1,4 +1,5 @@ import React from 'react'; + import Button from 'react-bootstrap/Button'; import Modal from 'react-bootstrap/Modal'; import Form from 'react-bootstrap/Form'; diff --git a/frontend/src/components/ViewTrips/create-new-trip.js b/frontend/src/components/ViewTrips/create-new-trip.js index a1e1c11a..69e4ced5 100644 --- a/frontend/src/components/ViewTrips/create-new-trip.js +++ b/frontend/src/components/ViewTrips/create-new-trip.js @@ -1,4 +1,5 @@ import * as firebase from 'firebase/app'; + import { COLLECTION_TRIPS } from '../../constants/database.js'; import { getCurUserEmail, getUidFromUserEmail} from './temp-auth-utils.js' diff --git a/frontend/src/components/ViewTrips/create-new-trip.test.js b/frontend/src/components/ViewTrips/create-new-trip.test.js index 7051015d..f7f4c055 100644 --- a/frontend/src/components/ViewTrips/create-new-trip.test.js +++ b/frontend/src/components/ViewTrips/create-new-trip.test.js @@ -1,7 +1,7 @@ import * as firebase from 'firebase/app'; import 'firebase/firebase-firestore'; -import { getUidFromUserEmail} from './temp-auth-utils.js' +import { getUidFromUserEmail} from './temp-auth-utils.js' import { getTripName, getTripDestination, getTimestampFromDateString, getCollaboratorUidArray } from './create-new-trip.js' diff --git a/frontend/src/components/ViewTrips/trip.js b/frontend/src/components/ViewTrips/trip.js index a3c599b9..0eabd3a5 100644 --- a/frontend/src/components/ViewTrips/trip.js +++ b/frontend/src/components/ViewTrips/trip.js @@ -1,4 +1,5 @@ import React from 'react'; + import Button from 'react-bootstrap/Button'; import ViewActivitiesButton from './view-activities-button.js'; diff --git a/frontend/src/components/ViewTrips/trips-container.js b/frontend/src/components/ViewTrips/trips-container.js index aebc477b..1c521bbf 100644 --- a/frontend/src/components/ViewTrips/trips-container.js +++ b/frontend/src/components/ViewTrips/trips-container.js @@ -1,6 +1,6 @@ import React from 'react'; -import Trip from './trip.js'; +import Trip from './trip.js'; import * as DB from '../../constants/database.js'; import { getCurUserEmail, getUidFromUserEmail} from './temp-auth-utils.js' From eba6c71aba9d658b139e097b0e2c5bfcc361300b Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Tue, 14 Jul 2020 23:14:28 -0400 Subject: [PATCH 02/20] Create infrastructure for add & edit trips with common 'save trip' parent component. --- .../components/ViewTrips/add-trip-modal.js | 190 +--------------- .../components/ViewTrips/edit-trip-modal.js | 34 +++ .../components/ViewTrips/save-trip-modal.js | 209 ++++++++++++++++++ 3 files changed, 251 insertions(+), 182 deletions(-) create mode 100644 frontend/src/components/ViewTrips/edit-trip-modal.js create mode 100644 frontend/src/components/ViewTrips/save-trip-modal.js diff --git a/frontend/src/components/ViewTrips/add-trip-modal.js b/frontend/src/components/ViewTrips/add-trip-modal.js index fa90fe72..6902bf12 100644 --- a/frontend/src/components/ViewTrips/add-trip-modal.js +++ b/frontend/src/components/ViewTrips/add-trip-modal.js @@ -1,112 +1,6 @@ import React from 'react'; -import Button from 'react-bootstrap/Button'; -import Modal from 'react-bootstrap/Modal'; -import Form from 'react-bootstrap/Form'; - -import createTrip from './create-new-trip.js'; - -/** - * Returns a Form.Control element with input type 'text' and other fields - * specified by the function parameters. - * - * @param {string} placeholder Text placehold in the form input - * @param {React.RefObject} ref Ref attached to the value inputted in the form. - * @return {JSX.Element} The Form.Control element. - */ -function createTextFormControl(placeholder, ref) { - return ( - - ); -} - -/** - * Returns a Form.Control element with input type 'text' and other fields - * specified by the function parameters. - * - * @param {React.RefObject} refArr The list of refs attached to the emails - * inputted in the form. - * @return {JSX.Element} The Form.Control element. - */ -function createDateFormControl(ref) { - return ( - - ); -} - -/** - * Returns a Form.Control element with input type 'text' and other fields - * specified by the function parameters. - * - * TODO(Issue #67): Email verification before submitting the form. - * - * @param {string} placeholder Text placehold in the form input - * @param {React.RefObject} refArr The list of refs attached to the emails - * inputted in the form. - * @return {JSX.Element} The Form.Control element. - */ -function createMultiFormControl(placeholder, refArr) { - return ( - <> - {refArr.map((ref, idx) => { - return ( - - ); - })} - - ); -} - -/** - * Returns a Form.Group element with components specified by the input args. - * - * @param {string} controlId prop that accessibly wires the nested label and - * input prop. - * @param {string} formLabel Label/title for the form input. - * @param {string} inputType Input type of the form. - * @param {string} placeholder Text placeholder in the form input. - * @param {React.RefObject} ref Ref attatched to the valued inputted in the form. - * @param {string} subFormText Subtext instructions under a form input. - * @return {JSX.Element} The Form.Group element. - */ -function createFormGroup(controlId, formLabel, inputType, placeholder, ref) { - let formControl; - switch(inputType) { - case 'text': - formControl = createTextFormControl(placeholder, ref); - break; - case 'date': - formControl = createDateFormControl(ref); - break; - case 'emails': - formControl = createMultiFormControl(placeholder, ref); - break; - default: - console.error('There should be no other input type') - } - - return ( - <> - {formLabel} - - {formControl} - {/* Temporary instructions until fix Issue #52 */} - - - ) -} +import SaveTripModal from './save-trip-modal.js' /** * Component corresponding to add trips modal. @@ -123,84 +17,16 @@ function createFormGroup(controlId, formLabel, inputType, placeholder, ref) { * @extends React.Component */ class AddTripModal extends React.Component { - /** @inheritdoc */ - constructor(props) { - super(props); - - this.nameRef = React.createRef(); - this.descriptionRef = React.createRef(); - this.destinationRef = React.createRef(); - this.startDateRef = React.createRef(); - this.endDateRef = React.createRef(); - this.state = { collaboratorsRefArr: [React.createRef()] } - } - - addCollaboratorRef = () => { - this.setState({ collaboratorsRefArr: - this.state.collaboratorsRefArr.concat([React.createRef()]) } - ); - } - - /** - * Upon submission of the form, a new Trip document is created and the add - * trip modal is closed. - * - * @param e Event object corresponding to (add trip) submit button click. - */ - handleCreateNewTrip = (e) => { - e.preventDefault(); - createTrip(this.props.db, - { - name: this.nameRef.current.value, - description: this.descriptionRef.current.value, - destination: this.destinationRef.current.value, - startDate: this.startDateRef.current.value, - endDate: this.endDateRef.current.value, - collaboratorEmails: - this.state.collaboratorsRefArr.map(ref => ref.current.value) - }); - - this.props.refreshTripsContainer(); - this.props.handleClose(); - } - /** @inheritdoc */ render() { return ( - - - Add New Trip - - -
- - {createFormGroup('tripNameGroup', 'Trip Name', 'text', - 'Enter Trip Name', this.nameRef)} - {createFormGroup('tripDescripGroup', 'Trip Description', 'text', - 'Enter Trip Description', this.descriptionRef)} - {createFormGroup('tripDestGroup', 'Trip Destination', 'text', - 'Enter Trip Destination', this.destinationRef)} - {createFormGroup('tripStartDateGroup', 'Start Date', 'date', - '', this.startDateRef)} - {createFormGroup('tripEndDateGroup', 'End Date', 'date', - '', this.endDateRef)} - {createFormGroup('tripCollabsGroup', 'Trip Collaborators', 'emails', - 'person@email.xyz', this.state.collaboratorsRefArr)} - - - - - - - -
- + ); } }; diff --git a/frontend/src/components/ViewTrips/edit-trip-modal.js b/frontend/src/components/ViewTrips/edit-trip-modal.js new file mode 100644 index 00000000..338327aa --- /dev/null +++ b/frontend/src/components/ViewTrips/edit-trip-modal.js @@ -0,0 +1,34 @@ +import React from 'react'; + +import SaveTripModal from './save-trip-modal.js' + +/** + * Component corresponding to add trips modal. + * + * @param {Object} props These are the props for this component: + * - db: Firestore database instance. + * - show: Boolean that determines if the add trips modal should be displayed. + * - handleClose: The function that handles closing the add trips modal. + * - refreshTripsContainer: Function that handles refreshing the TripsContainer + * component upon trip creation (Remove when fix Issue #62). + * - key: Special React attribute that ensures a new AddTripModal instance is + * created whenever this key is updated + * + * @extends React.Component + */ +class SaveTripModal extends React.Component { + /** @inheritdoc */ + render() { + return ( + + ); + } +}; + +export default SaveTripModal; diff --git a/frontend/src/components/ViewTrips/save-trip-modal.js b/frontend/src/components/ViewTrips/save-trip-modal.js new file mode 100644 index 00000000..32fe1c8d --- /dev/null +++ b/frontend/src/components/ViewTrips/save-trip-modal.js @@ -0,0 +1,209 @@ +import React from 'react'; + +import Button from 'react-bootstrap/Button'; +import Modal from 'react-bootstrap/Modal'; +import Form from 'react-bootstrap/Form'; + +import createTrip from './create-new-trip.js'; + +/** + * Returns a Form.Control element with input type 'text' and other fields + * specified by the function parameters. + * + * @param {string} placeholder Text placehold in the form input + * @param {React.RefObject} ref Ref attached to the value inputted in the form. + * @return {JSX.Element} The Form.Control element. + */ +function createTextFormControl(placeholder, ref) { + return ( + + ); +} + +/** + * Returns a Form.Control element with input type 'text' and other fields + * specified by the function parameters. + * + * @param {React.RefObject} refArr The list of refs attached to the emails + * inputted in the form. + * @return {JSX.Element} The Form.Control element. + */ +function createDateFormControl(defaultValue, ref) { + return ( + + ); +} + +/** + * Returns a Form.Control element with input type 'text' and other fields + * specified by the function parameters. + * + * TODO(Issue #67): Email verification before submitting the form. + * + * @param {string} placeholder Text placehold in the form input + * @param {React.RefObject} refArr The list of refs attached to the emails + * inputted in the form. + * @return {JSX.Element} The Form.Control element. + */ +function createMultiFormControl(placeholder, refArr) { + return ( + <> + {refArr.map((ref, idx) => { + return ( + + ); + })} + + ); +} + +/** + * Returns a Form.Group element with components specified by the input args. + * + * @param {string} controlId prop that accessibly wires the nested label and + * input prop. + * @param {string} formLabel Label/title for the form input. + * @param {string} inputType Input type of the form. + * @param {string} placeholder Text placeholder in the form input. + * @param {React.RefObject} ref Ref attatched to the valued inputted in the form. + * @param {string} subFormText Subtext instructions under a form input. + * @return {JSX.Element} The Form.Group element. + */ +function createFormGroup(controlId, formLabel, inputType, placeholder, ref) { + let formControl; + switch(inputType) { + case 'text': + formControl = createTextFormControl(placeholder, ref); + break; + case 'date': + formControl = createDateFormControl(placeholder, ref); + break; + case 'emails': + formControl = createMultiFormControl(placeholder, ref); + break; + default: + console.error('There should be no other input type') + } + + return ( + <> + {formLabel} + + {formControl} + {/* Temporary instructions until fix Issue #52 */} + + + ) +} + +/** + * Component corresponding to add trips modal. + * + * @param {Object} props These are the props for this component: + * - db: Firestore database instance. + * - show: Boolean that determines if the add trips modal should be displayed. + * - handleClose: The function that handles closing the add trips modal. + * - refreshTripsContainer: Function that handles refreshing the TripsContainer + * component upon trip creation (Remove when fix Issue #62). + * - key: Special React attribute that ensures a new AddTripModal instance is + * created whenever this key is updated + * + * @extends React.Component + */ +class SaveTripModal extends React.Component { + /** @inheritdoc */ + constructor(props) { + super(props); + + this.nameRef = React.createRef(); + this.descriptionRef = React.createRef(); + this.destinationRef = React.createRef(); + this.startDateRef = React.createRef(); + this.endDateRef = React.createRef(); + this.state = { collaboratorsRefArr: [React.createRef()] } + } + + addCollaboratorRef = () => { + this.setState({ collaboratorsRefArr: + this.state.collaboratorsRefArr.concat([React.createRef()]) } + ); + } + + /** + * Upon submission of the form, a new Trip document is created and the add + * trip modal is closed. + * + * @param e Event object corresponding to (add trip) submit button click. + */ + handleCreateNewTrip = (e) => { + e.preventDefault(); + createTrip(this.props.db, + { + name: this.nameRef.current.value, + description: this.descriptionRef.current.value, + destination: this.destinationRef.current.value, + startDate: this.startDateRef.current.value, + endDate: this.endDateRef.current.value, + collaboratorEmails: + this.state.collaboratorsRefArr.map(ref => ref.current.value) + }); + + this.props.refreshTripsContainer(); + this.props.handleClose(); + } + + /** @inheritdoc */ + render() { + return ( + + + Add New Trip + + +
+ + {createFormGroup('tripNameGroup', 'Trip Name', 'text', + 'Enter Trip Name', this.nameRef)} + {createFormGroup('tripDescripGroup', 'Trip Description', 'text', + 'Enter Trip Description', this.descriptionRef)} + {createFormGroup('tripDestGroup', 'Trip Destination', 'text', + 'Enter Trip Destination', this.destinationRef)} + {createFormGroup('tripStartDateGroup', 'Start Date', 'date', + '', this.startDateRef)} + {createFormGroup('tripEndDateGroup', 'End Date', 'date', + '', this.endDateRef)} + {createFormGroup('tripCollabsGroup', 'Trip Collaborators', 'emails', + 'person@email.xyz', this.state.collaboratorsRefArr)} + + + + + + + +
+ + ); + } +}; + +export default SaveTripModal; From ee6d090ef23c6902907f047e0b5dbe0fc36d3489 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Tue, 14 Jul 2020 23:16:07 -0400 Subject: [PATCH 03/20] Discover how to set default value of date Form.Control. --- frontend/src/components/ViewTrips/save-trip-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/ViewTrips/save-trip-modal.js b/frontend/src/components/ViewTrips/save-trip-modal.js index 32fe1c8d..106a3fba 100644 --- a/frontend/src/components/ViewTrips/save-trip-modal.js +++ b/frontend/src/components/ViewTrips/save-trip-modal.js @@ -182,7 +182,7 @@ class SaveTripModal extends React.Component { {createFormGroup('tripDestGroup', 'Trip Destination', 'text', 'Enter Trip Destination', this.destinationRef)} {createFormGroup('tripStartDateGroup', 'Start Date', 'date', - '', this.startDateRef)} + '2020-06-06', this.startDateRef)} {createFormGroup('tripEndDateGroup', 'End Date', 'date', '', this.endDateRef)} {createFormGroup('tripCollabsGroup', 'Trip Collaborators', 'emails', From 2e64ec6b373758cb6a830a651d5a57053e711bd7 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 13:03:59 -0400 Subject: [PATCH 04/20] Create and pass in placeholderObj as prop to SaveTripModal. --- .../components/ViewTrips/add-trip-modal.js | 34 +++++++++++------- .../components/ViewTrips/edit-trip-modal.js | 36 +++++++++++-------- 2 files changed, 43 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/ViewTrips/add-trip-modal.js b/frontend/src/components/ViewTrips/add-trip-modal.js index 6902bf12..4ff2414d 100644 --- a/frontend/src/components/ViewTrips/add-trip-modal.js +++ b/frontend/src/components/ViewTrips/add-trip-modal.js @@ -16,19 +16,27 @@ import SaveTripModal from './save-trip-modal.js' * * @extends React.Component */ -class AddTripModal extends React.Component { - /** @inheritdoc */ - render() { - return ( - - ); - } +const AddTripModal = (props) => { + const placeholderObj = + { + name: 'Enter Trip Name', + description: 'Enter Trip Description', + destination: 'Enter Trip Destination', + start_date: '', + end_date: '', + collaborators: 'person@email.xyz' + }; + + return ( + + ); }; export default AddTripModal; diff --git a/frontend/src/components/ViewTrips/edit-trip-modal.js b/frontend/src/components/ViewTrips/edit-trip-modal.js index 338327aa..e3fe8d3a 100644 --- a/frontend/src/components/ViewTrips/edit-trip-modal.js +++ b/frontend/src/components/ViewTrips/edit-trip-modal.js @@ -16,19 +16,27 @@ import SaveTripModal from './save-trip-modal.js' * * @extends React.Component */ -class SaveTripModal extends React.Component { - /** @inheritdoc */ - render() { - return ( - - ); - } +const EditTripModal = (props) => { + const placeholderObj = + { + name: 'Enter Trip Name', + description: 'Enter Trip Description', + destination: 'Enter Trip Destination', + start_date: '', + end_date: '', + collaborators: ['person@email.xyz'] + }; + + return ( + + ); }; -export default SaveTripModal; +export default EditTripModal; From 8b86958cf95baf2444c7d087d5ab2ae55f55a289 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 13:07:28 -0400 Subject: [PATCH 05/20] Rename date fields for placeholderObj. --- frontend/src/components/ViewTrips/add-trip-modal.js | 4 ++-- frontend/src/components/ViewTrips/edit-trip-modal.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/ViewTrips/add-trip-modal.js b/frontend/src/components/ViewTrips/add-trip-modal.js index 4ff2414d..4cbf7880 100644 --- a/frontend/src/components/ViewTrips/add-trip-modal.js +++ b/frontend/src/components/ViewTrips/add-trip-modal.js @@ -22,8 +22,8 @@ const AddTripModal = (props) => { name: 'Enter Trip Name', description: 'Enter Trip Description', destination: 'Enter Trip Destination', - start_date: '', - end_date: '', + startDate: '', + endDate: '', collaborators: 'person@email.xyz' }; diff --git a/frontend/src/components/ViewTrips/edit-trip-modal.js b/frontend/src/components/ViewTrips/edit-trip-modal.js index e3fe8d3a..6114fe89 100644 --- a/frontend/src/components/ViewTrips/edit-trip-modal.js +++ b/frontend/src/components/ViewTrips/edit-trip-modal.js @@ -22,8 +22,8 @@ const EditTripModal = (props) => { name: 'Enter Trip Name', description: 'Enter Trip Description', destination: 'Enter Trip Destination', - start_date: '', - end_date: '', + startDate: '', + endDate: '', collaborators: ['person@email.xyz'] }; From e18ae048dcc0a3ac1d3d9d1232d8d9f6932cf9f5 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 13:13:08 -0400 Subject: [PATCH 06/20] Integrated placeholderObj into current infrastructure. --- .../components/ViewTrips/save-trip-modal.js | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/ViewTrips/save-trip-modal.js b/frontend/src/components/ViewTrips/save-trip-modal.js index 106a3fba..b9bf7ebb 100644 --- a/frontend/src/components/ViewTrips/save-trip-modal.js +++ b/frontend/src/components/ViewTrips/save-trip-modal.js @@ -120,6 +120,7 @@ function createFormGroup(controlId, formLabel, inputType, placeholder, ref) { * component upon trip creation (Remove when fix Issue #62). * - key: Special React attribute that ensures a new AddTripModal instance is * created whenever this key is updated + * - placeholderObj: ... * * @extends React.Component */ @@ -128,12 +129,20 @@ class SaveTripModal extends React.Component { constructor(props) { super(props); + // Create Refs to reference form input elements this.nameRef = React.createRef(); this.descriptionRef = React.createRef(); this.destinationRef = React.createRef(); this.startDateRef = React.createRef(); this.endDateRef = React.createRef(); - this.state = { collaboratorsRefArr: [React.createRef()] } + + // Create the number of collaborator input box refs as number of + // collaborators specified in the placeholderObj + const collaboratorsRefArr = []; + for (let i = 0; i < this.props.placeholderObj.collaborators.length; i++) { + collaboratorsRefArr.push(React.createRef()) + } + this.state = { collaboratorsRefArr: collaboratorsRefArr } } addCollaboratorRef = () => { @@ -176,17 +185,18 @@ class SaveTripModal extends React.Component {
{createFormGroup('tripNameGroup', 'Trip Name', 'text', - 'Enter Trip Name', this.nameRef)} + this.props.placeholderObj.name, this.nameRef)} {createFormGroup('tripDescripGroup', 'Trip Description', 'text', - 'Enter Trip Description', this.descriptionRef)} + this.props.placeholderObj.description, this.descriptionRef)} {createFormGroup('tripDestGroup', 'Trip Destination', 'text', - 'Enter Trip Destination', this.destinationRef)} + this.props.placeholderObj.destination, this.destinationRef)} {createFormGroup('tripStartDateGroup', 'Start Date', 'date', - '2020-06-06', this.startDateRef)} + this.props.placeholderObj.startDate, this.startDateRef)} {createFormGroup('tripEndDateGroup', 'End Date', 'date', - '', this.endDateRef)} + this.props.placeholderObj.endDate, this.endDateRef)} {createFormGroup('tripCollabsGroup', 'Trip Collaborators', 'emails', - 'person@email.xyz', this.state.collaboratorsRefArr)} + this.props.placeholderObj.collaborators, + this.state.collaboratorsRefArr)} From d896ff474a80fc10442a0b134026f21576af22b6 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 13:20:07 -0400 Subject: [PATCH 07/20] Fix collaborators field of placeholderObj to be an array. --- frontend/src/components/ViewTrips/add-trip-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/ViewTrips/add-trip-modal.js b/frontend/src/components/ViewTrips/add-trip-modal.js index 4cbf7880..c76dc6b8 100644 --- a/frontend/src/components/ViewTrips/add-trip-modal.js +++ b/frontend/src/components/ViewTrips/add-trip-modal.js @@ -24,7 +24,7 @@ const AddTripModal = (props) => { destination: 'Enter Trip Destination', startDate: '', endDate: '', - collaborators: 'person@email.xyz' + collaborators: ['person@email.xyz'] }; return ( From 1328fd2092c0dd5682f56c2a040ed91d8132db86 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 14:31:48 -0400 Subject: [PATCH 08/20] Update placeholderObj formatting. --- .../src/components/ViewTrips/add-trip-modal.js | 14 +++++++------- .../src/components/ViewTrips/edit-trip-modal.js | 17 +++++++++-------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/ViewTrips/add-trip-modal.js b/frontend/src/components/ViewTrips/add-trip-modal.js index c76dc6b8..cdb5d97a 100644 --- a/frontend/src/components/ViewTrips/add-trip-modal.js +++ b/frontend/src/components/ViewTrips/add-trip-modal.js @@ -12,19 +12,19 @@ import SaveTripModal from './save-trip-modal.js' * - refreshTripsContainer: Function that handles refreshing the TripsContainer * component upon trip creation (Remove when fix Issue #62). * - key: Special React attribute that ensures a new AddTripModal instance is - * created whenever this key is updated + * newly created whenever this key is updated. * * @extends React.Component */ const AddTripModal = (props) => { const placeholderObj = { - name: 'Enter Trip Name', - description: 'Enter Trip Description', - destination: 'Enter Trip Destination', - startDate: '', - endDate: '', - collaborators: ['person@email.xyz'] + name: 'Enter Trip Name', + description: 'Enter Trip Description', + destination: 'Enter Trip Destination', + startDate: '', + endDate: '', + collaborators: ['person@email.xyz'] }; return ( diff --git a/frontend/src/components/ViewTrips/edit-trip-modal.js b/frontend/src/components/ViewTrips/edit-trip-modal.js index 6114fe89..90a25bda 100644 --- a/frontend/src/components/ViewTrips/edit-trip-modal.js +++ b/frontend/src/components/ViewTrips/edit-trip-modal.js @@ -11,20 +11,21 @@ import SaveTripModal from './save-trip-modal.js' * - handleClose: The function that handles closing the add trips modal. * - refreshTripsContainer: Function that handles refreshing the TripsContainer * component upon trip creation (Remove when fix Issue #62). - * - key: Special React attribute that ensures a new AddTripModal instance is - * created whenever this key is updated + * - key: Special React attribute that ensures a new EditTripModal instance is + * newly created whenever this key is updated. * * @extends React.Component */ const EditTripModal = (props) => { + // TODO(Issue #) const placeholderObj = { - name: 'Enter Trip Name', - description: 'Enter Trip Description', - destination: 'Enter Trip Destination', - startDate: '', - endDate: '', - collaborators: ['person@email.xyz'] + name: null, + description: null, + destination: null, + startDate: null, + endDate: null, + collaborators: [null] }; return ( From b46ec4f2c758b335b09913a7cf04d6312a4f28b6 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 14:47:28 -0400 Subject: [PATCH 09/20] Update modal components' documentation. --- frontend/src/components/ViewTrips/add-trip-modal.js | 2 +- frontend/src/components/ViewTrips/edit-trip-modal.js | 5 +++-- frontend/src/components/ViewTrips/save-trip-modal.js | 7 ++++++- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/ViewTrips/add-trip-modal.js b/frontend/src/components/ViewTrips/add-trip-modal.js index cdb5d97a..2a1a6c17 100644 --- a/frontend/src/components/ViewTrips/add-trip-modal.js +++ b/frontend/src/components/ViewTrips/add-trip-modal.js @@ -3,7 +3,7 @@ import React from 'react'; import SaveTripModal from './save-trip-modal.js' /** - * Component corresponding to add trips modal. + * Component corresponding to the add trips modal. * * @param {Object} props These are the props for this component: * - db: Firestore database instance. diff --git a/frontend/src/components/ViewTrips/edit-trip-modal.js b/frontend/src/components/ViewTrips/edit-trip-modal.js index 90a25bda..84500489 100644 --- a/frontend/src/components/ViewTrips/edit-trip-modal.js +++ b/frontend/src/components/ViewTrips/edit-trip-modal.js @@ -3,7 +3,9 @@ import React from 'react'; import SaveTripModal from './save-trip-modal.js' /** - * Component corresponding to add trips modal. + * Component corresponding to the edit trips modal. + * + * TODO(Issue #69): Integrate EditTripModal into Trip component. * * @param {Object} props These are the props for this component: * - db: Firestore database instance. @@ -17,7 +19,6 @@ import SaveTripModal from './save-trip-modal.js' * @extends React.Component */ const EditTripModal = (props) => { - // TODO(Issue #) const placeholderObj = { name: null, diff --git a/frontend/src/components/ViewTrips/save-trip-modal.js b/frontend/src/components/ViewTrips/save-trip-modal.js index b9bf7ebb..8e586c13 100644 --- a/frontend/src/components/ViewTrips/save-trip-modal.js +++ b/frontend/src/components/ViewTrips/save-trip-modal.js @@ -110,7 +110,12 @@ function createFormGroup(controlId, formLabel, inputType, placeholder, ref) { } /** - * Component corresponding to add trips modal. + * Component corresponding to the save trips modal. + * + * This component acts as a parent comonent of the AddTripModal and + * EditTripModal components. The only difference between the two is the prop + * `placeholderObj` that is passed in containing the default values for the + * form input boxes. * * @param {Object} props These are the props for this component: * - db: Firestore database instance. From 36847183cbe13896633568f6e8ee136f16ba6051 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 15:09:18 -0400 Subject: [PATCH 10/20] Refactor JSDoc for modals. --- frontend/src/components/ViewTrips/edit-trip-modal.js | 2 +- frontend/src/components/ViewTrips/save-trip-modal.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/ViewTrips/edit-trip-modal.js b/frontend/src/components/ViewTrips/edit-trip-modal.js index 84500489..c5a29907 100644 --- a/frontend/src/components/ViewTrips/edit-trip-modal.js +++ b/frontend/src/components/ViewTrips/edit-trip-modal.js @@ -5,7 +5,7 @@ import SaveTripModal from './save-trip-modal.js' /** * Component corresponding to the edit trips modal. * - * TODO(Issue #69): Integrate EditTripModal into Trip component. + * TODO(Issue #69): Integrate EditTripModal into Trip component. * * @param {Object} props These are the props for this component: * - db: Firestore database instance. diff --git a/frontend/src/components/ViewTrips/save-trip-modal.js b/frontend/src/components/ViewTrips/save-trip-modal.js index 8e586c13..6d8de2f8 100644 --- a/frontend/src/components/ViewTrips/save-trip-modal.js +++ b/frontend/src/components/ViewTrips/save-trip-modal.js @@ -114,8 +114,7 @@ function createFormGroup(controlId, formLabel, inputType, placeholder, ref) { * * This component acts as a parent comonent of the AddTripModal and * EditTripModal components. The only difference between the two is the prop - * `placeholderObj` that is passed in containing the default values for the - * form input boxes. + * `placeholderObj` prop (see below). * * @param {Object} props These are the props for this component: * - db: Firestore database instance. @@ -125,7 +124,8 @@ function createFormGroup(controlId, formLabel, inputType, placeholder, ref) { * component upon trip creation (Remove when fix Issue #62). * - key: Special React attribute that ensures a new AddTripModal instance is * created whenever this key is updated - * - placeholderObj: ... + * - placeholderObj: Object containing the placeholder/default values for the + * form input text boxes. * * @extends React.Component */ From 62c21990c27835d9c0898713f418a9c72caa5404 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 16:11:27 -0400 Subject: [PATCH 11/20] Update AddTripModal refrences to SaveTripModal or add/edit trip modal. --- frontend/src/components/ViewTrips/index.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/ViewTrips/index.js b/frontend/src/components/ViewTrips/index.js index 9a2f5b60..a3590b45 100644 --- a/frontend/src/components/ViewTrips/index.js +++ b/frontend/src/components/ViewTrips/index.js @@ -19,7 +19,7 @@ class ViewTrips extends React.Component { super(); this.state = { showModal: false, refreshTripsContainer: false, - refreshAddTripModal: false + refreshSaveTripModal: false }; } @@ -38,25 +38,25 @@ class ViewTrips extends React.Component { } /** - * Flips `refreshAddTripModal` property which causes that AddTripModal + * Flips `refreshSaveTripModal` property which causes that save/edit trip * 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 }); + refreshSaveTripModal = () => { + this.setState({ refreshSaveTripModal: !this.state.refreshSaveTripModal }); } - /** Property that refreshes and displays add trip page. */ - showAddTripModal = () => { - this.refreshAddTripModal() + /** Property that refreshes and displays the add/edit trip page. */ + showSaveTripModal = () => { + this.refreshSaveTripModal(); this.setState({ showModal: true }); } - /** Property that sets `showModal` to false --> hides add trip page. */ - hideAddTripModal = () => { this.setState({ showModal: false }); } + /** Property that hides the add/edit trip page. */ + hideSaveTripModal = () => { this.setState({ showModal: false }); } /** @inheritdoc */ render() { @@ -66,9 +66,9 @@ class ViewTrips extends React.Component {
+ + + + + + + + + ); + } }; -export default AddTripModal; +export default SaveTripModal; diff --git a/frontend/src/components/ViewTrips/edit-trip-modal.js b/frontend/src/components/ViewTrips/edit-trip-modal.js deleted file mode 100644 index c5a29907..00000000 --- a/frontend/src/components/ViewTrips/edit-trip-modal.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; - -import SaveTripModal from './save-trip-modal.js' - -/** - * Component corresponding to the edit trips modal. - * - * TODO(Issue #69): Integrate EditTripModal into Trip component. - * - * @param {Object} props These are the props for this component: - * - db: Firestore database instance. - * - show: Boolean that determines if the add trips modal should be displayed. - * - handleClose: The function that handles closing the add trips modal. - * - refreshTripsContainer: Function that handles refreshing the TripsContainer - * component upon trip creation (Remove when fix Issue #62). - * - key: Special React attribute that ensures a new EditTripModal instance is - * newly created whenever this key is updated. - * - * @extends React.Component - */ -const EditTripModal = (props) => { - const placeholderObj = - { - name: null, - description: null, - destination: null, - startDate: null, - endDate: null, - collaborators: [null] - }; - - return ( - - ); -}; - -export default EditTripModal; diff --git a/frontend/src/components/ViewTrips/index.js b/frontend/src/components/ViewTrips/index.js index a3590b45..2e4ca094 100644 --- a/frontend/src/components/ViewTrips/index.js +++ b/frontend/src/components/ViewTrips/index.js @@ -4,7 +4,7 @@ import Button from 'react-bootstrap/Button'; import app from '../Firebase/'; import Header from '../Header/'; -import AddTripModal from './add-trip-modal.js' +import SaveTripModal from './add-trip-modal.js' import TripsContainer from './trips-container.js'; const db = app.firestore(); @@ -19,7 +19,10 @@ class ViewTrips extends React.Component { super(); this.state = { showModal: false, refreshTripsContainer: false, - refreshSaveTripModal: false + refreshSaveTripModal: false, + modalTitle: null, + tripId: null, + placeholderObj: null }; } @@ -55,6 +58,39 @@ class ViewTrips extends React.Component { this.setState({ showModal: true }); } + showAddTripModal = () => { + this.setState({ + title: 'Add New Trip', + tripId: null, + placeholderObj: { + name: 'Enter Trip Name', + description: 'Enter Trip Description', + destination: 'Enter Trip Destination', + startDate: '', + endDate: '', + collaborators: ['person@email.xyz'] + } + }); + this.showSaveTripModal(); + } + + showEditTripModal = () => { + // TODO(Issue #69): Get individual tripId and trip data for placeholderObj + this.setState({ + title: 'Edit Trip', + tripId: null, + placeholderObj: { + name: null, + description: null, + destination: null, + startDate: null, + endDate: null, + collaborators: [] + } + }); + this.showSaveTripModal(); + } + /** Property that hides the add/edit trip page. */ hideSaveTripModal = () => { this.setState({ showModal: false }); } @@ -63,11 +99,14 @@ class ViewTrips extends React.Component { return (
-
diff --git a/frontend/src/components/ViewTrips/save-trip-modal.js b/frontend/src/components/ViewTrips/save-trip-modal.js deleted file mode 100644 index 6d8de2f8..00000000 --- a/frontend/src/components/ViewTrips/save-trip-modal.js +++ /dev/null @@ -1,224 +0,0 @@ -import React from 'react'; - -import Button from 'react-bootstrap/Button'; -import Modal from 'react-bootstrap/Modal'; -import Form from 'react-bootstrap/Form'; - -import createTrip from './create-new-trip.js'; - -/** - * Returns a Form.Control element with input type 'text' and other fields - * specified by the function parameters. - * - * @param {string} placeholder Text placehold in the form input - * @param {React.RefObject} ref Ref attached to the value inputted in the form. - * @return {JSX.Element} The Form.Control element. - */ -function createTextFormControl(placeholder, ref) { - return ( - - ); -} - -/** - * Returns a Form.Control element with input type 'text' and other fields - * specified by the function parameters. - * - * @param {React.RefObject} refArr The list of refs attached to the emails - * inputted in the form. - * @return {JSX.Element} The Form.Control element. - */ -function createDateFormControl(defaultValue, ref) { - return ( - - ); -} - -/** - * Returns a Form.Control element with input type 'text' and other fields - * specified by the function parameters. - * - * TODO(Issue #67): Email verification before submitting the form. - * - * @param {string} placeholder Text placehold in the form input - * @param {React.RefObject} refArr The list of refs attached to the emails - * inputted in the form. - * @return {JSX.Element} The Form.Control element. - */ -function createMultiFormControl(placeholder, refArr) { - return ( - <> - {refArr.map((ref, idx) => { - return ( - - ); - })} - - ); -} - -/** - * Returns a Form.Group element with components specified by the input args. - * - * @param {string} controlId prop that accessibly wires the nested label and - * input prop. - * @param {string} formLabel Label/title for the form input. - * @param {string} inputType Input type of the form. - * @param {string} placeholder Text placeholder in the form input. - * @param {React.RefObject} ref Ref attatched to the valued inputted in the form. - * @param {string} subFormText Subtext instructions under a form input. - * @return {JSX.Element} The Form.Group element. - */ -function createFormGroup(controlId, formLabel, inputType, placeholder, ref) { - let formControl; - switch(inputType) { - case 'text': - formControl = createTextFormControl(placeholder, ref); - break; - case 'date': - formControl = createDateFormControl(placeholder, ref); - break; - case 'emails': - formControl = createMultiFormControl(placeholder, ref); - break; - default: - console.error('There should be no other input type') - } - - return ( - <> - {formLabel} - - {formControl} - {/* Temporary instructions until fix Issue #52 */} - - - ) -} - -/** - * Component corresponding to the save trips modal. - * - * This component acts as a parent comonent of the AddTripModal and - * EditTripModal components. The only difference between the two is the prop - * `placeholderObj` prop (see below). - * - * @param {Object} props These are the props for this component: - * - db: Firestore database instance. - * - show: Boolean that determines if the add trips modal should be displayed. - * - handleClose: The function that handles closing the add trips modal. - * - refreshTripsContainer: Function that handles refreshing the TripsContainer - * component upon trip creation (Remove when fix Issue #62). - * - key: Special React attribute that ensures a new AddTripModal instance is - * created whenever this key is updated - * - placeholderObj: Object containing the placeholder/default values for the - * form input text boxes. - * - * @extends React.Component - */ -class SaveTripModal extends React.Component { - /** @inheritdoc */ - constructor(props) { - super(props); - - // Create Refs to reference form input elements - this.nameRef = React.createRef(); - this.descriptionRef = React.createRef(); - this.destinationRef = React.createRef(); - this.startDateRef = React.createRef(); - this.endDateRef = React.createRef(); - - // Create the number of collaborator input box refs as number of - // collaborators specified in the placeholderObj - const collaboratorsRefArr = []; - for (let i = 0; i < this.props.placeholderObj.collaborators.length; i++) { - collaboratorsRefArr.push(React.createRef()) - } - this.state = { collaboratorsRefArr: collaboratorsRefArr } - } - - addCollaboratorRef = () => { - this.setState({ collaboratorsRefArr: - this.state.collaboratorsRefArr.concat([React.createRef()]) } - ); - } - - /** - * Upon submission of the form, a new Trip document is created and the add - * trip modal is closed. - * - * @param e Event object corresponding to (add trip) submit button click. - */ - handleCreateNewTrip = (e) => { - e.preventDefault(); - createTrip(this.props.db, - { - name: this.nameRef.current.value, - description: this.descriptionRef.current.value, - destination: this.destinationRef.current.value, - startDate: this.startDateRef.current.value, - endDate: this.endDateRef.current.value, - collaboratorEmails: - this.state.collaboratorsRefArr.map(ref => ref.current.value) - }); - - this.props.refreshTripsContainer(); - this.props.handleClose(); - } - - /** @inheritdoc */ - render() { - return ( - - - Add New Trip - - -
- - {createFormGroup('tripNameGroup', 'Trip Name', 'text', - this.props.placeholderObj.name, this.nameRef)} - {createFormGroup('tripDescripGroup', 'Trip Description', 'text', - this.props.placeholderObj.description, this.descriptionRef)} - {createFormGroup('tripDestGroup', 'Trip Destination', 'text', - this.props.placeholderObj.destination, this.destinationRef)} - {createFormGroup('tripStartDateGroup', 'Start Date', 'date', - this.props.placeholderObj.startDate, this.startDateRef)} - {createFormGroup('tripEndDateGroup', 'End Date', 'date', - this.props.placeholderObj.endDate, this.endDateRef)} - {createFormGroup('tripCollabsGroup', 'Trip Collaborators', 'emails', - this.props.placeholderObj.collaborators, - this.state.collaboratorsRefArr)} - - - - - - - -
- - ); - } -}; - -export default SaveTripModal; From c54b527cdbc74a6c1e3b771e94c8db9368adf137 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 17:59:49 -0400 Subject: [PATCH 13/20] Rename add-trip-modal.js to save-trip-modal.js. --- frontend/src/components/ViewTrips/index.js | 2 +- .../ViewTrips/{add-trip-modal.js => save-trip-modal.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename frontend/src/components/ViewTrips/{add-trip-modal.js => save-trip-modal.js} (100%) diff --git a/frontend/src/components/ViewTrips/index.js b/frontend/src/components/ViewTrips/index.js index 2e4ca094..23f4f527 100644 --- a/frontend/src/components/ViewTrips/index.js +++ b/frontend/src/components/ViewTrips/index.js @@ -4,7 +4,7 @@ import Button from 'react-bootstrap/Button'; import app from '../Firebase/'; import Header from '../Header/'; -import SaveTripModal from './add-trip-modal.js' +import SaveTripModal from './save-trip-modal.js' import TripsContainer from './trips-container.js'; const db = app.firestore(); diff --git a/frontend/src/components/ViewTrips/add-trip-modal.js b/frontend/src/components/ViewTrips/save-trip-modal.js similarity index 100% rename from frontend/src/components/ViewTrips/add-trip-modal.js rename to frontend/src/components/ViewTrips/save-trip-modal.js From 203628c0d31b40b926b416fcb08aacbf8fc05928 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 19:18:15 -0400 Subject: [PATCH 14/20] Added use of props title and tripId. --- frontend/src/components/ViewTrips/save-trip-modal.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/ViewTrips/save-trip-modal.js b/frontend/src/components/ViewTrips/save-trip-modal.js index be4b1263..8e654796 100644 --- a/frontend/src/components/ViewTrips/save-trip-modal.js +++ b/frontend/src/components/ViewTrips/save-trip-modal.js @@ -123,8 +123,9 @@ function createFormGroup(controlId, formLabel, inputType, placeholder, ref) { * - handleClose: The function that handles closing the add trips modal. * - refreshTripsContainer: Function that handles refreshing the TripsContainer * component upon trip creation (Remove when fix Issue #62). - * - title: - * - tripId: + * - title: The title of the modal. + * - tripId: For adding a new trip, this will be null. For editting an existing + * trip, this will the document id associated with the trip. * - placeholderObj: Object containing the placeholder/default values for the * form input text boxes. * - key: Special React attribute that ensures a new AddTripModal instance is @@ -167,7 +168,7 @@ class SaveTripModal extends React.Component { */ handleCreateNewTrip = (e) => { e.preventDefault(); - createTrip(this.props.db, + createTrip(this.props.db, this.props.tripId, { name: this.nameRef.current.value, description: this.descriptionRef.current.value, @@ -187,7 +188,7 @@ class SaveTripModal extends React.Component { return ( - Add New Trip + {this.props.title}
From a8db73c318bd43d47ab685fc0c5489396cc483a2 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 19:19:18 -0400 Subject: [PATCH 15/20] Integrated tripId and added case for when trip is being editted/overwritten. --- .../src/components/ViewTrips/create-new-trip.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/ViewTrips/create-new-trip.js b/frontend/src/components/ViewTrips/create-new-trip.js index 519ee8ea..13200900 100644 --- a/frontend/src/components/ViewTrips/create-new-trip.js +++ b/frontend/src/components/ViewTrips/create-new-trip.js @@ -96,24 +96,30 @@ function formatTripData(rawTripObj) { * Promise containing a reference to the newly created document. * * @param {firebase.firestore.Firestore} db The Firestore database instance. + * @param {?string} tripId Document id associated with trip to overwrite. + * Null if adding a new trip. * @param {Object} tripObj A JS Object containing the Trip document fields. */ -export function addTripToFirestore(db, tripObj) { - return db.collection(COLLECTION_TRIPS) - .add(tripObj) +export function addTripToFirestore(db, tripId, tripObj) { + if (tripId === null) { + return db.collection(COLLECTION_TRIPS).add(tripObj); + } + return db.collection(COLLECTION_TRIPS).doc(tripId).set(tripObj); } /** * Formats/cleans form data and creates new Trip document in firestore. * * @param {firebase.firestore.Firestore} db The Firestore database instance. + * @param {?string} tripId Document id associated with trip to overwrite. + * Null if adding a new trip. * @param {Object} rawTripObj A JS Object containing the raw form data from the * add trip form. */ -function createTrip(db, rawTripObj) { +function createTrip(db, tripId, rawTripObj) { const formattedTripObj = formatTripData(rawTripObj); - addTripToFirestore(db, formattedTripObj) + addTripToFirestore(db, tripId, formattedTripObj) .then(docRef => { console.log("Document written with ID: ", docRef.id); }) From 9d97a4ba17e2a2c0668097d78439549ee6637a24 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 19:27:32 -0400 Subject: [PATCH 16/20] Add initial value for placeholderObj so SaveTripMoal compiles. --- frontend/src/components/ViewTrips/index.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/ViewTrips/index.js b/frontend/src/components/ViewTrips/index.js index 23f4f527..a6c29f2c 100644 --- a/frontend/src/components/ViewTrips/index.js +++ b/frontend/src/components/ViewTrips/index.js @@ -22,7 +22,14 @@ class ViewTrips extends React.Component { refreshSaveTripModal: false, modalTitle: null, tripId: null, - placeholderObj: null + placeholderObj: { + name: null, + description: null, + destination: null, + startDate: null, + endDate: null, + collaborators: [] + } }; } @@ -52,6 +59,9 @@ class ViewTrips extends React.Component { this.setState({ refreshSaveTripModal: !this.state.refreshSaveTripModal }); } + /** Property that hides the add/edit trip page. */ + hideSaveTripModal = () => { this.setState({ showModal: false }); } + /** Property that refreshes and displays the add/edit trip page. */ showSaveTripModal = () => { this.refreshSaveTripModal(); @@ -91,9 +101,6 @@ class ViewTrips extends React.Component { this.showSaveTripModal(); } - /** Property that hides the add/edit trip page. */ - hideSaveTripModal = () => { this.setState({ showModal: false }); } - /** @inheritdoc */ render() { return ( From 3e6ff4dcecea7df6de8d401d704495fac057e436 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Wed, 15 Jul 2020 19:33:28 -0400 Subject: [PATCH 17/20] Add documentation for event listeners in index.js. --- frontend/src/components/ViewTrips/index.js | 29 ++++++++++++++++------ 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/ViewTrips/index.js b/frontend/src/components/ViewTrips/index.js index a6c29f2c..c5cce8ca 100644 --- a/frontend/src/components/ViewTrips/index.js +++ b/frontend/src/components/ViewTrips/index.js @@ -34,8 +34,8 @@ class ViewTrips extends React.Component { } /** - * Flips `refreshTripsContainer` property which causes that TripsContainer - * component to be reloaded. + * Handler that 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. * @@ -48,8 +48,8 @@ class ViewTrips extends React.Component { } /** - * Flips `refreshSaveTripModal` property which causes that save/edit trip - * component to be reloaded. + * Handler that flips `refreshSaveTripModal` property which causes that + * save/edit trip 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 @@ -59,15 +59,22 @@ class ViewTrips extends React.Component { this.setState({ refreshSaveTripModal: !this.state.refreshSaveTripModal }); } - /** Property that hides the add/edit trip page. */ + /** Handler that hides the add/edit trip page. */ hideSaveTripModal = () => { this.setState({ showModal: false }); } - /** Property that refreshes and displays the add/edit trip page. */ + /** Handler that refreshes and displays the add/edit trip page. */ showSaveTripModal = () => { this.refreshSaveTripModal(); this.setState({ showModal: true }); } + /** + * Handler that displays the add trip page. + * + * Sets state for the states `title`, `tripId`, and `placeholderObj` in order + * to ensure the modal has the visual characteristics of an "add trip" modal + * and creates a new Trip document in the database. + */ showAddTripModal = () => { this.setState({ title: 'Add New Trip', @@ -84,8 +91,16 @@ class ViewTrips extends React.Component { this.showSaveTripModal(); } + /** + * Handler that displays the edit trip page. + * + * Sets state for the states `title`, `tripId`, and `placeholderObj` in order + * to ensure the modal has the visual characteristics of an "edit trip" modal + * and overwrites and existing Trip document in the database. + * + * TODO(Issue #69): Get individual tripId and trip data for placeholderObj. + */ showEditTripModal = () => { - // TODO(Issue #69): Get individual tripId and trip data for placeholderObj this.setState({ title: 'Edit Trip', tripId: null, From 40fb73f89c77db558abd458bdd4f1e288eec7695 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Thu, 16 Jul 2020 15:51:42 -0400 Subject: [PATCH 18/20] Update document writen/overwritten success console.logs. --- frontend/src/components/ViewTrips/create-new-trip.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/ViewTrips/create-new-trip.js b/frontend/src/components/ViewTrips/create-new-trip.js index 03bbf12e..168786e9 100644 --- a/frontend/src/components/ViewTrips/create-new-trip.js +++ b/frontend/src/components/ViewTrips/create-new-trip.js @@ -121,7 +121,11 @@ function createTrip(db, tripId, rawTripObj) { addTripToFirestore(db, tripId, formattedTripObj) .then(docRef => { - console.log("Document written with ID: ", docRef.id); + if (tripId === null) { + console.log("Document created with ID: ", docRef.id); + } else { + console.log("Document overwritten with ID: ", tripId); + } }) .catch(error => { console.error("Error adding document: ", error); From 62a7baf079c0dfda39c991e5d7075302d2c495c4 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Fri, 17 Jul 2020 10:14:09 -0400 Subject: [PATCH 19/20] Move logic to grab title inside of save-trip-modal rather than pass in as prop. --- frontend/src/components/ViewTrips/index.js | 8 ++------ .../components/ViewTrips/save-trip-modal.js | 19 +++++++++++++------ 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/ViewTrips/index.js b/frontend/src/components/ViewTrips/index.js index 98b5e7f4..33f425ff 100644 --- a/frontend/src/components/ViewTrips/index.js +++ b/frontend/src/components/ViewTrips/index.js @@ -18,7 +18,6 @@ class ViewTrips extends React.Component { this.state = { showModal: false, refreshTripsContainer: false, refreshSaveTripModal: false, - modalTitle: null, tripId: null, placeholderObj: { name: null, @@ -69,13 +68,12 @@ class ViewTrips extends React.Component { /** * Handler that displays the add trip page. * - * Sets state for the states `title`, `tripId`, and `placeholderObj` in order + * Sets state for the states `tripId` and `placeholderObj` in order * to ensure the modal has the visual characteristics of an "add trip" modal * and creates a new Trip document in the database. */ showAddTripModal = () => { this.setState({ - title: 'Add New Trip', tripId: null, placeholderObj: { name: 'Enter Trip Name', @@ -92,7 +90,7 @@ class ViewTrips extends React.Component { /** * Handler that displays the edit trip page. * - * Sets state for the states `title`, `tripId`, and `placeholderObj` in order + * Sets state for the states `tripId` and `placeholderObj` in order * to ensure the modal has the visual characteristics of an "edit trip" modal * and overwrites and existing Trip document in the database. * @@ -100,7 +98,6 @@ class ViewTrips extends React.Component { */ showEditTripModal = () => { this.setState({ - title: 'Edit Trip', tripId: null, placeholderObj: { name: null, @@ -123,7 +120,6 @@ class ViewTrips extends React.Component { show={this.state.showModal} handleClose={this.hideSaveTripModal} refreshTripsContainer={this.refreshTripsContainer} - title={this.state.title} tripId={this.state.tripId} placeholderObj={this.state.placeholderObj} key={this.state.refreshSaveTripModal} diff --git a/frontend/src/components/ViewTrips/save-trip-modal.js b/frontend/src/components/ViewTrips/save-trip-modal.js index 1961662a..f1fc5021 100644 --- a/frontend/src/components/ViewTrips/save-trip-modal.js +++ b/frontend/src/components/ViewTrips/save-trip-modal.js @@ -115,15 +115,14 @@ function createFormGroup(controlId, formLabel, inputType, placeholder, ref) { * * This component "acts" as a parent of the (non-existant) AddTripModal and * EditTripModal components. The only differences in the implementation between - * the two fake components are dervied from the props `title`, `tripid`, and + * the two fake components are dervied from the props `tripid` and * `placeholderObj` (see below). * * @param {Object} props These are the props for this component: - * - show: Boolean that determines if the add trips modal should be displayed. - * - handleClose: The function that handles closing the add trips modal. + * - show: Boolean that determines if the save trips modal should be displayed. + * - handleClose: Handler that closes the save trips modal upon calling. * - refreshTripsContainer: Function that handles refreshing the TripsContainer - * component upon trip creation (Remove when fix Issue #62). - * - title: The title of the modal. + * component upon trip saving (Remove when fix Issue #62). * - tripId: For adding a new trip, this will be null. For editting an existing * trip, this will the document id associated with the trip. * - placeholderObj: Object containing the placeholder/default values for the @@ -233,12 +232,20 @@ class SaveTripModal extends React.Component { this.props.handleClose(); } + /** Gets the Modal title based the type of modal (edit or add trip). */ + getModalTitle = () => { + if (this.isAddTripForm) { + return 'Add New Trip'; + } + return 'Edit Trip'; + } + /** @inheritdoc */ render() { return ( - {this.props.title} + {this.getModalTitle()} From 26efe145d0791883343d724e905d59b4f9a1f986 Mon Sep 17 00:00:00 2001 From: Zach Ghera Date: Fri, 17 Jul 2020 16:53:03 -0400 Subject: [PATCH 20/20] Fix spelling typo. --- frontend/src/components/ViewTrips/save-trip-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/ViewTrips/save-trip-modal.js b/frontend/src/components/ViewTrips/save-trip-modal.js index e62b39df..769985d7 100644 --- a/frontend/src/components/ViewTrips/save-trip-modal.js +++ b/frontend/src/components/ViewTrips/save-trip-modal.js @@ -111,7 +111,7 @@ function createFormGroup(controlId, formLabel, inputType, placeholder, ref) { /** * Component corresponding to the save trips modal. * - * This component "acts" as a parent of the (non-existant) AddTripModal and + * This component "acts" as a parent of the (non-existent) AddTripModal and * EditTripModal components. The only differences in the implementation between * the two fake components are dervied from the props `tripid` and * `placeholderObj` (see below).