From ada64ed20e30c00d59e81a62201be60db60f6266 Mon Sep 17 00:00:00 2001 From: kshitizshakya Date: Mon, 17 Jun 2019 19:17:39 +0530 Subject: [PATCH] adding 1.7.0 sdk --- .DS_Store | Bin 10244 -> 8196 bytes package-lock.json | 6 +- package.json | 2 +- src/js/components/embed/CCBlockedUser.js | 5 +- src/js/components/embed/CCBlockedUserList.js | 13 +++- src/js/components/embed/CCGroup.js | 4 +- src/js/components/embed/CCGroupList.js | 9 ++- src/js/components/embed/CCLeftSidebar.js | 7 ++ src/js/components/embed/CCUser.js | 13 +++- src/js/components/embed/CCUserList.js | 5 +- src/js/components/login/Login.js | 55 ++++++++++++--- src/js/components/login/login.scss | 45 +++++++++++++ src/js/components/message/CCMessage.js | 2 +- src/js/components/message/CCMessageHeader.js | 8 +-- src/js/components/splash/SplashLoader.js | 67 +++++++++++++++++++ src/js/components/splash/style.sass | 26 +++++++ src/js/layouts/embed/Embeded.js | 2 +- src/js/lib/cometchat/ccManager.js | 3 +- src/js/lib/localization/enLang.js | 1 + src/js/lib/uiComponentLib.js | 9 +++ src/js/store/actions/cc_action.js | 64 ++++++++++++++++++ src/js/store/reducer/group.js | 46 +++++++++++++ src/js/store/reducer/user.js | 46 +++++++++++++ src/public/css/config.css | 34 +++++++++- src/public/img/icon_close.svg | 1 + webpack.config.js | 2 +- 26 files changed, 445 insertions(+), 30 deletions(-) create mode 100644 src/js/components/login/login.scss create mode 100644 src/js/components/splash/SplashLoader.js create mode 100644 src/js/components/splash/style.sass create mode 100644 src/public/img/icon_close.svg diff --git a/.DS_Store b/.DS_Store index d06e5d11ae470c398574b53ff33b4e1a1568aea5..3adf5d509850ceeeb483f08ff43e6a59de29978c 100644 GIT binary patch delta 154 zcmZn(XmOBWU|?W$DortDU;r^WfEYvza8E20o2aKKDgcrP@)T48w;ng zPi)}b%+A5W!6-1Ew-t z)7U3A@NQ=3VBxR^so-VMV@P611Y#sr4EYQN43(Za`N>H+`AI-kKtmYCf%LNfV8FmI znMXj|m>;M&ogtH<1c=ia@_@REfTjR#!K%L%q<^xGKrkm<#pDA5vb=CJf%0OL3j`!l z1v0&x!-cd4O-M@P2}uBcz|rdf diff --git a/package-lock.json b/package-lock.json index a8629dc..f8a8f34 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1074,9 +1074,9 @@ } }, "@cometchat-pro/chat": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@cometchat-pro/chat/-/chat-1.5.1.tgz", - "integrity": "sha512-unsHf0T50w622SO8bGVzLph7GYkMXsKvQh8XlP5MD+Rn4pp/9nCgKAEtUdr3RnMScLz8hyPt/hOZbBoOoIBGOw==" + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@cometchat-pro/chat/-/chat-1.7.0.tgz", + "integrity": "sha512-aJ3pLaXVhU+siCymsRYuYtlkW0jXGIe8cmZOjZ9hUQkf2qe4m3iauM+RGiiH8He2U9yROojzrq4C1FiV8NKseg==" }, "@fortawesome/fontawesome-svg-core": { "version": "1.2.8", diff --git a/package.json b/package.json index 17038c1..3b6c482 100644 --- 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 index 261e81c..315a02b 100644 --- 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 { */} -
- X +
+
diff --git a/src/js/components/embed/CCBlockedUserList.js b/src/js/components/embed/CCBlockedUserList.js index 0d74a56..813848b 100644 --- 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,8 +26,16 @@ 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); @@ -33,6 +43,7 @@ import * as action from "./../../store/actions/cc_action"; 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 index 04b8155..26e5f56 100644 --- 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 ?(
{this.props.unreadCount}
):null; const passwordModal = this.state.showPasswordModal ? :null; return ( @@ -114,6 +115,7 @@ var Groupthumbnail = require('./../../../public/img/group.jpg');
{this.props.status}
+ {unreadBadge} diff --git a/src/js/components/embed/CCGroupList.js b/src/js/components/embed/CCGroupList.js index 13ac737..3f7994c 100644 --- a/src/js/components/embed/CCGroupList.js +++ b/src/js/components/embed/CCGroupList.js @@ -18,6 +18,10 @@ class CCGroupList extends Component { } } + // componentWillMount(){ + // this.props.updateGroupUnReadMessage(); + // } + handleClickUser = (group) => { @@ -25,6 +29,7 @@ class CCGroupList extends Component { // 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 index b37bb48..6631d71 100644 --- 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 index d02092a..5c74ef7 100644 --- 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 ?(
{this.props.unreadCount}
):null; + return (
@@ -26,9 +35,11 @@ export default class CCUser extends Component { {this.props.children}
- {this.props.status} + {this.props.status}
+ {unreadBadge} +
diff --git a/src/js/components/embed/CCUserList.js b/src/js/components/embed/CCUserList.js index 506fab5..3cd8d4b 100644 --- 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 index 5a03b2b..286657b 100644 --- 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"); @@ -76,7 +111,7 @@ var wolverine = require("./../../../public/img/wolverine.png"); - {/* //Haven't created a user yet? Select one of our default users for testing: */} +
diff --git a/src/js/components/login/login.scss b/src/js/components/login/login.scss new file mode 100644 index 0000000..a8140b9 --- /dev/null +++ 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); } + } \ No newline at end of file diff --git a/src/js/components/message/CCMessage.js b/src/js/components/message/CCMessage.js index d3de248..0164899 100644 --- a/src/js/components/message/CCMessage.js +++ b/src/js/components/message/CCMessage.js @@ -283,7 +283,7 @@ function OutgoingMessage(props) { messageStatus = (); }else{ if(props.msgData.sentAt != undefined){ - messageStatus = (); + messageStatus = (); } } } diff --git a/src/js/components/message/CCMessageHeader.js b/src/js/components/message/CCMessageHeader.js index 344516f..05691b4 100644 --- a/src/js/components/message/CCMessageHeader.js +++ b/src/js/components/message/CCMessageHeader.js @@ -76,7 +76,8 @@ class CCMessageHeader extends Component { render() { - const showMore = this.props.profile.type == 'user'? :null; + const showMore = this.props.profile.type == 'user'? ( + ):null; var profileData = {}; var showProfile = null; @@ -133,9 +134,7 @@ class CCMessageHeader extends Component { - {showMore} -
@@ -145,7 +144,8 @@ class CCMessageHeader extends Component { } -const popoverClickRootClose = (event)=> { +const popoverClickRootClose = (event )=> { + return (
diff --git a/src/js/components/splash/SplashLoader.js b/src/js/components/splash/SplashLoader.js new file mode 100644 index 0000000..bd85016 --- /dev/null +++ b/src/js/components/splash/SplashLoader.js @@ -0,0 +1,67 @@ +import React, { Component } from "react"; +import { connect } from "react-redux"; +import {Grid, Row, Col } from "react-bootstrap"; +import * as actionCreator from './../../store/actions/cc_action'; +import './style.sass'; + +class SplashLoader extends Component { + + componentDidMount() { + if (this.props.isSyncStarted == 0) { + this.props.startFetching(); + this.fetchAllInit(); + } + } + + + async fetchAllInit() { + + try { + await this.props.fetchUser(50); + await this.props.fetchGroup(50); + await this.props.registerListener(); + } catch (error) { + console.log(error); + } + } + + + render() { + + return ( + + + +
Loading . + . + . + . +
+ + + + ); + + } + +} + + +const mapStateToProps = (store) => { + return { + currentStage: store.app.splashHandler.stage, + isSyncStarted: store.app.splashHandler.syncStarted + }; +}; + +const mapDispachToProps = dispatch => { + return { + fetchUser: (limit) => dispatch(actionCreator.getUsers(limit)), + fetchGroup: (limit) => dispatch(actionCreator.getGroups(limit)), + registerListener: () => actionCreator.addMessageListener(dispatch), + startFetching: () => dispatch(actionCreator.startFetching()), + + }; +}; + +export default connect(mapStateToProps, mapDispachToProps)(SplashLoader); \ No newline at end of file diff --git a/src/js/components/splash/style.sass b/src/js/components/splash/style.sass new file mode 100644 index 0000000..47a99b2 --- /dev/null +++ b/src/js/components/splash/style.sass @@ -0,0 +1,26 @@ +.splashContainer{ + display: flex; + justify-content: center; + align-items: center; + height: 100%; + flex-direction: column; +} + + +.loaderContainer{ + display: block; + font-size: 28px; +} + +@keyframes blink {50% { color: transparent }} + +.loader__dot { animation: 2s blink infinite } + +.loader__dot:nth-child(2) { animation-delay: 250ms } + +.loader__dot:nth-child(3) { animation-delay: 500ms } + +.loader__dot:nth-child(4) { animation-delay: 750ms } + + + diff --git a/src/js/layouts/embed/Embeded.js b/src/js/layouts/embed/Embeded.js index 07825f5..d77a441 100644 --- a/src/js/layouts/embed/Embeded.js +++ b/src/js/layouts/embed/Embeded.js @@ -5,7 +5,7 @@ import { Grid, Row, Col } from 'react-bootstrap'; import CCLeftSidebar from '../../components/embed/CCLeftSidebar'; import CCMessageContainer from '../../components/message/CCMessageContainer'; import * as actionCreator from './../../store/actions/cc_action'; -import SplashLoader from "../../components/SplashLoader"; +import SplashLoader from "../../components/splash/SplashLoader"; import CCCallController from "./../../components/CCCallController"; import translate from "../../lib/localization/translate"; diff --git a/src/js/lib/cometchat/ccManager.js b/src/js/lib/cometchat/ccManager.js index 16ba4dd..45c1f5f 100644 --- a/src/js/lib/cometchat/ccManager.js +++ b/src/js/lib/cometchat/ccManager.js @@ -15,6 +15,7 @@ export default class CCManager { static appId = 'ZZZ_CC_APPID' ; //Enter your App ID static apiKey = 'ZZZ_CC_APIKEY' ; //Enter your API KEY + static LISTENER_KEY_MESSAGE = "msglistener"; static LISTENER_KEY_USER = "userlistener"; static LISTENER_KEY_GROUP = "grouplistener"; @@ -46,7 +47,7 @@ export default class CCManager { } static setUserRequestBuilder(limit){ - CCManager.userRequest = new CometChat.UsersRequestBuilder().setLimit(limit).build(); + CCManager.userRequest = new CometChat.UsersRequestBuilder().setLimit(limit).hideBlockedUsers(true).build(); } static setGroupRequestBuilder(limit){ diff --git a/src/js/lib/localization/enLang.js b/src/js/lib/localization/enLang.js index 4257152..646d8dd 100644 --- a/src/js/lib/localization/enLang.js +++ b/src/js/lib/localization/enLang.js @@ -3,6 +3,7 @@ const lang = { 'username':'Username', 'login':'Login', + 'login_processing':"Processing", 'login_message':'Haven\'t created a user yet? Select one of our default users for testing', 'login_placeholder':'Enter UserId', 'groups': "Groups", diff --git a/src/js/lib/uiComponentLib.js b/src/js/lib/uiComponentLib.js index d493de5..3e6979f 100644 --- a/src/js/lib/uiComponentLib.js +++ b/src/js/lib/uiComponentLib.js @@ -93,3 +93,12 @@ function formatAMPM(date) { return strTime; } + +[].map.call(document.querySelectorAll('[anim="ripple"]'), el=> { + el.addEventListener('click',e => { + e = e.touches ? e.touches[0] : e; + const r = el.getBoundingClientRect(), d = Math.sqrt(Math.pow(r.width,2)+Math.pow(r.height,2)) * 2; + el.style.cssText = `--s: 0; --o: 1;`; el.offsetTop; + el.style.cssText = `--t: 1; --o: 0; --d: ${d}; --x:${e.clientX - r.left}; --y:${e.clientY - r.top};` + }) +}) diff --git a/src/js/store/actions/cc_action.js b/src/js/store/actions/cc_action.js index 4adc744..0ddfad0 100644 --- a/src/js/store/actions/cc_action.js +++ b/src/js/store/actions/cc_action.js @@ -130,6 +130,70 @@ export const getNextUserList = () => { }; }; +export const updateUserUnReadMessage =() =>{ + return dispatch =>{ CometChat.getUnreadMessageCountForAllUsers().then( + array => { + console.log("Message count fetched", array); + return dispatch(updateMessageUnreadCount(array)); + + return + }, error => { + console.log("Error in getting message count", error); + }); + + } +}; + +export const updateMessageUnreadCount=(list)=>{ + return { + type:"UPDATE_MESSAGE_UNREAD_COUNT_LIST", + data : list + } +} + +export const updateGroupUnReadMessage=()=>{ + return dispatch =>{ + CometChat.getUnreadMessageCountForAllGroups().then(array => { + console.log("Message count fetched", array); + return dispatch(updateMessageGroupUnreadCount(array)); + }, error => { + console.log("Error in getting message count", error); + }); + } +} + + +export const updateMessageGroupUnreadCount=(list)=>{ + return { + type:"UPDATE_MESSAGE_UNREAD_COUNT_GROUP_LIST", + data : list + } +} + +export const unsetUnReadMessage = (uid) => { + + return { + type:'UNSET_MESSAGE_UNREAD_COUNT_USER', + data:uid + } +}; + +export const unsetUnReadGroupMessage = (uid) => { + + return { + type:'UNSET_MESSAGE_UNREAD_COUNT_GROUP', + data:uid + } +}; + + + + + + + + + export const updateHandler = () => { return { type: "UPDATED_STAGE" diff --git a/src/js/store/reducer/group.js b/src/js/store/reducer/group.js index 4476a83..651daf2 100644 --- a/src/js/store/reducer/group.js +++ b/src/js/store/reducer/group.js @@ -85,6 +85,52 @@ const reducers = (state = intialState, action)=> { break; + + case 'UPDATE_MESSAGE_UNREAD_COUNT_GROUP_LIST': + + var unreadData = Object.keys(action.data); + + if(unreadData.length === 0){ + + }else{ + let groupsList = [...state.groupsList]; + + unreadData.map( uidkey => { + var index = newState.groupsList.findIndex(group =>group.guid === uidkey); + + if(index != -1 ){ + groupsList[index] = {...groupsList[index],unreadCount:action.data[uidkey]}; + } + }); + + const newUpdatedState = {...state,groupsList}; + + return newUpdatedState; + } + + break; + + + case 'UNSET_MESSAGE_UNREAD_COUNT_GROUP': + + var index1 = newState.groupsList.findIndex(group =>group.guid === action.data); + + if(index1 != -1 ){ + + let groupsList = [...state.groupsList]; + + groupsList[index1] = {...groupsList[index1],unreadCount:0}; + + const newUpdatedState1 = {...state,groupsList}; + + console.log("User online : ", JSON.stringify(newUpdatedState1)); + + return newUpdatedState1; + } + + + break; + } return newState; diff --git a/src/js/store/reducer/user.js b/src/js/store/reducer/user.js index 68e0f28..ef404aa 100644 --- a/src/js/store/reducer/user.js +++ b/src/js/store/reducer/user.js @@ -102,6 +102,52 @@ const reducers = (state = intialState, action) => { } + break; + + + case 'UNSET_MESSAGE_UNREAD_COUNT_USER' : + var index1 = newState.usersList.findIndex(user => user.uid == action.data); + + if(index1 != -1 ){ + + let usersList = [...state.usersList]; + + usersList[index1] = {...usersList[index1],unreadCount:0}; + + const newUpdatedState1 = {...state,usersList}; + + console.log("User online : ", JSON.stringify(newUpdatedState1)); + + return newUpdatedState1; + } + + break; + + case 'UPDATE_MESSAGE_UNREAD_COUNT_LIST' : + + var unreadData = Object.keys(action.data); + + if(unreadData.length === 0){ + + }else{ + let usersList = [...state.usersList]; + + unreadData.map( uidkey => { + var index = newState.usersList.findIndex(user => user.uid == uidkey); + + if(index != -1 ){ + usersList[index] = {...usersList[index],unreadCount:action.data[uidkey]}; + } + }); + + const newUpdatedState = {...state,usersList}; + + return newUpdatedState; + } + + + + break; case 'setUserOffline' : diff --git a/src/public/css/config.css b/src/public/css/config.css index 4c0aae9..e828ee8 100644 --- a/src/public/css/config.css +++ b/src/public/css/config.css @@ -338,7 +338,14 @@ input:focus, select:focus, textarea:focus, button:focus { position: absolute; bottom: 0; } -.time_date[mesasgestatus=sent], .time_date[mesasgestatus=delivered], .time_date[mesasgestatus=read]{ +.time_date[mesasgestatus=sent],.time_date[mesasgestatus=delivered]{ + height: 16px; + width: 16px; + margin: 0px 2px !important; + color: #d8d8d8 !important; +} + + .time_date[mesasgestatus=read]{ height: 16px; width: 16px; margin: 0px 2px !important; @@ -1208,4 +1215,29 @@ nav nav-pills>li>a { height: 90%; justify-content: center; align-items: center +} + + +.unreadCounter_div{ + display: flex; + position: absolute; + top: 0; + right: 0; + justify-content: center; + align-items: center; + height: 100%; + width: 24px; + margin-right: 8px; +} + +.unreadBadge{ + background: #ea2f30; + width: 24px; + height: 24px; + display: flex; + justify-content: center; + align-items: center; + color: white; + border-radius: 50%; + font-size: 10px; } \ No newline at end of file diff --git a/src/public/img/icon_close.svg b/src/public/img/icon_close.svg new file mode 100644 index 0000000..dea8678 --- /dev/null +++ b/src/public/img/icon_close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 62ae9fe..8893cbc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -20,7 +20,7 @@ module.exports = { } }, { - test: /\.css$/, + test: /\.css|sass|scss$/, use: ["style-loader", "css-loader"] }, {