Implemented period data updating from server.

Author: MadOPcode

src/routes/WorkPeriods/components/PaymentStatus/styles.module.scss

@@ -1,4 +1,5 @@
 @import "styles/mixins";
+@import "styles/variables";
 
 .container {
   display: inline-block;
@@ -25,7 +26,10 @@
   background: #9d41c9;
 }
 
-.cancelled,
+.cancelled {
+  background: #999;
+}
+
 .failed {
   background: #da0000;
 }
@@ -37,4 +41,5 @@
   line-height: 20px;
   letter-spacing: normal;
   background: transparent;
+  color: $text-color;
 }

src/routes/WorkPeriods/components/PeriodItem/index.jsx

@@ -123,12 +123,12 @@ const PeriodItem = ({
         </td>
         <td className={styles.paymentTotal}>
           <span className={styles.paymentTotalSum}>
-            {currencyFormatter.format(item.paymentTotal)}
+            {currencyFormatter.format(data.paymentTotal)}
           </span>
           <span className={styles.daysPaid}> ({data.daysPaid})</span>
         </td>
         <td>
-          <PaymentStatus status={item.paymentStatus} />
+          <PaymentStatus status={data.paymentStatus} />
         </td>
         <td className={styles.daysWorked}>
           <IntegerField
@@ -167,12 +167,12 @@ PeriodItem.propTypes = {
     startDate: PT.string.isRequired,
     endDate: PT.string.isRequired,
     weeklyRate: PT.number,
-    paymentStatus: PT.string.isRequired,
-    paymentTotal: PT.number.isRequired,
   }).isRequired,
   data: PT.shape({
     daysWorked: PT.number.isRequired,
     daysPaid: PT.number.isRequired,
+    paymentStatus: PT.string.isRequired,
+    paymentTotal: PT.number.isRequired,
   }).isRequired,
   details: PT.shape({
     periodId: PT.string.isRequired,

src/routes/WorkPeriods/components/PeriodsHistoryItem/index.jsx

@@ -66,15 +66,15 @@ const PeriodsHistoryItem = ({ isDisabled, item, data, currentStartDate }) => {
         <PeriodsHistoryPaymentTotal
           className={styles.paymentTotalContainer}
           payments={item.payments}
-          paymentTotal={item.paymentTotal}
+          paymentTotal={data.paymentTotal}
           daysPaid={data.daysPaid}
         />
       </td>
       <td className={styles.paymentStatus}>
-        <PaymentStatus status={item.paymentStatus} />
+        <PaymentStatus status={data.paymentStatus} />
       </td>
       <td className={styles.daysWorked}>
-        {item.paymentStatus === PAYMENT_STATUS.PAID ? (
+        {data.paymentStatus === PAYMENT_STATUS.PAID ? (
           `${daysWorked} ${daysWorked === 1 ? "Day" : "Days"}`
         ) : (
           <IntegerField
@@ -98,14 +98,14 @@ PeriodsHistoryItem.propTypes = {
     id: PT.string.isRequired,
     startDate: PT.oneOfType([PT.string, PT.number]).isRequired,
     endDate: PT.oneOfType([PT.string, PT.number]).isRequired,
-    paymentStatus: PT.string.isRequired,
     payments: PT.array,
-    paymentTotal: PT.number.isRequired,
     weeklyRate: PT.number,
   }).isRequired,
   data: PT.shape({
     daysWorked: PT.number.isRequired,
     daysPaid: PT.number.isRequired,
+    paymentStatus: PT.string.isRequired,
+    paymentTotal: PT.number.isRequired,
   }).isRequired,
   currentStartDate: PT.oneOfType([PT.string, PT.number, PT.object]).isRequired,
 };

src/services/workPeriods.js

@@ -105,10 +105,20 @@ export const fetchResourceBookings = (params) => {
  *
  * @param {string} periodId working period id
  * @param {number} daysWorked new number of working days
- * @returns {Promise}
+ * @returns {[Promise, Object]}
  */
 export const patchWorkPeriodWorkingDays = (periodId, daysWorked) => {
-  return axios.patch(`${WORK_PERIODS_API_URL}/${periodId}`, { daysWorked });
+  const source = CancelToken.source();
+  return [
+    axios
+      .patch(
+        `${WORK_PERIODS_API_URL}/${periodId}`,
+        { daysWorked },
+        { cancelToken: source.token }
+      )
+      .then(extractResponseData),
+    source,
+  ];
 };
 
 /**

src/store/actionTypes/workPeriods.js

@@ -19,6 +19,9 @@ export const WP_SET_DETAILS_HIDE_PAST_PERIODS =
   "WP_SET_DETAILS_HIDE_PAST_PERIODS";
 export const WP_SET_PAGE_NUMBER = "WP_SET_PAGE_NUMBER";
 export const WP_SET_PAGE_SIZE = "WP_SET_PAGE_SIZE";
+export const WP_SET_DATA_PENDING = "WP_SET_DATA_PENDING";
+export const WP_SET_DATA_SUCCESS = "WP_SET_DATA_SUCCESS";
+export const WP_SET_DATA_ERROR = "WP_SET_DATA_ERROR";
 export const WP_SET_DATE_RANGE = "WP_SET_DATE_RANGE";
 export const WP_SET_SORT_BY = "WP_SET_SORT_BY";
 export const WP_SET_SORT_ORDER = "WP_SET_SORT_ORDER";

src/store/actions/workPeriods.js

@@ -318,6 +318,28 @@ export const setWorkPeriodWorkingDays = (periodId, daysWorked) => ({
   payload: { periodId, daysWorked },
 });
 
+/**
+ * Creates an action denoting the update of working period's changeable data.
+ *
+ * @param {Object} periodId working period id
+ * @param {Object} cancelSource axios cancel token source
+ * @returns {Object}
+ */
+export const setWorkPeriodDataPending = (periodId, cancelSource) => ({
+  type: ACTION_TYPE.WP_SET_DATA_PENDING,
+  payload: { periodId, cancelSource },
+});
+
+export const setWorkPeriodDataSuccess = (periodId, data) => ({
+  type: ACTION_TYPE.WP_SET_DATA_SUCCESS,
+  payload: { periodId, data },
+});
+
+export const setWorkPeriodDataError = (periodId, message) => ({
+  type: ACTION_TYPE.WP_SET_DATA_ERROR,
+  payload: { periodId, message },
+});
+
 /**
  * Creates an action to toggle certain working period by its id.
  *

src/store/reducers/workPeriods.js

@@ -36,12 +36,6 @@ const initFilters = () => ({
   userHandle: "",
 });
 
-const initPeriodData = (daysWorked, daysPaid) => ({
-  cancelSource: null,
-  daysWorked,
-  daysPaid,
-});
-
 const initPeriodDetails = (
   periodId,
   rbId,
@@ -125,13 +119,9 @@ const actionHandlers = {
         : oldPagination;
     const periodsData = {};
     for (let period of periods) {
-      periodsData[period.id] = initPeriodData(
-        period.daysWorked,
-        period.daysPaid
-      );
-      // These two lines can be removed but they're kept for now for debugging.
-      delete period.daysWorked;
-      delete period.daysPaid;
+      period.data.cancelSource = null;
+      periodsData[period.id] = period.data;
+      delete period.data;
     }
     return {
       ...state,
@@ -215,13 +205,9 @@ const actionHandlers = {
     }
     const periodsData = state.periodsData[0];
     for (let period of details.periods) {
-      periodsData[period.id] = initPeriodData(
-        period.daysWorked,
-        period.daysPaid
-      );
-      // These two lines can be removed but they're kept for now for debugging.
-      delete period.daysWorked;
-      delete period.daysPaid;
+      period.data.cancelSource = null;
+      periodsData[period.id] = period.data;
+      delete period.data;
     }
     periodDetails = {
       ...periodDetails,
@@ -528,9 +514,58 @@ const actionHandlers = {
       },
     };
   },
+  [ACTION_TYPE.WP_SET_DATA_PENDING]: (state, { periodId, cancelSource }) => {
+    const periodsData = state.periodsData[0];
+    const periodData = periodsData[periodId];
+    if (!periodData) {
+      return state;
+    }
+    periodsData[periodId] = {
+      ...periodData,
+      cancelSource,
+    };
+    return {
+      ...state,
+      periodsData: [periodsData],
+    };
+  },
+  [ACTION_TYPE.WP_SET_DATA_SUCCESS]: (state, { periodId, data }) => {
+    const periodsData = state.periodsData[0];
+    const periodData = periodsData[periodId];
+    if (!periodData) {
+      return state;
+    }
+    periodsData[periodId] = {
+      ...periodData,
+      ...data,
+      cancelSource: null,
+    };
+    return {
+      ...state,
+      periodsData: [periodsData],
+    };
+  },
+  [ACTION_TYPE.WP_SET_DATA_ERROR]: (state, { periodId }) => {
+    const periodsData = state.periodsData[0];
+    const periodData = periodsData[periodId];
+    if (!periodData) {
+      return state;
+    }
+    periodsData[periodId] = {
+      ...periodData,
+      cancelSource: null,
+    };
+    return {
+      ...state,
+      periodsData: [periodsData],
+    };
+  },
   [ACTION_TYPE.WP_SET_WORKING_DAYS]: (state, { periodId, daysWorked }) => {
     const periodsData = state.periodsData[0];
     const periodData = periodsData[periodId];
+    if (!periodData) {
+      return state;
+    }
     daysWorked = Math.min(Math.max(daysWorked, periodData.daysPaid), 5);
     if (daysWorked === periodData.daysWorked) {
       return state;

src/store/thunks/workPeriods.js

@@ -19,6 +19,7 @@ import {
 import {
   normalizeBillingAccounts,
   normalizeDetailsPeriodItems,
+  normalizePeriodData,
   normalizePeriodItems,
 } from "utils/workPeriods";
 import { makeToast } from "components/ToastrMessage";
@@ -217,20 +218,49 @@ export const updateWorkPeriodBillingAccount =
   };
 
 /**
+ * Sends an update request to the server to update the number of working
+ * period's working days. The working period is also updated with the data
+ * from response.
  *
- * @param {string} periodId
- * @param {number} daysWorked
+ * @param {string} periodId working period id
+ * @param {number} daysWorked working period's working days
  * @returns {function}
  */
 export const updateWorkPeriodWorkingDays =
-  (periodId, daysWorked) => async () => {
+  (periodId, daysWorked) => async (dispatch, getState) => {
+    let [periodsData] = selectors.getWorkPeriodsData(getState());
+    periodsData[periodId]?.cancelSource?.cancel();
+    const [promise, source] = services.patchWorkPeriodWorkingDays(
+      periodId,
+      daysWorked
+    );
+    dispatch(actions.setWorkPeriodDataPending(periodId, source));
+    let periodData = null;
+    let errorMessage = null;
     try {
-      await services.patchWorkPeriodWorkingDays(periodId, daysWorked);
+      const data = await promise;
+      periodData = normalizePeriodData(data);
     } catch (error) {
-      makeToast(
-        `Failed to update working days for working period ${periodId}.\n` +
-          error.toString()
-      );
+      if (!axios.isCancel(error)) {
+        errorMessage = error.toString();
+        makeToast(
+          `Failed to update working days for working period ${periodId}.\n` +
+            errorMessage
+        );
+      }
+    }
+    [periodsData] = selectors.getWorkPeriodsData(getState());
+    const currentDaysWorked = periodsData[periodId]?.daysWorked;
+    // If periodData is null it means the request was cancelled right before
+    // another request was sent and so we don't need to update the state.
+    // If periodData's daysWorked is not equal to the current daysWorked
+    // it means that the state was changed while the data was in transit
+    // and there will be a new request at the end of which the period's data
+    // will be updated so again we don't need to update the state.
+    if (periodData && periodData.daysWorked === currentDaysWorked) {
+      dispatch(actions.setWorkPeriodDataSuccess(periodId, periodData));
+    } else if (errorMessage) {
+      dispatch(actions.setWorkPeriodDataError(periodId, errorMessage));
     }
   };
 

src/utils/workPeriods.js

@@ -11,7 +11,6 @@ export function normalizePeriodItems(items) {
   for (let item of items) {
     const workPeriod = item.workPeriods?.[0] || empty;
     const billingAccountId = item.billingAccountId;
-    const daysWorked = workPeriod.daysWorked;
     periods.push({
       id: workPeriod.id || item.id,
       rbId: item.id,
@@ -25,15 +24,32 @@ export function normalizePeriodItems(items) {
         : "",
       endDate: item.endDate ? moment(item.endDate).format(DATE_FORMAT_UI) : "",
       weeklyRate: item.memberRate,
-      paymentStatus: normalizePaymentStatus(workPeriod.paymentStatus),
-      paymentTotal: +workPeriod.paymentTotal || 0,
-      daysWorked: daysWorked === null ? 5 : +daysWorked || 0,
-      daysPaid: +workPeriod.daysPaid || 0,
+      data: normalizePeriodData(workPeriod),
     });
   }
   return periods;
 }
 
+/**
+ * Normalizes specific working period data (daysWorked, daysPaid,
+ * paymentStatus, paymentTotal).
+ *
+ * @param {Object} period
+ * @param {number} period.daysWorked
+ * @param {number} period.daysPaid
+ * @param {string} period.paymentStatus
+ * @param {number} period.paymentTotal
+ * @returns {Object}
+ */
+export function normalizePeriodData(period) {
+  return {
+    daysWorked: period.daysWorked === null ? 5 : +period.daysWorked || 0,
+    daysPaid: +period.daysPaid || 0,
+    paymentStatus: normalizePaymentStatus(period.paymentStatus),
+    paymentTotal: +period.paymentTotal || 0,
+  };
+}
+
 /**
  * Creates options to be used in dropdown selecting working period's
  * billing account.
@@ -69,17 +85,13 @@ export function createAssignedBillingAccountOption(accountId) {
 export function normalizeDetailsPeriodItems(items) {
   const periods = [];
   for (let item of items) {
-    const daysWorked = item.daysWorked;
     periods.push({
       id: item.id,
       startDate: item.startDate ? moment(item.startDate).valueOf() : 0,
       endDate: item.endDate ? moment(item.endDate).valueOf() : 0,
-      paymentStatus: normalizePaymentStatus(item.paymentStatus),
       payments: item.payments || [],
-      paymentTotal: +item.paymentTotal || 0,
       weeklyRate: item.memberRate,
-      daysWorked: daysWorked === null ? 5 : +daysWorked || 0,
-      daysPaid: +item.daysPaid || 0,
+      data: normalizePeriodData(item),
     });
   }
   periods.sort(sortByStartDate);