add restart app

package-lock.json

@@ -45,6 +45,7 @@
         "react-native-pie-chart": "^3.0.2",
         "react-native-reanimated": "^3.15.3",
         "react-native-responsive-screen": "^1.4.2",
+        "react-native-restart": "^0.0.27",
         "react-native-safe-area-context": "^4.11.0",
         "react-native-screens": "^3.34.0",
         "react-native-select-dropdown": "^4.0.1",
@@ -9597,6 +9598,16 @@
         "react-native": ">=0.35"
       }
     },
+    "node_modules/react-native-restart": {
+      "version": "0.0.27",
+      "resolved": "https://registry.npmjs.org/react-native-restart/-/react-native-restart-0.0.27.tgz",
+      "integrity": "sha512-8KScVICrXwcTSJ1rjWkqVTHyEKQIttm5AIMGSK1QG1+RS5owYlE4z/1DykOTdWfVl9l16FIk0w9Xzk9ZO6jxlA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.11.0",
       "license": "MIT",

package.json

@@ -47,6 +47,7 @@
     "react-native-pie-chart": "^3.0.2",
     "react-native-reanimated": "^3.15.3",
     "react-native-responsive-screen": "^1.4.2",
+    "react-native-restart": "^0.0.27",
     "react-native-safe-area-context": "^4.11.0",
     "react-native-screens": "^3.34.0",
     "react-native-select-dropdown": "^4.0.1",

src/api/profileAPI.js

 import axiosClient from '../network/axios';
+import axiosFormData from '../network/axiosFormData';
 export default {
   requestChangeUserInfo: ({id, body}) => axiosClient.put(`users/${id}`, body),
+  requestChangeAvatar: ({id, file}) =>
+    axiosFormData.put(`users/${id}/uploadAvatar`, file),
+  requestChangeCoverAvatar: ({id, file}) =>
+    axiosFormData.put(`users/${id}/uploadCoverImage`, file),
 };

src/network/axiosFormData.js

+import axios from 'axios';
+import Utils from '../utils';
+import config from '../config';
+
+const axiosFormData = axios.create({
+  baseURL: config.apiEndpoint,
+  headers: {
+    'Content-Type': 'multipart/form-data',
+  },
+  timeout: config.axiosTimeout,
+});
+
+axiosFormData.interceptors.request.use(async configAxios => {
+  const auth = await Utils.getData(config.storageKey.AUTH);
+  if (auth) {
+    configAxios.headers.Authorization = `Bearer ${auth}`;
+  }
+  return configAxios;
+});
+
+axiosFormData.interceptors.response.use(
+  response => {
+    if (response?.data) {
+      return response.data;
+    }
+    return response;
+  },
+  error => {
+    throw error;
+  },
+);
+
+export default axiosFormData;

src/screens/authentication/splash/SlashContainer.js

@@ -6,13 +6,12 @@ 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 config from '../../../config';
+import Utils from '../../../utils';
 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';
+import SplashScreen from './SplashScreen';
 const SplashContainer = () => {
   const dispatch = useDispatch();
   const {t, i18n} = useTranslation();

src/screens/onleave/OnLeaveContainer.js

@@ -83,8 +83,7 @@ const OnLeaveContainer = props => {
     reason: '',
   });
   // open the modal
-  const onOpenDetailModal = useCallback(
-    detail => {
+  const onOpenDetailModal = detail => {
     if (detail) {
       const user = {
         id: detail?.staff_id,
@@ -105,9 +104,7 @@ const OnLeaveContainer = props => {
         isRequest: false,
       });
     }
-    },
-    [userInfo],
-  );
+  };
 
   const onOpenRequestLeavesModal = userDetails => {
     setLeavesDaysModal({

src/screens/onleave/template/OnLeaveMainView.js

@@ -27,13 +27,12 @@ const selectDataDropDown = [
 ];
 
 const DataChartLeavesRestDays = React.memo(
-  ({dataChart}) => {
+  ({dataChart = []}) => {
     return (
       <View style={styles.pieChartContainer}>
         <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
           <View style={{flexDirection: 'row'}}>
-            {dataChart &&
-              dataChart?.length &&
+            {dataChart?.length > 0 &&
               dataChart.map((item, index) => {
                 return (
                   <View
@@ -54,8 +53,10 @@ const DataChartLeavesRestDays = React.memo(
                           doughnut={true}
                           widthAndHeight={100}
                           series={[
-                            item.from ? item.from : 0,
-                            item.to ? item.to : 1,
+                            item.from < 0
+                              ? Math.abs(item.from)
+                              : item.from || 0,
+                            item.to < 0 ? Math.abs(item.to) : item.to || 1,
                           ]}
                           sliceColor={sliceColorRight}
                           coverRadius={0.9}

src/screens/profile/ProfileContainer.js

@@ -4,7 +4,6 @@ import {launchImageLibrary} from 'react-native-image-picker';
 import Toast from 'react-native-toast-message';
 import {useDispatch} from 'react-redux';
 import RootNavigation from '../../navigation/RootNavigation';
-import {changeAvatar, changeCoverAvatar} from '../../store/actions/UserAction';
 import Utils from '../../utils';
 import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
 import {logout} from '../authentication/authSlice';
@@ -12,7 +11,7 @@ import profilePropsProvider from './profilePropsProvider';
 import ProfileMainView from './template/ProfileMainView';
 import {ToastMessage} from '../../utils/MessageUtil';
 import config from '../../config';
-import {changeUserInfo} from './profileSlice';
+import {changeAvatar, changeCoverAvatar, changeUserInfo} from './profileSlice';
 
 const ProfileContainer = props => {
   const {userInfo} = props;
@@ -30,6 +29,7 @@ const ProfileContainer = props => {
   });
 
   const [avatar, setAvatar] = useState();
+  const [coverAvatar, setCoverAvatar] = useState();
 
   const [visibleMenu, setVisibleMenu] = useState(false);
 
@@ -64,18 +64,26 @@ const ProfileContainer = props => {
       response => {
         //console.log('res', response);
         if (!response.didCancel) {
-          //setCoverAvatar(response.assets);
-          const resChangeCoverAvatar = dispatch(
-            changeCoverAvatar(userInfo.id, response.assets),
-          );
-          if (resChangeCoverAvatar) {
+          const {assets} = response;
+          setCoverAvatar(response.assets);
+          let uploadImage = new FormData();
+          uploadImage.append('file', {
+            uri: assets[0].uri,
+            name: assets[0].fileName,
+            type: assets[0].type,
+          });
+          dispatch(
+            changeCoverAvatar({id: userInfo.id, file: uploadImage}),
+          ).then(result => {
+            const {success} = Utils.getValues(result, 'payload', false);
             setEditField(prev => ({...prev, avatar: false}));
             Toast.show({
-              type: 'success',
+              type: success ? 'success' : 'error',
               text1: 'Hệ thống',
-              text2: 'Thay ảnh bìa thành công 💖',
+              text2: `Thay ảnh bìa ${success ? 'thành công 💖' : 'thất bại'} `,
             });
-          }
+          });
+
           //setEditField(prev => ({...prev, avatar: true}));
           // hideMenu();
           //console.log(response.assets[0].uri)
@@ -85,8 +93,6 @@ const ProfileContainer = props => {
   };
 
   const onSubmitChangeInfo = async values => {
-    console.log('values', values);
-
     if (userInfo) {
       const {
         first_name,
@@ -148,14 +154,26 @@ const ProfileContainer = props => {
     setEditField(prev => ({...prev, avatar: false}));
   };
   const onConfirmAvatar = () => {
-    const res = dispatch(changeAvatar(userInfo.id, avatar));
-    if (res) {
+    if (avatar) {
+      let uploadImage = new FormData();
+      for (let i = 0; i < avatar.length; i++) {
+        uploadImage.append('file', {
+          uri: avatar[i].uri,
+          name: avatar[i].fileName,
+          type: avatar[i].type,
+        });
+      }
+      dispatch(changeAvatar({id: userInfo.id, file: uploadImage})).then(
+        response => {
+          const {success} = Utils.getValues(response, 'payload', false);
           setEditField(prev => ({...prev, avatar: false}));
           Toast.show({
-        type: 'success',
+            type: success ? 'success' : 'error',
             text1: 'Hệ thống',
-        text2: 'Thay avatar thành công 💖',
+            text2: `Thay avatar ${success ? 'thành công 💖' : 'thất bại!!!'}`,
           });
+        },
+      );
     }
   };
 
@@ -163,7 +181,7 @@ const ProfileContainer = props => {
     dispatch(logout()).then(response => {
       const {success} = Utils.getValues(response, 'payload', false);
       if (success) {
-        RootNavigation.replace(APP_NAVIGATE_SCREEN.LOGIN);
+        Utils.restartApp();
       }
     });
   };
@@ -181,6 +199,7 @@ const ProfileContainer = props => {
     avatar,
     visibleMenu,
     editUserInfo,
+    coverAvatar,
     onDeniedAvatar,
     onConfirmAvatar,
     showMenu,

src/screens/profile/profilePropsProvider.js

@@ -14,6 +14,7 @@ export default function profilePropsProvider(props) {
     onEditUserInfo,
     editUserInfo,
     onSubmitChangeInfo,
+    coverAvatar,
   } = props;
   return {
     userInfo,
@@ -24,6 +25,7 @@ export default function profilePropsProvider(props) {
       userInfo,
       isEditField,
       avatar,
+      coverAvatar,
       onDeniedAvatar,
       onConfirmAvatar,
       showMenu,

src/screens/profile/profileSlice.js

@@ -20,7 +20,32 @@ export const changeUserInfo = createAsyncThunk(
     });
   },
 );
-
+export const changeAvatar = createAsyncThunk(
+  'profile/changeAvatar',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: profileAPI.requestChangeAvatar,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
+export const changeCoverAvatar = createAsyncThunk(
+  'profile/requestChangeCoverAvatar',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: profileAPI.requestChangeCoverAvatar,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
 const profileSlice = createSlice({
   name: 'profile',
   initialState: initialState,

src/screens/profile/template/components/IntroduceUser.js

@@ -98,6 +98,7 @@ const IntroduceUser = props => {
     visibleMenu,
     openGallery,
     onChangeCoverAvatar,
+    coverAvatar = [],
   } = props;
   return (
     <Swiper
@@ -109,7 +110,9 @@ const IntroduceUser = props => {
       <View style={styles.viewImageProfile}>
         <ImageBackground
           source={
-            userInfo?.cover_image
+            coverAvatar.length > 0
+              ? {uri: coverAvatar[0].uri}
+              : userInfo?.cover_image
               ? {
                   uri: config.imageEndPoint + userInfo?.cover_image,
                 }

src/utils/index.js

@@ -2,6 +2,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import moment from 'moment';
 import {Linking} from 'react-native';
 import config from '../config';
+import RNRestart from 'react-native-restart';
 const storeData = async (storageKey, value) => {
   try {
     const jsonValue = JSON.stringify(value);
@@ -176,6 +177,7 @@ const minutesToHours = (start, finish) => {
   var minutes = time % 60;
   return `${Hours}:${minutes} giờ`;
 };
+const restartApp = () => RNRestart.Restart();
 const Utils = {
   storeData,
   getData,
@@ -188,5 +190,6 @@ const Utils = {
   formatCurrency,
   getCategoryNotification,
   minutesToHours,
+  restartApp,
 };
 export default Utils;

yarn.lock

@@ -4642,6 +4642,11 @@ react-native-reanimated@^3.15.3:
 react-native-responsive-screen@^1.4.2:
   version "1.4.2"
 
+react-native-restart@^0.0.27:
+  version "0.0.27"
+  resolved "https://registry.npmjs.org/react-native-restart/-/react-native-restart-0.0.27.tgz"
+  integrity sha512-8KScVICrXwcTSJ1rjWkqVTHyEKQIttm5AIMGSK1QG1+RS5owYlE4z/1DykOTdWfVl9l16FIk0w9Xzk9ZO6jxlA==
+
 react-native-safe-area-context@*, react-native-safe-area-context@^4.11.0, "react-native-safe-area-context@>= 3.0.0":
   version "4.11.0"