notification ing

src/ts/@overflow/app/config/index.ts

@@ -44,6 +44,8 @@ import DiscoveryInfraTargetRegistAllReducer from '@overflow/discovery/redux/redu
 import HistoryReadAllByProbeReducer from '@overflow/history/redux/reducer/read_all_by_probe';
 import HistoryReadAllByProbeAndTypeReducer from '@overflow/history/redux/reducer/read_all_by_probe_and_type';
 import HistoryTypeReadAllReducer from '@overflow/meta/redux/reducer/history_type_read_all';
+import NotificationReadAllUnconfirmedReducer from '@overflow/notification/redux/reducer/read_all_unconfirmed';
+
 
 import AsyncRequest from '@overflow/app/redux/saga/AsyncRequest';
 
@@ -112,6 +114,7 @@ const reduxConfig: ReduxConfig = {
     InfraReadServiceReducer,
     HistoryTypeReadAllReducer,
     SensorRegistSensorConfigReducer,
+    NotificationReadAllUnconfirmedReducer,
   ],
   sagaWatchers: [
     AsyncRequest,

src/ts/@overflow/app/views/layout/LogoBar.tsx

@@ -6,7 +6,7 @@ import {
   Popup,
   Image,
 } from 'semantic-ui-react';
-import { Notification } from '@overflow/commons/react/component/Notification';
+import Notification from '@overflow/notification/react/Notification';
 
 
 export class LogoBar extends React.Component<any, any> {

src/ts/@overflow/commons/react/component/Notification.tsx

@@ -1,72 +0,0 @@
-import * as React from 'react';
-import {
-    Container,
-    List,
-    Header,
-} from 'semantic-ui-react';
-
-export interface Props {
-}
-
-export interface State {
-    list: object[];
-}
-
-export class Notification extends React.Component<Props, State> {
-
-    constructor(props: Props, context: State) {
-        super(props, context);
-        this.state = {
-            list: null,
-        };
-    }
-    public componentWillMount(): void {
-        let tempData = [
-            {
-                'icon': 'github',
-                'header': 'Notification title1',
-                'content': 'Notification content blahblahblahblahblah',
-            },
-            {
-                'icon': 'github',
-                'header': 'Notification title2',
-                'content': 'Notification content2 blahblahblahblahblah',
-            },
-            {
-                'icon': 'github',
-                'header': 'Notification title3',
-                'content': 'Notification content3 blahblahblahblahblahblahblahblahblahblahblahblahblah',
-            },
-        ];
-        this.setState({
-            list: tempData,
-        });
-    }
-
-    public renderItems(): (JSX.Element | JSX.Element[]) {
-        if (this.state.list === null || this.state.list.length === 0) {
-            return <div>No user notifications found. </div>;
-        }
-        return this.state.list.map((item: any, index: number) => (
-            <List.Item key={index}>
-                <List.Icon name={item.icon} size='large' verticalAlign='middle' />
-                <List.Content>
-                    <List.Header as='a'>{item.header}</List.Header>
-                    <List.Description as='a'>{item.content}</List.Description>
-                </List.Content>
-            </List.Item>
-        ));
-    }
-
-    public render(): JSX.Element {
-
-        return (
-            <Container fluid>
-                <Header as='h4' content='User Notifications' />
-                <List divided relaxed>
-                    {this.renderItems()}
-                </List>
-            </Container>
-        );
-    }
-}

src/ts/@overflow/notification/api/model/Notification.ts

@@ -0,0 +1,12 @@
+import Member from '@overflow/member/api/model/Member';
+
+interface Notification {
+    id?: number;
+    createDate?: Date;
+    title?: string;
+    message?: string;
+    member?: Member;
+    confirmDate?: Date;
+}
+
+export default Notification;

src/ts/@overflow/notification/react/Notification.tsx

@@ -0,0 +1,28 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+    NotificationModal,
+    StateProps as StateProps,
+    DispatchProps as DispatchProps,
+} from './components/Notification';
+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 * as readAllUnconfirmedActions from '../redux/action/read_all_unconfirmed';
+
+export function mapStateToProps(state: any, props: StateProps): StateProps {
+    return {
+        notifications: state.notifications,
+    };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
+    return {
+        onReadAllUnconfirmed: (member: Member, pageNo: string, countPerPage: string) => {
+            dispatch(asyncRequestActions.request('NotificationService', 'readAllUnconfirmedByMember',
+                                                 readAllUnconfirmedActions.REQUEST, JSON.stringify(member), pageNo, countPerPage));
+        },
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NotificationModal);
+

src/ts/@overflow/notification/react/components/Notification.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {
+    Container,
+    List,
+    Header,
+} from 'semantic-ui-react';
+import Page from '@overflow/commons/api/model/Page';
+import Member from '@overflow/member/api/model/Member';
+import Notification from '../../api/model/Notification';
+
+export interface StateProps {
+    notifications: Page;
+}
+
+export interface DispatchProps {
+    onReadAllUnconfirmed(member: Member, pageNo: string, countPerPage: string): void;
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class NotificationModal extends React.Component<Props, State> {
+
+    private countPerPage: number = 5;
+    constructor(props: Props, context: State) {
+        super(props, context);
+        this.state = {
+            list: null,
+        };
+    }
+    public componentWillMount(): void {
+        const member = {
+            id: 1,
+        };
+        this.props.onReadAllUnconfirmed(member, String(0), String(this.countPerPage));
+    }
+
+    public renderItems(): (JSX.Element | JSX.Element[]) {
+        if (this.props.notifications === undefined || this.props.notifications.content.length === 0) {
+            return <div>No user notifications found. </div>;
+        }
+        return this.props.notifications.content.map((item: Notification, index: number) => (
+            <List.Item key={index}>
+                 <List.Icon name='bell outline' size='large' verticalAlign='middle' />
+                <List.Content>
+                    <List.Header as='a'>{item.title}</List.Header>
+                    <List.Description as='a'>{item.message}</List.Description>
+                </List.Content>
+            </List.Item>
+        ));
+    }
+
+    public render(): JSX.Element {
+
+        return (
+            <Container fluid>
+                <Header as='h4' content='User Notifications' />
+                <List divided relaxed>
+                    {this.renderItems()}
+                </List>
+            </Container>
+        );
+    }
+}

src/ts/@overflow/notification/redux/action/read_all_unconfirmed.ts

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

src/ts/@overflow/notification/redux/reducer/read_all_unconfirmed.ts

@@ -0,0 +1,24 @@
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+import Page from '@overflow/commons/api/model/Page';
+
+import * as ReadAllUnconfirmedActionTypes from '../action/read_all_unconfirmed';
+import ReadAllUnconfirmedState, { defaultState as ReadAllUnconfirmedDefaultState } from '../state/ReadAllUnconfirmed';
+
+const reducer: ReducersMapObject = {
+  [ReadAllUnconfirmedActionTypes.REQUEST_SUCCESS]:
+  (state: ReadAllUnconfirmedState = ReadAllUnconfirmedDefaultState, action: Action<Page>):
+  ReadAllUnconfirmedState => {
+      return {
+      ...state,
+      notifications: <Page>action.payload,
+    };
+  },
+  [ReadAllUnconfirmedActionTypes.REQUEST_FAILURE]:
+  (state: ReadAllUnconfirmedState = ReadAllUnconfirmedDefaultState, action: Action<Error>):
+  ReadAllUnconfirmedState => {
+    return state;
+  },
+};
+
+export default reducer;

src/ts/@overflow/notification/redux/state/ReadAllUnconfirmed.ts

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