SHARE
TWEET

Untitled

a guest Aug 19th, 2019 57 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. 'use strict';
  2.  
  3. const React = require('react');
  4. const ReactDOM = require('react-dom');
  5. const client = require('./client');
  6.  
  7. const follow = require('./follow'); // function to hop multiple links by "rel"
  8.  
  9. const root = '/api';
  10.  
  11. class App extends React.Component {
  12.  
  13.     constructor(props) {
  14.         super(props);
  15.         this.state = {employees: [], attributes: [], pageSize: 2, links: {}};
  16.         this.updatePageSize = this.updatePageSize.bind(this);
  17.         this.onCreate = this.onCreate.bind(this);
  18.         this.onDelete = this.onDelete.bind(this);
  19.         this.onNavigate = this.onNavigate.bind(this);
  20.     }
  21.  
  22.     // tag::follow-2[]
  23.     loadFromServer(pageSize) {
  24.         follow(client, root, [
  25.             {rel: 'employees', params: {size: pageSize}}]
  26.         ).then(employeeCollection => {
  27.             return client({
  28.                 method: 'GET',
  29.                 path: employeeCollection.entity._links.profile.href,
  30.                 headers: {'Accept': 'application/schema+json'}
  31.             }).then(schema => {
  32.                 this.schema = schema.entity;
  33.                 return employeeCollection;
  34.             });
  35.         }).done(employeeCollection => {
  36.             this.setState({
  37.                 employees: employeeCollection.entity._embedded.employees,
  38.                 attributes: Object.keys(this.schema.properties),
  39.                 pageSize: pageSize,
  40.                 links: employeeCollection.entity._links});
  41.         });
  42.     }
  43.     // end::follow-2[]
  44.  
  45.     // tag::create[]
  46.     onCreate(newEmployee) {
  47.         follow(client, root, ['employees']).then(employeeCollection => {
  48.             return client({
  49.                 method: 'POST',
  50.                 path: employeeCollection.entity._links.self.href,
  51.                 entity: newEmployee,
  52.                 headers: {'Content-Type': 'application/json'}
  53.             })
  54.         }).then(response => {
  55.             return follow(client, root, [
  56.                 {rel: 'employees', params: {'size': this.state.pageSize}}]);
  57.         }).done(response => {
  58.             if (typeof response.entity._links.last !== "undefined") {
  59.                 this.onNavigate(response.entity._links.last.href);
  60.             } else {
  61.                 this.onNavigate(response.entity._links.self.href);
  62.             }
  63.         });
  64.     }
  65.     // end::create[]
  66.  
  67.     // tag::delete[]
  68.     onDelete(employee) {
  69.         client({method: 'DELETE', path: employee._links.self.href}).done(response => {
  70.             this.loadFromServer(this.state.pageSize);
  71.         });
  72.     }
  73.     // end::delete[]
  74.  
  75.     // tag::navigate[]
  76.     onNavigate(navUri) {
  77.         client({method: 'GET', path: navUri}).done(employeeCollection => {
  78.             this.setState({
  79.                 employees: employeeCollection.entity._embedded.employees,
  80.                 attributes: this.state.attributes,
  81.                 pageSize: this.state.pageSize,
  82.                 links: employeeCollection.entity._links
  83.             });
  84.         });
  85.     }
  86.     // end::navigate[]
  87.  
  88.     // tag::update-page-size[]
  89.     updatePageSize(pageSize) {
  90.         if (pageSize !== this.state.pageSize) {
  91.             this.loadFromServer(pageSize);
  92.         }
  93.     }
  94.     // end::update-page-size[]
  95.  
  96.     // tag::follow-1[]
  97.     componentDidMount() {
  98.         this.loadFromServer(this.state.pageSize);
  99.     }
  100.     // end::follow-1[]
  101.  
  102.     render() {
  103.         return (
  104.             <div>
  105.                 <CreateDialog attributes={this.state.attributes} onCreate={this.onCreate}/>
  106.                 <EmployeeList employees={this.state.employees}
  107.                               links={this.state.links}
  108.                               pageSize={this.state.pageSize}
  109.                               onNavigate={this.onNavigate}
  110.                               onDelete={this.onDelete}
  111.                               updatePageSize={this.updatePageSize}/>
  112.             </div>
  113.         )
  114.     }
  115. }
  116.  
  117. // tag::create-dialog[]
  118. class CreateDialog extends React.Component {
  119.  
  120.     constructor(props) {
  121.         super(props);
  122.         this.handleSubmit = this.handleSubmit.bind(this);
  123.     }
  124.  
  125.     handleSubmit(e) {
  126.         e.preventDefault();
  127.         const newEmployee = {};
  128.         this.props.attributes.forEach(attribute => {
  129.             newEmployee[attribute] = ReactDOM.findDOMNode(this.refs[attribute]).value.trim();
  130.         });
  131.         this.props.onCreate(newEmployee);
  132.  
  133.         // clear out the dialog's inputs
  134.         this.props.attributes.forEach(attribute => {
  135.             ReactDOM.findDOMNode(this.refs[attribute]).value = '';
  136.         });
  137.  
  138.         // Navigate away from the dialog to hide it.
  139.         window.location = "#";
  140.     }
  141.  
  142.     render() {
  143.         const inputs = this.props.attributes.map(attribute =>
  144.             <p key={attribute}>
  145.                 <input type="text" placeholder={attribute} ref={attribute} className="field"/>
  146.             </p>
  147.         );
  148.  
  149.         return (
  150.             <div>
  151.                 <a href="#createEmployee">Create</a>
  152.  
  153.                 <div id="createEmployee" className="modalDialog">
  154.                     <div>
  155.                         <a href="#" title="Close" className="close">X</a>
  156.  
  157.                         <h2>Create new employee</h2>
  158.  
  159.                         <form>
  160.                             {inputs}
  161.                             <button onClick={this.handleSubmit}>Create</button>
  162.                         </form>
  163.                     </div>
  164.                 </div>
  165.             </div>
  166.         )
  167.     }
  168.  
  169. }
  170. // end::create-dialog[]
  171.  
  172. class EmployeeList extends React.Component {
  173.  
  174.     constructor(props) {
  175.         super(props);
  176.         this.handleNavFirst = this.handleNavFirst.bind(this);
  177.         this.handleNavPrev = this.handleNavPrev.bind(this);
  178.         this.handleNavNext = this.handleNavNext.bind(this);
  179.         this.handleNavLast = this.handleNavLast.bind(this);
  180.         this.handleInput = this.handleInput.bind(this);
  181.     }
  182.  
  183.     // tag::handle-page-size-updates[]
  184.     handleInput(e) {
  185.         e.preventDefault();
  186.         const pageSize = ReactDOM.findDOMNode(this.refs.pageSize).value;
  187.         if (/^[0-9]+$/.test(pageSize)) {
  188.             this.props.updatePageSize(pageSize);
  189.         } else {
  190.             ReactDOM.findDOMNode(this.refs.pageSize).value =
  191.                 pageSize.substring(0, pageSize.length - 1);
  192.         }
  193.     }
  194.     // end::handle-page-size-updates[]
  195.  
  196.     // tag::handle-nav[]
  197.     handleNavFirst(e){
  198.         e.preventDefault();
  199.         this.props.onNavigate(this.props.links.first.href);
  200.     }
  201.  
  202.     handleNavPrev(e) {
  203.         e.preventDefault();
  204.         this.props.onNavigate(this.props.links.prev.href);
  205.     }
  206.  
  207.     handleNavNext(e) {
  208.         e.preventDefault();
  209.         this.props.onNavigate(this.props.links.next.href);
  210.     }
  211.  
  212.     handleNavLast(e) {
  213.         e.preventDefault();
  214.         this.props.onNavigate(this.props.links.last.href);
  215.     }
  216.     // end::handle-nav[]
  217.  
  218.     // tag::employee-list-render[]
  219.     render() {
  220.         const employees = this.props.employees.map(employee =>
  221.             <Employee key={employee._links.self.href} employee={employee} onDelete={this.props.onDelete}/>
  222.         );
  223.  
  224.         const navLinks = [];
  225.         if ("first" in this.props.links) {
  226.             navLinks.push(<button key="first" onClick={this.handleNavFirst}>&lt;&lt;</button>);
  227.         }
  228.         if ("prev" in this.props.links) {
  229.             navLinks.push(<button key="prev" onClick={this.handleNavPrev}>&lt;</button>);
  230.         }
  231.         if ("next" in this.props.links) {
  232.             navLinks.push(<button key="next" onClick={this.handleNavNext}>&gt;</button>);
  233.         }
  234.         if ("last" in this.props.links) {
  235.             navLinks.push(<button key="last" onClick={this.handleNavLast}>&gt;&gt;</button>);
  236.         }
  237.  
  238.         return (
  239.             <div>
  240.                 <input ref="pageSize" defaultValue={this.props.pageSize} onInput={this.handleInput}/>
  241.                 <table>
  242.                     <tbody>
  243.                     <tr>
  244.                         <th>First Name</th>
  245.                         <th>Last Name</th>
  246.                         <th>Description</th>
  247.                         <th></th>
  248.                     </tr>
  249.                     {employees}
  250.                     </tbody>
  251.                 </table>
  252.                 <div>
  253.                     {navLinks}
  254.                 </div>
  255.             </div>
  256.         )
  257.     }
  258.     // end::employee-list-render[]
  259. }
  260.  
  261. // tag::employee[]
  262. class Employee extends React.Component {
  263.     employee;
  264.     firstName;
  265.     lastName;
  266.  
  267.     constructor(props) {
  268.         super(props);
  269.         this.handleDelete = this.handleDelete.bind(this);
  270.     }
  271.  
  272.     handleDelete() {
  273.         this.props.onDelete(this.props.employee);
  274.     }
  275.  
  276.     render() {
  277.         return (
  278.             <tr>
  279.                 <td>{this.props.employee.firstName}</td>
  280.                 <td>{this.props.employee.lastName}</td>
  281.                 <td>{this.props.employee.description}</td>
  282.                 <td>
  283.                     <button onClick={this.handleDelete}>Delete</button>
  284.                 </td>
  285.             </tr>
  286.         )
  287.     }
  288. }
  289. // end::employee[]
  290.  
  291. ReactDOM.render(
  292.     <App />,
  293.     document.getElementById('react')
  294. )
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
 
Top