From afbd51d8f5f9d1eef5a278a11967395cf3d0b34f Mon Sep 17 00:00:00 2001 From: insanity Date: Wed, 30 Aug 2017 13:36:10 +0900 Subject: [PATCH] noti badge --- src/ts/@overflow/app/config/index.ts | 3 +- src/ts/@overflow/app/views/layout/LogoBar.tsx | 13 +---- .../notification/react/NotificationBadge.tsx | 28 ++++++++++ .../react/components/NotificationBadge.tsx | 55 +++++++++++++++++++ .../redux/action/read_unconfirmed_count.ts | 7 +++ .../redux/reducer/read_unconfirmed_count.ts | 24 ++++++++ .../redux/state/ReadUnconfirmedCount.ts | 13 +++++ 7 files changed, 131 insertions(+), 12 deletions(-) create mode 100644 src/ts/@overflow/notification/react/NotificationBadge.tsx create mode 100644 src/ts/@overflow/notification/react/components/NotificationBadge.tsx create mode 100644 src/ts/@overflow/notification/redux/action/read_unconfirmed_count.ts create mode 100644 src/ts/@overflow/notification/redux/reducer/read_unconfirmed_count.ts create mode 100644 src/ts/@overflow/notification/redux/state/ReadUnconfirmedCount.ts diff --git a/src/ts/@overflow/app/config/index.ts b/src/ts/@overflow/app/config/index.ts index ff74517..28f99b0 100644 --- a/src/ts/@overflow/app/config/index.ts +++ b/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, diff --git a/src/ts/@overflow/app/views/layout/LogoBar.tsx b/src/ts/@overflow/app/views/layout/LogoBar.tsx index 657f89e..ca8198f 100644 --- a/src/ts/@overflow/app/views/layout/LogoBar.tsx +++ b/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 { @@ -25,11 +24,6 @@ export class LogoBar extends React.Component { } public render(): JSX.Element { - let icon = - - - - ; return ( @@ -40,10 +34,7 @@ export class LogoBar extends React.Component { - - - - + diff --git a/src/ts/@overflow/notification/react/NotificationBadge.tsx b/src/ts/@overflow/notification/react/NotificationBadge.tsx new file mode 100644 index 0000000..8f99096 --- /dev/null +++ b/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): DispatchProps { + return { + onReadUnconfirmedCount: (member: Member) => { + dispatch(asyncRequestActions.request('NotificationService', 'readUnconfirmedCount', + readUnconfirmedCntActions.REQUEST, JSON.stringify(member))); + }, + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(NotificationBadge); + diff --git a/src/ts/@overflow/notification/react/components/NotificationBadge.tsx b/src/ts/@overflow/notification/react/components/NotificationBadge.tsx new file mode 100644 index 0000000..1d70f97 --- /dev/null +++ b/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 { + + 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 = + + + + ; + + return ( + + + + + + ); + } +} diff --git a/src/ts/@overflow/notification/redux/action/read_unconfirmed_count.ts b/src/ts/@overflow/notification/redux/action/read_unconfirmed_count.ts new file mode 100644 index 0000000..73d36f9 --- /dev/null +++ b/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'; diff --git a/src/ts/@overflow/notification/redux/reducer/read_unconfirmed_count.ts b/src/ts/@overflow/notification/redux/reducer/read_unconfirmed_count.ts new file mode 100644 index 0000000..807d34e --- /dev/null +++ b/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): + ReadUnconfirmedState => { + return { + ...state, + count: action.payload, + }; + }, + [ReadCountActionTypes.REQUEST_FAILURE]: + (state: ReadUnconfirmedState = ReadCountDefaultState, action: Action): + ReadUnconfirmedState => { + return state; + }, +}; + +export default reducer; diff --git a/src/ts/@overflow/notification/redux/state/ReadUnconfirmedCount.ts b/src/ts/@overflow/notification/redux/state/ReadUnconfirmedCount.ts new file mode 100644 index 0000000..e9fb40e --- /dev/null +++ b/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;