Update URL/restore state from URL work-in-progress

Author: MadOPcode

src/constants/index.js

@@ -4,6 +4,10 @@ export { PLATFORM_WEBSITE_URL, TOPCODER_WEBSITE_URL };
 
 export const APP_BASE_PATH = "/taas-admin";
 
+export const WORK_PERIODS_PATH = `${APP_BASE_PATH}/work-periods`;
+
+export const FREELANCERS_PATH = `${APP_BASE_PATH}/freelancers`;
+
 export const TAAS_BASE_PATH = "/taas";
 
 export const ADMIN_ROLES = ["bookingmanager", "administrator"];

src/constants/workPeriods.js

@@ -19,7 +19,7 @@ export const DATE_FORMAT_API = "YYYY-MM-DD";
 export const DATE_FORMAT_UI = "MMM DD, YYYY";
 
 // Field names that are required to be retrieved for display, filtering and sorting.
-export const REQUIRED_FIELDS = [
+export const API_REQUIRED_FIELDS = [
   "id",
   "jobId",
   "projectId",
@@ -40,15 +40,15 @@ export const REQUIRED_FIELDS = [
 ];
 
 // Valid parameter names for requests.
-export const QUERY_PARAM_NAMES = [
+export const API_QUERY_PARAM_NAMES = [
   "fields",
   "page",
   "perPage",
   "sortBy",
   "sortOrder",
-].concat(REQUIRED_FIELDS);
+].concat(API_REQUIRED_FIELDS);
 
-export const FIELDS_QUERY = REQUIRED_FIELDS.join(",");
+export const API_FIELDS_QUERY = API_REQUIRED_FIELDS.join(",");
 
 export const SORT_BY_DEFAULT = SORT_BY.USER_HANDLE;
 

src/root.component.jsx

@@ -5,7 +5,11 @@ import store from "store";
 import { disableSidebarForRoute } from "@topcoder/micro-frontends-navbar-app";
 import WorkPeriods from "routes/WorkPeriods";
 import Freelancers from "routes/Freelancers";
-import { APP_BASE_PATH } from "./constants";
+import {
+  APP_BASE_PATH,
+  FREELANCERS_PATH,
+  WORK_PERIODS_PATH,
+} from "./constants";
 import "styles/global.scss";
 
 export default function Root() {
@@ -15,15 +19,10 @@ export default function Root() {
 
   return (
     <Provider store={store}>
-      <Router>
-        <Redirect
-          from={APP_BASE_PATH}
-          to={`${APP_BASE_PATH}/work-periods`}
-          exact
-          noThrow
-        />
-        <WorkPeriods path={`${APP_BASE_PATH}/work-periods`} />
-        <Freelancers path={`${APP_BASE_PATH}/freelancers`} />
+      <Router primary={false}>
+        <Redirect from={APP_BASE_PATH} to={WORK_PERIODS_PATH} exact noThrow />
+        <WorkPeriods path={WORK_PERIODS_PATH} />
+        <Freelancers path={FREELANCERS_PATH} />
       </Router>
     </Provider>
   );

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { memo, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import debounce from "lodash/debounce";
 import PT from "prop-types";
@@ -103,4 +103,4 @@ const PAYMENT_STATUS_OPTIONS = [
   { value: PAYMENT_STATUS.NO_DAYS, label: "No Days" },
 ];
 
-export default PeriodFilters;
+export default memo(PeriodFilters);

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

@@ -23,9 +23,13 @@ const Periods = () => {
   const isLoading = useSelector(getWorkPeriodsIsLoading);
   const dispatch = useDispatch();
 
-  // Load working periods' first page once when page loads and then
-  // only if page size or sorting changes.
+  // Load working periods' page once the page is loaded.
   useEffect(() => {
+    dispatch(loadWorkPeriodsPage());
+  }, [dispatch]);
+
+  // Load working periods' first page only if page size or sorting changes.
+  useUpdateEffect(() => {
     dispatch(loadWorkPeriodsPage(1));
   }, [dispatch, pagination.pageSize, sorting]);
 

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

@@ -0,0 +1,38 @@
+import { memo, useCallback, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useLocation, useNavigate } from "@reach/router";
+import debounce from "lodash/debounce";
+import { WORK_PERIODS_PATH } from "constants/index.js";
+import { useUpdateEffect } from "utils/hooks";
+import { getWorkPeriodsUrlQuery } from "store/selectors/workPeriods";
+import { updateStateFromQuery } from "store/actions/workPeriods";
+
+const PeriodsUrl = () => {
+  const query = useSelector(getWorkPeriodsUrlQuery);
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const updateUrl = useCallback(
+    debounce(
+      (query) => {
+        navigate(`${WORK_PERIODS_PATH}?${query}`);
+      },
+      300,
+      { leading: false }
+    ),
+    [navigate]
+  );
+
+  useEffect(() => {
+    updateUrl(query);
+  }, [updateUrl, query]);
+
+  useUpdateEffect(() => {
+    dispatch(updateStateFromQuery(location.search));
+  }, [dispatch, location.search]);
+
+  return null;
+};
+
+export default memo(PeriodsUrl);

src/routes/WorkPeriods/index.jsx

@@ -8,6 +8,7 @@ import PeriodsContentHeader from "./components/PeriodsContentHeader";
 import PeriodFilters from "./components/PeriodFilters";
 import Periods from "./components/Periods";
 import PeriodCount from "./components/PeriodCount";
+import PeriodsUrl from "./components/PeriodsUrl";
 import PeriodsPagination from "./components/PeriodsPagination";
 import PeriodsSelectionMessage from "./components/PeriodsSelectionMessage";
 import PeriodWeekPicker from "./components/PeriodWeekPicker";
@@ -45,6 +46,7 @@ const WorkPeriods = () => (
         </div>
       </ContentBlock>
     </Content>
+    <PeriodsUrl />
   </Page>
 );
 

src/services/workPeriods.js

@@ -4,7 +4,7 @@ import {
   JOBS_API_URL,
   PAYMENTS_API_URL,
   PROJECTS_API_URL,
-  QUERY_PARAM_NAMES,
+  API_QUERY_PARAM_NAMES,
   WORK_PERIODS_API_URL,
 } from "constants/workPeriods";
 import { buildRequestQuery, extractResponseData } from "utils/misc";
@@ -98,9 +98,12 @@ export const fetchWorkPeriods = (rbId, source) => {
 export const fetchResourceBookings = (params) => {
   const source = CancelToken.source();
   return [
-    axios.get(`${RB_API_URL}?${buildRequestQuery(params, QUERY_PARAM_NAMES)}`, {
-      cancelToken: source.token,
-    }),
+    axios.get(
+      `${RB_API_URL}?${buildRequestQuery(params, API_QUERY_PARAM_NAMES)}`,
+      {
+        cancelToken: source.token,
+      }
+    ),
     source,
   ];
 };

src/store/actionTypes/workPeriods.js

@@ -33,3 +33,4 @@ export const WP_TOGGLE_PERIOD = "WP_TOGGLE_PERIOD";
 export const WP_TOGGLE_PERIODS_ALL = "WP_TOGGLE_PERIODS_ALL";
 export const WP_TOGGLE_PERIODS_VISIBLE = "WP_TOGGLE_PERIODS_VISIBLE";
 export const WP_TOGGLE_PROCESSING_PAYMENTS = "WP_TOGGLE_PROCESSING_PAYMENTS";
+export const WP_UPDATE_STATE_FROM_QUERY = "WP_UPDATE_STATE_FROM_QUERY";

src/store/actions/workPeriods.js

@@ -383,3 +383,15 @@ export const toggleWorkPeriodsProcessingPeyments = (on = null) => ({
   type: ACTION_TYPE.WP_TOGGLE_PROCESSING_PAYMENTS,
   payload: on,
 });
+
+/**
+ * Creates an action denoting an update of working periods state slice using
+ * the provided query.
+ *
+ * @param {string} query URL search query
+ * @returns {Object}
+ */
+export const updateStateFromQuery = (query) => ({
+  type: ACTION_TYPE.WP_UPDATE_STATE_FROM_QUERY,
+  payload: query,
+});

src/store/reducers/workPeriods.js

@@ -50,6 +50,9 @@ export const getWorkPeriodsSelected = (state) =>
  */
 export const getWorkPeriodsFilters = (state) => state.workPeriods.filters;
 
+export const getWorkPeriodsPaymentStatuses = (state) =>
+  state.workPeriods.filters.paymentStatuses;
+
 export const getWorkPeriodsDateRange = (state) =>
   state.workPeriods.filters.dateRange;
 
@@ -59,9 +62,14 @@ export const getWorkPeriodsSorting = (state) => state.workPeriods.sorting;
 
 export const getWorkPeriodsPagination = (state) => state.workPeriods.pagination;
 
+export const getWorkPeriodsPageNumber = (state) =>
+  state.workPeriods.pagination.pageNumber;
+
 export const getWorkPeriodsPageSize = (state) =>
   state.workPeriods.pagination.pageSize;
 
+export const getWorkPeriodsUrlQuery = (state) => state.workPeriods.query;
+
 export const getWorkPeriodsCount = (state) => state.workPeriods.periods.length;
 
 export const getWorkPeriodsData = (state) => state.workPeriods.periodsData;

src/store/selectors/workPeriods.js

@@ -7,7 +7,7 @@ import {
   API_SORT_BY,
   DATE_FORMAT_API,
   PAYMENT_STATUS_MAP,
-  FIELDS_QUERY,
+  API_FIELDS_QUERY,
   JOB_NAME_NONE,
 } from "constants/workPeriods";
 import {
@@ -66,7 +66,7 @@ export const loadWorkPeriodsPage =
     // For parameter description see:
     // https://topcoder-platform.github.io/taas-apis/#/ResourceBookings/get_resourceBookings
     const [promise, cancelSource] = services.fetchResourceBookings({
-      fields: FIELDS_QUERY,
+      fields: API_FIELDS_QUERY,
       page: pageNumber,
       perPage: pagination.pageSize,
       sortBy,