Fix #222 - Update followers count when following/unfollowing

Also, since the root component connects to the stream that updates home/notification columns,
there is pretty much no case for refreshing those columns beyond initial load. So, move the
loading of those columns into the root component, to prevent unneccessary reloads when switching tabs
on mobile or resizing desktop window between mobile/desktop layouts
This commit is contained in:
Eugen Rochko 2017-01-19 10:54:18 +01:00
parent f051c2e813
commit 46be4631ae
4 changed files with 16 additions and 20 deletions

View file

@ -1,8 +1,6 @@
import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import StatusListContainer from '../ui/containers/status_list_container'; import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import { refreshTimeline } from '../../actions/timelines';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import ColumnSettingsContainer from './containers/column_settings_container'; import ColumnSettingsContainer from './containers/column_settings_container';
@ -13,16 +11,11 @@ const messages = defineMessages({
const HomeTimeline = React.createClass({ const HomeTimeline = React.createClass({
propTypes: { propTypes: {
dispatch: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired intl: React.PropTypes.object.isRequired
}, },
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
componentWillMount () {
this.props.dispatch(refreshTimeline('home'));
},
render () { render () {
const { intl } = this.props; const { intl } = this.props;
@ -36,4 +29,4 @@ const HomeTimeline = React.createClass({
}); });
export default connect()(injectIntl(HomeTimeline)); export default injectIntl(HomeTimeline);

View file

@ -2,10 +2,7 @@ import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import { import { expandNotifications } from '../../actions/notifications';
refreshNotifications,
expandNotifications
} from '../../actions/notifications';
import NotificationContainer from './containers/notification_container'; import NotificationContainer from './containers/notification_container';
import { ScrollContainer } from 'react-router-scroll'; import { ScrollContainer } from 'react-router-scroll';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
@ -43,11 +40,6 @@ const Notifications = React.createClass({
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
componentWillMount () {
const { dispatch } = this.props;
dispatch(refreshNotifications());
},
handleScroll (e) { handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;

View file

@ -8,10 +8,12 @@ import Compose from '../compose';
import TabsBar from './components/tabs_bar'; import TabsBar from './components/tabs_bar';
import ModalContainer from './containers/modal_container'; import ModalContainer from './containers/modal_container';
import Notifications from '../notifications'; import Notifications from '../notifications';
import { connect } from 'react-redux';
import { isMobile } from '../../is_mobile';
import { debounce } from 'react-decoration'; import { debounce } from 'react-decoration';
import { uploadCompose } from '../../actions/compose'; import { uploadCompose } from '../../actions/compose';
import { connect } from 'react-redux'; import { refreshTimeline } from '../../actions/timelines';
import { isMobile } from '../../is_mobile' import { refreshNotifications } from '../../actions/notifications';
const UI = React.createClass({ const UI = React.createClass({
@ -56,6 +58,9 @@ const UI = React.createClass({
window.addEventListener('resize', this.handleResize, { passive: true }); window.addEventListener('resize', this.handleResize, { passive: true });
window.addEventListener('dragover', this.handleDragOver); window.addEventListener('dragover', this.handleDragOver);
window.addEventListener('drop', this.handleDrop); window.addEventListener('drop', this.handleDrop);
this.props.dispatch(refreshTimeline('home'));
this.props.dispatch(refreshNotifications());
}, },
componentWillUnmount () { componentWillUnmount () {

View file

@ -6,7 +6,9 @@ import {
FOLLOWING_EXPAND_SUCCESS, FOLLOWING_EXPAND_SUCCESS,
ACCOUNT_TIMELINE_FETCH_SUCCESS, ACCOUNT_TIMELINE_FETCH_SUCCESS,
ACCOUNT_TIMELINE_EXPAND_SUCCESS, ACCOUNT_TIMELINE_EXPAND_SUCCESS,
FOLLOW_REQUESTS_FETCH_SUCCESS FOLLOW_REQUESTS_FETCH_SUCCESS,
ACCOUNT_FOLLOW_SUCCESS,
ACCOUNT_UNFOLLOW_SUCCESS
} from '../actions/accounts'; } from '../actions/accounts';
import { COMPOSE_SUGGESTIONS_READY } from '../actions/compose'; import { COMPOSE_SUGGESTIONS_READY } from '../actions/compose';
import { import {
@ -105,6 +107,10 @@ export default function accounts(state = initialState, action) {
case TIMELINE_UPDATE: case TIMELINE_UPDATE:
case STATUS_FETCH_SUCCESS: case STATUS_FETCH_SUCCESS:
return normalizeAccountFromStatus(state, action.status); return normalizeAccountFromStatus(state, action.status);
case ACCOUNT_FOLLOW_SUCCESS:
return state.updateIn([action.relationship.id, 'followers_count'], num => num + 1);
case ACCOUNT_UNFOLLOW_SUCCESS:
return state.updateIn([action.relationship.id, 'followers_count'], num => Math.max(0, num - 1));
default: default:
return state; return state;
} }