connect api

index.js

@@ -5,6 +5,5 @@
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
-import Payment from './src/Screens/Payment/Payment';
 
-AppRegistry.registerComponent(appName, () => Payment);
+AppRegistry.registerComponent(appName, () => App);

src/Screens/Authen/Login.js

@@ -15,33 +15,53 @@ import R from '../../assets/R';
 import {useNavigation} from '@react-navigation/native';
 import {TABNAVIGATOR, FORGOTPASSWORD} from '../../routers/ScreenNames';
 import {checkFormatArray} from '../../Config/Functions';
+import {loginApi} from '../../apis/Functions/users';
+import KEY from '../../assets/AsynStorage';
+import AsyncStorage from '@react-native-community/async-storage';
+import {showLoading, hideLoading} from '../../actions/loadingAction';
+import {saveUserToRedux} from '../../actions/users';
+import {connect} from 'react-redux';
 
 const Login = (props) => {
   const {navigation} = props;
 
-  const [email, setEmail] = useState('');
-  const [pass, setPass] = useState('');
+  const [email, setEmail] = useState('Tdgiang@dcv.vn');
+  const [pass, setPass] = useState('123456');
 
   const navigate = useNavigation();
 
-  const onSubmitLogin = () => {
+  const onSubmitLogin = async () => {
+    props.showLoading();
+    const titles = ['tên đăng nhập', 'mật khẩu'];
+    const index = checkFormatArray([email, pass]);
+
+    if (index === true) {
+      console.log('OK');
+      const firebase = await AsyncStorage.getItem(KEY.FIREBASE);
+
+      const res = await loginApi({
+        email,
+        password: pass,
+        platform: Platform.OS,
+        device_token: firebase,
+        account_type: 'CUSTOMER',
+      });
+
+      console.log(res.data);
+      props.hideLoading();
+      if (res.data.code == 200 && res.data.data) {
+        AsyncStorage.setItem(KEY.TOKEN, res.data.data.token);
+        props.saveUserToRedux(res.data.data);
         navigate.reset({
           index: 1,
           routes: [{name: TABNAVIGATOR}],
         });
-    // const titles = ['tên đăng nhập', 'mật khẩu'];
-    // const index = checkFormatArray([email, pass]);
-    // console.log(index);
-
-    // if (index === true) {
-    //   console.log('OK');
-    //   navigate.reset({
-    //     index: 1,
-    //     routes: [{name: TABNAVIGATOR}],
-    //   });
-    // } else {
-    //   Alert.alert('Thông báo!', 'Vui lòng điền ' + titles[index]);
-    // }
+      } else {
+        Alert.alert('Thông báo!', res.data.message);
+      }
+    } else {
+      Alert.alert('Thông báo!', 'Vui lòng điền ' + titles[index]);
+    }
   };
 
   return (
@@ -134,4 +154,11 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Login;
+const mapStateToProps = (state) => {
+  return {};
+};
+export default connect(mapStateToProps, {
+  showLoading,
+  hideLoading,
+  saveUserToRedux,
+})(Login);

src/Screens/Authen/Registor.js

 import React, {useState} from 'react';
-import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+  Alert,
+} from 'react-native';
 import InputIcon from '../../components/Input/InputIcon';
 import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
 import R from '../../assets/R';
-import {useForm, Controller} from 'react-hook-form';
+import {checkFormatArray} from '../../Config/Functions';
+import {showLoading, hideLoading} from '../../actions/loadingAction';
+import {connect} from 'react-redux';
+import {registorApi} from '../../apis/Functions/users';
 
 const Registor = (props) => {
   const {navigation} = props;
-  const {control, handleSubmit, errors} = useForm();
-  const onSubmit = (data) => console.log(data);
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [password_confirmation, setPasswordConfirm] = useState('');
+
+  const registorClick = async () => {
+    props.showLoading();
+    const titles = ['email', 'mật khẩu', 'xác nhận mật khẩu'];
+    const index = checkFormatArray([email, password, password_confirmation]);
+
+    if (index === true) {
+      const res = await registorApi({
+        email,
+        password,
+        platform: Platform.OS,
+        password_confirmation,
+      });
+      if (res.data.code == 200 && res.data.data) {
+        Alert.alert('Đăng ký tài khoản thành công!');
+        navigation.navigate('LOGIN');
+      } else {
+        Alert.alert('Thông báo!', res.data.message);
+      }
+    } else {
+      Alert.alert('Thông báo!', 'Vui lòng điền ' + titles[index]);
+    }
+    props.hideLoading();
+  };
 
   return (
     <View
@@ -29,11 +65,15 @@ const Registor = (props) => {
         icon={R.images.iconLock}
         title={'Mật khẩu'}
         placeholder={'Nhập mật khẩu'}
+        onChangeText={(val) => setPassword(val)}
+        isPassWord={true}
       />
       <InputIcon
         icon={R.images.iconLock}
         title={'Nhập lại mật khẩu'}
         placeholder={'Nhập mật khẩu'}
+        onChangeText={(val) => setPasswordConfirm(val)}
+        isPassWord={true}
       />
 
       <View
@@ -42,10 +82,10 @@ const Registor = (props) => {
 
           alignItems: 'center',
         }}>
-        <View style={styles.wrapLogin}>
+        <TouchableOpacity onPress={registorClick} style={styles.wrapLogin}>
           <Text style={styles.txtLogin}>Đăng ký</Text>
           <Image source={R.images.iconRight1} style={styles.imgIcon} />
-        </View>
+        </TouchableOpacity>
 
         <View style={styles.row}>
           <Text style={styles.txtTitle}>Bạn đã có tài khoản?</Text>
@@ -99,4 +139,10 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Registor;
+const mapStateToProps = (state) => {
+  return {};
+};
+export default connect(mapStateToProps, {
+  showLoading,
+  hideLoading,
+})(Registor);

src/Screens/Home/Home.js

 import React from 'react';
+import {connect} from 'react-redux';
 
 import HomeView from './HomeView';
 
-const Home = props => {
+const Home = (props) => {
+  console.log('Information in home', props.user);
   return <HomeView />;
 };
 
-export default Home;
+const mapStateToProps = (state) => {
+  return {
+    user: state.userReducer,
+  };
+};
+export default connect(mapStateToProps, {})(Home);

src/apis/Functions/users.js

@@ -7,6 +7,11 @@ export const loginApi = async (body) =>
     .then((res) => res)
     .catch((err) => err);
 
+export const registorApi = async (body) =>
+  PostLogin(url.urlRegistor, body)
+    .then((res) => res)
+    .catch((err) => err);
+
 export const logoutApi = async (body) =>
   PostData('http://api.dcvinvest.com/api/auth/logout', body)
     .then((res) => res)

src/apis/url.js

-import {NetworkSetting} from '../config/Setting';
-
 const root = 'http://api.dcvinvest.com/';
 export default {
   urllogin: root + '/api/auth/customer-login',
+  urlRegistor: root + 'api/auth/customer-register',
 };

src/components/Input/InputIcon.js

@@ -4,7 +4,15 @@ import R from '../../assets/R';
 import {WIDTHXD, HEIGHTXD, getFontXD} from '../../Config/Functions';
 
 const InputIcon = (props) => {
-  const {title, placeholder, icon, onChangeText, maxLength, isPassWord} = props;
+  const {
+    title,
+    placeholder,
+    icon,
+    onChangeText,
+    maxLength,
+    isPassWord,
+    value,
+  } = props;
   const {wrapLeft, wrapRight, container, iconImg, txtInput} = styles;
   return (
     <View style={container}>
@@ -18,6 +26,7 @@ const InputIcon = (props) => {
           placeholderTextColor={R.colors.placeHolder}
           placeholder={placeholder}
           secureTextEntry={isPassWord}
+          value={value}
         />
       </View>
     </View>