parent
909d0d5e88
commit
1c84d505c8
@ -0,0 +1,66 @@ |
|||||||
|
import PureRenderMixin from 'react-addons-pure-render-mixin'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import Avatar from '../../../components/avatar'; |
||||||
|
import { Link } from 'react-router'; |
||||||
|
|
||||||
|
const outerStyle = { |
||||||
|
padding: '10px' |
||||||
|
}; |
||||||
|
|
||||||
|
const displayNameStyle = { |
||||||
|
display: 'block', |
||||||
|
fontWeight: '500', |
||||||
|
overflow: 'hidden', |
||||||
|
textOverflow: 'ellipsis', |
||||||
|
color: '#fff' |
||||||
|
}; |
||||||
|
|
||||||
|
const acctStyle = { |
||||||
|
display: 'block', |
||||||
|
overflow: 'hidden', |
||||||
|
textOverflow: 'ellipsis' |
||||||
|
}; |
||||||
|
|
||||||
|
const itemStyle = { |
||||||
|
display: 'block', |
||||||
|
color: '#9baec8', |
||||||
|
overflow: 'hidden', |
||||||
|
textDecoration: 'none' |
||||||
|
}; |
||||||
|
|
||||||
|
const Account = React.createClass({ |
||||||
|
|
||||||
|
propTypes: { |
||||||
|
account: ImmutablePropTypes.map.isRequired, |
||||||
|
me: React.PropTypes.number.isRequired |
||||||
|
}, |
||||||
|
|
||||||
|
mixins: [PureRenderMixin], |
||||||
|
|
||||||
|
render () { |
||||||
|
const { account } = this.props; |
||||||
|
|
||||||
|
if (!account) { |
||||||
|
return <div />; |
||||||
|
} |
||||||
|
|
||||||
|
let displayName = account.get('display_name'); |
||||||
|
|
||||||
|
if (displayName.length === 0) { |
||||||
|
displayName = account.get('username'); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div style={outerStyle}> |
||||||
|
<Link key={account.get('id')} style={itemStyle} to={`/accounts/${account.get('id')}`}> |
||||||
|
<div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div> |
||||||
|
<strong style={displayNameStyle}>{displayName}</strong> |
||||||
|
<span style={acctStyle}>{account.get('acct')}</span> |
||||||
|
</Link> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
export default Account; |
@ -0,0 +1,20 @@ |
|||||||
|
import { connect } from 'react-redux'; |
||||||
|
import { makeGetAccount } from '../../../selectors'; |
||||||
|
import Account from '../components/account'; |
||||||
|
|
||||||
|
const makeMapStateToProps = () => { |
||||||
|
const getAccount = makeGetAccount(); |
||||||
|
|
||||||
|
const mapStateToProps = (state, props) => ({ |
||||||
|
account: getAccount(state, props.id), |
||||||
|
me: state.getIn(['timelines', 'me']) |
||||||
|
}); |
||||||
|
|
||||||
|
return mapStateToProps; |
||||||
|
}; |
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch) => ({ |
||||||
|
// |
||||||
|
}); |
||||||
|
|
||||||
|
export default connect(makeMapStateToProps, mapDispatchToProps)(Account); |
@ -0,0 +1,51 @@ |
|||||||
|
import { connect } from 'react-redux'; |
||||||
|
import PureRenderMixin from 'react-addons-pure-render-mixin'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import LoadingIndicator from '../../components/loading_indicator'; |
||||||
|
import { fetchFollowers } from '../../actions/accounts'; |
||||||
|
import { ScrollContainer } from 'react-router-scroll'; |
||||||
|
import AccountContainer from './containers/account_container'; |
||||||
|
|
||||||
|
const mapStateToProps = (state, props) => ({ |
||||||
|
accountIds: state.getIn(['user_lists', 'followers', Number(props.params.accountId)]) |
||||||
|
}); |
||||||
|
|
||||||
|
const Followers = React.createClass({ |
||||||
|
|
||||||
|
propTypes: { |
||||||
|
params: React.PropTypes.object.isRequired, |
||||||
|
dispatch: React.PropTypes.func.isRequired, |
||||||
|
accountIds: ImmutablePropTypes.list |
||||||
|
}, |
||||||
|
|
||||||
|
mixins: [PureRenderMixin], |
||||||
|
|
||||||
|
componentWillMount () { |
||||||
|
this.props.dispatch(fetchFollowers(Number(this.props.params.accountId))); |
||||||
|
}, |
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) { |
||||||
|
if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) { |
||||||
|
this.props.dispatch(fetchFollowers(Number(nextProps.params.accountId))); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
render () { |
||||||
|
const { accountIds } = this.props; |
||||||
|
|
||||||
|
if (!accountIds) { |
||||||
|
return <LoadingIndicator />; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<ScrollContainer scrollKey='followers'> |
||||||
|
<div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable'> |
||||||
|
{accountIds.map(id => <AccountContainer key={id} id={id} />)} |
||||||
|
</div> |
||||||
|
</ScrollContainer> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(Followers); |
@ -0,0 +1,51 @@ |
|||||||
|
import { connect } from 'react-redux'; |
||||||
|
import PureRenderMixin from 'react-addons-pure-render-mixin'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import LoadingIndicator from '../../components/loading_indicator'; |
||||||
|
import { fetchFollowing } from '../../actions/accounts'; |
||||||
|
import { ScrollContainer } from 'react-router-scroll'; |
||||||
|
import AccountContainer from '../followers/containers/account_container'; |
||||||
|
|
||||||
|
const mapStateToProps = (state, props) => ({ |
||||||
|
accountIds: state.getIn(['user_lists', 'following', Number(props.params.accountId)]) |
||||||
|
}); |
||||||
|
|
||||||
|
const Following = React.createClass({ |
||||||
|
|
||||||
|
propTypes: { |
||||||
|
params: React.PropTypes.object.isRequired, |
||||||
|
dispatch: React.PropTypes.func.isRequired, |
||||||
|
accountIds: ImmutablePropTypes.list |
||||||
|
}, |
||||||
|
|
||||||
|
mixins: [PureRenderMixin], |
||||||
|
|
||||||
|
componentWillMount () { |
||||||
|
this.props.dispatch(fetchFollowing(Number(this.props.params.accountId))); |
||||||
|
}, |
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) { |
||||||
|
if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) { |
||||||
|
this.props.dispatch(fetchFollowing(Number(nextProps.params.accountId))); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
render () { |
||||||
|
const { accountIds } = this.props; |
||||||
|
|
||||||
|
if (!accountIds) { |
||||||
|
return <LoadingIndicator />; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<ScrollContainer scrollKey='following'> |
||||||
|
<div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable'> |
||||||
|
{accountIds.map(id => <AccountContainer key={id} id={id} />)} |
||||||
|
</div> |
||||||
|
</ScrollContainer> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(Following); |
@ -0,0 +1,13 @@ |
|||||||
|
import { SUGGESTIONS_FETCH_SUCCESS } from '../actions/suggestions'; |
||||||
|
import Immutable from 'immutable'; |
||||||
|
|
||||||
|
const initialState = Immutable.List(); |
||||||
|
|
||||||
|
export default function suggestions(state = initialState, action) { |
||||||
|
switch(action.type) { |
||||||
|
case SUGGESTIONS_FETCH_SUCCESS: |
||||||
|
return Immutable.List(action.accounts.map(item => item.id)); |
||||||
|
default: |
||||||
|
return state; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,21 @@ |
|||||||
|
import { |
||||||
|
FOLLOWERS_FETCH_SUCCESS, |
||||||
|
FOLLOWING_FETCH_SUCCESS |
||||||
|
} from '../actions/accounts'; |
||||||
|
import Immutable from 'immutable'; |
||||||
|
|
||||||
|
const initialState = Immutable.Map({ |
||||||
|
followers: Immutable.Map(), |
||||||
|
following: Immutable.Map() |
||||||
|
}); |
||||||
|
|
||||||
|
export default function userLists(state = initialState, action) { |
||||||
|
switch(action.type) { |
||||||
|
case FOLLOWERS_FETCH_SUCCESS: |
||||||
|
return state.setIn(['followers', action.id], Immutable.List(action.accounts.map(item => item.id))); |
||||||
|
case FOLLOWING_FETCH_SUCCESS: |
||||||
|
return state.setIn(['following', action.id], Immutable.List(action.accounts.map(item => item.id))); |
||||||
|
default: |
||||||
|
return state; |
||||||
|
} |
||||||
|
}; |
Loading…
Reference in new issue