Skip to content

Commit 4c69cf1

Browse files
chintan13chintan13
committed
redux(ngrx store) style code added
1 parent 491005e commit 4c69cf1

10 files changed

+171
-46
lines changed

‎package.json

+5-4
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,11 @@
2121
"@angular/platform-browser": "^4.2.4",
2222
"@angular/platform-browser-dynamic": "^4.2.4",
2323
"@angular/router": "^4.2.4",
24-
"core-js": "^2.4.1",
25-
"rxjs": "^5.4.2",
26-
"zone.js": "^0.8.14",
24+
"@ngrx/store": "^4.1.1",
2725
"animate.css": "3.1.1",
2826
"bootstrap": "^3.3.7",
2927
"chart.js": "^2.5.0",
28+
"core-js": "^2.4.1",
3029
"font-awesome": "^4.7.0",
3130
"jquery": "^3.1.0",
3231
"jquery-slimscroll": "^1.3.8",
@@ -35,7 +34,9 @@
3534
"metismenu": "^2.5.0",
3635
"ng2-charts": "^1.5.0",
3736
"ngx-bootstrap": "^1.6.6",
38-
"peity": "^3.2.1"
37+
"peity": "^3.2.1",
38+
"rxjs": "^5.4.2",
39+
"zone.js": "^0.8.14"
3940
},
4041
"devDependencies": {
4142
"@angular/cli": "1.4.9",

‎src/app/app.module.ts

+7
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ import { ChatComponent } from './chat/chat.component';
2121
import { ChatDetailComponent } from './chat/chat-detail/chat-detail.component';
2222
import { ChatService } from './chat/chat.service';
2323

24+
import { Store, StoreModule } from '@ngrx/store';
25+
import { chatContactListReducer , chatDetailReducer } from './chat/chat-reducer/chat.reducer';
26+
2427

2528
@NgModule({
2629
declarations: [
@@ -41,6 +44,10 @@ import { ChatService } from './chat/chat.service';
4144
ReactiveFormsModule,
4245
RoutingModule,
4346
HttpModule,
47+
StoreModule.forRoot({
48+
chatListReducer : chatContactListReducer,
49+
chatDetailReducer : chatDetailReducer
50+
}),
4451
],
4552
providers: [
4653
AuthGuard,

‎src/app/chat/chat-detail/chat-detail.component.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
<div class="chat-discussion" #chatMessages >
2-
<div class="chat-message left" *ngFor="let message of arrChatMessages" [class.left]="message.type === 'received'"
3-
[class.right]="message.type === 'sent'">
1+
<div class="chat-discussion" #chatMessages>
2+
<div class="chat-message left" *ngFor="let message of arrChatMessages | async" [class.left]="message.type === 'received'" [class.right]="message.type === 'sent'">
43
<img class="message-avatar" [src]="message.avatar" alt="">
54
<div class="message">
65
<a class="message-author" href="javascript:void(0)"> {{message.Name}} </a>
@@ -10,4 +9,4 @@
109
</span>
1110
</div>
1211
</div>
13-
</div>
12+
</div>

‎src/app/chat/chat-detail/chat-detail.component.ts

+27-18
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
22
import { ActivatedRoute } from '@angular/router';
33
import { ChatService } from '../chat.service';
44

5-
import { Subscription } from 'rxjs/Subscription';
5+
// import { Subscription } from 'rxjs/Subscription';
6+
import { Observable } from 'rxjs/Observable';
7+
import { ChatDetail } from '../models/chat';
8+
import { Store } from '@ngrx/store';
9+
import { AppState } from '../chat-reducer/chat.reducer';
610

711
declare var $: any;
812

@@ -14,32 +18,37 @@ declare var $: any;
1418
export class ChatDetailComponent implements OnInit {
1519

1620
@ViewChild('chatMessages') private chatMessagesContainer: ElementRef;
17-
arrChatMessages: any;
21+
arrChatMessages: Observable<Array<ChatDetail>>;
1822

19-
subscriptionNewMessage: Subscription;
23+
// subscriptionNewMessage: Subscription;
2024

2125
constructor(
22-
private route: ActivatedRoute, private chatService: ChatService
26+
private route: ActivatedRoute, private chatService: ChatService,
27+
private store: Store<AppState>
2328
) {
24-
this.subscriptionNewMessage = this.chatService.getMessageObservable()
25-
.subscribe(message => {
26-
this.arrChatMessages.push(message);
27-
setTimeout(() => {
28-
let ele = $('.chat-discussion'); // document.querySelector('.chat-discussion');
29-
// this.chatMessagesContainer.nativeElement.scrollIntoView(false);
30-
// ele.scrollTo(100, ele.scrollHeight);
31-
ele.animate({ scrollTop: ele.prop('scrollHeight')}, 1000);
32-
}, 1);
33-
34-
// this.chatMessagesContainer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollHeight;
35-
// window.scrollTo(0, document.querySelector('.chat-discussion').scrollHeight);
36-
});
29+
30+
this.arrChatMessages = this.store.select<any>("chatDetailReducer");
31+
32+
33+
// this.subscriptionNewMessage = this.chatService.getMessageObservable()
34+
// .subscribe(message => {
35+
// // this.arrChatMessages.push(message);
36+
// setTimeout(() => {
37+
// let ele = $('.chat-discussion'); // document.querySelector('.chat-discussion');
38+
// // this.chatMessagesContainer.nativeElement.scrollIntoView(false);
39+
// // ele.scrollTo(100, ele.scrollHeight);
40+
// ele.animate({ scrollTop: ele.prop('scrollHeight')}, 1000);
41+
// }, 1);
42+
43+
// // this.chatMessagesContainer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollHeight;
44+
// // window.scrollTo(0, document.querySelector('.chat-discussion').scrollHeight);
45+
// });
3746
}
3847

3948
ngOnInit() {
4049
this.route.params.subscribe(params => {
4150
this.chatService.getdetailedChat(params.id).subscribe((result) => {
42-
this.arrChatMessages = result;
51+
// this.arrChatMessages = result;
4352
}, (error: any) => {
4453
console.log('ChatDetailComponent login fail: ' + error);
4554
});

‎src/app/chat/chat-reducer/chat.action.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Injectable } from '@angular/core';
2+
import { Action } from '@ngrx/store';
3+
4+
import { Chat, ChatDetail } from '../models/chat';
5+
6+
export const ADD_TO_CHAT_CONTACT_LIST = 'ADD_TO_CHAT_CONTACT_LIST';
7+
export const ADD_CHAT_DETAIL_LIST = 'ADD_CHAT_DETAIL_LIST';
8+
export const ADD_MESSAGE_TO_CHAT_DETAIL_LIST = 'ADD_MESSAGE_TO_CHAT_DETAIL_LIST';
9+
// export const DELETE_CHAT = 'DELETE_CHAT';
10+
11+
12+
export class AddToChatContactList implements Action {
13+
readonly type = ADD_TO_CHAT_CONTACT_LIST;
14+
constructor(public params: Chat[]) { }
15+
}
16+
17+
export class AddToChatDetailList implements Action {
18+
readonly type = ADD_CHAT_DETAIL_LIST;
19+
constructor(public params: ChatDetail[]) { }
20+
}
21+
22+
// export class DeleteChat implements Action {
23+
// readonly type = DELETE_CHAT;
24+
// constructor(public params: any) { }
25+
// }
26+
export class AddMessageToChatDetailList implements Action {
27+
readonly type = ADD_MESSAGE_TO_CHAT_DETAIL_LIST;
28+
constructor(public params: any) { }
29+
}
30+
31+
export type All = AddToChatContactList | AddToChatDetailList | AddMessageToChatDetailList;

‎src/app/chat/chat-reducer/chat.reducer.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Chat, ChatDetail } from '../models/chat';
2+
import { ActionReducer, Action } from '@ngrx/store';
3+
import * as ChatActions from './chat.action';
4+
5+
export interface AppState {
6+
chatList: Array<Chat>;
7+
}
8+
9+
/********************
10+
*** This reducer function is for CRUD oprations
11+
**********************/
12+
13+
14+
export type Action = ChatActions.All;
15+
16+
17+
export function chatContactListReducer(
18+
arrChatContactList: Array<Chat>[] = [], action) {
19+
console.log('chatListReducer', arrChatContactList);
20+
21+
switch (action.type) {
22+
23+
24+
case ChatActions.ADD_TO_CHAT_CONTACT_LIST:
25+
return [...arrChatContactList, ...action.params];
26+
27+
// case ChatActions.DELETE_CHAT:
28+
// return arrChatContactList.filter(item => item.id !== action.params.id);
29+
30+
default:
31+
return arrChatContactList;
32+
}
33+
}
34+
35+
36+
export function chatDetailReducer(
37+
arrChatDetail = [], action) {
38+
console.log('chatListReducer', arrChatDetail);
39+
40+
switch (action.type) {
41+
42+
case ChatActions.ADD_CHAT_DETAIL_LIST:
43+
arrChatDetail = Array.from(action.params);
44+
return [...arrChatDetail];
45+
46+
case ChatActions.ADD_MESSAGE_TO_CHAT_DETAIL_LIST:
47+
return [...arrChatDetail, ...action.params];
48+
49+
default:
50+
return arrChatDetail;
51+
}
52+
}

‎src/app/chat/chat.component.html

+5-11
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,7 @@ <h2>Chat view</h2>
4848
<div class="ibox float-e-margins">
4949
<div class="ibox-content">
5050

51-
<strong>Chat room </strong> can be used to create chat
52-
room in your app. You can also use a small chat in
53-
the right corner to provide live discussion.
51+
<strong>Chat room </strong> can be used to create chat room in your app. You can also use a small chat in the right corner to provide live discussion.
5452

5553
</div>
5654
</div>
@@ -62,7 +60,7 @@ <h2>Chat view</h2>
6260
<div class="ibox chat-view">
6361

6462
<div class="ibox-title">
65-
<small class="pull-right text-muted">Last message: Mon Jan 26 2015 - 18:39:23</small> Chat room panel
63+
<small class="pull-right text-muted">Last message: Mon Jan 26 2015 - 18:39:23</small> Chat room panel
6664
</div>
6765

6866
<div class="ibox-content">
@@ -72,8 +70,7 @@ <h2>Chat view</h2>
7270
<div class="chat-users">
7371

7472
<div class="users-list">
75-
<div class="chat-user" *ngFor="let item of chatList" (click)="onClickDetail(item)"
76-
[class.selected]="selectedID === item.id">
73+
<div class="chat-user" *ngFor="let item of chatList | async" (click)="onClickDetail(item)" [class.selected]="selectedID === item.id">
7774
<img class="chat-avatar" [src]="item.avatar" alt="">
7875
<div class="chat-user-name">
7976
<a>{{item.Name}}</a>
@@ -97,10 +94,7 @@ <h2>Chat view</h2>
9794
<div class="col-lg-11 col-chat-txt">
9895
<div class="chat-message-form">
9996
<div class="form-group">
100-
<textarea class="form-control message-input" name="message" placeholder="Enter message text"
101-
formControlName="chatMessage"
102-
(keypress)="keypressHandler($event)"
103-
[(ngModel)]="chatMessage"></textarea>
97+
<textarea class="form-control message-input" name="message" placeholder="Enter message text" formControlName="chatMessage" (keypress)="keypressHandler($event)" [(ngModel)]="chatMessage"></textarea>
10498
</div>
10599
</div>
106100
</div>
@@ -118,4 +112,4 @@ <h2>Chat view</h2>
118112
</div>
119113
</div>
120114
</div>
121-
</div>
115+
</div>

‎src/app/chat/chat.component.ts

+9-3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
55

66
import { ChatService } from './chat.service';
77

8+
import { Observable } from 'rxjs/Observable';
9+
import { Chat } from './models/chat';
10+
import { Store } from '@ngrx/store';
11+
import { AppState } from './chat-reducer/chat.reducer';
812

913
@Component({
1014
selector: 'app-chat',
@@ -13,7 +17,7 @@ import { ChatService } from './chat.service';
1317
})
1418
export class ChatComponent implements OnInit {
1519

16-
chatList: any;
20+
chatList: Observable<Array<Chat>>;
1721
selectedID: any;
1822

1923
chatForm: FormGroup;
@@ -24,8 +28,10 @@ export class ChatComponent implements OnInit {
2428
private route: ActivatedRoute,
2529
private router: Router,
2630
private formBuilder: FormBuilder,
27-
private chatService: ChatService
31+
private chatService: ChatService,
32+
private store: Store<AppState>
2833
) {
34+
this.chatList = this.store.select<any>("chatListReducer");
2935
// this.route.params.subscribe(params => {
3036
// console.log('route param: ', params);
3137
// });
@@ -46,7 +52,7 @@ export class ChatComponent implements OnInit {
4652
this.chatService.getChatList()
4753
.subscribe((result) => {
4854

49-
this.chatList = result;
55+
// this.chatList = result;
5056
console.log(this.chatList);
5157
}, (error: any) => {
5258
console.log('ChatComponent : ' + error);

‎src/app/chat/chat.service.ts

+18-6
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,25 @@ import { Injectable } from '@angular/core';
22
import { Http, Headers, RequestOptions, Response } from '@angular/http';
33
import { Routes, Router } from '@angular/router';
44
import { Observable } from 'rxjs/Observable';
5+
56
import 'rxjs/add/operator/map';
67
import 'rxjs/add/operator/catch';
78
import 'rxjs/add/observable/throw';
89
import 'rxjs/add/operator/do'; // debug
910

1011
import { Subject } from 'rxjs/Subject';
1112

13+
import { Store } from '@ngrx/store';
14+
import { AppState } from './chat-reducer/chat.reducer';
15+
import * as ChatActions from './chat-reducer/chat.action';
16+
1217

1318
@Injectable()
1419
export class ChatService {
1520

1621
private chatSubject = new Subject<any>();
1722

18-
constructor(private httpFactory: Http, private router: Router) { }
23+
constructor(private httpFactory: Http, private router: Router, private store: Store<AppState>) { }
1924

2025
// login(username: string, password: string) {
2126
getChatList() {
@@ -28,8 +33,11 @@ export class ChatService {
2833
return this.httpFactory.get('/assets/mockdata/chat/chat-list.json', options)
2934
.map((res: Response) => {
3035
const body = res.json();
31-
console.log('body ', body);
32-
return body;
36+
console.error('body ', body);
37+
38+
return this.store.dispatch(
39+
new ChatActions.AddToChatContactList(body)
40+
);
3341

3442
});
3543
}
@@ -45,7 +53,9 @@ export class ChatService {
4553
.map((res: Response) => {
4654
const body = res.json();
4755
console.log('body ', body);
48-
return body;
56+
return this.store.dispatch(
57+
new ChatActions.AddToChatDetailList(body)
58+
);
4959
});
5060
}
5161

@@ -57,8 +67,10 @@ export class ChatService {
5767
avatar: '/assets/images/a6.jpg',
5868
date: 'Mar 21 11:44 PM'
5969
};
60-
61-
this.chatSubject.next(msgJson);
70+
return this.store.dispatch(
71+
new ChatActions.AddMessageToChatDetailList(msgJson)
72+
);
73+
// this.chatSubject.next(msgJson);
6274
}
6375

6476
getMessageObservable(): Observable<any> {

‎src/app/chat/models/chat.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export interface Chat {
2+
id: string;
3+
Name: string;
4+
date: string;
5+
avatar: string;
6+
}
7+
8+
export interface ChatDetail {
9+
id: string;
10+
type: string;
11+
message: string;
12+
avatar: string;
13+
date: string;
14+
}

0 commit comments

Comments
 (0)