screen user infor

NguyenPhuongNam99 · Dec 31, 2022 · eb98618 · eb98618
1 parent 84397b2
commit eb98618
Show file tree

Hide file tree

Showing 14 changed files with 473 additions and 96 deletions.
diff --git a/package.json b/package.json
@@ -14,16 +14,19 @@
     "@react-navigation/bottom-tabs": "^6.3.1",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
-    "@reduxjs/toolkit": "^1.8.3",
+    "@reduxjs/toolkit": "^1.9.1",
     "@stripe/stripe-react-native": "^0.14.0",
     "apisauce": "^2.1.5",
     "axios": "^0.27.2",
     "dotenv": "^16.0.3",
+    "formik": "^2.2.9",
+    "lodash": "^4.17.21",
     "react": "17.0.2",
     "react-native": "0.68.2",
     "react-native-background-timer": "^2.4.1",
     "react-native-banner-carousel": "^1.0.3",
     "react-native-config": "^1.4.6",
+    "react-native-image-picker": "^4.10.3",
     "react-native-maps": "^1.0.2",
     "react-native-paper": "^4.12.2",
     "react-native-render-html": "^6.3.4",
@@ -33,7 +36,8 @@
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^9.2.0",
     "react-redux": "^8.0.2",
-    "redux": "^4.2.0"
+    "redux": "^4.2.0",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

diff --git a/src/Utils.tsx b/src/Utils.tsx
@@ -1,5 +1,7 @@
 import {AxiosError} from 'axios';
 import {appConstants} from './constants/const';
