noti badge

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

@@ -46,7 +46,7 @@ import HistoryReadAllByProbeAndTypeReducer from '@overflow/history/redux/reducer
 import HistoryTypeReadAllReducer from '@overflow/meta/redux/reducer/history_type_read_all';
 import NotificationReadAllUnconfirmedReducer from '@overflow/notification/redux/reducer/read_all_unconfirmed';
 import NotificationReadAllReducer from '@overflow/notification/redux/reducer/read_all';
-
+import NotificationReadCountReducer from '@overflow/notification/redux/reducer/read_unconfirmed_count';
 
 import AsyncRequest from '@overflow/app/redux/saga/AsyncRequest';
 
@@ -117,6 +117,7 @@ const reduxConfig: ReduxConfig = {
     SensorRegistSensorConfigReducer,
     NotificationReadAllUnconfirmedReducer,
     NotificationReadAllReducer,
+    NotificationReadCountReducer,
   ],
   sagaWatchers: [
     AsyncRequest,

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

@@ -9,8 +9,7 @@ import {
   Button,
   Icon,
 } from 'semantic-ui-react';
-import Notification from '@overflow/notification/react/Notification';
-
+import NotificationBadge from '@overflow/notification/react/NotificationBadge';
 
 export class LogoBar extends React.Component<any, any> {
 
@@ -25,11 +24,6 @@ export class LogoBar extends React.Component<any, any> {
   }
 
   public render(): JSX.Element {
-    let icon =
-        <Menu.Item position='right'>
-          <Icon name='bell'/>
-          <Label color='red'>10</Label>
-        </Menu.Item>;
 
     return (
       <Container fluid style={{ background: '#f8f8f8', 'paddingRight': '7px' }}>
@@ -40,10 +34,7 @@ export class LogoBar extends React.Component<any, any> {
           </Menu.Item>
 
 
-
-          <Popup trigger={icon} on='click' wide >
-            <Notification />
-          </Popup>
+          <NotificationBadge />
 
         </Menu>
       </Container>

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

@@ -0,0 +1,28 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+    NotificationBadge,
+    StateProps as StateProps,
+    DispatchProps as DispatchProps,
+} from './components/NotificationBadge';
+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 readUnconfirmedCntActions from '../redux/action/read_unconfirmed_count';
+
+export function mapStateToProps(state: any, props: any): StateProps {
+    return {
+        count: state.count,
+    };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
+    return {
+        onReadUnconfirmedCount: (member: Member) => {
+            dispatch(asyncRequestActions.request('NotificationService', 'readUnconfirmedCount',
+                                                 readUnconfirmedCntActions.REQUEST, JSON.stringify(member)));
+        },
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NotificationBadge);
+

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {
+    Container,
+    Popup,
+    Menu,
+    Icon,
+    Label,
+} from 'semantic-ui-react';
+import Member from '@overflow/member/api/model/Member';
+import Notification from '../Notification';
+
+export interface StateProps {
+    count: number;
+}
+
+export interface DispatchProps {
+    onReadUnconfirmedCount(member: Member): void;
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class NotificationBadge extends React.Component<Props, State> {
+
+    constructor(props: Props, context: State) {
+        super(props, context);
+        this.state = {
+        };
+    }
+    public componentWillMount(): void {
+        const member: Member = {
+            id: 1,
+        };
+        this.props.onReadUnconfirmedCount(member);
+    }
+
+
+    public render(): JSX.Element {
+        let icon =
+            <Menu.Item position='right'>
+                <Icon name='bell' />
+                <Label color='red'>{this.props.count}</Label>
+            </Menu.Item>;
+
+        return (
+            <Container fluid>
+                <Popup trigger={icon} on='click' wide >
+                    <Notification />
+                </Popup>
+            </Container>
+        );
+    }
+}

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

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

src/ts/@overflow/notification/redux/reducer/read_unconfirmed_count.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 ReadCountActionTypes from '../action/read_unconfirmed_count';
+import ReadUnconfirmedState, { defaultState as ReadCountDefaultState } from '../state/ReadUnconfirmedCount';
+
+const reducer: ReducersMapObject = {
+  [ReadCountActionTypes.REQUEST_SUCCESS]:
+  (state: ReadUnconfirmedState = ReadCountDefaultState, action: Action<number>):
+  ReadUnconfirmedState => {
+      return {
+      ...state,
+      count: <number>action.payload,
+    };
+  },
+  [ReadCountActionTypes.REQUEST_FAILURE]:
+  (state: ReadUnconfirmedState = ReadCountDefaultState, action: Action<Error>):
+  ReadUnconfirmedState => {
+    return state;
+  },
+};
+
+export default reducer;

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

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