overflow_backup_2018_0455/overflow_app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

noti

Browse Source
This commit is contained in:
insanity 2017-09-28 18:50:50 +09:00
parent 4974336077
commit d0d86877a6
8 changed files with 100 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/ts/@overflow/notification/api/model/Notification.ts
View File

@ -7,6 +7,7 @@ interface Notification {
message?: string;
member?: Member;
confirmDate?: Date;
url?: string;
}
export default Notification;

14
src/ts/@overflow/notification/react/NotificationList.tsx
View File

@ -9,6 +9,9 @@ import * as asyncRequestActions from '@overflow/commons/redux/action/asyncReques
import Member from '@overflow/member/api/model/Member';
import * as readAllActions from '../redux/action/read_all';
import PageParams from '@overflow/commons/api/model/PageParams';
import Notification from '@overflow/notification/api/model/Notification';
import * as readUnconfirmedCntActions from '../redux/action/read_unconfirmed_count';
import * as readActions from '../redux/action/read';
export function mapStateToProps(state: any, props: any): StateProps {
return {
@ -22,6 +25,17 @@ export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
dispatch(asyncRequestActions.request('NotificationService', 'readAllByMember',
readAllActions.REQUEST, JSON.stringify(member), JSON.stringify(pageParams)));
},
onRedirectByUrl: (url: string) => {
dispatch(routerPush(url));
},
onMarkAsRead: (noti: Notification) => {
Promise.all([
dispatch(asyncRequestActions.request('NotificationService', 'markAsRead',
readActions.REQUEST, JSON.stringify(noti))),
dispatch(asyncRequestActions.request('NotificationService', 'readUnconfirmedCount',
readUnconfirmedCntActions.REQUEST, JSON.stringify(noti.member))),
]);
},
};
}

15
src/ts/@overflow/notification/react/NotificationPopup.tsx
View File

@ -7,8 +7,10 @@ import {
import { push as routerPush } from 'react-router-redux';
import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
import Member from '@overflow/member/api/model/Member';
import Notification from '@overflow/notification/api/model/Notification';
import * as readAllUnconfirmedActions from '../redux/action/read_all_unconfirmed';
import * as readUnconfirmedCntActions from '../redux/action/read_unconfirmed_count';
import * as readActions from '../redux/action/read';
import PageParams from '@overflow/commons/api/model/PageParams';
export function mapStateToProps(state: any, props: any): StateProps {
@ -44,6 +46,19 @@ export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
readUnconfirmedCntActions.REQUEST, JSON.stringify(member))),
]);
},
onRedirectByUrl: (url: string) => {
dispatch(routerPush(url));
},
onMarkAsRead: (noti: Notification) => {
// dispatch(asyncRequestActions.request('NotificationService', 'markAsRead',
// readAllUnconfirmedActions.REQUEST, JSON.stringify(noti)));
Promise.all([
dispatch(asyncRequestActions.request('NotificationService', 'markAsRead',
readActions.REQUEST, JSON.stringify(noti))),
dispatch(asyncRequestActions.request('NotificationService', 'readUnconfirmedCount',
readUnconfirmedCntActions.REQUEST, JSON.stringify(noti.member))),
]);
},
};
}

11
src/ts/@overflow/notification/react/components/NotificationList.tsx
View File