+import * as Yup from 'yup';
+
 
 export const createAppError = (type, error, appErrorCode) => {
   if (type === 'APP_ERROR') {
@@ -109,3 +111,15 @@ export const checkColor = (indexValue: number, indexData: number) => {
   }
   return {color: '#242424'};
 };
+
+export const UpdateInforSchema = Yup.object().shape({
+   first_name: Yup.string()
+     .min(2, 'Too Short!')
+     .max(50, 'Too Long!')
+     .required('Required'),
+   last_name: Yup.string()
+     .min(2, 'Too Short!')
+     .max(50, 'Too Long!')
+     .required('Required'),
+   phone_number: Yup.string().required('Required'),
+ });
diff --git a/src/app/store.tsx b/src/app/store.tsx
@@ -1,10 +1,13 @@
 import {configureStore} from '@reduxjs/toolkit';
 import {TypedUseSelectorHook, useDispatch, useSelector} from 'react-redux';
 import scheduleOverviewSlice from '../features/scheduleOverview/scheduleOverviewSlice';
+import LoginSlice from '../features/login/loginSlice';
+
 
 export const store = configureStore({
   reducer: {
     scheduleOverviewSlice: scheduleOverviewSlice,
+    LoginSlice,
   },
 });
 

diff --git a/src/features/detail-ver2/recent-schedule-detail/index.tsx b/src/features/detail-ver2/recent-schedule-detail/index.tsx
@@ -57,26 +57,28 @@ ${item?.item?.item?.description}`,
             <View style={styles.backgroundPosition} />
           </View>
 
-          <View style={styles.blockMap}>
-            <MapView
-              provider={PROVIDER_GOOGLE} // remove if not using Google Maps
-              style={{
-                ...StyleSheet.absoluteFillObject,
-              }}
-              region={{
-                latitude: 21.030653,
-                longitude: 105.84713,
-                latitudeDelta: 0.015,
-                longitudeDelta: 0.0121,
-              }}>
-              <Marker
-                coordinate={{
-                  latitude: 21.030653,
-                  longitude: 105.84713,
+          {item.item.namelat && item.item.namelng && (
+            <View style={styles.blockMap}>
+              <MapView
+                provider={PROVIDER_GOOGLE} // remove if not using Google Maps
+                style={{
+                  ...StyleSheet.absoluteFillObject,
                 }}
-              />
-            </MapView>
-          </View>
+                region={{
+                  latitude: Number(item.item.namelat),
+                  longitude: Number(item.item.namelng),
+                  latitudeDelta: 0.015,
+                  longitudeDelta: 0.0121,
+                }}>
+                <Marker
+                  coordinate={{
+                    latitude: Number(item.item.namelat),
+                    longitude: Number(item.item.namelng),
+                  }}
+                />
+              </MapView>
+            </View>
+          )}
 
           <View style={styles.blockImage}>
             <View style={styles.blockItem}>
@@ -109,7 +111,9 @@ ${item?.item?.item?.description}`,
       </View>
       <View style={styles.blockSubmit}>
         <View style={styles.leftSubmit}>
-          <Text style={styles.colorLeftSubmit}>{item.item.item.price} d/ nguoi</Text>
+          <Text style={styles.colorLeftSubmit}>
+            {item.item.item.price} d/ nguoi
+          </Text>
         </View>
         <View style={styles.rightSubmit}>
           <TouchableOpacity

diff --git a/src/features/homepage/index.tsx b/src/features/homepage/index.tsx
@@ -4,25 +4,19 @@ import {
   View,
   TouchableOpacity,
   Image,
-  FlatList,
   ScrollView,
-  Dimensions,
 } from 'react-native';
 import styles from './styles';
 import Header from './header/Header';
-import images from '../../assets/images';
-import {dataMenuIcon, dataDiscount} from './fake-data/FakeData';
 import TitleBlock from './Title-block/TitleBlock';
 import RecentSchedule from './recent-schedule/RecentSchedule';
 import ListPopularPlace from '../../components/list-popolar-place/ListPopularPlace';
 import ListHotelResort from '../../components/list-hotel-resort';
-import homePageApi from './homepageApi';
 import SpecialExprienceHome from './special-experience-home';
 import {Destination12, dataListPoPularPlace} from './fake-data/FakeData';
 import Carousel from 'react-native-banner-carousel';
 import axios from 'axios';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import RNConfig from 'react-native-config';
 import {Base_Url} from '../../constants/const';
 
 const HomePage = () => {

diff --git a/src/features/homepage/recent-schedule/RecentSchedule.tsx b/src/features/homepage/recent-schedule/RecentSchedule.tsx
@@ -63,7 +63,7 @@ const RecentSchedule: React.FC<TypeRecentSchedule> = ({data}) => {
                     {itemList.item.item.tour_name}
                     <Text style={styles.textColor}>(5 ngày)</Text>
                   </Text>
-                  <Text>Việt Nam</Text>
+                  <Text>{itemList.item.nameCIty}</Text>
                 </View>
                 <View style={styles.bottomBlock}>
                   <View style={styles.bottomLeft}>

diff --git a/src/features/login/index.tsx b/src/features/login/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState} from 'react';
+import React, {useState} from 'react';
 import {
   View,
   Image,
@@ -15,6 +15,8 @@ import Loading from '../../components/loading';
 import axios from 'axios';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import Toast from 'react-native-toast-message';
+import { useAppDispatch } from '../../app/store';
+import { setUserInfor } from './loginSlice';
 
 const Login = () => {
   const navigation = useNavigation();
@@ -23,13 +25,7 @@ const Login = () => {
     password: '',
   });
   const [loadingLogin, setLoadingLogin] = useState(false);
-
-  // const onSubmit = () => {
-  //   _onLogin(data.userName, data.password)
-  //     .then(() => {})
-  //     .catch(err => console.log('err ', err));
-  // };
-
+  const dispatch = useAppDispatch();
 
   const submitForm = async () => {
     try {
@@ -49,7 +45,10 @@ const Login = () => {
           type: 'success',
           text1: 'Đăng nhập thành công 👋',
         });
-        await AsyncStorage.setItem('storage_Key', data?.data?.accesToken);
+
+       await AsyncStorage.setItem('storage_Key', data?.data?.accesToken);
+      //  await AsyncStorage.setItem('usercontact', data?.data);
+        dispatch(setUserInfor(data?.data));
         setTimeout(() => {
           navigation.navigate('BottomTabNavigation' as never);
         }, 1000);
@@ -109,7 +108,6 @@ const Login = () => {
               />
               <TextInput
                 style={styles.input}
-
                 placeholder="Nhập mật khẩu của bạn"
                 placeholderTextColor={'white'}
                 value={data.password}
@@ -135,7 +133,6 @@ const Login = () => {
               </TouchableOpacity>
             </View>
           </View>
-
         </View>
 
         <Image

diff --git a/src/features/login/loginSlice.ts b/src/features/login/loginSlice.ts
@@ -0,0 +1,27 @@
+import {createSlice} from '@reduxjs/toolkit';
+import type {PayloadAction} from '@reduxjs/toolkit';
+
+export interface CounterState {
+  data: Array<any>;
+  name: string;
+}
+
+const initialState: CounterState = {
+  data: [],
+  name: 'Nam',
+};
+
+export const LoginSlice = createSlice({
+  name: 'LoginSlice',
+  initialState,
+  reducers: {
+    setUserInfor: (state, action) => {
+      state.data = action.payload;
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const {setUserInfor} = LoginSlice.actions;
+
+export default LoginSlice.reducer;
diff --git a/src/features/profile/index.tsx b/src/features/profile/index.tsx
@@ -1,14 +1,22 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {Image, SafeAreaView, Text, View, TouchableOpacity} from 'react-native';
 import {styles} from './styles';
 import images from '../../assets/images';
 import AppFeatherIcon from '../../components/icon/AppFeatherIcon';
 import AppFoundation from '../../components/icon/AppFoundation';
 import AppIonicons from '../../components/icon/AppIonicons';
 import {useNavigation} from '@react-navigation/core';
+import {useAppDispatch, useAppSelector} from '../../app/store';
+import _ from 'lodash'
 
 const Profile = () => {
   const navigation = useNavigation();
+  const dispatch = useAppDispatch();
+  const data: any = useAppSelector(state => state.LoginSlice.data);
+  const imageDefault =
+    'https://hri.com.vn/wp-content/uploads/2017/09/default-avatar-ginger-guy.png';
+  console.log('data new', _.isEmpty(data.avatar_url));
+
   return (
     <View style={styles.container}>
       <SafeAreaView style={styles.safeView}>
@@ -19,8 +27,13 @@ const Profile = () => {
       <TouchableOpacity
         style={styles.headerInfo}
         onPress={() => navigation.navigate('InformationProfile' as never)}>
-        <Image source={images.AVARTAR} style={styles.imageAvatar} />
-        <Text>Nguyen Phuong Nam</Text>
+        <Image
+          source={{
+            uri: _.isEmpty(data.avatar_url) ? imageDefault : data.avatar_url,
+          }}
+          style={styles.imageAvatar}
+        />
+        <Text>{_.isEmpty(data.avatar_url) ? 'Fullname User' : data?.first_name + ' ' + data?.last_name}</Text>
       </TouchableOpacity>
       <View style={styles.blockList}>
         <TouchableOpacity style={styles.listView}>