Skip to content

Commit

Permalink
show chat room members
Browse files Browse the repository at this point in the history
  • Loading branch information
trazyn committed Aug 3, 2017
1 parent 15f1935 commit ec7854f
Show file tree
Hide file tree
Showing 14 changed files with 285 additions and 25 deletions.
2 changes: 1 addition & 1 deletion README.MD
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
- [x] Send Message
- [x] Chat Room
- [x] Show correct contact
- [ ] Show members
- [x] Show members
- [ ] Add / Remove member
- [ ] Create chat room
- [x] Various message
Expand Down
12 changes: 11 additions & 1 deletion src/js/pages/Home/ChatContent/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ import helper from 'utils/helper';

stores.userinfo.toggle(true, user);
},
showMembers: (user) => {
if (helper.isChatRoom(user.UserName)) {
stores.members.toggle(true, user);
}
},
showContact: (userid) => {
var user = stores.contacts.memberList.find(e => e.UserName === userid);
stores.userinfo.toggle(true, user);
Expand Down Expand Up @@ -335,6 +340,7 @@ export default class ChatContent extends Component {
render() {
var { loading, user, messages } = this.props;
var title = user.RemarkName || user.NickName;
var signature = user.Signature;

if (loading) return false;

Expand All @@ -347,7 +353,11 @@ export default class ChatContent extends Component {
<div className={classes.info}>
<p title={title} dangerouslySetInnerHTML={{__html: title}} />

<span className={classes.signature} dangerouslySetInnerHTML={{__html: user.Signature || 'No Signature'}} />
<span
title={signature}
className={classes.signature}
onClick={e => this.props.showMembers(user)}
dangerouslySetInnerHTML={{__html: signature || 'No Signature'}} />
</div>

<i className="icon-ion-android-more-vertical" onClick={() => this.showMenu()} />
Expand Down
7 changes: 7 additions & 0 deletions src/js/pages/Home/ChatContent/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@
align-items: center;
}

& header.large {
height: auto;
max-height: 200px;
}

& header i {
position: absolute;
top: 50%;
Expand All @@ -32,7 +37,9 @@
color: #9b9b9b;
}

& .signature,
& header p {
display: block;
max-width: calc(100vw - 311px - 100px);
white-space: nowrap;
overflow: hidden;
Expand Down
2 changes: 2 additions & 0 deletions src/js/pages/Layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Login from './Login';
import UserInfo from './UserInfo';
import AddFriend from './AddFriend';
import NewChat from './NewChat';
import Members from './Members';

@inject(stores => ({
isLogin: () => !!stores.session.auth,
Expand Down Expand Up @@ -40,6 +41,7 @@ export default class Layout extends Component {
<UserInfo />
<AddFriend />
<NewChat />
<Members />
</div>
);
}
Expand Down
58 changes: 58 additions & 0 deletions src/js/pages/Members/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@

import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';

import classes from './style.css';

@inject(stores => ({
show: stores.members.show,
close: () => stores.members.toggle(false),
user: stores.members.user,
list: stores.members.list,
}))
@observer
export default class Members extends Component {
render() {
var { user, list } = this.props;

if (!this.props.show) {
return false;
}

return (
<div className={classes.container}>
<header>
<span>
Group '{user.NickName}' has {list.length} members
</span>

<i className="icon-ion-android-close" onClick={e => this.props.close()} />
</header>

<ul className={classes.list}>
{
list.map((e, index) => {
var pallet = e.pallet || [];
var frontColor = pallet[1] || [0, 0, 0];

return (
<li key={index} style={{
color: `rgb(
${frontColor[0]},
${frontColor[1]},
${frontColor[2]}
)`,
}}>
<div className={classes.cover} style={{
backgroundImage: `url(${e.HeadImgUrl})`,
}} />
<span className={classes.username} dangerouslySetInnerHTML={{ __html: e.NickName }} />
</li>
);
})
}
</ul>
</div>
);
}
}
95 changes: 95 additions & 0 deletions src/js/pages/Members/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@

.container {
position: fixed;
top: 40px;
left: 0;
width: 100vw;
background: #fff;
color: #333;
z-index: 9;
box-shadow: inset 0 -1px 0 0 #eaedea;

& header {
display: flex;
padding: 0 12px;
height: 50px;
line-height: 50px;
justify-content: space-between;
align-items: center;
font-family: 'Roboto';
font-weight: 100;
font-size: 20px;
color: #333;
box-shadow: inset 0 -1px 0 0 #eaedea;
}

& header i {
cursor: pointer;
}

& header i:hover {
color: red;
}
}

.list {
position: relative;
padding: 8px;
margin: 0;
list-style: none;
max-height: calc(100vh - 90px);
overflow: hidden;
overflow-y: auto;

& li {
position: relative;
display: inline-block;
padding: 0 14px;
margin: 6px 8px;
height: 32px;
line-height: 32px;
border-radius: 1px;
cursor: pointer;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
overflow: hidden;
transition: .2s;
}


& li:hover .cover {
filter: opacity(1);
transform: scale(1.2);
}
}

.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: opacity(.6);
transform: scale(1);
transition: .2s;

&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
}
}

.username {
position: relative;
font-size: 13px;

& :global(.emoji) {
margin-top: 10px;
}
}
5 changes: 3 additions & 2 deletions src/js/pages/NewChat/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { inject, observer } from 'mobx-react';
import clazz from 'classname';

import classes from './style.css';
import helper from 'utils/helper';

@inject(stores => ({
show: stores.newchat.show,
Expand Down Expand Up @@ -146,8 +147,8 @@ export default class NewChat extends Component {
if (selected.length === 1) {
this.props.chatTo(this.props.getUser(selected[0]));
} else {
// Create a chat room
let user = await this.props.createChatRoom(selected);
// You can not create a chat room by another chat room
let user = await this.props.createChatRoom(selected.filter(e => !helper.isChatRoom(e)));
this.props.chatTo(user);
}

Expand Down
6 changes: 3 additions & 3 deletions src/js/stores/chat.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ async function resolveMessage(message) {

let emoji = helper.parseKV(content);

emoji.src = emoji.cdnurl || `${axios.defaults.baseURL}cgi-bin/mmwebwx-bin/webwxgetmsgimg?&msgid=${message.MsgId}&skey=${auth.skey}`;
emoji.src = `${axios.defaults.baseURL}cgi-bin/mmwebwx-bin/webwxgetmsgimg?&msgid=${message.MsgId}&skey=${auth.skey}`;
message.emoji = emoji;
break;

Expand Down Expand Up @@ -109,8 +109,8 @@ async function resolveMessage(message) {
break;

default:
console.error('Unknow app message: %o', message);
message.Content = `收到一条暂不支持的消息类型,请在手机上查看(${message.FileName})。`;
console.error('Unknow app message: %o', Object.assign({}, message));
message.Content = `收到一条暂不支持的消息类型,请在手机上查看(${message.FileName || message.Content})。`;
message.MsgType = 19999;
break;
}
Expand Down
13 changes: 8 additions & 5 deletions src/js/stores/contacts.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,6 @@ class Contacts {
// Remove all official account
self.memberList = response.data.MemberList.filter(e => !helper.isOfficial(e) && !helper.isBrand(e));
self.memberList.map(e => {
if (helper.isChatRoom(e.UserName) && !e.NickName) {
e.NickName = e.MemberList.map(e => e.NickName).join(',');
}
e.HeadImgUrl = `${axios.defaults.baseURL}${e.HeadImgUrl.substr(1)}`;
e.isFriend = true;
});
Expand Down Expand Up @@ -119,8 +116,14 @@ class Contacts {
return;
}

if (helper.isChatRoom(e.UserName) && !e.NickName) {
e.NickName = e.MemberList.map(e => e.NickName).join(',');
if (helper.isChatRoom(e.UserName)) {
let placeholder = e.MemberList.map(e => e.NickName).join(',');

if (e.NickName) {
e.Signature = placeholder;
} else {
e.NickName = placeholder;
}
}

e.isFriend = isFriend;
Expand Down
2 changes: 2 additions & 0 deletions src/js/stores/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import session from './session';
import chat from './chat';
import addfriend from './addfriend';
import members from './members';
import newchat from './newchat';
import userinfo from './userinfo';
import contacts from './contacts';
Expand All @@ -17,6 +18,7 @@ const stores = {
contacts,
search,
settings,
members,
};

export default stores;
66 changes: 66 additions & 0 deletions src/js/stores/members.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@

import { observable, action } from 'mobx';
import axios from 'axios';

import storage from 'utils/storage';
import helper from 'utils/helper';

class Members {
@observable show = false;
@observable user = {
MemberList: [],
};
@observable list = [];

@action async toggle(show = self.show, user = self.user) {
var list = [];

self.show = show;
self.user = user;

if (show === false) {
return;
}

self.list.replace(user.MemberList.sort((a, b) => a.PYQuanPin - b.PYQuanPin));

Promise.all(
user.MemberList.map(async e => {
var pallet = e.pallet;

if (!pallet) {
e.pallet = await helper.getPallet(e.HeadImgUrl);
}
list.push(e);
})
).then(() => {
self.list.replace(list.sort((a, b) => a.PYQuanPin - b.PYQuanPin));
});
}

@action async sendRequest(message) {
var auth = await storage.get('auth');
var response = await axios.post(`/cgi-bin/mmwebwx-bin/webwxverifyuser?r=${+new Date()}`, {
BaseRequest: {
Sid: auth.wxsid,
Uin: auth.wxuin,
Skey: auth.skey,
},
Opcode: 2,
SceneList: [33],
SceneListCount: 1,
VerifyContent: message,
VerifyUserList: [{
Value: self.user.UserName,
VerifyUserTicket: '',
}],
VerifyUserListSize: 1,
skey: auth.skey,
});

return +response.data.BaseResponse.Ret === 0;
}
}

const self = new Members();
export default self;
Loading

0 comments on commit ec7854f

Please sign in to comment.