@ -16,6 +16,8 @@ export interface StateProps {
export interface DispatchProps {
onReadAll(member: Member, pageParams: PageParams): void;
onRedirectByUrl(url: string): void;
onMarkAsRead(notification: Notification): void;
}
export type Props = StateProps & DispatchProps;
@ -57,7 +59,7 @@ export class NotificationList extends React.Component<Props, State> {
return <div>No user notifications found. </div>;
}
return this.props.notiPage.content.map((noti: Notification, index: number) => (
<Table.Row key={index} active={this.checkRead(noti)}>
<Table.Row key={index} active={this.checkRead(noti)} onClick={this.handleSelect.bind(this, noti)} >
<Table.Cell textAlign={'center'} collapsing>{noti.id}</Table.Cell>
<Table.Cell textAlign={'center'} collapsing>{noti.createDate}</Table.Cell>
<Table.Cell textAlign={'center'} collapsing>{noti.title}</Table.Cell>
@ -75,7 +77,7 @@ export class NotificationList extends React.Component<Props, State> {
return (
<Container fluid>
<Table sortable>
<Table sortable>
<Table.Header>
<SortTableHeaderRow columnMap={colsmap} onHeaderColumnClick={this.handleSort} />
</Table.Header>
@ -84,7 +86,7 @@ export class NotificationList extends React.Component<Props, State> {
{this.renderItems()}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.Row >
<Table.HeaderCell colSpan='4'>
<Pager page={this.props.notiPage} onPageChange={this.handlePaging} />
</Table.HeaderCell>
@ -96,7 +98,8 @@ export class NotificationList extends React.Component<Props, State> {
}
private handleSelect = (selected: Notification) => {
console.log('handleSelect');
this.props.onMarkAsRead(selected);
this.props.onRedirectByUrl(selected.url);
}
private handleSort = (col: string, direction: string) => {
this.sortCol = col;

20
src/ts/@overflow/notification/react/components/NotificationPopup.tsx
View File

@ -20,6 +20,8 @@ export interface DispatchProps {
onRedirectAllNotifications(): void;
onMarkAllAsRead(member: Member, pageParams: PageParams): void;
onMarkAllAsUnread(member: Member, pageParams: PageParams): void;
onRedirectByUrl(url: string): void;
onMarkAsRead(notification: Notification): void;
}
export type Props = StateProps & DispatchProps;
@ -55,7 +57,8 @@ export class NotificationPopup extends React.Component<Props, State> {
return <div>No user notifications found. </div>;
}
return this.props.notifications.content.map((item: Notification, index: number) => (
<List.Item key={index} disabled={item.confirmDate !== null ? true : false} >
<List.Item style={this.handleStyle(item)} key={index}
onClick={this.handleSelect.bind(this, item)} >
<List.Icon name='bell outline' size='large' verticalAlign='middle' />
<List.Content>
<List.Header>{item.title}</List.Header>
@ -65,6 +68,13 @@ export class NotificationPopup extends React.Component<Props, State> {
));
}
private handleStyle(noti: Notification): any {
if(noti.confirmDate === null) {
return {'backgroundColor':'green'};
}
return null;
}
public render(): JSX.Element {
if(!this.state.show) {
return null;
@ -88,6 +98,14 @@ export class NotificationPopup extends React.Component<Props, State> {
);
}
private handleSelect = (noti: Notification): void => {
this.props.onMarkAsRead(noti);
this.props.onRedirectByUrl(noti.url);
this.setState({
show: false,
});
}
private handleMark = (): void => {
const member: Member = {
id: 1,

7
src/ts/@overflow/notification/redux/action/read.ts Normal file
View File

@ -0,0 +1,7 @@
export type REQUEST = '@overflow/notification/read/REQUEST';
export type REQUEST_SUCCESS = '@overflow/notification/read/REQUEST/SUCCESS';
export type REQUEST_FAILURE = '@overflow/notification/read/REQUEST/FAILURE';
export const REQUEST: REQUEST = '@overflow/notification/read/REQUEST';
export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/notification/read/REQUEST/SUCCESS';
export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/notification/read/REQUEST/FAILURE';

24
src/ts/@overflow/notification/redux/reducer/read.ts Normal file
View File

@ -0,0 +1,24 @@
import Action from '@overflow/commons/redux/Action';
import { ReducersMapObject } from 'redux';
import Notification from '@overflow/notification/api/model/Notification';
import * as ReadActionTypes from '../action/read';
import ReadState, { defaultState as ReadDefaultState } from '../state/Read';
const reducer: ReducersMapObject = {
[ReadActionTypes.REQUEST_SUCCESS]:
(state: ReadState = ReadDefaultState, action: Action<Notification>):
ReadState => {
return {
...state,
notification: <Notification>action.payload,
};
},
[ReadActionTypes.REQUEST_FAILURE]:
(state: ReadState = ReadDefaultState, action: Action<Error>):
ReadState => {
return state;
},
};
export default reducer;

13
src/ts/@overflow/notification/redux/state/Read.ts Normal file
View File

@ -0,0 +1,13 @@
import Notification from '@overflow/notification/api/model/Notification';
export interface State {
readonly notification?: Notification;
readonly error?: Error;
}
export const defaultState: State = {
notification: undefined,
error: undefined,
};
export default State;