diff options
Diffstat (limited to 'vnext')
| -rw-r--r-- | vnext/src/api/index.js | 31 | ||||
| -rw-r--r-- | vnext/src/components/Avatar.js | 68 | ||||
| -rw-r--r-- | vnext/src/components/Feeds.js | 10 | ||||
| -rw-r--r-- | vnext/src/components/Thread.js | 10 | ||||
| -rw-r--r-- | vnext/src/components/Types.js | 2 |
5 files changed, 78 insertions, 43 deletions
diff --git a/vnext/src/api/index.js b/vnext/src/api/index.js index 46efa159..2332ed48 100644 --- a/vnext/src/api/index.js +++ b/vnext/src/api/index.js @@ -1,7 +1,7 @@ import axios from 'axios'; import cookies from 'react-cookies'; -const apiBaseUrl = 'https://api.juick.com'; +const apiBaseUrl = 'https://juick.com'; const client = axios.create({ baseURL: apiBaseUrl @@ -15,8 +15,7 @@ client.interceptors.request.use(config => { export function me(username = '', password = '') { return new Promise((resolve, reject) => { - - client.get('/me', { + client.get('/api/me', { headers: username ? { 'Authorization': 'Basic ' + window.btoa(unescape(encodeURIComponent(username + ':' + password))) } : {} @@ -32,15 +31,15 @@ export function me(username = '', password = '') { } export function info(username) { - return client.get(`/info/${username}`); + return client.get(`/api/info/${username}`); } export function getChats() { - return client.get('/groups_pms'); + return client.get('/api/groups_pms'); } export function getChat(userName) { - return client.get('/pm', { + return client.get('/api/pm', { params: { 'uname': userName } @@ -51,7 +50,7 @@ export function pm(userName, body) { let form = new FormData(); form.set('uname', userName); form.set('body', body); - return client.post('/pm', form); + return client.post('/api/pm', form); } export function getMessages(path, params) { @@ -64,7 +63,7 @@ export function post(body, attach) { let form = new FormData(); form.append('attach', attach); form.append('body', body); - return client.post('/post', form); + return client.post('/api/post', form); } export function comment(mid, rid, body, attach) { @@ -73,17 +72,17 @@ export function comment(mid, rid, body, attach) { form.append('rid', rid); form.append('body', body); form.append('attach', attach); - return client.post('/comment', form); + return client.post('/api/comment', form); } export function updateAvatar(newAvatar) { let form = new FormData(); form.append('avatar', newAvatar); - return client.post('/me/upload', form); + return client.post('/api/me/upload', form); } function socialLink(network) { - return `${apiBaseUrl}/_${network}login?state=${window.location.protocol}//${window.location.host}${window.location.pathname}`; + return `${apiBaseUrl}/api/_${network}login?state=${window.location.protocol}//${window.location.host}${window.location.pathname}`; } export function facebookLink() { @@ -95,5 +94,13 @@ export function vkLink() { } export function markReadTracker(msg, visitor) { - return `${apiBaseUrl}/thread/mark_read/${msg.mid}-${msg.rid || 0}.gif?hash=${visitor.hash}`; + return `${apiBaseUrl}/api/thread/mark_read/${msg.mid}-${msg.rid || 0}.gif?hash=${visitor.hash}`; +} + +export function fetchUserUri(dataUri) { + return new Promise((resolve, reject) => { + let form = new FormData(); + form.append('uri', dataUri); + client.post('/u/', form).then(response => resolve(response)); + }); } diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js index 6ea0d5d5..a83107ce 100644 --- a/vnext/src/components/Avatar.js +++ b/vnext/src/components/Avatar.js @@ -6,33 +6,54 @@ import { UserType } from './Types'; import Icon from './Icon'; +import { fetchUserUri } from '../api'; + import './Avatar.css'; -const Avatar = React.memo(props => { - return ( - <div className="Avatar" style={props.style}> - <div className="msg-avatar"> - { - props.user.uname ? - <Link to={{ pathname: props.link || `/${props.user.uname}/` }}> - { props.user.avatar ? - <img src={props.user.avatar} alt={`${props.user.uname}`} /> - : <Icon name="ei-spinner" size="m" /> } +class Avatar extends React.Component { + constructor(props) { + super(props); + this.state = { + user: props.user + }; + } + componentDidMount() { + let user = this.state.user; + if (!user.uid && user.uri) { + fetchUserUri(user.uri).then(response => { + this.setState({ + user: response.data + }); + }); + } + } + render() { + let user = this.state.user; + return ( + <div className="Avatar" style={this.props.style}> + <div className="msg-avatar"> + { + user.uname ? + <Link to={{ pathname: this.props.link || `/${user.uname}/` }}> + {user.avatar ? + <img src={user.avatar} alt={`${user.uname}`} /> + : <Icon name="ei-spinner" size="m" />} + </Link> + : <Icon name="ei-spinner" size="m" /> + } + </div> + <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}> + <span> + <Link to={{ pathname: `/${user.uname}/` }}> + <span>{user.uname}</span> </Link> - : <Icon name="ei-spinner" size="m" /> - } - </div> - <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}> - <span> - <Link to={{ pathname: `/${props.user.uname}/` }}> - <span>{props.user.uname}</span> - </Link> - </span> - {props.children} + </span> + {this.props.children} + </div> </div> - </div> - ); -}); + ); + } +} export default Avatar; @@ -48,5 +69,6 @@ export const AvatarLink = React.memo(props => { Avatar.propTypes = { user: UserType, link: PropTypes.string, + style: PropTypes.object, children: PropTypes.node }; diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js index e8558084..430ce9f1 100644 --- a/vnext/src/components/Feeds.js +++ b/vnext/src/components/Feeds.js @@ -16,7 +16,7 @@ import { UserType } from './Types'; export function Discover(props) { let search = qs.parse(props.location.search.substring(1)); const query = { - baseUrl: '/messages', + baseUrl: '/api/messages', search: search, pageParam: search.search ? 'page' : 'before_mid' }; @@ -25,7 +25,7 @@ export function Discover(props) { export function Discussions(props) { const query = { - baseUrl: '/messages/discussions', + baseUrl: '/api/messages/discussions', pageParam: 'to' }; return (<Feed authRequired={false} query={query} {...props} />); @@ -36,7 +36,7 @@ export function Blog(props) { let search = qs.parse(props.location.search.substring(1)); search.uname = user; const query = { - baseUrl: '/messages', + baseUrl: '/api/messages', search: search, pageParam: search.search ? 'page' : 'before_mid' }; @@ -53,7 +53,7 @@ export function Blog(props) { export function Tag(props) { const { tag } = props.match.params; const query = { - baseUrl: '/messages', + baseUrl: '/api/messages', search: { tag: tag }, @@ -64,7 +64,7 @@ export function Tag(props) { export function Home(props) { const query = { - baseUrl: '/home', + baseUrl: '/api/home', pageParam: 'before_mid' }; return (<Feed authRequired={true} query={query} {...props} />); diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index b824c0ed..cf7291a8 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -41,7 +41,7 @@ export default class Thread extends React.Component { if (this.props.visitor && this.props.visitor.hash) { params.hash = this.props.visitor.hash; } - getMessages('/thread', params) + getMessages('/api/thread', params) .then(response => { let msg = response.data.shift(); this.setState({ @@ -111,7 +111,13 @@ export default class Thread extends React.Component { </div> </Avatar> </div> - <div className="msg-txt"><p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }}></p></div> + { + msg.html ? <div className="msg-txt" dangerouslySetInnerHTML={{__html: msg.body }}/> + : + <div className="msg-txt"> + <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} /> + </div> + } { msg.photo && <p className="ir"><a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}> diff --git a/vnext/src/components/Types.js b/vnext/src/components/Types.js index 6596dc8e..db90d41e 100644 --- a/vnext/src/components/Types.js +++ b/vnext/src/components/Types.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; export const UserType = PropTypes.shape({ - uid: PropTypes.number.isRequired, + uid: PropTypes.number, uname: PropTypes.string }); |