From bc2e876c592d5b3c117108baf5a5a58905510eae Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Thu, 21 Jun 2018 14:59:56 +0300 Subject: Add PM components --- vnext/src/components/Chat.js | 72 ++++++++++++++++++++++++++++++++++++ vnext/src/components/Contact.js | 16 ++++++++ vnext/src/components/Contacts.js | 69 ++++++++++++++++++++++++++++++++++ vnext/src/components/MessageInput.js | 2 +- vnext/src/components/PM.js | 22 +++++++++++ vnext/src/index.js | 6 ++- 6 files changed, 185 insertions(+), 2 deletions(-) create mode 100644 vnext/src/components/Chat.js create mode 100644 vnext/src/components/Contact.js create mode 100644 vnext/src/components/Contacts.js create mode 100644 vnext/src/components/PM.js diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js new file mode 100644 index 00000000..79425c12 --- /dev/null +++ b/vnext/src/components/Chat.js @@ -0,0 +1,72 @@ +import React from 'react'; +import moment from 'moment'; + +import PM from './PM'; +import MessageInput from './MessageInput'; + +export default class Chat extends React.Component { + constructor(props) { + super(props); + + this.state = { + chats: [] + }; + this.loadChat = this.loadChat.bind(this); + } + componentWillMount() { + this.loadChat(this.props.match.params.user); + } + + loadChat(uname) { + const { hash } = this.props.visitor; + this.setState({ + chats: [] + }); + if (hash && uname) { + fetch(`https://api.juick.com/pm?uname=${uname}&hash=${hash}`) + .then(response => response.json()) + .then(jsonResponse => { + this.setState({ + chats: jsonResponse + }); + }); + } + } + + render() { + const { chats } = this.state; + const uname = this.props.match.params.user; + return ( +
+
+ + { uname ? ( +
+
    + { + chats.map((chat) => + + ) + } +
+ {}}/> +
+ ) : ( +

No chat selected

+ ) + } +
+
+ ) + } +} + +const chatStyle = { + boxSizing: 'border-box', + padding: '0 20px', + overflowY: 'scroll', + height: '450px', + display: 'flex', + flexDirection: 'column-reverse', + width: '100%' +} diff --git a/vnext/src/components/Contact.js b/vnext/src/components/Contact.js new file mode 100644 index 00000000..0e969cc1 --- /dev/null +++ b/vnext/src/components/Contact.js @@ -0,0 +1,16 @@ +import React from 'react'; + +import Avatar from './Avatar'; + +export default class Contact extends React.Component { + + render() { + const { user } = this.props; + return ( + + + {user.uname }{ user.unreadCount && {user.unreadCount}} + + ); + } +} diff --git a/vnext/src/components/Contacts.js b/vnext/src/components/Contacts.js new file mode 100644 index 00000000..300e60eb --- /dev/null +++ b/vnext/src/components/Contacts.js @@ -0,0 +1,69 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + + +import Contact from './Contact.js'; + +export default class Contacts extends React.Component { + constructor(props) { + super(props); + this.state = { + pms: [] + }; + } + componentWillMount() { + this.refreshChats(); + } + + refreshChats() { + fetch(`https://api.juick.com/groups_pms?hash=${this.props.visitor.hash}`) + .then(response => response.json()) + .then(jsonResponse => { + this.setState({ + isLoading: false, + pms: jsonResponse.pms + }); + }); + } + render() { + const { pms } = this.state; + const user = this.props.visitor; + return ( +
+ +
+ ); + } +} + +const wrapperStyle = { + display: 'flex', + backgroundColor: '#fff' +} + +const chatListStyle = { + boxSizing: 'border-box', + padding: '0 20px', + overflowY: 'scroll', + display: 'flex', + alignItems: 'center', + flexDirection: 'column', + width: '100%' +} + +const chatTitleStyle = { + width: '100%', + padding: '3px 6px', + textAlign: 'left', + background: '#fff', + color: '#222', + borderBottom: '1px solid #eee' +} \ No newline at end of file diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js index 71802985..ef740e41 100644 --- a/vnext/src/components/MessageInput.js +++ b/vnext/src/components/MessageInput.js @@ -105,7 +105,7 @@ const activeStyle = { }; const inputBarStyle = { - border: '1px solid #DDD', + border: '1px solid #ddd', display: 'flex', alignItems: 'center', padding: '3px', diff --git a/vnext/src/components/PM.js b/vnext/src/components/PM.js new file mode 100644 index 00000000..44b81129 --- /dev/null +++ b/vnext/src/components/PM.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import Avatar from './Avatar'; +import { format } from '../utils/embed'; + +export default function PM(props) { + const {chat} = props; + return ( +
  • + +

    +

  • + ); +} + +const chatItemStyle = { + padding: '5px 13px', + fontSize: '14px', + listStyle: 'none', + margin: '10px 0', + boxShadow: '0 0 3px rgba(0,0,0, 0.16)' +} \ No newline at end of file diff --git a/vnext/src/index.js b/vnext/src/index.js index 88e44465..7ba41fc1 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -4,6 +4,8 @@ import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; import Icon from './components/Icon'; import { Discover, Discussions, Blog, Tag, Home } from './components/Feeds'; import Settings from './components/Settings'; +import Contacts from './components/Contacts'; +import Chat from './components/Chat'; import Post from './components/Post'; import Thread from './components/Thread'; import LoginButton from './components/LoginButton'; @@ -135,6 +137,8 @@ class App extends React.Component { } /> } /> + } /> + } /> } /> } /> } /> @@ -151,7 +155,7 @@ class App extends React.Component {
  • - + PM
  • -- cgit v1.2.3