diff --git a/src/ts/@overflow/app/config/index.ts b/src/ts/@overflow/app/config/index.ts index c4e8929..c491900 100644 --- a/src/ts/@overflow/app/config/index.ts +++ b/src/ts/@overflow/app/config/index.ts @@ -7,6 +7,7 @@ import signUpReducer from '@overflow/member/redux/reducer/signUp'; import readAllProbeReducer from '@overflow/probe/redux/reducer/readAllByDomain'; import readProbeReducer from '@overflow/probe/redux/reducer/read'; import hostReadByProbeReducer from '@overflow/probe/redux/reducer/host_read_by_probe'; +import modifyProbeReducer from '@overflow/probe/redux/reducer/modify'; import readNoAuthProbeReducer from '@overflow/noauthprobe/redux/reducer/read_all_by_domain'; import noauthAcceptReducer from '@overflow/noauthprobe/redux/reducer/accept'; @@ -89,6 +90,7 @@ const reduxConfig: ReduxConfig = { hostReadByProbeReducer, noauthAcceptReducer, noauthDenyReducer, + modifyProbeReducer, ], sagaWatchers: [ AsyncRequest, diff --git a/src/ts/@overflow/probe/react/ProbeDetail.tsx b/src/ts/@overflow/probe/react/ProbeDetail.tsx index e47d287..f014631 100644 --- a/src/ts/@overflow/probe/react/ProbeDetail.tsx +++ b/src/ts/@overflow/probe/react/ProbeDetail.tsx @@ -8,6 +8,7 @@ import { push as routerPush } from 'react-router-redux'; import Probe from '@overflow/probe/api/model/Probe'; import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest'; import * as probeReadActions from '../redux/action/read'; +import * as probeModifyActions from '../redux/action/modify'; export function mapStateToProps(state: any, props: any): ProbeDetailStateProps { return { @@ -24,6 +25,9 @@ export function mapDispatchToProps(dispatch: Dispatch): ProbeDetailDispatch onDiscoveryClick: (id: string) => { dispatch(routerPush(id + '/ targets')); }, + onModify: (probe: Probe) => { + dispatch(asyncRequestActions.request('ProbeService', 'modify', probeModifyActions.REQUEST, JSON.stringify(probe))); + }, }; } diff --git a/src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx b/src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx index 21e6d5e..f6ae817 100644 --- a/src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx +++ b/src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx @@ -6,6 +6,10 @@ import { Segment, Header, Container, + Input, + InputOnChangeData, + Loader, + Dimmer, } from 'semantic-ui-react'; import Probe from '@overflow/probe/api/model/Probe'; import { Discovery } from '@overflow/discovery/react/components/Discovery'; @@ -19,12 +23,15 @@ export interface StateProps { export interface DispatchProps { onRead?(id: string): void; - onDiscoveryClick?(id:string):void; + onDiscoveryClick?(id: string): void; + onModify?(probe: Probe): void; } export type Props = StateProps & DispatchProps; export interface State { + name: string; + desc: string; } @@ -33,6 +40,8 @@ export class ProbeDetailInfo extends React.Component { constructor(props: Props, context: State) { super(props, context); this.state = { + name: undefined, + desc: undefined, }; } @@ -55,6 +64,19 @@ export class ProbeDetailInfo extends React.Component { } } + public handleNameModify = () => { + const p: Probe = this.props.probe; + p.displayName = this.state.name; + this.props.onModify(p); + } + + public handleDescModify = () => { + let p: Probe = this.props.probe; + p.description = this.state.desc; + this.props.onModify(p); + } + + public render(): JSX.Element { if (this.props.probe === undefined) { return null; @@ -67,7 +89,13 @@ export class ProbeDetailInfo extends React.Component {
Name
- {this.props.probe.displayName} + + , data: InputOnChangeData) => { + this.setState({ name: data.value }); + }} /> + @@ -103,7 +131,13 @@ export class ProbeDetailInfo extends React.Component {
Description
- {this.props.probe.description} + + , data: InputOnChangeData) => { + this.setState({ desc: data.value }); + }} /> +
diff --git a/src/ts/@overflow/probe/redux/action/modify.ts b/src/ts/@overflow/probe/redux/action/modify.ts new file mode 100644 index 0000000..d1136db --- /dev/null +++ b/src/ts/@overflow/probe/redux/action/modify.ts @@ -0,0 +1,7 @@ +export type REQUEST = '@overflow/probe/modify/REQUEST'; +export type REQUEST_SUCCESS = '@overflow/probe/modify/REQUEST/SUCCESS'; +export type REQUEST_FAILURE = '@overflow/probe/modify/REQUEST/FAILURE'; + +export const REQUEST: REQUEST = '@overflow/probe/modify/REQUEST'; +export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/probe/modify/REQUEST/SUCCESS'; +export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/probe/modify/REQUEST/FAILURE'; diff --git a/src/ts/@overflow/probe/redux/payload/ModifyPayload.ts b/src/ts/@overflow/probe/redux/payload/ModifyPayload.ts new file mode 100644 index 0000000..3bbebca --- /dev/null +++ b/src/ts/@overflow/probe/redux/payload/ModifyPayload.ts @@ -0,0 +1,7 @@ +import Probe from '../../api/model/Probe'; + +interface ModifyPayload { + probe: Probe; +} + +export default ModifyPayload; diff --git a/src/ts/@overflow/probe/redux/reducer/modify.ts b/src/ts/@overflow/probe/redux/reducer/modify.ts new file mode 100644 index 0000000..6f280de --- /dev/null +++ b/src/ts/@overflow/probe/redux/reducer/modify.ts @@ -0,0 +1,24 @@ +import Action from '@overflow/commons/redux/Action'; +import { ReducersMapObject } from 'redux'; +import Probe from '@overflow/probe/api/model/Probe'; + +import * as ModifyActionTypes from '../action/modify'; +import ModifyState, { defaultState as modifyDefaultState } from '../state/Modify'; + +const reducer: ReducersMapObject = { + [ModifyActionTypes.REQUEST_SUCCESS]: + (state: ModifyState = modifyDefaultState, action: Action): + ModifyState => { + return { + ...state, + probe: action.payload, + }; + }, + [ModifyActionTypes.REQUEST_FAILURE]: + (state: ModifyState = modifyDefaultState, action: Action): + ModifyState => { + return state; + }, +}; + +export default reducer; diff --git a/src/ts/@overflow/probe/redux/state/Modify.ts b/src/ts/@overflow/probe/redux/state/Modify.ts new file mode 100644 index 0000000..04e63a7 --- /dev/null +++ b/src/ts/@overflow/probe/redux/state/Modify.ts @@ -0,0 +1,13 @@ +import Probe from '../../api/model/Probe'; + +export interface State { + readonly probe?: Probe; + readonly error?: Error; +} + +export const defaultState: State = { + probe: undefined, + error: undefined, +}; + +export default State;