Skip to content

Commit

Permalink
added block-unblock feature
Browse files Browse the repository at this point in the history
  • Loading branch information
kshitizshakya committed Jun 3, 2019
1 parent 8540ca9 commit 7b19d43
Show file tree
Hide file tree
Showing 16 changed files with 429 additions and 16 deletions.
Binary file modified .DS_Store
Binary file not shown.
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"@cometchat-pro/chat": "^1.4.1",
"@cometchat-pro/chat": "^1.5.1",
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/free-brands-svg-icons": "^5.5.0",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
Expand Down
37 changes: 37 additions & 0 deletions src/js/components/embed/CCBlockedUser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React,{Component} from 'react';
import { Row,} from 'react-bootstrap';


var Userthumbnail = require('./../../../public/img/user.png');
export default class CCBlockedUser extends Component {

constructor(props){
super(props);
}

render(){
return(
<div key={this.props.uid} onClick={this.props.handleUnblock}>
<Row className="userItem" >
<span className="sidebarUserListItemAvatar">
<img className="userAvatar img-circle" src={this.props.avt != false ? this.props.avt : Userthumbnail} height="40px" width="40px" />
</span>

<div className="buUserTitle">
<span >{this.props.children}</span>
</div>
{/* <div className="sidebarUserListItemStatus" data={this.props.status}>
<span >{this.props.status}</span>
</div> */}


<div className="buCloseButton">
X
</div>


</Row>
</div>
);
}
}
166 changes: 166 additions & 0 deletions src/js/components/embed/CCBlockedUserList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
import React,{Component} from 'react';
import CCManager from './../../lib/cometchat/ccManager';
import * as utils from "./../../lib/uiComponentLib";
import CCBlockedUser from "./CCBlockedUser";
import icon_back from "./../../../public/img/icon_back.svg";
import { CometChat } from "@cometchat-pro/chat";
import { connect } from 'react-redux';
import * as action from "./../../store/actions/cc_action";


class CCBlockedUserList extends Component{
constructor(props){
super(props);

this.state={
userlist: [],
}

this.blockedUsersRequest = CCManager.getBlockedUsersRequestBuilder(100);
}

componentDidMount(){
document.getElementById('blockedUserContainer').style.width="100%";
this.fetchBlockedUserList()
}

fetchBlockedUserList(){

this.blockedUsersRequest.fetchNext().then(
userList => {
console.log("Blocked user list received:", userList);
if(userList.length > 0){
var newState = {...this.state}
newState.userlist = userList;
this.setState(newState);
}
},
error => {
console.log("Blocked user list fetching failed with error:", error);
}
);
}

UnblockUser(uid){
var userlist = [uid];
var buffer_user = this.state.userlist.find(user => user.uid == uid);
console.log("buffer_user : " , buffer_user);
CometChat.unblockUsers(userlist).then(
list => {
console.log("users list unblocked", { list });
this.props.updateUserlistlocal([buffer_user]);
this.updateUserlist(uid);

}, error => {
console.log("unblocking user fails with error", error);
}
);

}

updateUserlist(uid){

var index = this.state.userlist.findIndex( user => user.uid === uid);

var newState = {...this.state};
newState.userlist.splice(index,1);
this.setState(newState);

}



componentWillUnmount(){
document.getElementById('blockedUserContainer').style.width="0";
}

handleClickUser(uid){
console.log("uid to unblock ", uid);
this.UnblockUser(uid);
}

handleClose(){
this.props.handlblockedUserEvent;
}

render(){



if(this.state.userlist == undefined || this.state.userlist.length == 0 ){
return(
<div id="blockedUserContainer" className="blockedUserContainer">

<div className="buHeader">

<div class="buHeaderClose header-icon font-title color-font-title size-title"
onClick = {this.props.handlblockedUserEvent}
dangerouslySetInnerHTML={{ __html: icon_back }} />
<span class="buHeaderTitle font-title color-font-title size-title"> Blocked User</span>
{/* <span class="buHeaderClose header-icon font-title color-font-title size-title"> X </span> */}
</div>

<div className="buNoUserList buUserList">


No Blocked User Found


</div>

</div>
);
}else{
return(
<div id="blockedUserContainer" className="blockedUserContainer">

<div className="buHeader">

<div class="buHeaderClose header-icon font-title color-font-title size-title"
onClick = {this.props.handlblockedUserEvent}
dangerouslySetInnerHTML={{ __html: icon_back }} />
<span class="buHeaderTitle font-title color-font-title size-title"> Blocked User</span>
</div>

<div className="buUserList">

{
this.state.userlist.map((el,index) =>(
<CCBlockedUser
key={el.uid}
uid={el.uid}
avt={utils.CheckEmpty(el.avatar) ? el.avatar : false}
handleUnblock={this.handleClickUser.bind(this, el.uid)}
>
{el.name}
</CCBlockedUser>

)) }



</div>

</div>
);
}

}


}


const mapStateToProps = state => {
return {

};
};

