From 044b2ef328f8e850c668c0b4b7a017c616b71ff6 Mon Sep 17 00:00:00 2001 From: echenley Date: Sun, 4 Oct 2015 19:52:10 -0500 Subject: [PATCH] replace Navigation mixin with History - fixes #21 --- src/js/components/NewPost.jsx | 35 ++++++++++++++--------------------- src/js/views/Posts.jsx | 14 +++++++------- src/js/views/Profile.jsx | 8 ++++---- src/js/views/Single.jsx | 9 ++++----- 4 files changed, 29 insertions(+), 37 deletions(-) diff --git a/src/js/components/NewPost.jsx b/src/js/components/NewPost.jsx index 141f549..06c0a30 100644 --- 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 && (
{ errorMessage }
); diff --git a/src/js/views/Posts.jsx b/src/js/views/Posts.jsx index 7c23e54..ccf8774 100644 --- 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,7 +52,7 @@ const Posts = React.createClass({ const { pageNum } = nextProps.params; if (isNaN(pageNum) || pageNum < 1) { - this.transitionTo('/404'); + this.history.pushState(null, '/404'); return; } @@ -61,7 +60,8 @@ const Posts = React.createClass({ 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 index f82134a..f467a29 100644 --- 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 index 814c0b0..3c4af81 100644 --- 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; }