SHARE
TWEET

Untitled

a guest Apr 21st, 2018 109 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import './index.css';
  4. import App from './App';
  5. import { BrowserRouter } from 'react-router-dom';
  6. import registerServiceWorker from './registerServiceWorker';
  7.  
  8. ReactDOM.render(
  9.     <BrowserRouter>
  10.         <App />
  11.     </BrowserRouter>
  12.     , document.getElementById('root'));
  13. registerServiceWorker();
  14.    
  15. import React, { Component } from 'react';
  16. import './App.css';
  17. import Login from "./Components/Login/Login";
  18. import FlightsList from "./Components/FlightsList/FlightsList";
  19. import { Link, Route, Switch } from 'react-router-dom';
  20. import { withRouter } from 'react-router-dom';
  21.  
  22. class App extends Component {
  23.     handleLogin = (loginObject) => {
  24.         if( loginObject.userName === 'user' && loginObject.password === 'pass') {
  25.             this.props.history.push({
  26.                 pathname: '/flights',
  27.             });
  28.         }
  29.     };
  30.  
  31.     render() {
  32.         return (
  33.                 <Switch>
  34.                     <Route exact path="/" component={() => <Login doLogin={this.handleLogin} />}/>
  35.                     <Route path="/flights" component={FlightsList}/>
  36.                 </Switch>
  37.         );
  38.     }
  39. }
  40.  
  41. export default withRouter(App);
  42.    
  43. import React from 'react';
  44. import PropTypes from 'prop-types';
  45. import './Login.css';
  46. import { withRouter } from 'react-router-dom';
  47.  
  48. class Login extends React.Component {
  49.  
  50.     static propTypes = {
  51.         doLogin: PropTypes.func.isRequired,
  52.     };
  53.  
  54.     handleChangedInput = (e) => {
  55.         this.setState({
  56.             [e.target.name]: e.target.value,
  57.         });
  58.     };
  59.  
  60.     sendLoginInfo = () => {
  61.         this.props.doLogin(this.state);
  62.     };
  63.  
  64.     render() {
  65.         return(
  66.             <div className="login-div">
  67.                 <h2>Login</h2>
  68.                 <div>
  69.                     <label>User Name: </label>
  70.                     <input name="userName" type="text" onChange={this.handleChangedInput}/>
  71.                 </div>
  72.                 <div>
  73.                     <label>Password: </label>
  74.                     <input name="password" type="password" onChange={this.handleChangedInput} />
  75.                 </div>
  76.                 <button onClick={this.sendLoginInfo} className="login-btn" name="button">{'Login'}</button>
  77.             </div>
  78.         );
  79.     }
  80. }
  81.  
  82. export default withRouter(Login);
  83.    
  84. import React, { Component } from 'react';
  85. import './FlightsList.css';
  86. import getFlights from '../../helpers/api';
  87. import { Table, Button } from 'react-bootstrap';
  88. import Modal from 'react-modal';
  89. const customStyles = {
  90.     content : {
  91.         top                   : '50%',
  92.         left                  : '50%',
  93.         right                 : 'auto',
  94.         bottom                : 'auto',
  95.         marginRight           : '-50%',
  96.         transform             : 'translate(-50%, -50%)'
  97.     }
  98. };
  99.  
  100. export default class FlightsList extends Component {
  101.  
  102.     state = {
  103.         flights: null,
  104.         originalFlights: null,
  105.         modalIsOpen: false,
  106.     };
  107.     componentDidMount() {
  108.         getFlights()
  109.             .then( flights => {
  110.                 this.setState({
  111.                     flights,
  112.                     originalFlights: flights,
  113.                 });
  114.             });
  115.     }
  116.  
  117.     openModal = () => {
  118.         this.setState({modalIsOpen: true});
  119.     };
  120.  
  121.     closeModal = () => {
  122.         this.setState({modalIsOpen: false});
  123.     };
  124.  
  125.     renderFlights() {
  126.         return (
  127.                 this.state.flights.map( flight => (
  128.                     <tr key={flight.id}>
  129.                         <td>{flight.from}</td>
  130.                         <td>{flight.to}</td>
  131.                         <td>{flight.departureTime}</td>
  132.                         <td>{flight.landingTime}</td>
  133.                         <td>{flight.price}</td>
  134.                     </tr>
  135.                 ))
  136.         );
  137.     }
  138.  
  139.     rednerNoFlights() {
  140.         return (
  141.             <tr colSpan={5}>{'No Flights'}</tr>
  142.         );
  143.     }
  144.  
  145.     renderLoading() {
  146.         return (
  147.             <tr colSpan={5}><td>{'Loading'}</td></tr>
  148.         );
  149.     }
  150.  
  151.     handleKeyPress = (e) => {
  152.  
  153.         if(e.key == 'Enter'){
  154.             if( e.target.value === '') {
  155.                 this.setState({
  156.                     flights: this.state.originalFlights,
  157.                 });
  158.             }
  159.             else {
  160.                 this.setState({
  161.                     flights: this.state.flights.filter(flight => flight.to === e.target.value),
  162.                     originalFlights: this.state.flights,
  163.                 });
  164.             }
  165.         }
  166.     };
  167.  
  168.     handleDetailsSubmit = (e) => {
  169.         const newFlight = {
  170.             id: this.state.flights.length,
  171.             from: this.refs.from.value,
  172.             to: this.refs.to.value,
  173.             departureTime: this.refs.departure.value,
  174.             landingTime: this.refs.landing.value,
  175.             price: this.refs.price.value,
  176.         };
  177.         this.setState({
  178.             flights: [...this.state.flights, newFlight],
  179.             originalFlights: [...this.state.flights, newFlight],
  180.             modalIsOpen: false,
  181.         });
  182.     };
  183.  
  184.     renderModal = () => {
  185.         return (
  186.             <Modal
  187.                 isOpen={this.state.modalIsOpen}
  188.                 onRequestClose={this.closeModal}
  189.                 style={customStyles}
  190.                 contentLabel="Example Modal"
  191.             >
  192.                 <div>
  193.                     <form className="form_style">
  194.                         <p>
  195.                             <label>{'from:'}</label>
  196.                             <input type="text" ref="from" name="from" />
  197.                         </p>
  198.                         <p>
  199.                             <label>{'to: '}</label>
  200.                             <input type="text" ref="to" name="to" />
  201.                         </p>
  202.                         <p>
  203.                             <label>{'Departure Time: '}</label>
  204.                             <input type="text" ref="departure" name="departure_time" />
  205.                         </p>
  206.                         <p>
  207.                             <label>{'Landing Time: '}</label>
  208.                             <input type="text" ref="landing" name="landing_time" />
  209.                         </p>
  210.                         <p>
  211.                             <label>{'Price: '}</label>
  212.                             <input min="0" ref="price" type="number" name="price" />
  213.                         </p>
  214.                         <div className="button_div">
  215.                             <Button onClick={this.handleDetailsSubmit} bsStyle="primary" bsSize="small">
  216.                                 {'Save'}
  217.                             </Button>
  218.                         </div>
  219.                     </form>
  220.                 </div>
  221.             </Modal>
  222.         );
  223.     };
  224.  
  225.     render() {
  226.         return (
  227.             <div>
  228.                 <h1>Flights</h1>
  229.                 <div>
  230.                     <label>{'Filter: '}</label>
  231.                     <input type="text" onKeyPress={this.handleKeyPress}/>
  232.                 </div>
  233.                 <div>
  234.                     <button onClick={this.openModal} >{'Add Flight'}</button>
  235.                 </div>
  236.                 {this.renderModal()}
  237.                 <Table striped bordered condensed hover>
  238.                     <thead>
  239.                     <tr>
  240.                         <th>from</th>
  241.                         <th>to</th>
  242.                         <th>Departure Time</th>
  243.                         <th>Landing Time</th>
  244.                         <th>Price</th>
  245.                     </tr>
  246.                     </thead>
  247.                     <tbody>
  248.                         {!this.state.flights ? this.renderLoading() : ( this.state.flights.length > 0 ? this.renderFlights() : this.rednerNoFlights() )}
  249.                     </tbody>
  250.                 </Table>
  251.             </div>
  252.         );
  253.     }
  254. }
  255.    
  256. export default function getFlights() {
  257.     return new Promise((resolve, reject) => {
  258.         setTimeout(() => resolve([
  259.             {
  260.                 id: 0,
  261.                 from: 'Tel-Aviv',
  262.                 to: 'New-York',
  263.                 departureTime: 55,
  264.                 landingTime: 55,
  265.                 price: 300,
  266.             },
  267.             {
  268.                 id: 1,
  269.                 from: 'Tel-Aviv',
  270.                 to: 'Amsterdam',
  271.                 departureTime: 55,
  272.                 landingTime: 55,
  273.                 price: 300,
  274.             },
  275.             {
  276.                 id: 2,
  277.                 from: 'Tel-Aviv',
  278.                 to: 'New-York',
  279.                 departureTime: 55,
  280.                 landingTime: 55,
  281.                 price: 300,
  282.             }
  283.         ]), 2000);
  284.     });
  285. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top