Refactor hrefs to remove page loads.

Paul Savignano
1 parent 5507f2d3a8
Showing 3 changed files with 20 additions and 3 deletions Show diff stats
imports/ui/components/DocumentsList.js
imports/ui/pages/Documents.js
imports/ui/pages/ViewDocument.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>
 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>
@@ -11,7 +17,7 @@ const Documents = () =&gt; (
           <Button
             bsStyle="success"
             className="pull-right"
-            href="/documents/new"
+            onClick={ buttonNav }
           >New Document</Button>
         </div>
         <DocumentsList />
@@ -4,6 +4,10 @@ import { browserHistory } from &#39;react-router&#39;;
 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) => {
@@ -23,7 +27,7 @@ const ViewDocument = ({ doc }) =&gt; (
       <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>
1	1	import React from 'react';
	2	+import { browserHistory } from 'react-router';
2	3	import { ListGroup, ListGroupItem, Alert } from 'react-bootstrap';
3	4
	5	+const handleNav = (_id) => {
	6	+ browserHistory.push(`/documents/${_id}`);
	7	+}
	8	+
4	9	const DocumentsList = ({ documents }) => (
5	10	documents.length > 0 ? <ListGroup className="DocumentsList">
6	11	{documents.map(({ _id, title }) => (
7		- <ListGroupItem key={ _id } href={`/documents/${_id}`}>{ title }</ListGroupItem>
	12	+ <ListGroupItem key={ _id } onClick={ () => handleNav(_id) }>
	13	+ { title }
	14	+ </ListGroupItem>
8	15	))}
9	16	</ListGroup> :
10	17	<Alert bsStyle="warning">No documents yet.</Alert>
...	...
1	1	import React from 'react';
	2	+import { browserHistory } from 'react-router';
2	3	import { Row, Col, Button } from 'react-bootstrap';
3	4	import DocumentsList from '../containers/DocumentsList.js';
4	5
	6	+const buttonNav = (event) => {
	7	+ event.preventDefault();
	8	+ browserHistory.push('/documents/new');
	9	+}
	10	+
5	11	const Documents = () => (
6	12	<div className="Documents">
7	13	<Row>
...	...	@@ -11,7 +17,7 @@ const Documents = () => (
11	17	<Button
12	18	bsStyle="success"
13	19	className="pull-right"
14		- href="/documents/new"
	20	+ onClick={ buttonNav }
15	21	>New Document</Button>
16	22	</div>
17	23	<DocumentsList />
...	...
...	...	@@ -4,6 +4,10 @@ import { browserHistory } from 'react-router';
4	4	import { Bert } from 'meteor/themeteorchef:bert';
5	5	import { removeDocument } from '../../api/documents/methods.js';
6	6
	7	+const handleEdit = (_id) => {
	8	+ browserHistory.push(`/documents/${_id}/edit`);
	9	+}
	10	+
7	11	const handleRemove = (_id) => {
8	12	if (confirm('Are you sure? This is permanent!')) {
9	13	removeDocument.call({ _id }, (error) => {
...	...	@@ -23,7 +27,7 @@ const ViewDocument = ({ doc }) => (
23	27	<h4 className="pull-left">{ doc.title }</h4>
24	28	<ButtonToolbar className="pull-right">
25	29	<ButtonGroup bsSize="small">
26		- <Button href={`/documents/${doc._id}/edit`}>Edit</Button>
	30	+ <Button onClick={ () => handleEdit(doc._id) }>Edit</Button>
27	31	<Button onClick={ () => handleRemove(doc._id) } className="text-danger">Delete</Button>
28	32	</ButtonGroup>
29	33	</ButtonToolbar>
...	...