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"]
},
{