noti badge
This commit is contained in:
parent
551d901a56
commit
afbd51d8f5
|
@ -46,7 +46,7 @@ import HistoryReadAllByProbeAndTypeReducer from '@overflow/history/redux/reducer
|
||||||
import HistoryTypeReadAllReducer from '@overflow/meta/redux/reducer/history_type_read_all';
|
import HistoryTypeReadAllReducer from '@overflow/meta/redux/reducer/history_type_read_all';
|
||||||
import NotificationReadAllUnconfirmedReducer from '@overflow/notification/redux/reducer/read_all_unconfirmed';
|
import NotificationReadAllUnconfirmedReducer from '@overflow/notification/redux/reducer/read_all_unconfirmed';
|
||||||
import NotificationReadAllReducer from '@overflow/notification/redux/reducer/read_all';
|
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';
|
import AsyncRequest from '@overflow/app/redux/saga/AsyncRequest';
|
||||||
|
|
||||||
|
@ -117,6 +117,7 @@ const reduxConfig: ReduxConfig = {
|
||||||
SensorRegistSensorConfigReducer,
|
SensorRegistSensorConfigReducer,
|
||||||
NotificationReadAllUnconfirmedReducer,
|
NotificationReadAllUnconfirmedReducer,
|
||||||
NotificationReadAllReducer,
|
NotificationReadAllReducer,
|
||||||
|
NotificationReadCountReducer,
|
||||||
],
|
],
|
||||||
sagaWatchers: [
|
sagaWatchers: [
|
||||||
AsyncRequest,
|
AsyncRequest,
|
||||||
|
|
|
@ -9,8 +9,7 @@ import {
|
||||||
Button,
|
Button,
|
||||||
Icon,
|
Icon,
|
||||||
} from 'semantic-ui-react';
|
} 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> {
|
export class LogoBar extends React.Component<any, any> {
|
||||||
|
|
||||||
|
@ -25,11 +24,6 @@ export class LogoBar extends React.Component<any, any> {
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): JSX.Element {
|
public render(): JSX.Element {
|
||||||
let icon =
|
|
||||||
<Menu.Item position='right'>
|
|
||||||
<Icon name='bell'/>
|
|
||||||
<Label color='red'>10</Label>
|
|
||||||
</Menu.Item>;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container fluid style={{ background: '#f8f8f8', 'paddingRight': '7px' }}>
|
<Container fluid style={{ background: '#f8f8f8', 'paddingRight': '7px' }}>
|
||||||
|
@ -40,10 +34,7 @@ export class LogoBar extends React.Component<any, any> {
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|
||||||
|
|
||||||
|
<NotificationBadge />
|
||||||
<Popup trigger={icon} on='click' wide >
|
|
||||||
<Notification />
|
|
||||||
</Popup>
|
|
||||||
|
|
||||||
</Menu>
|
</Menu>
|
||||||
</Container>
|
</Container>
|
||||||
|
|
28
src/ts/@overflow/notification/react/NotificationBadge.tsx
Normal file
28
src/ts/@overflow/notification/react/NotificationBadge.tsx
Normal file
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -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';
|
|
@ -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;
|
|
@ -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;
|
Loading…
Reference in New Issue
Block a user