fix load logo

App.tsx

@@ -15,7 +15,7 @@ import {Colors} from 'react-native/Libraries/NewAppScreen';
 import {Provider} from 'react-redux';
 import NoConnection from './src/components/noconnection/NoConnection';
 import Main from './src/Main';
-import {store} from './src/store/store';
+import store from './src/app/store';
 
 function App(): React.JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';

babel.config.js

 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
 };

package.json

@@ -22,6 +22,7 @@
     "@react-navigation/native-stack": "^6.11.0",
     "@reduxjs/toolkit": "^2.2.7",
     "apisauce": "^3.0.1",
+    "axios": "^1.7.7",
     "formik": "^2.4.6",
     "i18next": "^23.15.1",
     "md5": "^2.3.0",

src/api/authAPI.js

-/* eslint-disable prettier/prettier */
 import axiosClient from '../network/axios';
 
 const authAPI = {
@@ -10,13 +9,15 @@ const authAPI = {
 
   requestChangePassword: payload => axiosClient.post('reset-password', payload),
 
-  requestAuthenticate: ({username, password}) => {
-    return axiosClient.post(
+  requestAuthenticate: ({username, password}) =>
+    axiosClient.post(
       `authenticate/authenticate?username=${username}&password=${password}`,
-    );
-  },
+    ),
 
   requestLogout: ({token}) => axiosClient.post('authenticate/logout', {token}),
+
+  requestGetMyInfo: () => axiosClient.get('authenticate/getMyInfo'),
+  requestGetCompanyLogo: () => axiosClient.get('companyInfo'),
 };
 
 export default authAPI;

src/api/homeAPI.js

-/* eslint-disable prettier/prettier */
-import ApiClient from '../network/axios';
+import axiosClient from '../network/axios';
 
 const homeAPI = {
   requestGetQuotation: () => {
-    return ApiClient.get(`getAllQuote`);
+    return axiosClient.get(`getAllQuote`);
   },
   requestGetRandomQuotation: () => {
-    return ApiClient.get(`getRandomQuotation`);
+    return axiosClient.get(`getRandomQuotation`);
   },
   requestGetUsersDirectManagers: () => {
-    return ApiClient.get(`myDirectManagers`);
+    return axiosClient.get(`myDirectManagers`);
   },
   requestGetBirthdayUser: ({month, year}) =>
-    ApiClient.get(`users/statistics/birthday?year=${year}'&month=${month}`),
+    axiosClient.get(`users/statistics/birthday?year=${year}&month=${month}`),
 };
 
 export default homeAPI;

src/app/selectors.js

@@ -2,3 +2,4 @@
 export const authSelector = state => state.auth;
 export const homeSelector = state => state.home;
 export const onLeaveSelector = state => state.onLeave;
+export const loaderSelector = state => state.loader.isLoading;

src/components/header/HeaderComponent.js

 /* eslint-disable prettier/prettier */
-import React, {useEffect, useState} from 'react';
+import React, {memo, useEffect, useState} from 'react';
 import {
   Image,
   ImageBackground,
@@ -9,12 +9,14 @@ import {
 import {useDispatch} from 'react-redux';
 import RootNavigation from '../../navigation/RootNavigation';
 import api from '../../network/axios';
-import {getCompanyInfo} from '../../store/actions/UserAction';
 import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
 import {IMAGES} from '../../values/images';
 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 [logo, setLogo] = useState();
@@ -22,13 +24,13 @@ const HeaderComponent = props => {
   const navigateHome = () => {
     RootNavigation.navigate(APP_NAVIGATE_SCREEN.HOME);
   };
+
   const getCompanyLogo = async () => {
     const res = await dispatch(getCompanyInfo());
-    if (res.success) {
-      const domain = api.getBaseURL();
-
-      const arr = domain.split('/', 3);
-      setLogo(`https://${arr[arr.length - 1]}${res.data.logo}`);
+    const {success} = Utils.getValues(res, 'payload', false);
+    if (success) {
+      const {data} = Utils.getValues(res, 'payload', false);
+      setLogo(config.imageEndPoint + data.logo);
     }
   };
   useEffect(() => {
@@ -37,37 +39,14 @@ const HeaderComponent = props => {
   return (
     <SafeAreaView>
       <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
           onPress={navigateHome}
           style={{flex: 1, alignItems: 'center'}}>
           <Image source={{uri: logo}} style={styles.iconLogo} />
         </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>
     </SafeAreaView>
   );
-};
+});
 
-export default HeaderComponent;
+export default memo(HeaderComponent);

src/config/index.js

+const storageKey = {
+  AUTH: 'auth',
+  LANGUAGE: 'language',
+};
+
 export default {
   apiEndpoint: 'https://gateway.dev.meu-solutions.com/staginganawork/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',
   ONE_SIGNAL_KEY: '6f4f8bd1-9b43-4067-8175-c0052140e891',
   axiosTimeout: 10000,
+  storageKey,
 };

src/network/axios.js

@@ -13,15 +13,14 @@ const axiosClient = axios.create({
 
 axiosClient.interceptors.request.use(async configAxios => {
   const auth = await Utils.getData(config.storageKey.AUTH);
-  if (auth.token) {
-    configAxios.headers.Authorization = `Bearer ${auth.token}`;
+  if (auth) {
+    configAxios.headers.Authorization = `Bearer ${auth}`;
   }
   return configAxios;
 });
 
 axiosClient.interceptors.response.use(
   response => {
-    console.log('response', response);
     if (response?.data) {
       return response.data;
     }

src/screens/authentication/authSlice.js

@@ -5,6 +5,7 @@ import serviceRequest from '../../app/serviceRequest';
 
 import Utils from '../../utils';
 import authAPI from '../../api/authAPI';
+import config from '../../config';
 
 const initialState = {
   banners: [],
@@ -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({
   name: 'auth',
   initialState: initialState,
@@ -33,8 +59,16 @@ const authSlice = createSlice({
   extraReducers: builder => {
     builder.addCase(authenticate.fulfilled, (state, action) => {
       const {success} = Utils.getValues(action, 'payload', false);
-      console.log('authenticate', action);
       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;
       }
     });
   },

src/screens/authentication/login/LoginContainer.js

@@ -5,27 +5,24 @@ import LoginScreen from './LoginScreen';
 
 import {useTranslation} from 'react-i18next';
 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 Utils from '../../../utils';
 import {APP_NAVIGATE_SCREEN} from '../../../utils/constant';
+import {ToastMessage} from '../../../utils/MessageUtil';
 import {authenticate} from '../authSlice';
 const LoginContainer = props => {
   // console.log("props: ", props)
   const dispatch = useDispatch();
+  const isLoading = useSelector(loaderSelector);
   const {t, i18n} = useTranslation();
 
-  const [loading, setLoading] = useState(false);
   const [showPass, setShowPass] = useState(true);
   const [userAccount, setUserAccount] = useState({
     username: '',
     password: '',
   });
-  const [showAlert, setShowAlert] = useState({
-    isError: false,
-    title: '',
-    message: '',
-  });
-
   const navigateToServer = () => {
     RootNavigation.navigate(APP_NAVIGATE_SCREEN.SERVER);
   };
@@ -45,55 +42,55 @@ const LoginContainer = props => {
 
   const handleSetAccount = () => {
     if (
-      userAccount.username.length <= 0 ||
-      userAccount.username.password <= 0
+      userAccount.username.length === 0 ||
+      userAccount.password.length === 0
     ) {
-      setLoading(false);
-      showAlertError('Hệ thống', 'Xin vui lòng nhập đầy đủ thông tin !!!');
-      return false;
-    }
+      ToastMessage({
+        title: 'Hệ thống',
+        message: 'Xin vui lòng nhập đầy đủ thông tin !!!',
+        type: 'error',
+      });
       return true;
+    }
+    return false;
   };
 
   const handleLogin = async () => {
     try {
-      // setLoading(true);
-      if (!handleSetAccount) return;
+      if (handleSetAccount()) return;
+
       dispatch(
         authenticate({
-          username: 'trangbui%40meu-solutions.com',
-          password: 'trang12345',
+          username: userAccount.username,
+          password: userAccount.password,
         }),
       ).then(response => {
-        // AsyncStorageService.putToken(res.token);
-        // sendExternalId();
-        // RootNavigation.navigate(APP_NAVIGATE_SCREEN.MAIN);
-        // setLoading(false);
+        const {success} = Utils.getValues(response, 'payload', false);
+        if (success) {
+          ToastMessage({
+            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) {
       console.log('error login: ', e);
-      showAlertError('Hệ thống', e.toString());
-      // setLoading(false);
-      // alertMessage(e.toString())
-    }
-  };
-  const hideAlert = () => {
-    setShowAlert({
-      isError: false,
-      title: '',
-      message: '',
+      ToastMessage({
+        title: 'Hệ thống',
+        message: e.toString(),
+        type: 'error',
       });
-    setLoading(false);
+    }
   };
 
-  const showAlertError = (title, message) => {
-    setShowAlert({
-      isError: true,
-      title: title,
-      message: message,
-    });
-    setLoading(true);
-  };
   const sendExternalId = async () => {
     const res = await dispatch(getMyInfo());
     OneSignal.setExternalUserId(res.user.id, results => {
@@ -103,15 +100,13 @@ const LoginContainer = props => {
     });
   };
   const loginProps = {
-    loading,
-    showAlert,
+    isLoading,
     showPass,
     handleLogin,
     setShowPass,
     userAccount,
     handleUserName,
     handlePassword,
-    hideAlert,
     navigateToServer,
   };
   return <LoginScreen {...loginProps} />;

src/screens/authentication/login/LoginScreen.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import {useTranslation} from 'react-i18next';
 import {Image, SafeAreaView, View} from 'react-native';
-import Alert from 'react-native-awesome-alerts';
 import AppText from '../../../components/AppText';
 import ButtonComponent from '../../../components/ButtonComponent';
 import LoadingProgress from '../../../components/LoadingProgress';
@@ -14,7 +13,7 @@ import {BgIntroduce, IMAGES} from '../../../values/images';
 import styles from './styles';
 
 const LoginScreen = ({
-  loading,
+  isLoading,
   showPass,
   navigateToServer,
   handleLogin,
@@ -22,8 +21,6 @@ const LoginScreen = ({
   userAccount,
   handleUserName,
   handlePassword,
-  showAlert,
-  hideAlert,
 }) => {
   const {t, i18n} = useTranslation();
   return (
@@ -89,20 +86,8 @@ const LoginScreen = ({
           <AppText style={{marginLeft: 20}}>2022 @ MeU Solutions, Inc</AppText>
           <Image source={BgIntroduce.BgFtStep1} style={styles.bgFullWidth} />
         </View>
-        {loading && <LoadingProgress />}
+        {isLoading && <LoadingProgress />}
       </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>
   );
 };

src/screens/authentication/splash/SlashContainer.js

@@ -6,18 +6,20 @@ import RootNavigation from '../../../navigation/RootNavigation';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {useTranslation} from 'react-i18next';
 import {useDispatch} from 'react-redux';
-import {getMyInfo} from '../../../store/actions/CommonAction';
 import AsyncStorageKeys from '../../../utils/AsyncStorageKeys';
 import {APP_NAVIGATE_SCREEN} from '../../../utils/constant';
 import SplashScreen from './SplashScreen';
+import Utils from '../../../utils';
+import config from '../../../config';
+import {getMyInfo} from '../authSlice';
+import {resetCache} from '../../../../metro.config';
 const SplashContainer = () => {
   const dispatch = useDispatch();
   const {t, i18n} = useTranslation();
   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);
     i18n.changeLanguage(language);
-    //console.log(i18n.language)
     if (token) {
       RootNavigation.replace(APP_NAVIGATE_SCREEN.MAIN);
       dispatch(getMyInfo());

src/screens/home/HomeContainer.js

@@ -33,8 +33,7 @@ import styles from './style';
 import HomeMainView from './template/HomeMainView';
 
 const HomeContainer = props => {
-  const {userDetails, quotationList, birthdayListInMonth, randomQuotation} =
-    props;
+  const {userInfo, quotationList, birthdayListInMonth, randomQuotation} = props;
   const dispatch = useDispatch();
 
   const [arrPersonnel, setArrPersonnel] = useState([]);
@@ -125,14 +124,13 @@ const HomeContainer = props => {
     },
     [birthdayListInMonth],
   );
-  const handleCloseDesBirthday = useCallback(() => {
+  const handleCloseDesBirthday = () =>
     setModalVisible({
       isVisible: false,
       birthdayArr: null,
       day: '',
       managerOpenWish: [],
     });
-  }, []);
   const OpenURLButton = async () => {
     const supported = await Linking.canOpenURL(supportedURL);
 
@@ -183,7 +181,7 @@ const HomeContainer = props => {
     const res = await dispatch(
       sendNotification(
         approver.id,
-        userDetails.id,
+        userInfo.id,
         imgArr,
         'Lời chúc sinh nhật',
         wishTxt,
@@ -253,7 +251,7 @@ const HomeContainer = props => {
             }
           }
         }
-        //console.log({ ...lstBdUser })
+
         const convertArr = Object.assign({}, ...lstBdUser);
         setArrBdCurrentMonth(convertArr);
       }
@@ -438,7 +436,7 @@ const HomeContainer = props => {
 
   //props
   const homeProps = {
-    userDetails,
+    userInfo,
     quotationList,
     birthdayOfUser,
     dataBirthday,

src/screens/home/homePropsProvider.js

 /* eslint-disable prettier/prettier */
 export default function homePropsProvider(props) {
   const {
-    userDetails,
+    userInfo,
     quotationList,
     birthdayOfUser,
     dataBirthday,
@@ -35,7 +35,7 @@ export default function homePropsProvider(props) {
     randomQuotation,
   } = props;
   return {
-    userDetails,
+    userInfo,
     openView,
     openModalHappyBirthday,
     closeModalHappyBirthday,
@@ -51,6 +51,14 @@ export default function homePropsProvider(props) {
       handleOpenDesBirthday,
       onCalendarChangeMonth,
     },
+    birthdayModalProps: {
+      modalVisible,
+      handleCloseDesBirthday,
+      openModalWishBirthday,
+      addMoreImgFromGallery,
+      closeModalWishBirthday,
+      closeModalHappyBirthday,
+    },
     randomQuotation,
   };
 }

src/screens/home/homeSlice.js

@@ -89,13 +89,8 @@ const homeSlice = createSlice({
     });
     builder.addCase(getBirthDayUser.fulfilled, (state, action) => {
       const {success} = Utils.getValues(action, 'payload', false);
-      console.log('getBirthDayUser', action);
       if (success) {
-        state.birthdayListInMonth = Utils.getValues(
-          action,
-          'payload.data.collection',
-          [],
-        );
+        state.birthdayListInMonth = Utils.getValues(action, 'payload.data', []);
       }
     });
   },

src/screens/home/index.js

-/* eslint-disable prettier/prettier */
 import React from 'react';
 
 import {useSelector} from 'react-redux';
@@ -7,14 +6,13 @@ import {authSelector, homeSelector} from '../../app/selectors';
 
 export default function HomeScreen() {
   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 homeScreenProps = {
-    isLogin,
-    userLoginInfo,
+    userInfo,
     quotationList,
     birthdayListInMonth,
     randomQuotation,

src/screens/home/template/HomeMainView.js

-/* eslint-disable prettier/prettier */
 import React from 'react';
 import {SafeAreaView, ScrollView, View} from 'react-native';
 import ButtonComponent from '../../../components/ButtonComponent';
@@ -8,8 +7,9 @@ import styles from '../style';
 import WishListComponent from '../components/WishListComponent';
 import CalendarBirthday from './subViews/CalendarBirthday';
 import Quotation from './subViews/QuotationList';
+import BirthdayModal from '../modals/BirthdayModals';
 const HomeMainView = ({
-  userDetails,
+  userInfo,
   openView,
   openModalHappyBirthday,
   closeModalHappyBirthday,
@@ -21,6 +21,7 @@ const HomeMainView = ({
   openSettingView,
   calendarBirthdayProps,
   randomQuotation,
+  birthdayModalProps,
 }) => {
   return (
     <SafeAreaView style={styles.container}>
@@ -66,7 +67,7 @@ const HomeMainView = ({
           {/*wish */}
           {wishList.length > 0 && (
             <WishListComponent
-              userDetails={userDetails}
+              userDetails={userInfo}
               openView={openView}
               openModalHappyBirthday={openModalHappyBirthday}
               closeModalHappyBirthday={closeModalHappyBirthday}
@@ -75,6 +76,7 @@ const HomeMainView = ({
           )}
         </ScrollView>
       )}
+      <BirthdayModal {...birthdayModalProps} />
       {openProfileComponent && openProfileComponent}
     </SafeAreaView>
   );

src/screens/home/template/subViews/CalendarBirthday.js

-/* eslint-disable prettier/prettier */
 import moment from 'moment';
 import React, {memo} from 'react';
 import {Image, TouchableOpacity, View} from 'react-native';
@@ -16,7 +15,6 @@ const CalendarBirthday = React.memo(
     handleOpenDesBirthday,
     onCalendarChangeMonth,
   }) => {
-    console.log('CalendarBirthday');
     const today = moment(moment()).format('YYYY-MM-DD'); // Today
     return (
       <View style={styles.viewContent}>
@@ -115,10 +113,7 @@ const CalendarBirthday = React.memo(
     );
   },
   function (prevProps, nextProps) {
-    return (
-      prevProps.birthdayOfUser === nextProps.birthdayOfUser ||
-      prevProps.bdUserCurrentMonth === nextProps.bdUserCurrentMonth
-    );
+    return prevProps.bdUserCurrentMonth === nextProps.bdUserCurrentMonth;
   },
 );
 

src/utils/index.js

@@ -14,7 +14,7 @@ const storeData = async (storageKey, value) => {
 const getData = async storageKey => {
   try {
     const jsonValue = await AsyncStorage.getItem(storageKey);
-    return jsonValue != null ? JSON.parse(jsonValue) : {};
+    return jsonValue != null ? JSON.parse(jsonValue) : null;
   } catch (e) {
     // error reading value
   }

src/values/images.js

@@ -169,6 +169,9 @@ import IconMailGrey from '../assets/icon/icon_mail_grey.png';
 import IconAddStory from '../assets/icon/icon_add_story.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 = {
   IcHome,
   IcHomeFocus,
@@ -262,7 +265,9 @@ export const IMAGES = {
   IcPhoneGrey,
   IconMailGrey,
   IcCloseGrey,
-  IcMore
+  IcMore,
+  IcOutlineSend,
+  IcAvatarDefault,
 };
 export const BgIntroduce = {
   BgStep1,