Sunny Negi / Meteor-projects

Authored by Paul Savignano 2016-11-26 12:07:20 -0500

1 parent 5507f2d3a8

Exists in master

Showing 3 changed files with 20 additions and 3 deletions Show diff stats

imports/ui/components/DocumentsList.js

 import React from 'react';
+import { browserHistory } from 'react-router';
 import { ListGroup, ListGroupItem, Alert } from 'react-bootstrap';
+const handleNav = (_id) => {
+  browserHistory.push(`/documents/${_id}`);
+}
 const DocumentsList = ({ documents }) => (
   documents.length > 0 ? <ListGroup className="DocumentsList">
     {documents.map(({ _id, title }) => (
-      <ListGroupItem key={ _id } href={`/documents/${_id}`}>{ title }</ListGroupItem>
+      <ListGroupItem key={ _id } onClick={ () => handleNav(_id) }>
+        { title }
+      </ListGroupItem>
     ))}
   </ListGroup> :
   <Alert bsStyle="warning">No documents yet.</Alert>
 );
 DocumentsList.propTypes = {
   documents: React.PropTypes.array,
 };
 export default DocumentsList;

imports/ui/pages/Documents.js

 import React from 'react';
+import { browserHistory } from 'react-router';
 import { Row, Col, Button } from 'react-bootstrap';
 import DocumentsList from '../containers/DocumentsList.js';
+const buttonNav = (event) => {
+  event.preventDefault();
+  browserHistory.push('/documents/new');
+}
 const Documents = () => (
   <div className="Documents">
     <Row>
       <Col xs={ 12 }>
         <div className="page-header clearfix">
           <h4 className="pull-left">Documents</h4>
           <Button
             bsStyle="success"
             className="pull-right"
-            href="/documents/new"
+            onClick={ buttonNav }
           >New Document</Button>
         </div>
         <DocumentsList />
       </Col>
     </Row>
   </div>
 );
 export default Documents;

imports/ui/pages/ViewDocument.js

 import React from 'react';
 import { ButtonToolbar, ButtonGroup, Button } from 'react-bootstrap';
 import { browserHistory } from 'react-router';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { removeDocument } from '../../api/documents/methods.js';
+const handleEdit = (_id) => {
+  browserHistory.push(`/documents/${_id}/edit`);
+}
 const handleRemove = (_id) => {
   if (confirm('Are you sure? This is permanent!')) {
     removeDocument.call({ _id }, (error) => {
       if (error) {
         Bert.alert(error.reason, 'danger');
       } else {
         Bert.alert('Document deleted!', 'success');
         browserHistory.push('/documents');
       }
     });
   }
 };
 const ViewDocument = ({ doc }) => (
   <div className="ViewDocument">
     <div className="page-header clearfix">
       <h4 className="pull-left">{ doc.title }</h4>
       <ButtonToolbar className="pull-right">
         <ButtonGroup bsSize="small">
-          <Button href={`/documents/${doc._id}/edit`}>Edit</Button>
+          <Button onClick={ () => handleEdit(doc._id) }>Edit</Button>
           <Button onClick={ () => handleRemove(doc._id) } className="text-danger">Delete</Button>
         </ButtonGroup>
       </ButtonToolbar>
     </div>
     { doc.body }
   </div>
 );
 ViewDocument.propTypes = {
   doc: React.PropTypes.object.isRequired,
 };
 export default ViewDocument;