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