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/app/views/layout/TitleBar.tsx b/src/ts/@overflow/app/views/layout/TitleBar.tsx index bca1e7a..953a128 100644 --- a/src/ts/@overflow/app/views/layout/TitleBar.tsx +++ b/src/ts/@overflow/app/views/layout/TitleBar.tsx @@ -96,41 +96,34 @@ export class TitleBar extends React.Component { } public handleBreadcrumb = (path: string) => { - console.log(path); + if(path === '/probe' || path === '/sensor' || path === '/target') { + path = path + 's'; + } this.props.onRedirect(path); } + // temporary public renderBreadcrumb(): JSX.Element[] { - - let options = [ - { - text: 'Probes', - value: 'probes', - }, - { - text: 'Targets', - value: 'targets', - }, - { - text: 'Sensors', - value: 'sensors', - }, - ]; - let elems: JSX.Element[] = new Array(); let pathArr = this.props.location.split('/'); let index: number = 0; - + let path = ''; for (let item of pathArr) { - if (item !== '' && !item.match(/^\d+$/)) { - let path = '/' + item; - elems.push( - - {this.capitalizeFirst(item)} - {/* */} - ); - elems.push(); + if (item !== '') { + path = path + '/' + item; + if (pathArr[pathArr.length - 1] !== item) { + elems.push( + + {this.capitalizeFirst(item)} + ); + elems.push(); + } else { + elems.push( + + {this.capitalizeFirst(item)} + ); + } } } return elems; @@ -144,7 +137,7 @@ export class TitleBar extends React.Component { Home - + {this.renderBreadcrumb()} 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;