Move values to redux

src/actions/SignVerifyActions.js

@@ -111,6 +111,18 @@ const verify = (
     }
 };
 
+const inputChange = (name, value): ThunkAction => (dispatch: Dispatch): void => {
+    dispatch({
+        type: SIGN_VERIFY.INPUT_CHANGE,
+        name,
+        value,
+    });
+    dispatch({
+        type: SIGN_VERIFY.TOUCH,
+        name,
+    });
+};
+
 const clear = (): ThunkAction => (dispatch: Dispatch): void => {
     dispatch({
         type: SIGN_VERIFY.CLEAR,
@@ -121,4 +133,5 @@ export default {
     sign,
     verify,
     clear,
+    inputChange,
 };

src/actions/constants/signVerify.js

@@ -1,3 +1,5 @@
 /* @flow */
 export const SIGN_SUCCESS: 'sign__verify__sign__success' = 'sign__verify__sign__success';
+export const INPUT_CHANGE: 'sign__verify__input__change' = 'sign__verify__input__change';
+export const TOUCH: 'sign__verify__input__touch' = 'sign__verify__input__touch';
 export const CLEAR: 'sign__verify__sign__clear' = 'sign__verify__sign__clear';

src/reducers/SignVerifyReducer.js

@@ -1,23 +1,50 @@
 /* @flow */
 import type { Action } from 'flowtype';
-import * as SIGN_VERIFY from '../actions/constants/signVerify';
+import * as SIGN_VERIFY from 'actions/constants/signVerify';
 
 export type State = {
-    signature: string
+    signAddress: string,
+    signMessage: string,
+    signSignature: string,
+    verifyAddress: string,
+    verifyMessage: string,
+    verifySignature: string,
+    touched: Array<String>
 }
 
 export const initialState: State = {
-    signature: '',
+    signAddress: '',
+    signMessage: '',
+    signSignature: '',
+    verifyAddress: '',
+    verifyMessage: '',
+    verifySignature: '',
+    touched: [],
 };
 
 export default (state: State = initialState, action: Action): State => {
     switch (action.type) {
         case SIGN_VERIFY.SIGN_SUCCESS:
             return {
-                ...state,
+                ...initialState,
                 signature: action.signature,
             };
 
+        case SIGN_VERIFY.TOUCH: {
+            if (!state.touched.includes(action.name)) {
+                return {
+                    ...state,
+                    touched: [...state.touched, action.name],
+                };
+            }
+            return state;
+        }
+
+        case SIGN_VERIFY.INPUT_CHANGE: {
+            const changes = { [action.name]: action.value };
+            return { ...state, ...changes };
+        }
+
         case SIGN_VERIFY.CLEAR:
             return {
                 ...initialState,

src/views/Wallet/views/Account/SignVerify/Container.js

@@ -25,7 +25,7 @@ export type Props = StateProps & DispatchProps;
 const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
     wallet: state.wallet,
     selectedAccount: state.selectedAccount,
-    signature: state.signVerifyReducer.signature,
+    signVerify: state.signVerifyReducer,
 });
 
 const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({

src/views/Wallet/views/Account/SignVerify/index.js

@@ -55,61 +55,37 @@ type State = {
 }
 
 class SignVerify extends Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            signMessage: '',
-            verifyAddress: '',
-            verifyMessage: '',
-            verifySignature: '',
-            touched: [],
-        };
-    }
-
-    setTouchedInput = (inputName: string) => {
-        if (!this.state.touched.includes(inputName)) {
-            this.setState(prevState => ({
-                touched: [...prevState.touched, inputName],
-            }));
-        }
-    }
-
-    shouldValidate = (inputName: string) => this.state.touched.includes(inputName)
-
     handleInputChange = (event: SyntheticInputEvent<Text>) => {
-        this.setTouchedInput(event.target.name);
-        this.setState({ [event.target.name]: event.target.value });
-    }
-
-    clearSign =() => {
-        this.setState({
-            signMessage: '',
-        });
-        this.props.signVerifyActions.clear();
-    }
-
-    clearVerify = () => {
-        this.setState({
-            verifyAddress: '',
-            verifyMessage: '',
-            verifySignature: '',
-        });
+        const touched = true;
+        this.props.signVerifyActions.inputChange(
+            event.target.name,
+            event.target.value,
+            touched,
+        );
     }
 
     render() {
         const device = this.props.wallet.selectedDevice;
         const {
-            account,
-            discovery,
-            shouldRender,
-            notification,
+            account, discovery, shouldRender, notification,
         } = this.props.selectedAccount;
         const { type, title, message } = notification;
         if (!device || !account || !discovery || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
         const {
             signVerifyActions,
-            signature,
+            signVerify,
         } = this.props;
+
+        const {
+            signAddress,
+            signMessage,
+            signSignature,
+            verifyAddress,
+            verifyMessage,
+            verifySignature,
+            touched,
+        } = signVerify;
+        console.log(touched);
         return (
             <Content>
                 <Title>Sign & Verify</Title>
@@ -130,7 +106,7 @@ class SignVerify extends Component<Props, State> {
                             <Textarea
                                 topLabel="Message"
                                 name="signMessage"
-                                value={this.state.signMessage}
+                                value={signMessage}
                                 onChange={this.handleInputChange}
                                 rows={4}
                                 maxRows={4}
@@ -141,7 +117,7 @@ class SignVerify extends Component<Props, State> {
                             <Textarea
                                 topLabel="Signature"
                                 name="signSignature"
-                                value={signature}
+                                value={signSignature}
                                 rows={4}
                                 maxRows={4}
                                 maxLength="255"
@@ -150,12 +126,12 @@ class SignVerify extends Component<Props, State> {
                         </Row>
                         <RowButtons>
                             <Button
-                                onClick={this.clearSign}
+                                onClick={this.props.signVerifyActions.clearSign}
                                 isWhite
                             >Clear
                             </Button>
                             <StyledButton
-                                onClick={() => signVerifyActions.sign(account.addressPath, this.state.signMessage)}
+                                onClick={() => signVerifyActions.sign(signAddress, signMessage)}
                             >Sign
                             </StyledButton>
                         </RowButtons>
@@ -165,11 +141,11 @@ class SignVerify extends Component<Props, State> {
                             <Input
                                 topLabel="Address"
                                 name="verifyAddress"
-                                value={this.state.verifyAddress}
+                                value={verifyAddress}
                                 onChange={this.handleInputChange}
                                 type="text"
-                                state={(this.shouldValidate('verifyAddress') && validateAddress(this.state.verifyAddress)) ? 'error' : null}
-                                bottomText={this.shouldValidate('verifyAddress') ? validateAddress(this.state.verifyAddress) : null}
+                                state={(touched.includes('verifyAddress') && validateAddress(verifyAddress)) ? 'error' : null}
+                                bottomText={touched.includes('verifyAddress') ? validateAddress(verifyAddress) : null}
                                 isSmallText
                             />
                         </Row>
@@ -177,7 +153,7 @@ class SignVerify extends Component<Props, State> {
                             <Textarea
                                 topLabel="Message"
                                 name="verifyMessage"
-                                value={this.state.verifyMessage}
+                                value={verifyMessage}
                                 onChange={this.handleInputChange}
                                 rows={4}
                                 maxRows={4}
@@ -188,7 +164,7 @@ class SignVerify extends Component<Props, State> {
                             <Textarea
                                 topLabel="Signature"
                                 name="verifySignature"
-                                value={this.state.verifySignature}
+                                value={verifySignature}
                                 onChange={this.handleInputChange}
                                 rows={4}
                                 maxRows={4}
@@ -197,15 +173,15 @@ class SignVerify extends Component<Props, State> {
                         </Row>
                         <RowButtons>
                             <Button
-                                onClick={this.clearVerify}
+                                onClick={signVerifyActions.clearSign}
                                 isWhite
                             >Clear
                             </Button>
                             <StyledButton
                                 onClick={() => signVerifyActions.verify(
-                                    this.state.verifyAddress,
-                                    this.state.verifyMessage,
-                                    this.state.verifySignature,
+                                    verifyAddress,
+                                    verifyMessage,
+                                    verifySignature,
                                 )}
                             >Verify
                             </StyledButton>