ConfirmDateContainer.js

import Moment from 'moment';
import React, {useCallback, useEffect, useState} from 'react';
import {useDispatch} from 'react-redux';
import RootNavigation from '../../navigation/RootNavigation';
import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
import ConfirmModalAddNew from './confirm-modals/ConfirmModalAddNew';
import ConfirmModalDetails from './confirm-modals/ConfirmModalDetails';
import {
  getAbsentChart,
  getConfirmApprovedDate,
  getUserConfirmDay,
} from './confirmDateSlice';
import ConfirmDateMainView from './template/ConfirmMainView';
import confirmDatePropsProvider from './confirmDatePropsProvider';
import Utils from '../../utils';
const ConfirmDateContainer = props => {
  const {confirmDateList, confirmApprovedDateList, userInfo} = props;
  const dispatch = useDispatch();

  const [requestApproveArr, setRequestApproveArr] = useState([]);
  const [confirmList, setConfirmList] = useState([]);
  const [totalArr, setTotalArr] = useState({
    totalRequestApproveArr: 0,
    totalConfirmArr: 0,
  });

  // approveConfirmList payload
  const [approveReqPayload, setApproveReqPayload] = useState({
    type: 'Tất cả',
    filter: '',
    page: 1,
    pageSize: 5,
    sorts: '',
    isRefresh: false,
  });
  // user confirm payload
  const [userConfirmPayload, setUserConfirmPayload] = useState({
    page: 1,
    pageSize: 5,
    isRefresh: false,
  });

  const [dataChart, setDataChart] = useState({
    month: new Date().getMonth() + 1,
    data: {},
  });
  const [modalRequestConfirmWorkingDays, setModalRequestConfirmWorkingDays] =
    useState({
      visible: false,
    });

  const [dayPress, setDayPress] = useState();
  // open the modal
  const onOpenDetailModal = detailItem => {};

  const onOpenModalRequestConfirmWorkingDays = () => {
    setModalRequestConfirmWorkingDays({userinfo: userInfo, visible: true});
  };

  const onCloseModalRequestConfirmWorkingDays = () => {
    setModalRequestConfirmWorkingDays({userinfo: null, visible: false});
  };
  // main function
  const navigateToDayWage = () => {
    RootNavigation.navigate(APP_NAVIGATE_SCREEN.DAY_WAGE);
  };

  const onLoadMoreRequestApprove = () => {
    setApproveReqPayload(prev => ({
      ...prev,
      page: approveReqPayload.page + 1,
      isRefresh: false,
    }));
  };
  const onLoadMoreConfirmList = () => {
    setUserConfirmPayload(prev => ({
      ...prev,
      page: userConfirmPayload.page + 1,
      isRefresh: false,
    }));
  };

  // refresh onClick event
  const onRefreshApproveList = () => {
    //console.log('onRefreshApproveList');
    setApproveReqPayload({
      filter: 'extend_approved_status_name==PENDING',
      page: 1,
      pageSize: 5,
      type: '',
      sorts: '-start',
      isRefresh: true,
    });
  };
  const onRefreshConfirmList = () => {
    //console.log('onRefreshConfirmList');
    setUserConfirmPayload({
      page: 1,
      pageSize: 5,
      isRefresh: true,
    });
  };
  const onChangeSelectFilter = selectedItem => {
    if (selectedItem == 'Tất cả') {
      setApproveReqPayload({
        type: 'Tất cả',
        filter: '',
        sorts: '',
        page: 1,
        pageSize: 5,
        isRefresh: true,
      });
    } else if (selectedItem == 'Chưa duyệt') {
      setApproveReqPayload({
        type: 'Chưa duyệt',
        filter: 'extend_approved_status_name==PENDING',
        sorts: '-start',
        page: 1,
        pageSize: 5,
        isRefresh: true,
      });
    } else if (selectedItem == 'Đã từ chối') {
      setApproveReqPayload({
        type: 'Đã duyệt',
        filter: 'extend_approved_status_name==REJECTED',
        sorts: '-start',
        page: 1,
        pageSize: 5,
        isRefresh: true,
      });
    } else {
      setApproveReqPayload({
        type: 'Đã duyệt',
        filter: 'extend_approved_status_name==APPROVED',
        sorts: '-start',
        page: 1,
        pageSize: 5,
        isRefresh: true,
      });
    }
  };
  const onChangeMonthFilter = selectedItem => {
    const arr = selectedItem.split('Tháng');
    // fetchDataChart(parseInt(arr[1], 10));
    setDataChart(prev => ({
      ...prev,
      month:
        parseInt(arr[1], 10) < 10
          ? '0' + parseInt(arr[1], 10)
          : parseInt(arr[1], 10),
    }));
  };
  const onChangeDayPressInChart = selectedItem => {
    setDayPress(selectedItem);
  };
  const formatDataConfirmListFromApi = () => {
    if (userConfirmPayload.isRefresh) {
      setConfirmList(confirmDateList);
      return;
    }
    let merge = [...confirmList, ...confirmDateList];
    //console.log(merge);
    let format = merge.filter(
      (
        set => f =>
          !set.has(f.id) && set.add(f.id)
      )(new Set()),
    );
    format.sort((a, b) => Moment(a.created_at) < Moment(b.created_at));
    setConfirmList(format);
    //setConfirmList(prev => [...prev, ...confirmDay]);
  };
  const formatDataApproveConfirmListFromApi = () => {
    if (approveReqPayload.isRefresh) {
      setRequestApproveArr(confirmApprovedDateList);
      return;
    }
    let merge = [...requestApproveArr, ...confirmApprovedDateList];

    let format = merge.filter(
      (
        set => f =>
          !set.has(f.id) && set.add(f.id)
      )(new Set()),
    );
    format.sort((a, b) => Moment(a.created_at) < Moment(b.created_at));
    setRequestApproveArr(format);
  };

  //=============================== FETCH DATA ================================//
  const fetchAbsentApprovalRequests = async () => {
    const res = await dispatch(
      getConfirmApprovedDate({
        filter: approveReqPayload.filter,
        sort: approveReqPayload.sorts,
        page: approveReqPayload.page,
        pageSize: approveReqPayload.pageSize,
      }),
    );
    if (res.success) {
      //console.log(res);

      const {collection, total} = res.data;
      // check if refresh
      if (!collection || collection.length === 0) {
        return;
      }
      if (approveReqPayload.isRefresh) {
        setTotalArr(prev => ({...prev, totalRequestApproveArr: total}));
        return;
      }
      setTotalArr(prev => ({...prev, totalRequestApproveArr: total}));
    }
  };
  const loadDataConfirmDay = async () => {
    //console.log('loadDataConfirmDay');
    const res = await dispatch(
      getUserConfirmDay(userConfirmPayload.page, userConfirmPayload.pageSize),
    );
    if (res.success) {
      //console.log(res);
      const {collection, total} = res.data;
      if (!collection || collection.length === 0) {
        return;
      }
      if (userConfirmPayload.isRefresh) {
        setTotalArr(prev => ({...prev, totalConfirmArr: total}));
        return;
      }
      setTotalArr(prev => ({...prev, totalConfirmArr: total}));
    }
  };
  const fetchStatisticsConfirmWorkingDays = useCallback(() => {
    dispatch(getAbsentChart()).then(response => {
      const {success} = Utils.getValues(response, 'payload', false);
      if (success) {
        const {data} = Utils.getValues(response, 'payload', []);
        let filterByMonth =
          data.length > 0
            ? data.filter(
                item =>
                  new Date(item.date).getMonth() + 1 ===
                  parseInt(dataChart.month, 10),
              )
            : [];
        let formatData = [];
        filterByMonth.forEach(item => {
          //console.log(Moment(item.date).format('YYYY-MM-DD'));
          const objDay = Moment(item.date).format('YYYY-MM-DD');
          if (parseInt(item.absent_hours, 10) > 0) {
            formatData.push({
              [objDay]: {
                selected: true,
                selectedColor:
                  (parseInt(item.absent_hours, 10) > 8 && '#7d93ff') ||
                  (parseInt(item.absent_hours, 10) >= 6 &&
                    parseInt(item.absent_hours, 10) <= 8 &&
                    '#7d93ff') ||
                  (parseInt(item.absent_hours, 10) >= 4 &&
                    parseInt(item.absent_hours, 10) <= 6 &&
                    '#7d93ff') ||
                  '#dfe4ff',
              },
            });
          }
        });
        setDataChart(prev => ({
          ...prev,
          data: filterByMonth,
        }));
      }
    });
  }, [dataChart.month, dispatch]);

  // useEffect
  useEffect(() => {
    confirmDateList && formatDataConfirmListFromApi();
  }, [confirmDateList]);

  useEffect(() => {
    dataChart.month && fetchStatisticsConfirmWorkingDays();
  }, [dataChart.month]);

  useEffect(() => {
    confirmApprovedDateList &&
      formatDataApproveConfirmListFromApi(confirmApprovedDateList);
  }, [confirmApprovedDateList]);

  useEffect(() => {
    approveReqPayload && fetchAbsentApprovalRequests();
  }, [approveReqPayload]);

  useEffect(() => {
    userConfirmPayload && loadDataConfirmDay();
  }, [userConfirmPayload]);

  const confirmProps = {
    userInfo,
    requestApproveArr,
    confirmList,
    dataChart,
    approveReqPayload,
    dayPress,
    modalRequestConfirmWorkingDays,
    onChangeDayPressInChart,
    onOpenDetailModal,
    onLoadMoreConfirmList,
    navigateToDayWage,
    onLoadMoreRequestApprove,
    onRefreshApproveList,
    onRefreshConfirmList,
    onChangeSelectFilter,
    onChangeMonthFilter,
    onCloseModalRequestConfirmWorkingDays,
    onOpenModalRequestConfirmWorkingDays,
  };
  return <ConfirmDateMainView {...confirmDatePropsProvider(confirmProps)} />;
};

export default ConfirmDateContainer;