fix load logo

parent e1d5fde1
...@@ -15,7 +15,7 @@ import {Colors} from 'react-native/Libraries/NewAppScreen'; ...@@ -15,7 +15,7 @@ import {Colors} from 'react-native/Libraries/NewAppScreen';
import {Provider} from 'react-redux'; import {Provider} from 'react-redux';
import NoConnection from './src/components/noconnection/NoConnection'; import NoConnection from './src/components/noconnection/NoConnection';
import Main from './src/Main'; import Main from './src/Main';
import {store} from './src/store/store'; import store from './src/app/store';
function App(): React.JSX.Element { function App(): React.JSX.Element {
const isDarkMode = useColorScheme() === 'dark'; const isDarkMode = useColorScheme() === 'dark';
......
module.exports = { module.exports = {
presets: ['module:@react-native/babel-preset'], presets: ['module:@react-native/babel-preset'],
plugins: ['react-native-reanimated/plugin'],
}; };
/* eslint-disable prettier/prettier */
import axiosClient from '../network/axios'; import axiosClient from '../network/axios';
const authAPI = { const authAPI = {
...@@ -10,13 +9,15 @@ const authAPI = { ...@@ -10,13 +9,15 @@ const authAPI = {
requestChangePassword: payload => axiosClient.post('reset-password', payload), requestChangePassword: payload => axiosClient.post('reset-password', payload),
requestAuthenticate: ({username, password}) => { requestAuthenticate: ({username, password}) =>
return axiosClient.post( axiosClient.post(
`authenticate/authenticate?username=${username}&password=${password}`, `authenticate/authenticate?username=${username}&password=${password}`,
); ),
},
requestLogout: ({token}) => axiosClient.post('authenticate/logout', {token}), requestLogout: ({token}) => axiosClient.post('authenticate/logout', {token}),
requestGetMyInfo: () => axiosClient.get('authenticate/getMyInfo'),
requestGetCompanyLogo: () => axiosClient.get('companyInfo'),
}; };
export default authAPI; export default authAPI;
/* eslint-disable prettier/prettier */ import axiosClient from '../network/axios';
import ApiClient from '../network/axios';
const homeAPI = { const homeAPI = {
requestGetQuotation: () => { requestGetQuotation: () => {
return ApiClient.get(`getAllQuote`); return axiosClient.get(`getAllQuote`);
}, },
requestGetRandomQuotation: () => { requestGetRandomQuotation: () => {
return ApiClient.get(`getRandomQuotation`); return axiosClient.get(`getRandomQuotation`);
}, },
requestGetUsersDirectManagers: () => { requestGetUsersDirectManagers: () => {
return ApiClient.get(`myDirectManagers`); return axiosClient.get(`myDirectManagers`);
}, },
requestGetBirthdayUser: ({month, year}) => requestGetBirthdayUser: ({month, year}) =>
ApiClient.get(`users/statistics/birthday?year=${year}'&month=${month}`), axiosClient.get(`users/statistics/birthday?year=${year}&month=${month}`),
}; };
export default homeAPI; export default homeAPI;
...@@ -2,3 +2,4 @@ ...@@ -2,3 +2,4 @@
export const authSelector = state => state.auth; export const authSelector = state => state.auth;
export const homeSelector = state => state.home; export const homeSelector = state => state.home;
export const onLeaveSelector = state => state.onLeave; export const onLeaveSelector = state => state.onLeave;
export const loaderSelector = state => state.loader.isLoading;
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
import React, {useEffect, useState} from 'react'; import React, {memo, useEffect, useState} from 'react';
import { import {
Image, Image,
ImageBackground, ImageBackground,
...@@ -9,12 +9,14 @@ import { ...@@ -9,12 +9,14 @@ import {
import {useDispatch} from 'react-redux'; import {useDispatch} from 'react-redux';
import RootNavigation from '../../navigation/RootNavigation'; import RootNavigation from '../../navigation/RootNavigation';
import api from '../../network/axios'; import api from '../../network/axios';
import {getCompanyInfo} from '../../store/actions/UserAction';
import {APP_NAVIGATE_SCREEN} from '../../utils/constant'; import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
import {IMAGES} from '../../values/images'; import {IMAGES} from '../../values/images';
import styles from './style'; import styles from './style';
import config from '../../config';
import Utils from '../../utils';
import {getCompanyInfo} from '../../screens/authentication/authSlice';
const HeaderComponent = props => { const HeaderComponent = React.memo(() => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [logo, setLogo] = useState(); const [logo, setLogo] = useState();
...@@ -22,13 +24,13 @@ const HeaderComponent = props => { ...@@ -22,13 +24,13 @@ const HeaderComponent = props => {
const navigateHome = () => { const navigateHome = () => {
RootNavigation.navigate(APP_NAVIGATE_SCREEN.HOME); RootNavigation.navigate(APP_NAVIGATE_SCREEN.HOME);
}; };
const getCompanyLogo = async () => { const getCompanyLogo = async () => {
const res = await dispatch(getCompanyInfo()); const res = await dispatch(getCompanyInfo());
if (res.success) { const {success} = Utils.getValues(res, 'payload', false);
const domain = api.getBaseURL(); if (success) {
const {data} = Utils.getValues(res, 'payload', false);
const arr = domain.split('/', 3); setLogo(config.imageEndPoint + data.logo);
setLogo(`https://${arr[arr.length - 1]}${res.data.logo}`);
} }
}; };
useEffect(() => { useEffect(() => {
...@@ -37,37 +39,14 @@ const HeaderComponent = props => { ...@@ -37,37 +39,14 @@ const HeaderComponent = props => {
return ( return (
<SafeAreaView> <SafeAreaView>
<ImageBackground style={styles.container} source={IMAGES.BgHeader}> <ImageBackground style={styles.container} source={IMAGES.BgHeader}>
{/* <TouchableOpacity
style={{ marginLeft: 10, flex: 1 }}
onPress={props.navigation && props.navigation.openDrawer}>
<Image source={IMAGES.IcMenu} style={styles.iconMenu} />
</TouchableOpacity> */}
<TouchableOpacity <TouchableOpacity
onPress={navigateHome} onPress={navigateHome}
style={{flex: 1, alignItems: 'center'}}> style={{flex: 1, alignItems: 'center'}}>
<Image source={{uri: logo}} style={styles.iconLogo} /> <Image source={{uri: logo}} style={styles.iconLogo} />
</TouchableOpacity> </TouchableOpacity>
{/* <View
style={{
flexDirection: 'row',
alignItems: 'center',
flex: 1,
justifyContent: 'flex-end',
}}>
<TouchableOpacity>
<Image source={IMAGES.IcNotification} style={styles.iconBell} />
</TouchableOpacity>
<TouchableOpacity onPress={navigateProfile}>
<Image
source={{ uri: 'https://meu.anawork.com' + userDetails.avatar }}
style={styles.ImgAvatar}
/>
</TouchableOpacity>
</View> */}
</ImageBackground> </ImageBackground>
</SafeAreaView> </SafeAreaView>
); );
}; });
export default HeaderComponent; export default memo(HeaderComponent);
const storageKey = {
AUTH: 'auth',
LANGUAGE: 'language',
};
export default { export default {
apiEndpoint: 'https://gateway.dev.meu-solutions.com/staginganawork/api/', apiEndpoint: 'https://gateway.dev.meu-solutions.com/staginganawork/api/',
//apiEndpoint: 'https://gateway.dev.meu-solutions.com/techport/api/', //apiEndpoint: 'https://gateway.dev.meu-solutions.com/techport/api/',
imageEndPoint: 'https://techmart.meu-solutions.com', imageEndPoint: 'https://gateway.dev.meu-solutions.com/staginganawork',
siteURL: 'https://saigon-business.erp.meu-solutions.com', siteURL: 'https://saigon-business.erp.meu-solutions.com',
ONE_SIGNAL_KEY: '6f4f8bd1-9b43-4067-8175-c0052140e891', ONE_SIGNAL_KEY: '6f4f8bd1-9b43-4067-8175-c0052140e891',
axiosTimeout: 10000, axiosTimeout: 10000,
storageKey,
}; };
...@@ -13,15 +13,14 @@ const axiosClient = axios.create({ ...@@ -13,15 +13,14 @@ const axiosClient = axios.create({
axiosClient.interceptors.request.use(async configAxios => { axiosClient.interceptors.request.use(async configAxios => {
const auth = await Utils.getData(config.storageKey.AUTH); const auth = await Utils.getData(config.storageKey.AUTH);
if (auth.token) { if (auth) {
configAxios.headers.Authorization = `Bearer ${auth.token}`; configAxios.headers.Authorization = `Bearer ${auth}`;
} }
return configAxios; return configAxios;
}); });
axiosClient.interceptors.response.use( axiosClient.interceptors.response.use(
response => { response => {
console.log('response', response);
if (response?.data) { if (response?.data) {
return response.data; return response.data;
} }
......
...@@ -5,6 +5,7 @@ import serviceRequest from '../../app/serviceRequest'; ...@@ -5,6 +5,7 @@ import serviceRequest from '../../app/serviceRequest';
import Utils from '../../utils'; import Utils from '../../utils';
import authAPI from '../../api/authAPI'; import authAPI from '../../api/authAPI';
import config from '../../config';
const initialState = { const initialState = {
banners: [], banners: [],
...@@ -25,7 +26,32 @@ export const authenticate = createAsyncThunk( ...@@ -25,7 +26,32 @@ export const authenticate = createAsyncThunk(
}); });
}, },
); );
export const getMyInfo = createAsyncThunk(
'auth/getMyInfo',
async (data, thunkAPI) => {
return serviceRequest({
dispatch: thunkAPI.dispatch,
serviceMethod: authAPI.requestGetMyInfo,
payload: data,
options: {
skipLoader: false,
},
});
},
);
export const getCompanyInfo = createAsyncThunk(
'auth/requestGetCompanyLogo',
async (data, thunkAPI) => {
return serviceRequest({
dispatch: thunkAPI.dispatch,
serviceMethod: authAPI.requestGetCompanyLogo,
payload: data,
options: {
skipLoader: false,
},
});
},
);
const authSlice = createSlice({ const authSlice = createSlice({
name: 'auth', name: 'auth',
initialState: initialState, initialState: initialState,
...@@ -33,8 +59,16 @@ const authSlice = createSlice({ ...@@ -33,8 +59,16 @@ const authSlice = createSlice({
extraReducers: builder => { extraReducers: builder => {
builder.addCase(authenticate.fulfilled, (state, action) => { builder.addCase(authenticate.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false); const {success} = Utils.getValues(action, 'payload', false);
console.log('authenticate', action);
if (success) { if (success) {
const {token} = Utils.getValues(action, 'payload', false);
Utils.storeData(config.storageKey.AUTH, token);
}
});
builder.addCase(getMyInfo.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false);
if (success) {
const {user} = Utils.getValues(action, 'payload', false);
state.userInfo = user;
} }
}); });
}, },
......
...@@ -5,27 +5,24 @@ import LoginScreen from './LoginScreen'; ...@@ -5,27 +5,24 @@ import LoginScreen from './LoginScreen';
import {useTranslation} from 'react-i18next'; import {useTranslation} from 'react-i18next';
import OneSignal from 'react-native-onesignal'; import OneSignal from 'react-native-onesignal';
import {useDispatch} from 'react-redux'; import {useDispatch, useSelector} from 'react-redux';
import {loaderSelector} from '../../../app/selectors';
import {getMyInfo} from '../../../store/actions/CommonAction'; import {getMyInfo} from '../../../store/actions/CommonAction';
import Utils from '../../../utils';
import {APP_NAVIGATE_SCREEN} from '../../../utils/constant'; import {APP_NAVIGATE_SCREEN} from '../../../utils/constant';
import {ToastMessage} from '../../../utils/MessageUtil';
import {authenticate} from '../authSlice'; import {authenticate} from '../authSlice';
const LoginContainer = props => { const LoginContainer = props => {
// console.log("props: ", props) // console.log("props: ", props)
const dispatch = useDispatch(); const dispatch = useDispatch();
const isLoading = useSelector(loaderSelector);
const {t, i18n} = useTranslation(); const {t, i18n} = useTranslation();
const [loading, setLoading] = useState(false);
const [showPass, setShowPass] = useState(true); const [showPass, setShowPass] = useState(true);
const [userAccount, setUserAccount] = useState({ const [userAccount, setUserAccount] = useState({
username: '', username: '',
password: '', password: '',
}); });
const [showAlert, setShowAlert] = useState({
isError: false,
title: '',
message: '',
});
const navigateToServer = () => { const navigateToServer = () => {
RootNavigation.navigate(APP_NAVIGATE_SCREEN.SERVER); RootNavigation.navigate(APP_NAVIGATE_SCREEN.SERVER);
}; };
...@@ -45,55 +42,55 @@ const LoginContainer = props => { ...@@ -45,55 +42,55 @@ const LoginContainer = props => {
const handleSetAccount = () => { const handleSetAccount = () => {
if ( if (
userAccount.username.length <= 0 || userAccount.username.length === 0 ||
userAccount.username.password <= 0 userAccount.password.length === 0
) { ) {
setLoading(false); ToastMessage({
showAlertError('Hệ thống', 'Xin vui lòng nhập đầy đủ thông tin !!!'); title: 'Hệ thống',
return false; message: 'Xin vui lòng nhập đầy đủ thông tin !!!',
type: 'error',
});
return true;
} }
return true; return false;
}; };
const handleLogin = async () => { const handleLogin = async () => {
try { try {
// setLoading(true); if (handleSetAccount()) return;
if (!handleSetAccount) return;
dispatch( dispatch(
authenticate({ authenticate({
username: 'trangbui%40meu-solutions.com', username: userAccount.username,
password: 'trang12345', password: userAccount.password,
}), }),
).then(response => { ).then(response => {
// AsyncStorageService.putToken(res.token); const {success} = Utils.getValues(response, 'payload', false);
// sendExternalId(); if (success) {
// RootNavigation.navigate(APP_NAVIGATE_SCREEN.MAIN); ToastMessage({
// setLoading(false); title: 'Hệ thống',
message: 'Đăng nhập thành công',
type: 'success',
});
RootNavigation.navigate(APP_NAVIGATE_SCREEN.MAIN);
} else {
ToastMessage({
title: 'Hệ thống',
message: 'Tài khoản và mật khẩu không đúng',
type: 'error',
});
}
}); });
} catch (e) { } catch (e) {
console.log('error login: ', e); console.log('error login: ', e);
showAlertError('Hệ thống', e.toString()); ToastMessage({
// setLoading(false); title: 'Hệ thống',
// alertMessage(e.toString()) message: e.toString(),
type: 'error',
});
} }
}; };
const hideAlert = () => {
setShowAlert({
isError: false,
title: '',
message: '',
});
setLoading(false);
};
const showAlertError = (title, message) => {
setShowAlert({
isError: true,
title: title,
message: message,
});
setLoading(true);
};
const sendExternalId = async () => { const sendExternalId = async () => {
const res = await dispatch(getMyInfo()); const res = await dispatch(getMyInfo());
OneSignal.setExternalUserId(res.user.id, results => { OneSignal.setExternalUserId(res.user.id, results => {
...@@ -103,15 +100,13 @@ const LoginContainer = props => { ...@@ -103,15 +100,13 @@ const LoginContainer = props => {
}); });
}; };
const loginProps = { const loginProps = {
loading, isLoading,
showAlert,
showPass, showPass,
handleLogin, handleLogin,
setShowPass, setShowPass,
userAccount, userAccount,
handleUserName, handleUserName,
handlePassword, handlePassword,
hideAlert,
navigateToServer, navigateToServer,
}; };
return <LoginScreen {...loginProps} />; return <LoginScreen {...loginProps} />;
......
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
import React from 'react'; import React from 'react';
import {useTranslation} from 'react-i18next'; import {useTranslation} from 'react-i18next';
import {Image, SafeAreaView, View} from 'react-native'; import {Image, SafeAreaView, View} from 'react-native';
import Alert from 'react-native-awesome-alerts';
import AppText from '../../../components/AppText'; import AppText from '../../../components/AppText';
import ButtonComponent from '../../../components/ButtonComponent'; import ButtonComponent from '../../../components/ButtonComponent';
import LoadingProgress from '../../../components/LoadingProgress'; import LoadingProgress from '../../../components/LoadingProgress';
...@@ -14,7 +13,7 @@ import {BgIntroduce, IMAGES} from '../../../values/images'; ...@@ -14,7 +13,7 @@ import {BgIntroduce, IMAGES} from '../../../values/images';
import styles from './styles'; import styles from './styles';
const LoginScreen = ({ const LoginScreen = ({
loading, isLoading,
showPass, showPass,
navigateToServer, navigateToServer,
handleLogin, handleLogin,
...@@ -22,8 +21,6 @@ const LoginScreen = ({ ...@@ -22,8 +21,6 @@ const LoginScreen = ({
userAccount, userAccount,
handleUserName, handleUserName,
handlePassword, handlePassword,
showAlert,
hideAlert,
}) => { }) => {
const {t, i18n} = useTranslation(); const {t, i18n} = useTranslation();
return ( return (
...@@ -89,20 +86,8 @@ const LoginScreen = ({ ...@@ -89,20 +86,8 @@ const LoginScreen = ({
<AppText style={{marginLeft: 20}}>2022 @ MeU Solutions, Inc</AppText> <AppText style={{marginLeft: 20}}>2022 @ MeU Solutions, Inc</AppText>
<Image source={BgIntroduce.BgFtStep1} style={styles.bgFullWidth} /> <Image source={BgIntroduce.BgFtStep1} style={styles.bgFullWidth} />
</View> </View>
{loading && <LoadingProgress />} {isLoading && <LoadingProgress />}
</View> </View>
<Alert
show={showAlert.isError}
showProgress={false}
title={showAlert.title}
message={showAlert.message}
closeOnTouchOutside={true}
closeOnHardwareBackPress={false}
showConfirmButton={true}
confirmText="Đóng"
confirmButtonColor="#DD6B55"
onConfirmPressed={hideAlert}
/>
</SafeAreaView> </SafeAreaView>
); );
}; };
......
...@@ -6,18 +6,20 @@ import RootNavigation from '../../../navigation/RootNavigation'; ...@@ -6,18 +6,20 @@ import RootNavigation from '../../../navigation/RootNavigation';
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
import {useTranslation} from 'react-i18next'; import {useTranslation} from 'react-i18next';
import {useDispatch} from 'react-redux'; import {useDispatch} from 'react-redux';
import {getMyInfo} from '../../../store/actions/CommonAction';
import AsyncStorageKeys from '../../../utils/AsyncStorageKeys'; import AsyncStorageKeys from '../../../utils/AsyncStorageKeys';
import {APP_NAVIGATE_SCREEN} from '../../../utils/constant'; import {APP_NAVIGATE_SCREEN} from '../../../utils/constant';
import SplashScreen from './SplashScreen'; import SplashScreen from './SplashScreen';
import Utils from '../../../utils';
import config from '../../../config';
import {getMyInfo} from '../authSlice';
import {resetCache} from '../../../../metro.config';
const SplashContainer = () => { const SplashContainer = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const {t, i18n} = useTranslation(); const {t, i18n} = useTranslation();
const checkAccount = async () => { const checkAccount = async () => {
const token = await AsyncStorage.getItem(AsyncStorageKeys.userToken); const token = await Utils.getData(config.storageKey.AUTH);
const language = await AsyncStorage.getItem(AsyncStorageKeys.Language); const language = await AsyncStorage.getItem(AsyncStorageKeys.Language);
i18n.changeLanguage(language); i18n.changeLanguage(language);
//console.log(i18n.language)
if (token) { if (token) {
RootNavigation.replace(APP_NAVIGATE_SCREEN.MAIN); RootNavigation.replace(APP_NAVIGATE_SCREEN.MAIN);
dispatch(getMyInfo()); dispatch(getMyInfo());
......
...@@ -33,8 +33,7 @@ import styles from './style'; ...@@ -33,8 +33,7 @@ import styles from './style';
import HomeMainView from './template/HomeMainView'; import HomeMainView from './template/HomeMainView';
const HomeContainer = props => { const HomeContainer = props => {
const {userDetails, quotationList, birthdayListInMonth, randomQuotation} = const {userInfo, quotationList, birthdayListInMonth, randomQuotation} = props;
props;
const dispatch = useDispatch(); const dispatch = useDispatch();
const [arrPersonnel, setArrPersonnel] = useState([]); const [arrPersonnel, setArrPersonnel] = useState([]);
...@@ -125,14 +124,13 @@ const HomeContainer = props => { ...@@ -125,14 +124,13 @@ const HomeContainer = props => {
}, },
[birthdayListInMonth], [birthdayListInMonth],
); );
const handleCloseDesBirthday = useCallback(() => { const handleCloseDesBirthday = () =>
setModalVisible({ setModalVisible({
isVisible: false, isVisible: false,
birthdayArr: null, birthdayArr: null,
day: '', day: '',
managerOpenWish: [], managerOpenWish: [],
}); });
}, []);
const OpenURLButton = async () => { const OpenURLButton = async () => {
const supported = await Linking.canOpenURL(supportedURL); const supported = await Linking.canOpenURL(supportedURL);
...@@ -183,7 +181,7 @@ const HomeContainer = props => { ...@@ -183,7 +181,7 @@ const HomeContainer = props => {
const res = await dispatch( const res = await dispatch(
sendNotification( sendNotification(
approver.id, approver.id,
userDetails.id, userInfo.id,
imgArr, imgArr,
'Lời chúc sinh nhật', 'Lời chúc sinh nhật',
wishTxt, wishTxt,
...@@ -253,7 +251,7 @@ const HomeContainer = props => { ...@@ -253,7 +251,7 @@ const HomeContainer = props => {
} }
} }
} }
//console.log({ ...lstBdUser })
const convertArr = Object.assign({}, ...lstBdUser); const convertArr = Object.assign({}, ...lstBdUser);
setArrBdCurrentMonth(convertArr); setArrBdCurrentMonth(convertArr);
} }
...@@ -438,7 +436,7 @@ const HomeContainer = props => { ...@@ -438,7 +436,7 @@ const HomeContainer = props => {
//props //props
const homeProps = { const homeProps = {
userDetails, userInfo,
quotationList, quotationList,
birthdayOfUser, birthdayOfUser,
dataBirthday, dataBirthday,
......
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
export default function homePropsProvider(props) { export default function homePropsProvider(props) {
const { const {
userDetails, userInfo,
quotationList, quotationList,
birthdayOfUser, birthdayOfUser,
dataBirthday, dataBirthday,
...@@ -35,7 +35,7 @@ export default function homePropsProvider(props) { ...@@ -35,7 +35,7 @@ export default function homePropsProvider(props) {
randomQuotation, randomQuotation,
} = props; } = props;
return { return {
userDetails, userInfo,
openView, openView,
openModalHappyBirthday, openModalHappyBirthday,
closeModalHappyBirthday, closeModalHappyBirthday,
...@@ -51,6 +51,14 @@ export default function homePropsProvider(props) { ...@@ -51,6 +51,14 @@ export default function homePropsProvider(props) {
handleOpenDesBirthday, handleOpenDesBirthday,
onCalendarChangeMonth, onCalendarChangeMonth,
}, },
birthdayModalProps: {
modalVisible,
handleCloseDesBirthday,
openModalWishBirthday,
addMoreImgFromGallery,
closeModalWishBirthday,
closeModalHappyBirthday,
},
randomQuotation, randomQuotation,
}; };
} }
...@@ -89,13 +89,8 @@ const homeSlice = createSlice({ ...@@ -89,13 +89,8 @@ const homeSlice = createSlice({
}); });
builder.addCase(getBirthDayUser.fulfilled, (state, action) => { builder.addCase(getBirthDayUser.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false); const {success} = Utils.getValues(action, 'payload', false);
console.log('getBirthDayUser', action);
if (success) { if (success) {
state.birthdayListInMonth = Utils.getValues( state.birthdayListInMonth = Utils.getValues(action, 'payload.data', []);
action,
'payload.data.collection',
[],
);
} }
}); });
}, },
......
/* eslint-disable prettier/prettier */
import React from 'react'; import React from 'react';
import {useSelector} from 'react-redux'; import {useSelector} from 'react-redux';
...@@ -7,14 +6,13 @@ import {authSelector, homeSelector} from '../../app/selectors'; ...@@ -7,14 +6,13 @@ import {authSelector, homeSelector} from '../../app/selectors';
export default function HomeScreen() { export default function HomeScreen() {
const homeSelect = useSelector(homeSelector); const homeSelect = useSelector(homeSelector);
const userDetails = useSelector(authSelector); const authSelect = useSelector(authSelector);
const {isLogin, userLoginInfo} = userDetails; const {userInfo} = authSelect;
const {quotationList, birthdayListInMonth, randomQuotation} = homeSelect; const {quotationList, birthdayListInMonth, randomQuotation} = homeSelect;
const homeScreenProps = { const homeScreenProps = {
isLogin, userInfo,
userLoginInfo,
quotationList, quotationList,
birthdayListInMonth, birthdayListInMonth,
randomQuotation, randomQuotation,
......
/* eslint-disable prettier/prettier */ import React, {memo, useCallback, useMemo, useRef} from 'react';
import React from 'react';
import { import {
Image, Image,
Modal, Modal,
...@@ -13,156 +12,345 @@ import ButtonComponent from '../../../components/ButtonComponent'; ...@@ -13,156 +12,345 @@ import ButtonComponent from '../../../components/ButtonComponent';
import {IMAGES, IconProfile} from '../../../values/images'; import {IMAGES, IconProfile} from '../../../values/images';
import styles from '../style'; import styles from '../style';
import AppText from '../../../components/AppText'; import AppText from '../../../components/AppText';
const BirthdayModal = ({modalVisible}) => { import config from '../../../config';
return ( import BottomSheet from '@gorhom/bottom-sheet';
<Modal animationType="slide" transparent={true} visible={true}> import {GestureHandlerRootView} from 'react-native-gesture-handler';
<View const BirthdayModal = React.memo(
style={{flex: 1, justifyContent: 'flex-end'}} ({
//activeOpacity={0} modalVisible,
//onPress={handleCloseDesBirthday} handleCloseDesBirthday,
> openModalWishBirthday,
<View style={styles.contentContainer}> addMoreImgFromGallery,
<ScrollView> closeModalWishBirthday,
<ButtonComponent closeModalHappyBirthday,
iconSource={IconProfile.IcCloseBlack} }) => {
styleIcon={{width: 20, height: 20}} const bottomSheetRef = useRef(null);
style={{ const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
alignSelf: 'flex-end',
marginRight: 10, return (
marginTop: 10, // <Modal
}} // animationType="slide"
onPress={handleCloseDesBirthday} // transparent={true}
/> // visible={modalVisible.isVisible}>
<AppText style={{color: 'black', fontWeight: 'bold', fontSize: 14}}> // <View
{`Ngày ${modalVisible?.day?.day} tháng ${modalVisible?.day?.month} năm ${modalVisible?.day?.year} 🎉`} // style={{flex: 1, justifyContent: 'flex-end'}}
</AppText> // //activeOpacity={0}
{modalVisible?.birthdayArr?.map((item, index) => ( // //onPress={handleCloseDesBirthday}
<View // >
key={index} // <View style={styles.contentContainer}>
style={[ // <ScrollView>
styles.viewHappyBirthday, // <ButtonComponent
modalVisible?.managerOpenWish[index].enable // iconSource={IconProfile.IcCloseBlack}
? styles.openViewHappyBirthday // styleIcon={{width: 20, height: 20}}
: styles.closeViewHappyBirthday, // style={{
]}> // alignSelf: 'flex-end',
<View // marginRight: 10,
// marginTop: 10,
// }}
// onPress={handleCloseDesBirthday}
// />
// <AppText
// style={{color: 'black', fontWeight: 'bold', fontSize: 14}}>
// {`Ngày ${modalVisible?.day?.day} tháng ${modalVisible?.day?.month} năm ${modalVisible?.day?.year} 🎉`}
// </AppText>
// {modalVisible?.birthdayArr?.map((item, index) => (
// <View
// key={index}
// style={[
// styles.viewHappyBirthday,
// modalVisible?.managerOpenWish[index].enable
// ? styles.openViewHappyBirthday
// : styles.closeViewHappyBirthday,
// ]}>
// <View
// style={{
// flexDirection: 'row',
// justifyContent: 'space-between',
// }}>
// <View style={{flexDirection: 'row'}}>
// <Image
// source={
// item.avatar
// ? {
// uri: config.imageEndPoint + item.avatar,
// }
// : IMAGES.IcAvatarDefault
// }
// style={{width: 40, height: 40}}
// />
// <View style={{paddingLeft: 10}}>
// <AppText
// style={
// styles.txtTitle
// }>{`${item.first_name} ${item.middle_name} ${item.last_name}`}</AppText>
// <AppText>{item.position}</AppText>
// </View>
// </View>
// {!modalVisible?.managerOpenWish[index].enable && (
// <View
// style={{
// justifyContent: 'center',
// alignItems: 'center',
// }}>
// <TouchableOpacity
// onPress={() => openModalWishBirthday(index)}
// style={styles.btnOpenHappyBirthday}>
// <Image
// source={IMAGES.IcOutlineSend}
// style={{width: 10, height: 10}}
// />
// </TouchableOpacity>
// </View>
// )}
// </View>
// {modalVisible?.managerOpenWish[index].enable && (
// <View>
// <View style={{marginTop: 10}}>
// <TextInput
// multiline
// numberOfLines={3}
// placeholder={'Vui lòng nhập lời chúc tại đây'}
// style={{borderWidth: 0.2}}
// />
// {/** suggest wish */}
// <View>
// <ButtonComponent
// style={styles.btnSuggest}
// text={'Chúc bà sinh nhật dui dẻ nha 🌺'}
// textStyle={{color: 'white'}}
// />
// <ButtonComponent
// style={styles.btnSuggest}
// text={'Tuổi mới sinh đẹp nhaaaa 🌺💃'}
// textStyle={{color: 'white'}}
// />
// </View>
// <View style={{flexDirection: 'row'}}>
// {item?.imgArr &&
// item?.imgArr.map((el, position) => {
// return (
// <View key={position} style={{marginRight: 10}}>
// <FastImage
// source={{
// uri: el.uri,
// }}
// style={{
// width: 60,
// height: 60,
// marginTop: 10,
// }}
// />
// </View>
// );
// })}
// {!item.imgArr && (
// <View style={styles.viewAddMoreImg}>
// <ButtonComponent
// iconSource={IMAGES.IcAddMoreImg}
// styleIcon={{height: 25, width: 25}}
// onPress={() => addMoreImgFromGallery(index)}
// />
// </View>
// )}
// </View>
// </View>
// <View
// style={{
// flexDirection: 'row',
// justifyContent: 'space-between',
// marginTop: 10,
// }}>
// <TouchableOpacity
// onPress={() => closeModalWishBirthday(index)}
// style={{alignSelf: 'flex-end'}}>
// <AppText style={{color: 'blue', fontWeight: '600'}}>
// {' '}
// Hủy{' '}
// </AppText>
// </TouchableOpacity>
// <TouchableOpacity
// onPress={() => closeModalHappyBirthday(index)}
// style={{alignSelf: 'flex-end'}}>
// <AppText style={{color: 'blue', fontWeight: '600'}}>
// Gửi
// </AppText>
// </TouchableOpacity>
// </View>
// </View>
// )}
// </View>
// ))}
// </ScrollView>
// </View>
// </View>
// </Modal>
<GestureHandlerRootView>
<BottomSheet
ref={bottomSheetRef}
index={1}
snapPoints={snapPoints}
animateOnMount={true}
enableDynamicSizing={false}>
<View
style={{flex: 1, justifyContent: 'flex-end'}}
//activeOpacity={0}
//onPress={handleCloseDesBirthday}
>
<View style={styles.contentContainer}>
<ScrollView>
<ButtonComponent
iconSource={IconProfile.IcCloseBlack}
styleIcon={{width: 20, height: 20}}
style={{ style={{
flexDirection: 'row', alignSelf: 'flex-end',
justifyContent: 'space-between', marginRight: 10,
}}> marginTop: 10,
<View style={{flexDirection: 'row'}}> }}
<Image onPress={handleCloseDesBirthday}
source={{ />
uri: 'https://meu.anawork.com' + item.avatar, <AppText
}} style={{color: 'black', fontWeight: 'bold', fontSize: 14}}>
style={{width: 40, height: 40}} {`Ngày ${modalVisible?.day?.day} tháng ${modalVisible?.day?.month} năm ${modalVisible?.day?.year} 🎉`}
/> </AppText>
<View style={{paddingLeft: 10}}> {modalVisible?.birthdayArr?.map((item, index) => (
<AppText <View
style={ key={index}
styles.txtTitle style={[
}>{`${item.first_name} ${item.middle_name} ${item.last_name}`}</AppText> styles.viewHappyBirthday,
<AppText>{item.position}</AppText> modalVisible?.managerOpenWish[index].enable
</View> ? styles.openViewHappyBirthday
</View> : styles.closeViewHappyBirthday,
{!modalVisible?.managerOpenWish[index].enable && ( ]}>
<View <View
style={{ style={{
justifyContent: 'center', flexDirection: 'row',
alignItems: 'center', justifyContent: 'space-between',
}}> }}>
<TouchableOpacity <View style={{flexDirection: 'row'}}>
onPress={() => openModalWishBirthday(index)} <Image
style={styles.btnOpenHappyBirthday}> source={
<AppText style={{color: 'blue', fontWeight: '500'}}> item.avatar
Gửi lời chúc ? {
</AppText> uri: config.imageEndPoint + item.avatar,
</TouchableOpacity> }
</View> : IMAGES.IcAvatarDefault
)} }
</View> style={{width: 40, height: 40}}
{modalVisible?.managerOpenWish[index].enable && (
<View>
<View style={{marginTop: 10}}>
<TextInput
multiline
numberOfLines={3}
placeholder={'Vui lòng nhập lời chúc tại đây'}
style={{borderWidth: 0.2}}
/>
{/** suggest wish */}
<View>
<ButtonComponent
style={styles.btnSuggest}
text={'Chúc bà sinh nhật dui dẻ nha 🌺'}
textStyle={{color: 'white'}}
/>
<ButtonComponent
style={styles.btnSuggest}
text={'Tuổi mới sinh đẹp nhaaaa 🌺💃'}
textStyle={{color: 'white'}}
/> />
<View style={{paddingLeft: 10}}>
<AppText
style={
styles.txtTitle
}>{`${item.first_name} ${item.middle_name} ${item.last_name}`}</AppText>
<AppText>{item.position}</AppText>
</View>
</View> </View>
<View style={{flexDirection: 'row'}}> {!modalVisible?.managerOpenWish[index].enable && (
{item?.imgArr && <View
item?.imgArr.map((el, position) => { style={{
return ( justifyContent: 'center',
<View key={position} style={{marginRight: 10}}> alignItems: 'center',
<FastImage }}>
source={{ <TouchableOpacity
uri: el.uri, onPress={() => openModalWishBirthday(index)}
}} style={styles.btnOpenHappyBirthday}>
style={{ <Image
width: 60, source={IMAGES.IcOutlineSend}
height: 60, style={{width: 10, height: 10}}
marginTop: 10, />
}} </TouchableOpacity>
/> </View>
</View> )}
); </View>
})} {modalVisible?.managerOpenWish[index].enable && (
{!item.imgArr && ( <View>
<View style={styles.viewAddMoreImg}> <View style={{marginTop: 10}}>
<TextInput
multiline
numberOfLines={3}
placeholder={'Vui lòng nhập lời chúc tại đây'}
style={{borderWidth: 0.2}}
/>
{/** suggest wish */}
<View>
<ButtonComponent
style={styles.btnSuggest}
text={'Chúc bà sinh nhật dui dẻ nha 🌺'}
textStyle={{color: 'white'}}
/>
<ButtonComponent <ButtonComponent
iconSource={IMAGES.IcAddMoreImg} style={styles.btnSuggest}
styleIcon={{height: 25, width: 25}} text={'Tuổi mới sinh đẹp nhaaaa 🌺💃'}
onPress={() => addMoreImgFromGallery(index)} textStyle={{color: 'white'}}
/> />
</View> </View>
)} <View style={{flexDirection: 'row'}}>
{item?.imgArr &&
item?.imgArr.map((el, position) => {
return (
<View
key={position}
style={{marginRight: 10}}>
<FastImage
source={{
uri: el.uri,
}}
style={{
width: 60,
height: 60,
marginTop: 10,
}}
/>
</View>
);
})}
{!item.imgArr && (
<View style={styles.viewAddMoreImg}>
<ButtonComponent
iconSource={IMAGES.IcAddMoreImg}
styleIcon={{height: 25, width: 25}}
onPress={() => addMoreImgFromGallery(index)}
/>
</View>
)}
</View>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 10,
}}>
<TouchableOpacity
onPress={() => closeModalWishBirthday(index)}
style={{alignSelf: 'flex-end'}}>
<AppText style={{color: 'blue', fontWeight: '600'}}>
{' '}
Hủy{' '}
</AppText>
</TouchableOpacity>
<TouchableOpacity
onPress={() => closeModalHappyBirthday(index)}
style={{alignSelf: 'flex-end'}}>
<AppText style={{color: 'blue', fontWeight: '600'}}>
Gửi
</AppText>
</TouchableOpacity>
</View>
</View> </View>
</View> )}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 10,
}}>
<TouchableOpacity
onPress={() => closeModalWishBirthday(index)}
style={{alignSelf: 'flex-end'}}>
<AppText style={{color: 'blue', fontWeight: '600'}}>
{' '}
Hủy{' '}
</AppText>
</TouchableOpacity>
<TouchableOpacity
onPress={() => closeModalHappyBirthday(index)}
style={{alignSelf: 'flex-end'}}>
<AppText style={{color: 'blue', fontWeight: '600'}}>
Gửi
</AppText>
</TouchableOpacity>
</View>
</View> </View>
)} ))}
</View> </ScrollView>
))} </View>
</ScrollView> </View>
</View> </BottomSheet>
</View> </GestureHandlerRootView>
</Modal> );
); },
}; function areEqual(prevProps, nextProps) {
return prevProps.modalVisible === nextProps.modalVisible;
},
);
export default BirthdayModal; export default memo(BirthdayModal);
/* eslint-disable prettier/prettier */
import React from 'react'; import React from 'react';
import {SafeAreaView, ScrollView, View} from 'react-native'; import {SafeAreaView, ScrollView, View} from 'react-native';
import ButtonComponent from '../../../components/ButtonComponent'; import ButtonComponent from '../../../components/ButtonComponent';
...@@ -8,8 +7,9 @@ import styles from '../style'; ...@@ -8,8 +7,9 @@ import styles from '../style';
import WishListComponent from '../components/WishListComponent'; import WishListComponent from '../components/WishListComponent';
import CalendarBirthday from './subViews/CalendarBirthday'; import CalendarBirthday from './subViews/CalendarBirthday';
import Quotation from './subViews/QuotationList'; import Quotation from './subViews/QuotationList';
import BirthdayModal from '../modals/BirthdayModals';
const HomeMainView = ({ const HomeMainView = ({
userDetails, userInfo,
openView, openView,
openModalHappyBirthday, openModalHappyBirthday,
closeModalHappyBirthday, closeModalHappyBirthday,
...@@ -21,6 +21,7 @@ const HomeMainView = ({ ...@@ -21,6 +21,7 @@ const HomeMainView = ({
openSettingView, openSettingView,
calendarBirthdayProps, calendarBirthdayProps,
randomQuotation, randomQuotation,
birthdayModalProps,
}) => { }) => {
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
...@@ -66,7 +67,7 @@ const HomeMainView = ({ ...@@ -66,7 +67,7 @@ const HomeMainView = ({
{/*wish */} {/*wish */}
{wishList.length > 0 && ( {wishList.length > 0 && (
<WishListComponent <WishListComponent
userDetails={userDetails} userDetails={userInfo}
openView={openView} openView={openView}
openModalHappyBirthday={openModalHappyBirthday} openModalHappyBirthday={openModalHappyBirthday}
closeModalHappyBirthday={closeModalHappyBirthday} closeModalHappyBirthday={closeModalHappyBirthday}
...@@ -75,6 +76,7 @@ const HomeMainView = ({ ...@@ -75,6 +76,7 @@ const HomeMainView = ({
)} )}
</ScrollView> </ScrollView>
)} )}
<BirthdayModal {...birthdayModalProps} />
{openProfileComponent && openProfileComponent} {openProfileComponent && openProfileComponent}
</SafeAreaView> </SafeAreaView>
); );
......
/* eslint-disable prettier/prettier */
import moment from 'moment'; import moment from 'moment';
import React, {memo} from 'react'; import React, {memo} from 'react';
import {Image, TouchableOpacity, View} from 'react-native'; import {Image, TouchableOpacity, View} from 'react-native';
...@@ -16,7 +15,6 @@ const CalendarBirthday = React.memo( ...@@ -16,7 +15,6 @@ const CalendarBirthday = React.memo(
handleOpenDesBirthday, handleOpenDesBirthday,
onCalendarChangeMonth, onCalendarChangeMonth,
}) => { }) => {
console.log('CalendarBirthday');
const today = moment(moment()).format('YYYY-MM-DD'); // Today const today = moment(moment()).format('YYYY-MM-DD'); // Today
return ( return (
<View style={styles.viewContent}> <View style={styles.viewContent}>
...@@ -115,10 +113,7 @@ const CalendarBirthday = React.memo( ...@@ -115,10 +113,7 @@ const CalendarBirthday = React.memo(
); );
}, },
function (prevProps, nextProps) { function (prevProps, nextProps) {
return ( return prevProps.bdUserCurrentMonth === nextProps.bdUserCurrentMonth;
prevProps.birthdayOfUser === nextProps.birthdayOfUser ||
prevProps.bdUserCurrentMonth === nextProps.bdUserCurrentMonth
);
}, },
); );
......
...@@ -14,7 +14,7 @@ const storeData = async (storageKey, value) => { ...@@ -14,7 +14,7 @@ const storeData = async (storageKey, value) => {
const getData = async storageKey => { const getData = async storageKey => {
try { try {
const jsonValue = await AsyncStorage.getItem(storageKey); const jsonValue = await AsyncStorage.getItem(storageKey);
return jsonValue != null ? JSON.parse(jsonValue) : {}; return jsonValue != null ? JSON.parse(jsonValue) : null;
} catch (e) { } catch (e) {
// error reading value // error reading value
} }
......
...@@ -169,6 +169,9 @@ import IconMailGrey from '../assets/icon/icon_mail_grey.png'; ...@@ -169,6 +169,9 @@ import IconMailGrey from '../assets/icon/icon_mail_grey.png';
import IconAddStory from '../assets/icon/icon_add_story.png'; import IconAddStory from '../assets/icon/icon_add_story.png';
import IcCloseGrey from '../assets/icon/icon_close_grey.png'; import IcCloseGrey from '../assets/icon/icon_close_grey.png';
import IcOutlineSend from '../assets/icon/icon_outline_send.png';
import IcAvatarDefault from '../assets/icon/icon_avatar_default.png';
export const IMAGES = { export const IMAGES = {
IcHome, IcHome,
IcHomeFocus, IcHomeFocus,
...@@ -262,7 +265,9 @@ export const IMAGES = { ...@@ -262,7 +265,9 @@ export const IMAGES = {
IcPhoneGrey, IcPhoneGrey,
IconMailGrey, IconMailGrey,
IcCloseGrey, IcCloseGrey,
IcMore IcMore,
IcOutlineSend,
IcAvatarDefault,
}; };
export const BgIntroduce = { export const BgIntroduce = {
BgStep1, BgStep1,
......
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment