@ -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; | |||
} | |||
}; |