adding 1.7.0 sdk

cometchat · Jun 17, 2019 · ada64ed · ada64ed
1 parent 7b19d43
commit ada64ed
Show file tree

Hide file tree

Showing 26 changed files with 445 additions and 30 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {
-    "@cometchat-pro/chat": "^1.5.1",
+    "@cometchat-pro/chat": "^1.7.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.8",
     "@fortawesome/free-brands-svg-icons": "^5.5.0",
     "@fortawesome/free-solid-svg-icons": "^5.5.0",

diff --git a/src/js/components/embed/CCBlockedUser.js b/src/js/components/embed/CCBlockedUser.js
@@ -3,6 +3,7 @@ import { Row,} from 'react-bootstrap';
 
 
 var Userthumbnail = require('./../../../public/img/user.png');
+import icon_close from './../../../public/img/icon_close.svg';
 export default class CCBlockedUser extends Component {
 
     constructor(props){
@@ -25,8 +26,8 @@ export default class CCBlockedUser extends Component {
                     </div> */}
 
 
-                    <div className="buCloseButton">
-                        X
+                    <div className="buCloseButton" dangerouslySetInnerHTML={{__html:icon_close}}>
+
                     </div>
 
 

diff --git a/src/js/components/embed/CCBlockedUserList.js b/src/js/components/embed/CCBlockedUserList.js
@@ -8,6 +8,8 @@ import { connect } from 'react-redux';
 import * as action from "./../../store/actions/cc_action";
 
 
+
+
  class CCBlockedUserList extends Component{
     constructor(props){
         super(props);
@@ -24,15 +26,24 @@ import * as action from "./../../store/actions/cc_action";
          this.fetchBlockedUserList()
     }
 
+    showShimmer(){
+        console.log("showshimmer");
+    }
+
+    hideShimmer(){
+        console.log("hideshimmer");
+    }
+
     fetchBlockedUserList(){
-
+        this.showShimmer();       
         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);
+                    this.hideShimmer();
                 }
             },
             error => {

diff --git a/src/js/components/embed/CCGroup.js b/src/js/components/embed/CCGroup.js
@@ -24,6 +24,7 @@ var Groupthumbnail = require('./../../../public/img/group.jpg');
         this.props.updateGroupDetailsJoined(this.props.groupData); 
         this.props.showMessageEvent();
     }
+
     handleClickGroup =()=>{
 
         var group = this.props.groupData;
@@ -96,7 +97,7 @@ var Groupthumbnail = require('./../../../public/img/group.jpg');
         if (CheckEmpty(this.props.activeClass)) {
             classVar.push(this.props.activeClass);
         }
-
+        var unreadBadge = this.props.unreadCount > 0 ?( <div className="unreadCounter_div"><span className="unreadBadge"> {this.props.unreadCount}</span></div>):null;
         const passwordModal = this.state.showPasswordModal ? <PasswordRequestModal group={this.props.groupData} joinGroup={this.joinGroup.bind(this)} close={this.hidePasswordModal.bind(this)}></PasswordRequestModal>:null;
 
         return (
@@ -114,6 +115,7 @@ var Groupthumbnail = require('./../../../public/img/group.jpg');
                     <div className="sidebarUserListItemStatus">
                         <span >{this.props.status}</span>
                     </div>
+                    {unreadBadge}
 
 
                 </Row>

diff --git a/src/js/components/embed/CCGroupList.js b/src/js/components/embed/CCGroupList.js
@@ -18,13 +18,18 @@ class CCGroupList extends Component {
         }       
     }
 
+    // componentWillMount(){
+    //    this.props.updateGroupUnReadMessage();
+    // }
+
 
 
     handleClickUser = (group) => {
 
         // if(group.hasJoined == false){
         //     actionCreator.joinGroup(group);
         // }
+        this.props.unsetUnReadMessage(group.guid);
         this.props.updateActiveMessage(group.guid);
 
         this.setState({ _activeGroupUID: group.guid });
@@ -61,7 +66,7 @@ class CCGroupList extends Component {
                 guid = {el.guid}
                 group_name = {el.name}
                 groupData = {el}
-
+                unreadCount = {el.hasOwnProperty("unreadCount")? el.unreadCount : 0 }
                 avt={utils.CheckEmpty(el.icon) ? el.icon : false} 
                 showMessageEvent={this.handleClickUser.bind(this, el)}>
 
@@ -83,6 +88,8 @@ const mapDispachToProps = dispatch => {
     return {
         updateActiveMessage: (key, type = "group") => dispatch(actionCreator.setActiveMessages(key, type)),
         fetchGroup: (limit) => dispatch(actionCreator.getGroups(limit)),
+
+        unsetUnReadMessage:()=> (guid)=>dispatch(actionCreator.unsetUnReadGroupMessage(guid))
 
     };
 };

diff --git a/src/js/components/embed/CCLeftSidebar.js b/src/js/components/embed/CCLeftSidebar.js
@@ -48,6 +48,11 @@ class CCLeftSidebar extends Component {
         }
     }
 
+    componentWillMount(){
+        this.props.updateUserUnReadMessage();
+        this.props.updateGroupUnReadMessage();
+      }
+
     componentDidMount(){
         this.props.addUserListener();
     }
@@ -143,6 +148,8 @@ const mapDispachToProps = dispatch => {
         fetchUser: () => dispatch(actionCreator.getNextUserList()),
         fetchGroup: () => dispatch(actionCreator.getNextGroupList()),
         addUserListener : () => actionCreator.addUserListener(dispatch),
+        updateUserUnReadMessage : () => dispatch(actionCreator.updateUserUnReadMessage()),
+        updateGroupUnReadMessage: ()=> dispatch(actionCreator.updateGroupUnReadMessage()),
     };
 };
 

diff --git a/src/js/components/embed/CCUser.js b/src/js/components/embed/CCUser.js
@@ -7,6 +7,13 @@ var Userthumbnail = require('./../../../public/img/user.png');
 
 export default class CCUser extends Component {
 
+    constructor(props){
+        super(props);
+
+    }
+
+
+
     render() {
 
         let classVar = ['userItem'];
@@ -15,6 +22,8 @@ export default class CCUser extends Component {
             classVar.push(this.props.activeClass);
         }
 
+        var unreadBadge = this.props.unreadCount > 0 ?( <div className="unreadCounter_div"><span className="unreadBadge"> {this.props.unreadCount}</span></div>):null;
+
         return (
             <div key={this.props.uid} onClick={this.props.showMessageEvent} >
                 <Row className={classVar.join(' ')} >
@@ -26,9 +35,11 @@ export default class CCUser extends Component {
                         <span >{this.props.children}</span>
                     </div>
                     <div className="sidebarUserListItemStatus" data={this.props.status}>
-                        <span >{this.props.status}</span>
+                        <span>{this.props.status}</span>
                     </div>
 
+                    {unreadBadge} 
+
 
                 </Row>
             </div>

diff --git a/src/js/components/embed/CCUserList.js b/src/js/components/embed/CCUserList.js
@@ -17,6 +17,7 @@ class CCUserList extends Component {
 
   handleClickUser = uid => {
     this.props.updateActiveMessage(uid);
+    this.props.unsetUnReadMessage(uid);
     this.setState({ _activeUserUID: uid });
   };
 
@@ -41,6 +42,7 @@ class CCUserList extends Component {
         activeClass={activeUserId == el.uid ? "active" : ""}
         key={el.uid}
         uid={el.uid}
+        unreadCount = {el.hasOwnProperty("unreadCount")? el.unreadCount : 0 }
         status={el.hasOwnProperty("typeStatus")?((el.typeStatus == true)?"Typing...":el.status):el.status}
         avt={utils.CheckEmpty(el.avatar) ? el.avatar : false}
         showMessageEvent={this.handleClickUser.bind(this, el.uid)}
@@ -62,7 +64,8 @@ const mapDispachToProps = dispatch => {
   return {
     updateActiveMessage: (key, type = "user") =>
       dispatch(actionCreator.setActiveMessages(key, type)),
-    fetchUser: limit => dispatch(actionCreator.getUsers(limit))
+    fetchUser: limit => dispatch(actionCreator.getUsers(limit)),
+    unsetUnReadMessage:(uid)=> dispatch(actionCreator.unsetUnReadMessage(uid)),
   };
 };
 

diff --git a/src/js/components/login/Login.js b/src/js/components/login/Login.js
@@ -9,14 +9,16 @@ var captainAmerica = require("./../../../public/img/captainamerica.png");
 var ironMan = require("./../../../public/img/ironman.png");
 var spiderman = require("./../../../public/img/spiderman.png");
 var wolverine = require("./../../../public/img/wolverine.png");
-
+import './login.scss';
  class Login extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       email: "",
-      password: ""
+      password: "",
+      loginbtn: translate.login,
+      loginLoader:false,
     };
   }
 
@@ -32,14 +34,44 @@ var wolverine = require("./../../../public/img/wolverine.png");
 
   handleSubmit = event => {
     event.preventDefault();
-    var user = this.state.email;
+
+    if(!this.state.loginloader){
+      var user = this.state.email;
+      this.setState({
+        loginbtn:translate.login_processing,
+        loginLoader:true
+      });
+
+      var dom = document.getElementById('loginButton'); 
+     dom.classList.add('animation-loader');
+     dom.removeAttribute('disabled');
+
+     document.getElementById('email').setAttribute('disabled',true);
+
+      this.props.setUserSession(user);
+
+    }
 
-    this.props.setUserSession(user);
   }
 
   handleUserListItemClick = (user) =>{
-    console.log("user : "+ user);
-    this.props.setUserSession(user);
+
+    if(!this.state.loginLoader){
+    console.log("user : " ,  user);
+    this.setState({
+        loginbtn:translate.login_processing,
+        loginLoader:true
+    });
+
+     var dom = document.getElementById('loginButton'); 
+     dom.classList.add('animation-loader');
+     dom.removeAttribute('disabled');
+
+     document.getElementById('email').setAttribute('disabled',true);
+     //console.log(dom.getAttribute('class'));
+      this.props.setUserSession(user);
+    }
+
   }
 
   render() {
@@ -62,12 +94,15 @@ var wolverine = require("./../../../public/img/wolverine.png");
             <Button
               className="cc-submit-btn"
               block
+              id="loginButton"
+
               bsSize="large"
               disabled={!this.validateForm()}
-              type="submit"
-
+              type="submit"             
             >
-              {translate.login}
+
+              {this.state.loginbtn}
+
             </Button>
           </form>
 
@@ -76,7 +111,7 @@ var wolverine = require("./../../../public/img/wolverine.png");
 
 
             <label>{translate.login_message}</label>
-            {/* //Haven't created a user yet? Select one of our default users for testing: */}
+
 
             <div className="loginSampleUser" onClick={this.handleUserListItemClick.bind(this,"superhero1")} >
               <img className="loginSampleAvatar" src={ironMan} width={32} />

diff --git a/src/js/components/login/login.scss b/src/js/components/login/login.scss
@@ -0,0 +1,45 @@
+.animation-loader:after{
+    content: '';
+    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
+    animation: mymove 5s infinite ;  
+    height: 16px;
+    transition:border-color ease-out;
+    -webkit-transition: border-color  ease-out;   
+    -moz-transition: border-color  ease-out ;
+    -o-transition:border-color  ease-out;
+    width: 16px;
+    display: inline-flex;
+    border-radius: 50%;
+    border:3px dotted white;
+    margin-left:4px !important;
+
+}
+
+// /* Safari 4.0 - 8.0 
+// @-webkit-keyframes mymove {
+// 0% { transform: rotate(0); border-color:#ff5722; }
+// 50%   { transform: rotate(360deg); border-color:#8bc34a; }
+// 100% { transform: rotate(720deg); border-color:#81d4fa; }
+// }
+
+// /* Standard syntax 
+// @keyframes mymove {
+//     0%      { transform: rotate(0); border-color:#ff5722; }
+//     50%     { transform: rotate(360deg); border-color:#8bc34a; }
+//     75%     {  transform: rotate(540deg); border-color:#81d4fa; }
+//     100%    { transform: rotate(720deg); border-color:#ff5722; }
+// }*/
+
+@-webkit-keyframes mymove {
+    0% { transform: rotate(0); }
+    50%   { transform: rotate(360deg);  }
+    100% { transform: rotate(720deg);  }
+    }
+
+    /* Standard syntax */
+    @keyframes mymove {
+        0%      { transform: rotate(0);  }
+        50%     { transform: rotate(360deg);  }
+        75%     {  transform: rotate(540deg);  }
+        100%    { transform: rotate(720deg);  }
+    }
diff --git a/src/js/components/message/CCMessage.js b/src/js/components/message/CCMessage.js
@@ -283,7 +283,7 @@ function OutgoingMessage(props) {
                 messageStatus = (<span mesasgeStatus="delivered" className="time_date color-light-tint-font" dangerouslySetInnerHTML={{__html:icon_msg_delivered}}></span>);
             }else{
                 if(props.msgData.sentAt != undefined){
-                    messageStatus = (<span mesasgeStatus="delivered" className="time_date color-light-tint-font" dangerouslySetInnerHTML={{__html:icon_msg_delivered}}></span>);
+                    messageStatus = (<span mesasgeStatus="sent" className="time_date color-light-tint-font" dangerouslySetInnerHTML={{__html:icon_msg_delivered}}></span>);
                 }
             }
         }