replace Navigation mixin with History - fixes #21

echenley · Oct 5, 2015 · 044b2ef · 044b2ef
1 parent e380b83
commit 044b2ef
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 37 deletions.
diff --git a/src/js/components/NewPost.jsx b/src/js/components/NewPost.jsx
@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react/addons';
-import { Navigation } from 'react-router';
+import { History } from 'react-router';
 import cx from 'classnames';
 
 import Actions from '../actions/Actions';
@@ -14,9 +14,7 @@ const NewPost = React.createClass({
         errorMessage: React.PropTypes.string
     },
 
-    mixins: [
-        Navigation
-    ],
+    mixins: [ History ],
 
     getInitialState() {
         return {
@@ -27,8 +25,8 @@ const NewPost = React.createClass({
     },
 
     componentWillReceiveProps(nextProps) {
-        let oldLatestPost = this.props.user.latestPost;
-        let newLatestPost = nextProps.user.latestPost;
+        const oldLatestPost = this.props.user.latestPost;
+        const newLatestPost = nextProps.user.latestPost;
 
         if (oldLatestPost !== newLatestPost) {
             // user just submitted a new post
@@ -50,14 +48,14 @@ const NewPost = React.createClass({
 
         // hide modal/redirect to the new post
         Actions.hideModal();
-        this.transitionTo(`/post/${postId}`);
+        this.history.pushState(null, `/post/${postId}`);
     },
 
     submitPost(e) {
         e.preventDefault();
 
-        let { title, link } = this.state;
-        let { user } = this.props;
+        const { title, link } = this.state;
+        const { user } = this.props;
 
         if (!title) {
             this.setState({
@@ -77,7 +75,7 @@ const NewPost = React.createClass({
             submitted: true
         });
 
-        let post = {
+        const post = {
             title: title.trim(),
             url: link,
             creator: user.username,
@@ -89,23 +87,18 @@ const NewPost = React.createClass({
     },
 
     render() {
-        let {
-            submitted,
-            highlight,
-            title,
-            link
-        } = this.state;
-
-        let titleInputCx = cx('panel-input', {
+        const { submitted, highlight, title, link } = this.state;
+
+        const titleInputCx = cx('panel-input', {
             'input-error': highlight === 'title'
         });
 
-        let linkInputCx = cx('panel-input', {
+        const linkInputCx = cx('panel-input', {
             'input-error': highlight === 'link'
         });
 
-        let errorMessage = this.props.errorMessage;
-        let error = errorMessage && (
+        const errorMessage = this.props.errorMessage;
+        const error = errorMessage && (
             <div className="error modal-form-error">{ errorMessage }</div>
         );
 

diff --git a/src/js/views/Posts.jsx b/src/js/views/Posts.jsx
@@ -3,7 +3,7 @@
 import React from 'react/addons';
 import Reflux from 'reflux';
 import Actions from '../actions/Actions';
-import { Navigation, TransitionHook } from 'react-router';
+import { History } from 'react-router';
 
 import PostsStore from '../stores/PostsStore';
 import UserStore from '../stores/UserStore';
@@ -19,8 +19,7 @@ const Posts = React.createClass({
     },
 
     mixins: [
-        TransitionHook,
-        Navigation,
+        History,
         Reflux.listenTo(PostsStore, 'onStoreUpdate'),
         Reflux.connect(UserStore, 'user')
     ],
@@ -42,7 +41,7 @@ const Posts = React.createClass({
         const { pageNum } = this.props.params;
 
         if (isNaN(pageNum) || pageNum < 1) {
-            this.transitionTo('/404');
+            this.history.pushState(null, '/404');
             return;
         }
 
@@ -53,15 +52,16 @@ const Posts = React.createClass({
         const { pageNum } = nextProps.params;
 
         if (isNaN(pageNum) || pageNum < 1) {
-            this.transitionTo('/404');
+            this.history.pushState(null, '/404');
             return;
         }
 
         Actions.stopWatchingPosts();
         Actions.watchPosts(pageNum);
     },
 
-    routerWillLeave() {
+    componentWillUnmount() {
+        console.log('hey');
         Actions.stopWatchingPosts();
     },
 
@@ -92,7 +92,7 @@ const Posts = React.createClass({
         Actions.setSortBy(sortByValue);
 
         if (currentPage !== 1) {
-            this.transitionTo('/posts/1');
+            this.history.pushState(null, '/posts/1');
         } else {
             Actions.stopWatchingPosts();
             Actions.watchPosts(currentPage);

diff --git a/src/js/views/Profile.jsx b/src/js/views/Profile.jsx
@@ -2,7 +2,7 @@
 
 import React from 'react/addons';
 import Reflux from 'reflux';
-import { Navigation } from 'react-router';
+import { History } from 'react-router';
 
 import Actions from '../actions/Actions';
 
@@ -20,7 +20,7 @@ const Profile = React.createClass({
     },
 
     mixins: [
-        Navigation,
+        History,
         Reflux.listenTo(ProfileStore, 'updateProfileData'),
         Reflux.listenTo(UserStore, 'updateUser')
     ],
@@ -56,7 +56,7 @@ const Profile = React.createClass({
         }
     },
 
-    routerWillLeave() {
+    componentWillUnmount() {
         Actions.stopWatchingProfile();
     },
 
@@ -67,7 +67,7 @@ const Profile = React.createClass({
             });
         } else {
             // user has logged out
-            this.transitionTo('/');
+            this.history.pushState(null, '/');
         }
     },
 

diff --git a/src/js/views/Single.jsx b/src/js/views/Single.jsx
@@ -2,7 +2,7 @@
 
 import React from 'react/addons';
 import Reflux from 'reflux';
-import { Navigation, TransitionHook } from 'react-router';
+import { History } from 'react-router';
 
 import SingleStore from '../stores/SingleStore';
 import UserStore from '../stores/UserStore';
@@ -21,8 +21,7 @@ const SinglePost = React.createClass({
     },
 
     mixins: [
-        Navigation,
-        TransitionHook,
+        History,
         Reflux.listenTo(SingleStore, 'onUpdate'),
         Reflux.connect(UserStore, 'user')
     ],
@@ -55,7 +54,7 @@ const SinglePost = React.createClass({
         }
     },
 
-    routerWillLeave() {
+    componentWillUnmount() {
         const { postId } = this.props.params;
         Actions.stopWatchingPost(postId);
     },
@@ -65,7 +64,7 @@ const SinglePost = React.createClass({
 
         if (!post) {
             // post doesn't exist
-            this.transitionTo('/404');
+            this.history.pushState(null, '/404');
             return;
         }