diff options
| -rw-r--r-- | vnext/src/App.js | 4 | ||||
| -rw-r--r-- | vnext/src/api/index.js | 2 | ||||
| -rw-r--r-- | vnext/src/components/Avatar.js | 6 | ||||
| -rw-r--r-- | vnext/src/components/UserInfo.js | 15 | ||||
| -rw-r--r-- | vnext/src/components/Users.js | 58 |
5 files changed, 49 insertions, 36 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index 5c9b3b81..835d3b9f 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -160,8 +160,8 @@ export default class App extends React.Component { <Route exact path="/post" render={(props) => <Post visitor={user} {...props} />} /> <Route exact path="/pm" render={(props) => <Contacts visitor={user} {...props} />} /> <Route exact path="/pm/:user" render={(props) => <Chat ref={this.pm} visitor={user} {...props} />} /> - <Route exact path="/:user/friends" render={(props) => <Friends visitor={user} {...props} />} /> - <Route exact path="/:user/readers" render={(props) => <Readers visitor={user} {...props} />} /> + <Route exact path="/:user/friends" render={(props) => <Friends user={props.match.params.user} {...props} />} /> + <Route exact path="/:user/readers" render={(props) => <Readers user={props.match.params.user} {...props} />} /> <Route exact path="/:user" render={(props) => <Blog key={props.match.params.user} visitor={user} {...props} />} /> <Route exact path="/tag/:tag" render={(props) => <Tag visitor={user} {...props} />} /> <Route exact path="/:user/:mid" render={(props) => <Thread ref={this.thread} visitor={user} {...props} />} /> diff --git a/vnext/src/api/index.js b/vnext/src/api/index.js index 9bb9d5a3..46efa159 100644 --- a/vnext/src/api/index.js +++ b/vnext/src/api/index.js @@ -32,7 +32,7 @@ export function me(username = '', password = '') { } export function info(username) { - return client.get(`/users?uname=${username}`); + return client.get(`/info/${username}`); } export function getChats() { diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js index 002badde..e2023649 100644 --- a/vnext/src/components/Avatar.js +++ b/vnext/src/components/Avatar.js @@ -8,12 +8,14 @@ import Icon from './Icon'; const Avatar = React.memo(props => { return ( - <div style={Object.assign({ display: 'flex', padding: '12px' }, props.style)}> + <div style={Object.assign({ display: 'flex', padding: '12px', width: '300px' }, props.style)}> <div className="msg-avatar"> { props.user.uname ? <Link to={{ pathname: props.link || `/${props.user.uname}/` }}> - <img src={props.user.avatar} alt={`${props.user.uname}`} /> + { props.user.avatar ? + <img src={props.user.avatar} alt={`${props.user.uname}`} /> + : <Icon name="ei-spinner" size="m" /> } </Link> : <Icon name="ei-spinner" size="m" /> } diff --git a/vnext/src/components/UserInfo.js b/vnext/src/components/UserInfo.js index c4247f92..5e60f95f 100644 --- a/vnext/src/components/UserInfo.js +++ b/vnext/src/components/UserInfo.js @@ -22,8 +22,9 @@ export default class UserInfo extends React.Component { componentDidMount() { info(this.state.user.uname).then(response => { this.setState({ - user: response.data[0] + user: response.data }); + this.props.onUpdate && this.props.onUpdate(response.data); }); } render() { @@ -70,23 +71,17 @@ export default class UserInfo extends React.Component { <li>Messages: {user.statsMessages}</li> <li>Comments: {user.statsReplies}</li> </ul> - { - user.read && - <div className="iread"> - { - user.read.map(u => <Avatar user={u} key={u.uid} />) - } - </div> - } </div> </> } </div> + { this.props.children } </> ); } } UserInfo.propTypes = { - user: PropTypes.string.isRequired + user: PropTypes.string.isRequired, + onUpdate: PropTypes.func }; diff --git a/vnext/src/components/Users.js b/vnext/src/components/Users.js index c0da3748..2bab6de1 100644 --- a/vnext/src/components/Users.js +++ b/vnext/src/components/Users.js @@ -1,41 +1,57 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; + import { UserType } from './Types'; +import UserInfo from './UserInfo'; +import Avatar from './Avatar'; -export function Friends({ visitor, ...rest }) { - return <Users data={visitor.read || []} />; +export function Friends({ user, ...rest }) { + return <Users user={user} prop='read' />; } -export function Readers({ visitor, ...rest }) { - return <Users data={ visitor.readers || [] } />; +export function Readers({ user, ...rest }) { + return <Users user={user} prop='readers' />; } -function Users({data, ...rest}) { - return ( - <div className="users"> - { - data.map(user => <span key={user.uid}> - <Link to={`/${user.uname}/`}> - <img src={`//i.juick.com/as/${user.uid}.png`} /> - <span>{user.uname}</span> - </Link> - </span>) - } - </div> - ); +class Users extends React.Component { + constructor(props) { + super(props); + this.state = { + user: {} + }; + } + updateUser = (user) => { + this.setState({ + user: user + }); + } + render() { + return ( + <UserInfo user={this.props.user} onUpdate={this.updateUser}> + <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row'}}> + { + this.state.user[this.props.prop] && + this.state.user[this.props.prop].map(user => + <Avatar key={user.uid} user={user} /> + ) + } + </div> + </UserInfo> + ); + } } Friends.propTypes = { - visitor: UserType + user: PropTypes.string.isRequired }; Readers.propTypes = { - visitor: UserType + user: PropTypes.string.isRequired }; Users.propTypes = { - data: PropTypes.arrayOf(UserType).isRequired + user: PropTypes.string.isRequired, + prop: PropTypes.string.isRequired }; |