fix notification

src/api/notificationAPI.js

+import axiosClient from '../network/axios';
+
+const notificationAPI = {
+  requestGetNotification: ({filter, page, pageSize}) =>
+    axiosClient.get(
+      `notifications?Filters=${filter}&Sorts=&Page=${page}&PageSize=${pageSize}`,
+    ),
+};
+
+export default notificationAPI;

src/app/selectors.js

@@ -3,3 +3,4 @@ export const homeSelector = state => state.home;
 export const onLeaveSelector = state => state.onLeave;
 export const loaderSelector = state => state.loader.isLoading;
 export const confirmDateSelector = state => state.confirmDate;
+export const notificationSelector = state => state.notification;

src/app/store.js

@@ -5,6 +5,7 @@ import loaderReducer from './loaderSlice';
 import homeReducer from '../screens/home/homeSlice';
 import onLeaveReducer from '../screens/onleave/onLeaveSlice';
 import confirmDateReducer from '../screens/confirm_date/confirmDateSlice';
+import notificationReducer from '../screens/notification/notificationSlice';
 
 const rootReducer = {
   loader: loaderReducer,
@@ -12,6 +13,7 @@ const rootReducer = {
   home: homeReducer,
   onLeave: onLeaveReducer,
   confirmDate: confirmDateReducer,
+  notification: notificationReducer,
 };
 
 const store = configureStore({

src/navigation/BottomTabNavigation.js

@@ -5,7 +5,7 @@ import {useSelector} from 'react-redux';
 import {authSelector} from '../app/selectors';
 import HeaderComponent from '../components/header/HeaderComponent';
 import config from '../config';
-import NotificationScreen from '../screens/notification/NotificationContainer';
+import NotificationScreen from '../screens/notification';
 import ProfileScreen from '../screens/profile';
 import {APP_NAVIGATE_SCREEN} from '../utils/constant';
 import {IconDrawer, IMAGES} from '../values/images';

src/screens/notification/NotificationContainer.js

-/* eslint-disable no-lone-blocks */
-/* eslint-disable react-hooks/exhaustive-deps */
 import Moment from 'moment';
 import React, {useEffect, useState} from 'react';
 import Toast from 'react-native-toast-message';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import RootNavigation from '../../navigation/RootNavigation';
 import {
   deleteNotificationUser,
@@ -12,12 +10,12 @@ import {
 } from '../../store/actions/UserAction';
 import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
 import {IcNotificationList} from '../../values/images';
-import NotificationScreen from './NotificationScreen';
-const NotificationContainer = () => {
-  const dispatch = useDispatch();
-  //Reducers
-  const userDetails = useSelector(state => state.UserInfo.userInfo);
+import {getNotification} from './notificationSlice';
+import NotificationMainView from './template/NotificationMainView';
 
+const NotificationContainer = props => {
+  const {notificationList, userInfo} = props;
+  const dispatch = useDispatch();
   // state
   const [notiList, setNotiList] = useState([]);
   const [isLoading, setLoading] = useState(false);
@@ -80,8 +78,13 @@ const NotificationContainer = () => {
 
   // function handle
   const loadAllNotification = async query => {
-    setLoading(true);
-    const arrNoti = await dispatch(getNotificationOfUser(query));
+    const arrNoti = await dispatch(
+      getNotification({
+        filter: payload.filter,
+        page: payload.page,
+        pageSize: payload.limit,
+      }),
+    );
     //.log("arrNoti", arrNoti)
     if (arrNoti.length > 0) {
       // await arrNoti.forEach(async item => {
@@ -101,8 +104,6 @@ const NotificationContainer = () => {
       // const merge = notiList.concat(arrNoti)
       // setNotiList(merge)
     }
-
-    setLoading(false);
   };
 
   const readNotification = async (item, index) => {
@@ -227,71 +228,6 @@ const NotificationContainer = () => {
 
     //console.log("onLoadMore")
   };
-  // const loadBadgeNotification = lstNoti => {
-  //   let arrleave = [];
-  //   let arrOt = [];
-  //   let arrSalary = [];
-  //   lstNoti.forEach((item, index) => {
-  //     if (
-  //       (item.group_code === 'nghỉ phép' || item.group_code === 'Vắng mặt') &&
-  //       !item.read
-  //     ) {
-  //       arrleave.push(item);
-  //     } else if (item.group_code === 'Tăng ca' && !item.read) {
-  //       arrOt.push(item);
-  //     } else if (item.group_code === 'Phiếu lương') {
-  //       arrSalary.push(item);
-  //     }
-  //   });
-  //   //console.log('length', lstNoti);
-  //   let clone = [...arrBtnHeader];
-  //   clone.forEach((item, index) => {
-  //     switch (item.type) {
-  //       case 'nghỉ phép':
-  //       case 'Vắng mặt':
-  //         //console.log(arrleave.length)
-  //         if (arrleave.length <= 0) {
-  //           item.unread = '0';
-  //         } else if (arrleave.length >= 9) {
-  //           item.unread = '9+';
-  //         } else {
-  //           item.unread = arrleave.length;
-  //         }
-  //         break;
-  //       case 'Tăng ca':
-  //         if (arrOt.length < 0) {
-  //           item.unread = '0';
-  //         } else if (arrOt.length >= 9) {
-  //           item.unread = '9+';
-  //         } else {
-  //           item.unread = arrOt.length;
-  //         }
-  //         break;
-  //       case 'Phiếu lương':
-  //         if (arrSalary.length < 0) {
-  //           item.unread = '0';
-  //         } else if (arrSalary.length >= 9) {
-  //           item.unread = '9+';
-  //         } else {
-  //           item.unread = arrSalary.length;
-  //         }
-  //         break;
-  //       case 'All Notification':
-  //         if (lstNoti.length < 0) {
-  //           item.unread = '0';
-  //         } else if (lstNoti.length >= 9) {
-  //           item.unread = '9+';
-  //         } else {
-  //           item.unread = lstNoti.length;
-  //         }
-  //         break;
-  //     }
-  //   });
-  //   setBtnHeader(clone);
-  //   //console.log("clone", clone)
-  // };
-
-  // useEffect
 
   const loadBadgeNotification = async () => {
     const arrNoti = await dispatch(
@@ -365,10 +301,7 @@ const NotificationContainer = () => {
   };
 
   useEffect(() => {
-    payload &&
-      loadAllNotification(
-        `?Filters=${payload.filter}&Sorts=&Page=${payload.page}&PageSize=${payload.limit}`,
-      );
+    payload && loadAllNotification();
     // calculateTimeNoti()
   }, [payload]);
 
@@ -377,7 +310,8 @@ const NotificationContainer = () => {
   }, []);
 
   const notiProps = {
-    userDetails,
+    notificationList,
+    userInfo,
     notiList,
     isLoading,
     showAlert,
@@ -392,7 +326,7 @@ const NotificationContainer = () => {
     onRefreshList,
     onLoadMore,
   };
-  return <NotificationScreen {...notiProps} />;
+  return <NotificationMainView {...notiProps} />;
 };
 
 export default NotificationContainer;

src/screens/notification/index.js

+import React from 'react';
+
+import {useSelector} from 'react-redux';
+import {authSelector, notificationSelector} from '../../app/selectors';
+import NotificationContainer from './NotificationContainer';
+
+export default function NotificationScreen() {
+  const authSelect = useSelector(authSelector);
+  const notificationSelect = useSelector(notificationSelector);
+
+  const {userInfo} = authSelect;
+  const {notificationList} = notificationSelect;
+  const notificationScreenProps = {
+    userInfo,
+    notificationList,
+  };
+  return <NotificationContainer {...notificationScreenProps} />;
+}

src/screens/notification/notificationSlice.js

+import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
+
+import serviceRequest from '../../app/serviceRequest';
+
+import notificationAPI from '../../api/notificationAPI';
+import Utils from '../../utils';
+
+const initialState = {
+  notificationList: [],
+};
+
+export const getNotification = createAsyncThunk(
+  'notification/getNotification',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: notificationAPI.requestGetNotification,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
+
+const notificationSlice = createSlice({
+  name: 'notification',
+  initialState: initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder.addCase(getNotification.fulfilled, (state, action) => {
+      const {success} = Utils.getValues(action, 'payload', false); 
+      if (success) {
+        state.notificationList = Utils.getValues(
+          action,
+          'payload.data.collection',
+          [],
+        );
+      }
+    });
+  },
+});
+
+const {reducer} = notificationSlice;
+export default reducer;

src/screens/notification/NotificationScreen.js → src/screens/notification/template/NotificationMainView.js

-/* eslint-disable prettier/prettier */
-
 import React from 'react';
 import {Image, SafeAreaView, TouchableOpacity, View} from 'react-native';
-import Alert from 'react-native-awesome-alerts';
 import {SwipeListView} from 'react-native-swipe-list-view';
 import {ScrollView} from 'react-native-virtualized-view';
-import AppText from '../../components/AppText';
-import ButtonComponent from '../../components/ButtonComponent';
-import LoadingProgress from '../../components/LoadingProgress';
-import {IcNotificationList} from '../../values/images';
-import styles from './style';
-const NotificationScreen = ({
-  userDetails,
-  notiList,
+import AppText from '../../../components/AppText';
+import ButtonComponent from '../../../components/ButtonComponent';
+import LoadingProgress from '../../../components/LoadingProgress';
+import {IcNotificationList, IMAGES} from '../../../values/images';
+import styles from '../style';
+import config from '../../../config';
+const NotificationMainView = ({
+  notificationList,
+  userInfo,
   readNotification,
   isLoading,
   calculateTimeNoti,
   onDeleteNotification,
-  showAlert,
-  onConfirmDelete,
-  hideAlert,
   onChangeTab,
   onRefreshList,
   onLoadMore,
   arrBtnHeader,
-  loadBadgeNotification,
 }) => {
-  //console.log('notiList', notiList);
   const renderItem = ({item, index}) => {
     //console.log(item)
     return (
@@ -35,7 +28,11 @@ const NotificationScreen = ({
         onPress={() => readNotification(item, index)}
         style={[styles.item, {backgroundColor: 'white'}]}>
         <Image
-          source={{uri: 'https://meu.anawork.com' + item.extend_avatar}}
+          source={
+            item?.extend_avatar
+              ? {uri: config.imageEndPoint + item?.extend_avatar}
+              : IMAGES.IcAvatarDefault
+          }
           style={{...styles.imgAvatar, marginRight: 5}}
         />
         <View
@@ -105,16 +102,16 @@ const NotificationScreen = ({
         </View>
         <AppText style={styles.titleHeader}>Tất cả</AppText>
         <View>
-          {notiList && (
+          {notificationList && (
             <SwipeListView
-              data={notiList}
+              data={notificationList}
               renderItem={renderItem}
               renderHiddenItem={renderHiddenItem}
               rightOpenValue={-75}
               onRefresh={onRefreshList}
             />
           )}
-          {notiList && notiList.length > 0 && (
+          {notificationList && notificationList.length > 0 && (
             <View
               style={{
                 justifyContent: 'center',
@@ -138,26 +135,9 @@ const NotificationScreen = ({
           )}
         </View>
         {isLoading && <LoadingProgress />}
-        {showAlert && (
-          <Alert
-            show={showAlert.isError}
-            showProgress={false}
-            title={showAlert.title}
-            message={showAlert.message}
-            closeOnTouchOutside={true}
-            closeOnHardwareBackPress={false}
-            showConfirmButton={true}
-            showCancelButton={true}
-            cancelText={'Đóng'}
-            confirmText="Xóa"
-            confirmButtonColor="#DD6B55"
-            onConfirmPressed={onConfirmDelete}
-            onCancelPressed={hideAlert}
-          />
-        )}
       </ScrollView>
     </SafeAreaView>
   );
 };
 
-export default NotificationScreen;
+export default NotificationMainView;