Fixes for popups and pagination.

Fixed: popups caused unwanted scrollbar.
Fixed: switching failed payments' toggle didn't reset page number.

Author: MadOPcode

src/components/Popup/index.jsx

@@ -9,6 +9,7 @@ const Popup = ({ children, className, referenceElement }) => {
   const [arrowElement, setArrowElement] = useState(null);
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: "bottom",
+    strategy: "fixed",
     modifiers: [
       { name: "arrow", options: { element: arrowElement, padding: 10 } },
       { name: "offset", options: { offset: [0, 5] } },

src/store/actions/workPeriods.js

@@ -4,7 +4,7 @@ import * as ACTION_TYPE from "store/actionTypes/workPeriods";
 let nextErrorId = 1;
 
 /**
- * Creates an action denoting the start of loading specific challenge page.
+ * Creates an action denoting the start of loading specific working period page.
  *
  * @param {Object} cancelSource object that can be used to cancel network request
  * @returns {Object}
@@ -17,14 +17,15 @@ export const loadWorkPeriodsPagePending = (cancelSource) => ({
 /**
  * Creates an action denoting the saving of fetched working periods' page.
  *
- * @param {Array} periods array of challenge objects
- * @param {number} totalCount total number of periods for current filters' state
- * @param {number} pageCount total number of pages
+ * @param {Object} payload action payload
+ * @param {Array} payload.periods array of working period objects
+ * @param {number} payload.totalCount total number of periods for current filters' state
+ * @param {number} payload.pageCount total number of pages
  * @returns {Object}
  */
-export const loadWorkPeriodsPageSuccess = (periods, totalCount, pageCount) => ({
+export const loadWorkPeriodsPageSuccess = (payload) => ({
   type: ACTION_TYPE.WP_LOAD_PAGE_SUCCESS,
-  payload: { periods, totalCount, pageCount },
+  payload,
 });
 
 /**

src/store/reducers/workPeriods.js

@@ -610,6 +610,10 @@ const actionHandlers = {
         ...filters,
         onlyFailedPayments: on,
       },
+      pagination: {
+        ...state.pagination,
+        pageNumber: 1,
+      },
     };
   },
   [ACTION_TYPE.WP_TOGGLE_PERIOD]: (state, periodId) => {

src/store/thunks/workPeriods.js

@@ -64,7 +64,7 @@ export const loadWorkPeriodsPage = async (dispatch, getState) => {
 
   // For parameter description see:
   // https://topcoder-platform.github.io/taas-apis/#/ResourceBookings/get_resourceBookings
-  const params = {
+  const [promise, cancelSource] = services.fetchResourceBookings({
     fields: API_FIELDS_QUERY,
     page: pagination.pageNumber,
     perPage: pagination.pageSize,
@@ -75,11 +75,10 @@ export const loadWorkPeriodsPage = async (dispatch, getState) => {
     ["workPeriods.userHandle"]: userHandle,
     ["workPeriods.startDate"]: startDate.format(DATE_FORMAT_API),
     ["workPeriods.paymentStatus"]: paymentStatuses,
-  };
-  if (onlyFailedPayments) {
-    params["workPeriods.payments.status"] = API_CHALLENGE_PAYMENT_STATUS.FAILED;
-  }
-  const [promise, cancelSource] = services.fetchResourceBookings(params);
+    ["workPeriods.payments.status"]: onlyFailedPayments
+      ? API_CHALLENGE_PAYMENT_STATUS.FAILED
+      : null,
+  });
   dispatch(actions.loadWorkPeriodsPagePending(cancelSource));
   let totalCount, periods, pageCount;
   try {
@@ -95,7 +94,13 @@ export const loadWorkPeriodsPage = async (dispatch, getState) => {
     }
     return;
   }
-  dispatch(actions.loadWorkPeriodsPageSuccess(periods, totalCount, pageCount));
+  dispatch(
+    actions.loadWorkPeriodsPageSuccess({
+      periods,
+      totalCount,
+      pageCount,
+    })
+  );
 };
 
 /**

src/styles/mixins/_screenSizes.scss

@@ -1,4 +1,4 @@
-@import 'variables/screenSizes';
+@import "variables/screenSizes";
 
 // There's no need for phone() mixin for phone and larger screens to exist
 // because styles for these screens are simply added without media queries.

src/styles/variables/_screenSizes.scss

@@ -2,9 +2,9 @@ $screen-codes: phone tablet desktop desktop-lg;
 
 // This map defines minimum screen widths for different devices.
 $screen-sizes: (
-  'phone': 320px,
-  'tablet': 768px,
-  'desktop': 1280px,
+  "phone": 320px,
+  "tablet": 768px,
+  "desktop": 1280px,
 );
 
 // Media queries' mixins will use minimum screen widths from this map.
@@ -20,7 +20,7 @@ $screen-min-px: ();
 $screen-min-px: map-merge(
   $screen-min-px,
   (
-    'desktop-lg': 1920px,
+    "desktop-lg": 1920px,
   )
 );