const mapDispachToProps = dispatch => {
return {
updateUserlistlocal : (list) => dispatch(action.updateUserList(list)),
};
};

export default connect(mapStateToProps,mapDispachToProps)(CCBlockedUserList);
15 changes: 13 additions & 2 deletions src/js/components/embed/CCLeftSidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { connect } from "react-redux";
import CCLeftSidebarHeader from './CCLeftSidebarHeader';
import CCUserList from './CCUserList';
import CCGroupList from './CCGroupList';
import CCBlockedUserList from './CCBlockedUserList';
import * as utils from './../../lib/uiComponentLib';

import * as actionCreator from './../../store/actions/cc_action';
Expand Down Expand Up @@ -43,6 +44,7 @@ class CCLeftSidebar extends Component {

this.state = {
activeTab: "contacts",
showBlockedUserList : false,
}
}

Expand All @@ -54,6 +56,12 @@ class CCLeftSidebar extends Component {
this.setState({ activeTab: tabName });
}

handleBlockedUserVisibility(){
console.log("reaching inside blockeduservisi");
var visibility = !this.state.showBlockedUserList;
this.setState({showBlockedUserList:visibility});
}

sidebarScrollContainer = (node) =>{
if(node) {
node.addEventListener("scroll", this.handleScroll.bind(this));
Expand All @@ -74,12 +82,15 @@ class CCLeftSidebar extends Component {


render() {

var blockedUserList = this.state.showBlockedUserList ? <CCBlockedUserList handlblockedUserEvent={this.handleBlockedUserVisibility.bind(this)}></CCBlockedUserList>:null;
return (
<div className="ccMainContainer">
{blockedUserList}

<CCLeftSidebarHeader activeTab={this.state.activeTab} tabTitle={this.state.activeTab}></CCLeftSidebarHeader>
<CCLeftSidebarHeader handlblockedUserEvent={this.handleBlockedUserVisibility.bind(this)} activeTab={this.state.activeTab} tabTitle={this.state.activeTab}></CCLeftSidebarHeader>



<Tab.Container id="sidebarTabContainer" defaultActiveKey={this.state.activeTab} >
<Row className="clearfix">
<div key="sidebarScrollContainer" ref={this.sidebarScrollContainer} className="cc-no-padding border border-radius-top bg-white color-border " style={ccUserStyle} >
Expand Down
31 changes: 27 additions & 4 deletions src/js/components/embed/CCLeftSidebarHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,14 @@ import * as action from "./../../store/actions/cc_action";
import { connect } from "react-redux";

import translate from "./../../lib/localization/translate";
import icon_block from "./../../../public/img/icon_block.svg";
import icon_logout from "./../../../public/img/icon_logout.svg";

class CCLeftSidebarHeader extends Component {

constructor(props) {
super(props);
this.overlaySidebarRef = React.createRef();

this.state = {
showCreateModal : false,
Expand All @@ -30,6 +33,12 @@ class CCLeftSidebarHeader extends Component {
this.props.logout();
}

handleBlockedUser=()=>{
console.log("inside handleBlockedUser event here" , this.overlaySidebarRef.current);
this.props.handlblockedUserEvent();
this.overlaySidebarRef.current.hide();
}


hideGroupCreateModal(){
this.setState({showCreateModal:false});
Expand All @@ -51,12 +60,17 @@ class CCLeftSidebarHeader extends Component {
let tabName = title.charAt(0) + title.slice(1);

const createGroup = this.state.showCreateModal ?<GroupCreateModal close={this.hideGroupCreateModal.bind(this)} /> :null;
const clickEvents = {
logout:this.handleLogoutClick,
blockedUser:this.handleBlockedUser

};
return (<Row className="sidebarHeader">
<div>
<span class="font-title color-font-title size-title">{translate[title]}</span>



<OverlayTrigger trigger="click" rootClose placement="bottom" overlay={popoverClickRootClose(this.handleLogoutClick)} >
<OverlayTrigger ref={this.overlaySidebarRef} trigger="click" rootClose placement="bottom" overlay={popoverClickRootClose(clickEvents)} >

<div dangerouslySetInnerHTML={{ __html: iconMore }} className="header-icon" />

Expand All @@ -75,9 +89,18 @@ class CCLeftSidebarHeader extends Component {

const popoverClickRootClose = (event)=> {
return (
<Popover id="popover-trigger-click-root-close" onClick={event}>
<Popover id="popover-trigger-click-root-close" >
<div>
<span>{translate.logout}</span>

<span className="messageHeaderMenuItem" onClick={event.logout} >
<div className="messageHeaderMenuIcon " dangerouslySetInnerHTML={{__html:icon_logout}}/>
{translate.logout}
</span>

<span className="messageHeaderMenuItem" onClick={event.blockedUser}>
<div className="messageHeaderMenuIcon " dangerouslySetInnerHTML={{__html:icon_block}}/>
Blocked Users
</span>
</div>
</Popover>
) ;
Expand Down
Loading

0 comments on commit 7b19d43

Please sign in to comment.