Skip to content

Commit

Permalink
Added modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuale
xuale committed May 2, 2018
1 parent 566be37 commit e73c4c9
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 36 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"react-google-login": "^3.1.0",
"react-materialize": "^2.1.4",
"react-redux": "^5.0.6",
"react-responsive-modal": "^3.0.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "next",
Expand Down
27 changes: 20 additions & 7 deletions src/components/Modal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import React from "react";

import Button from "../Button";

import { Modal } from "react-materialize";
import Modal from "react-responsive-modal";
import { Row, Col } from "react-materialize";

class RideModal extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -50,14 +51,26 @@ class RideModal extends React.Component {
}

render() {
const { trip, scrollbox, driver } = this.props;
const { trip, scrollbox, driver, visible } = this.props;
const { form, editing } = this.state;
return (
<Modal open>
<Button id="close-button" onClick={this.closeModal} label="Close" />
{driver && <Button label="Delete" onClick={this.delete} />}
{!editing && driver && <Button label="Edit" onClick={this.edit} />}
{editing && driver && <Button label="Save" onClick={this.save} />}
<Modal open={visible} onClose={this.closeModal}>
<h2>
{trip.start_city} to {trip.end_city}
</h2>
<h4> ${trip.price_per_seat} per seat </h4>
<h4> {trip.seats} seats available </h4>
<p> {trip.info} </p>
<Row>
<Col>
{driver && <Button label="Delete" onClick={this.delete} />}
{!driver && <Button label="Contact driver" onClick={this.delete} />}
</Col>
<Col>
{!editing && driver && <Button label="Edit" onClick={this.edit} />}
{editing && driver && <Button label="Save" onClick={this.save} />}
</Col>
</Row>
</Modal>
);
}
Expand Down
26 changes: 12 additions & 14 deletions src/containers/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ class Dashboard extends React.Component {
// TODO: Flesh out ride object
this.state = {
trips: [],
modalVisible: false,
selectedTrip: {
info: "",
},
modalViewing: false,
};

this.closeModal = this.closeModal.bind(this);
Expand All @@ -38,7 +38,7 @@ class Dashboard extends React.Component {

async getRideByID(id) {
// TODO: fetch specific ride
this.setState({
await this.setState({
selectedTrip: {
seats: 3,
start_city: "Los Angeles",
Expand All @@ -48,27 +48,27 @@ class Dashboard extends React.Component {
end_dest_lat: "2",
end_dest_lon: "2",
price_per_seat: 20,
info: "Hi",
info:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at lectus sed odio ornare auctor ac eget massa. Aliquam erat volutpat. Donec placerat risus leo, vel aliquet neque venenatis nec. Sed pulvinar sed urna sagittis eleifend. Fusce quam libero, sagittis quis metus placerat, volutpat mattis mi. Cras sit amet metus tincidunt, tempus dui id, blandit urna. Sed ipsum nibh, dignissim nec enim sed, vehicula condimentum odio. Sed malesuada malesuada magna in dignissim. Ut pellentesque malesuada augue, ac convallis nunc ultrices sit amet. Phasellus laoreet, enim ut congue accumsan, leo mi gravida arcu, sed consectetur augue sem maximus augue. Curabitur sed vulputate justo, vel lacinia quam.",
},
modalViewing: true,
modalVisible: true,
});
}

async closeModal() {
this.setState({
modalVisible: false,
selectedTrip: {},
modalViewing: false,
});
}

render() {
const {} = this.props;
const { trips, selectedTrip, modalViewing } = this.state;
const { trips, selectedTrip, modalVisible } = this.state;

const tripCards = trips.map(tripInfo => (
<li>
<RideCard

date={tripInfo.date}
price={tripInfo.price}
start={tripInfo.start}
Expand All @@ -80,13 +80,11 @@ class Dashboard extends React.Component {
));
return (
<div className="dashboard container">
{modalViewing && (
<RideModal
trip={selectedTrip}
closeModal={this.closeModal}
scrollbox
/>
)}
<RideModal
visible={modalVisible}
trip={selectedTrip}
closeModal={this.closeModal}
/>
<ul>{tripCards}</ul>
</div>
);
Expand Down
34 changes: 20 additions & 14 deletions src/containers/driver.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,11 @@ class DriverPanel extends React.Component {
this.state = {
trips: [],
selectedTrip: {},
tripViewing: false,
modalVisible: false,
err: false,
};

this.closeModal = this.closeModal.bind(this);
this.listRides = this.listRides.bind(this);
this.getRideByID = this.getRideByID.bind(this);
this.updateRide = this.updateRide.bind(this);
Expand All @@ -52,11 +53,11 @@ class DriverPanel extends React.Component {
end_dest_lat: "2",
end_dest_lon: "2",
price_per_seat: 20,
info: "Hi",
info:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at lectus sed odio ornare auctor ac eget massa. Aliquam erat volutpat. Donec placerat risus leo, vel aliquet neque venenatis nec. Sed pulvinar sed urna sagittis eleifend. Fusce quam libero, sagittis quis metus placerat, volutpat mattis mi. Cras sit amet metus tincidunt, tempus dui id, blandit urna. Sed ipsum nibh, dignissim nec enim sed, vehicula condimentum odio. Sed malesuada malesuada magna in dignissim. Ut pellentesque malesuada augue, ac convallis nunc ultrices sit amet. Phasellus laoreet, enim ut congue accumsan, leo mi gravida arcu, sed consectetur augue sem maximus augue. Curabitur sed vulputate justo, vel lacinia quam.",
},
modalViewing: true,
modalVisible: true,
});
å;
}

async updateRide() {
Expand All @@ -81,13 +82,20 @@ class DriverPanel extends React.Component {
});
}

async closeModal() {
this.setState({
modalVisible: false,
selectedTrip: {},
});
}

componentDidMount() {
this.listRides();
}

render() {
const {} = this.props;
const { trips, selectedTrip, tripViewing, err } = this.state;
const { trips, selectedTrip, modalVisible, err } = this.state;

const tripCards = trips.map(tripInfo => (
<li>
Expand Down Expand Up @@ -120,15 +128,13 @@ class DriverPanel extends React.Component {
<h2> Upcoming rides </h2>
{tripCards}
</Row>
{tripViewing && (
<RideModal
trip={selectedTrip}
closeModal={this.closeModal}
delete={this.deleteRide}
scrollbox
driver
/>
)}
<RideModal
trip={selectedTrip}
visible={modalVisible}
closeModal={this.closeModal}
delete={this.deleteRide}
driver
/>
</div>
);
}
Expand Down
39 changes: 38 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2349,6 +2349,10 @@ dom-converter@~0.1:
dependencies:
utila "~0.3"

dom-helpers@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"

dom-serializer@0, dom-serializer@~0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
Expand Down Expand Up @@ -5746,6 +5750,10 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"

no-scroll@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/no-scroll/-/no-scroll-2.1.0.tgz#f8643b3ddb6a3bf94430e5ff31d26f21d082a695"

node-fetch@^1.0.1:
version "1.7.1"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.1.tgz#899cb3d0a3c92f952c47f1b876f4c8aeabd400d5"
Expand Down Expand Up @@ -6824,7 +6832,7 @@ prop-types@^15.5.10, prop-types@^15.5.4:
fbjs "^0.8.9"
loose-envify "^1.3.1"

prop-types@^15.5.8:
prop-types@^15.5.8, prop-types@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
dependencies:
Expand Down Expand Up @@ -7027,6 +7035,10 @@ react-is@^16.3.1:
version "16.3.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.1.tgz#ee66e6d8283224a83b3030e110056798488359ba"

react-lifecycles-compat@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.2.tgz#7279047275bd727a912e25f734c0559527e84eff"

react-materialize@^2.1.4:
version "2.1.4"
resolved "https://registry.yarnpkg.com/react-materialize/-/react-materialize-2.1.4.tgz#f2efcc5807bbf48d638ec1d72f2c84468816f59c"
Expand All @@ -7035,6 +7047,12 @@ react-materialize@^2.1.4:
react "^16.2.0"
react-dom "^16.2.0"

react-minimalist-portal@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-minimalist-portal/-/react-minimalist-portal-2.1.1.tgz#d32c403f446c5cb91060e3a3c70beba8c3d08c8f"
dependencies:
prop-types "^15.6.0"

react-reconciler@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"
Expand All @@ -7055,6 +7073,17 @@ react-redux@^5.0.6:
loose-envify "^1.1.0"
prop-types "^15.5.10"

react-responsive-modal@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/react-responsive-modal/-/react-responsive-modal-3.0.0.tgz#c88b9f22156fa6585e87df5f68c8f7967a15a73f"
dependencies:
classnames "^2.2.5"
no-scroll "^2.1.0"
prop-types "^15.6.1"
react-lifecycles-compat "^3.0.2"
react-minimalist-portal "^2.1.1"
react-transition-group "^2.3.1"

react-router-dom@^4.2.2:
version "4.2.2"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
Expand Down Expand Up @@ -7162,6 +7191,14 @@ react-test-renderer@^16.0.0-0, react-test-renderer@^16.3.1:
prop-types "^15.6.0"
react-is "^16.3.1"

react-transition-group@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.3.1.tgz#31d611b33e143a5e0f2d94c348e026a0f3b474b6"
dependencies:
dom-helpers "^3.3.1"
loose-envify "^1.3.1"
prop-types "^15.6.1"

react@^16.2.0:
version "16.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
Expand Down

0 comments on commit e73c4c9

Please sign in to comment.