aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/src/App.js4
-rw-r--r--vnext/src/api/index.js2
-rw-r--r--vnext/src/components/Avatar.js6
-rw-r--r--vnext/src/components/UserInfo.js15
-rw-r--r--vnext/src/components/Users.js58
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
};