Kaynağa Gözat

reducer form 1.0

David 9 yıl önce
ebeveyn
işleme
994ad9ffa9

+ 2 - 0
src/Router.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Scene, Router, Actions } from 'react-native-router-flux';
+import RegisterForm from './components/RegisterForm';
 import LoginForm from './components/LoginForm';
 import LiveVideo from './components/LiveVideo';
 import ListaCursadas from './components/ListaCursadas';
@@ -12,6 +13,7 @@ const RouterComponent = () => {
 		<Router sceneStyle={{ paddingTop: 55 }}>
 			<Scene key="auth">
 				<Scene key="login" component={LoginForm} title="Ingresar" initial />
+				<Scene key="register" component={RegisterForm} title="Registrarse" />
 			</Scene>
 
 			<Scene key="main">

+ 11 - 0
src/actions/RegisterActions.js

@@ -0,0 +1,11 @@
+import { Actions } from 'react-native-router-flux';
+import {
+  PROP_CHANGED
+} from './types';
+
+export const propChanged = ({key,val}) => {
+  return {
+    type: PROP_CHANGED,
+    payload: {key,val}
+  };
+};

+ 1 - 0
src/actions/index.js

@@ -1,3 +1,4 @@
 export * from './AuthActions';
 export * from './CursadaActions';
 export * from './ProfActions';
+export * from './RegisterActions';

+ 1 - 0
src/actions/types.js

@@ -7,3 +7,4 @@ export const CURSADA_FETCH_SUCCESS = "cursada_fetch_success";
 export const CURSADAS_FETCH_SUCCESS = "cursadas_fetch_success";
 export const CLASE_FETCH_SUCCESS = "clase_fetch_success";
 export const PROFESOR_FETCH_SUCCESS = "profesor_fetch_success";
+export const PROP_CHANGED = "prop_changed";

+ 12 - 3
src/components/LoginForm.js

@@ -3,6 +3,7 @@ import { Text } from 'react-native';
 import { connect } from 'react-redux';
 import { Card, CardSection, Input, Button, Spinner } from './common';
 import { emailChanged, passwordChanged, loginUser } from '../actions/';
+import { Actions } from 'react-native-router-flux';
 
 class LoginForm extends Component {
 
@@ -14,7 +15,10 @@ class LoginForm extends Component {
     this.props.passwordChanged(text);
   }
 
-  onButtonPress(){
+  onRegisterPress() {
+    Actions.register();
+  }
+  onLoginPress(){
     const { email, password } = this.props;
     this.props.loginUser({ email, password });
   }
@@ -24,8 +28,8 @@ class LoginForm extends Component {
       return <Spinner size="large" />;
     }
     return (
-      <Button onPress={this.onButtonPress.bind(this)}>
-        Login
+      <Button onPress={this.onLoginPress.bind(this)}>
+        Ingresar
       </Button>
     );
   }
@@ -57,6 +61,11 @@ class LoginForm extends Component {
         <CardSection>
           {this.renderButton()}
         </CardSection>
+        <CardSection>
+          <Button onPress={this.onRegisterPress.bind(this)}>
+            Registrarse
+          </Button>
+        </CardSection>
       </Card>
 
     );

+ 72 - 0
src/components/RegisterForm.js

@@ -0,0 +1,72 @@
+import React, { Component} from 'react';
+import { Text, ListView } from 'react-native';
+import { connect } from 'react-redux';
+import { Card, CardSection, Input, Button, Spinner } from './common';
+import { propChanged } from '../actions/';
+import { Actions } from 'react-native-router-flux';
+
+class RegisterForm extends Component {
+
+  onRegisterPress() {
+  //  Actions.register();
+  }
+
+  renderButton() {
+    if (this.props.loading) {
+      return <Spinner size="large" />;
+    }
+    return (
+      <Button onPress={this.onRegisterPress.bind(this)}>
+        Registrar
+      </Button>
+    );
+  }
+
+  renderItem(item) {
+    console.log("renderitem", item);
+    console.log("this", this);
+    return (
+      <CardSection>
+        <Input
+          label={item.key}
+          placeholder={item.placeholder}
+          value={this.props[item.key]}
+          onChangeText={ () => this.props.propChanged({ key: item.key, val: this.props[item.key] }) }
+        />
+      </CardSection>
+    );
+  }
+  render() {
+    return (
+      <Card>
+        { this.renderItem( {key:"email"}) }
+        { this.renderItem( {key:"nombre"}) }
+        { this.renderItem( {key:"apellido"}) }
+
+        <Text style={styles.errorTextStyle}>
+          {this.props.error}
+        </Text>
+        <CardSection>
+          {this.renderButton()}
+        </CardSection>
+      </Card>
+
+    );
+  }
+}
+
+const styles = {
+  errorTextStyle: {
+    fontSize: 20,
+    alignSelf: 'center',
+    color: 'red'
+  }
+}
+
+const mapStateToProps = ({ register }) => {
+  const { email, nombre, password, error, loading } = register;
+  return { email, nombre, password, error, loading };
+};
+
+
+export default connect(mapStateToProps, { propChanged } )(RegisterForm);

+ 27 - 0
src/reducers/RegisterReducer.js

@@ -0,0 +1,27 @@
+import {
+  PROP_CHANGED
+} from '../actions/types';
+
+const INITIAL_STATE = {
+  email: 'davidventura27@gmail.com',
+  nombre: 'David -- !!',
+  apellido: '',
+  pais: '',
+  provincia: '',
+  ciudad: '',
+  direccion: '',
+  tel: '',
+  cel: '',
+  error: '',
+  loading: false
+};
+
+export default (state = INITIAL_STATE, action) => {
+  console.log("reg reducer", action);
+  switch(action.type) {
+    case PROP_CHANGED:
+      return { ...state, [action.payload.key]: action.payload.val };
+    default:
+      return state;
+  }
+};

+ 3 - 1
src/reducers/index.js

@@ -2,9 +2,11 @@ import { combineReducers } from 'redux';
 import AuthReducer from './AuthReducer';
 import CursadaReducer from './CursadaReducer';
 import ProfReducer from './ProfReducer';
+import RegisterReducer from './RegisterReducer';
 
 export default combineReducers({
   auth: AuthReducer,
   cursadasR: CursadaReducer,
-  profR: ProfReducer
+  profR: ProfReducer,
+  register: RegisterReducer
 });