Added userHandle to URL query.

Author: MadOPcode

src/components/SearchHandleField/index.jsx

@@ -24,6 +24,9 @@ const noOptionsMessage = () => "No suggestions";
  * @param {string} props.name name for input element
  * @param {'medium'|'small'} [props.size] field size
  * @param {function} props.onChange function called when input value changes
+ * @param {function} [props.onInputChange] function called when input value changes
+ * @param {function} [props.onBlur] function called when input is blurred
+ * @param {function} [props.onMenuClose] function called when option list is closed
  * @param {string} props.value input value
  * @returns {JSX.Element}
  */
@@ -33,6 +36,9 @@ const SearchHandleField = ({
   name,
   size = "medium",
   onChange,
+  onInputChange,
+  onBlur,
+  onMenuClose,
   placeholder,
   value,
 }) => {
@@ -47,13 +53,13 @@ const SearchHandleField = ({
     [onChange]
   );
 
-  const onInputChange = useCallback(
+  const onInputValueChange = useCallback(
     (value, { action }) => {
       if (action === "input-change") {
-        onChange(value);
+        onInputChange(value);
       }
     },
-    [onChange]
+    [onInputChange]
   );
 
   return (
@@ -71,7 +77,9 @@ const SearchHandleField = ({
         value={null}
         inputValue={value}
         onChange={onValueChange}
-        onInputChange={onInputChange}
+        onInputChange={onInputValueChange}
+        onBlur={onBlur}
+        onMenuClose={onMenuClose}
         openMenuOnClick={false}
         placeholder={placeholder}
         noOptionsMessage={noOptionsMessage}
@@ -108,6 +116,9 @@ SearchHandleField.propTypes = {
   size: PT.oneOf(["medium", "small"]),
   name: PT.string.isRequired,
   onChange: PT.func.isRequired,
+  onInputChange: PT.func,
+  onBlur: PT.func,
+  onMenuClose: PT.func,
   placeholder: PT.string,
   value: PT.oneOfType([PT.number, PT.string]),
 };

src/constants/workPeriods.js

@@ -98,6 +98,16 @@ export const API_CHALLENGE_PAYMENT_STATUS_MAP = {
   scheduled: PAYMENT_STATUS.SCHEDULED,
 };
 
+export const URL_QUERY_PARAM_MAP = new Map([
+  ["startDate", "startDate"],
+  ["paymentStatuses", "status"],
+  ["userHandle", "user"],
+  ["criteria", "by"],
+  ["order", "order"],
+  ["pageSize", "perPage"],
+  ["pageNumber", "page"],
+]);
+
 export const JOB_NAME_LOADING = "Loading...";
 export const JOB_NAME_NONE = "<Job is not assigned>";
 export const JOB_NAME_ERROR = "<Error loading job>";

src/root.component.jsx

@@ -19,7 +19,7 @@ export default function Root() {
 
   return (
     <Provider store={store}>
-      <Router primary={false}>
+      <Router>
         <Redirect from={APP_BASE_PATH} to={WORK_PERIODS_PATH} exact noThrow />
         <WorkPeriods path={WORK_PERIODS_PATH} />
         <Freelancers path={FREELANCERS_PATH} />

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

@@ -14,7 +14,10 @@ import {
   setWorkPeriodsPaymentStatuses,
   setWorkPeriodsUserHandle,
 } from "store/actions/workPeriods";
-import { loadWorkPeriodsPage as loadWorkingPeriodsPage } from "store/thunks/workPeriods";
+import {
+  loadWorkPeriodsPage,
+  updateQueryFromState,
+} from "store/thunks/workPeriods";
 import { useUpdateEffect } from "utils/hooks";
 import styles from "./styles.module.scss";
 
@@ -34,25 +37,39 @@ const PeriodFilters = ({ className }) => {
   const onUserHandleChange = useCallback(
     (value) => {
       dispatch(setWorkPeriodsUserHandle(value));
+      dispatch(updateQueryFromState());
     },
     [dispatch]
   );
 
+  const onUserHandleInputChange = useCallback(
+    (value) => {
+      dispatch(setWorkPeriodsUserHandle(value));
+    },
+    [dispatch]
+  );
+
+  const updateUrlQuery = useCallback(() => {
+    dispatch(updateQueryFromState());
+  }, [dispatch]);
+
   const onPaymentStatusesChange = useCallback(
     (statuses) => {
       dispatch(setWorkPeriodsPaymentStatuses(statuses));
+      dispatch(updateQueryFromState());
     },
     [dispatch]
   );
 
   const onClearFilter = useCallback(() => {
     dispatch(resetWorkPeriodsFilters());
+    dispatch(updateQueryFromState());
   }, [dispatch]);
 
   const loadWorkingPeriodsFirstPage = useCallback(
     debounce(
       () => {
-        dispatch(loadWorkingPeriodsPage(1));
+        dispatch(loadWorkPeriodsPage);
       },
       300,
       { leading: false }
@@ -71,6 +88,9 @@ const PeriodFilters = ({ className }) => {
           name="topcoder_handle"
           placeholder="Search Topcoder Handle"
           onChange={onUserHandleChange}
+          onInputChange={onUserHandleInputChange}
+          onBlur={updateUrlQuery}
+          // onMenuClose={updateUrlQuery}
           value={userHandle}
         />
       </div>

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

@@ -12,6 +12,7 @@ import {
   setWorkPeriodsSorting,
   toggleWorkingPeriodsVisible,
 } from "store/actions/workPeriods";
+import { updateQueryFromState } from "store/thunks/workPeriods";
 import styles from "./styles.module.scss";
 
 /**
@@ -29,6 +30,7 @@ const PeriodListHead = () => {
   const onSortingChange = useCallback(
     (sorting) => {
       dispatch(setWorkPeriodsSorting(sorting));
+      dispatch(updateQueryFromState());
     },
     [dispatch]
   );

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

@@ -6,6 +6,7 @@ import moment from "moment";
 import WeekPicker from "components/WeekPicker";
 import { getWorkPeriodsDateRange } from "store/selectors/workPeriods";
 import { setWorkPeriodsDateRange } from "store/actions/workPeriods";
+import { updateQueryFromState } from "store/thunks/workPeriods";
 import styles from "./styles.module.scss";
 
 /**
@@ -22,16 +23,19 @@ const PeriodWeekPicker = ({ className }) => {
   const onWeekSelect = useCallback(
     (date) => {
       dispatch(setWorkPeriodsDateRange(moment(date)));
+      dispatch(updateQueryFromState());
     },
     [dispatch]
   );
 
   const onNextWeekSelect = useCallback(() => {
     dispatch(setWorkPeriodsDateRange(startDate.clone().add(1, "week")));
+    dispatch(updateQueryFromState());
   }, [startDate, dispatch]);
 
   const onPreviousWeekSelect = useCallback(() => {
     dispatch(setWorkPeriodsDateRange(startDate.clone().add(-1, "week")));
+    dispatch(updateQueryFromState());
   }, [startDate, dispatch]);
 
   return (

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

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
+import { globalHistory } from "@reach/router";
 import ContentMessage from "components/ContentMessage";
 import PeriodList from "../PeriodList";
 import {
@@ -8,8 +9,8 @@ import {
   getWorkPeriodsPagination,
   getWorkPeriodsSorting,
 } from "store/selectors/workPeriods";
+import { updateStateFromQuery } from "store/actions/workPeriods";
 import { loadWorkPeriodsPage } from "store/thunks/workPeriods";
-import { useUpdateEffect } from "utils/hooks";
 
 /**
  * Displays working periods' list or a "Loading..." message or an error message.
@@ -23,20 +24,18 @@ const Periods = () => {
   const isLoading = useSelector(getWorkPeriodsIsLoading);
   const dispatch = useDispatch();
 
-  // Load working periods' page once the page is loaded.
+  // Load working periods' page only if page number, page size or sorting changes.
   useEffect(() => {
-    dispatch(loadWorkPeriodsPage());
-  }, [dispatch]);
-
-  // Load working periods' first page only if page size or sorting changes.
-  useUpdateEffect(() => {
-    dispatch(loadWorkPeriodsPage(1));
-  }, [dispatch, pagination.pageSize, sorting]);
+    dispatch(loadWorkPeriodsPage);
+  }, [dispatch, pagination.pageNumber, pagination.pageSize, sorting]);
 
-  // Load working periods' new page if page number changes.
-  useUpdateEffect(() => {
-    dispatch(loadWorkPeriodsPage());
-  }, [dispatch, pagination.pageNumber]);
+  useEffect(() => {
+    return globalHistory.listen(({ action, location }) => {
+      if (action === "POP") {
+        dispatch(updateStateFromQuery(location.search));
+      }
+    });
+  }, [dispatch]);
 
   return (
     <>

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

@@ -8,6 +8,7 @@ import {
   setWorkPeriodsPageNumber,
   setWorkPeriodsPageSize,
 } from "store/actions/workPeriods";
+import { updateQueryFromState } from "store/thunks/workPeriods";
 import styles from "./styles.module.scss";
 
 /**
@@ -25,13 +26,15 @@ const PeriodsPagination = ({ className, id }) => {
   const onPageNumberClick = useCallback(
     (pageNumber) => {
       dispatch(setWorkPeriodsPageNumber(+pageNumber));
+      dispatch(updateQueryFromState());
     },
     [dispatch]
   );
 
   const onPageSizeChange = useCallback(
     (pageSize) => {
       dispatch(setWorkPeriodsPageSize(+pageSize));
+      dispatch(updateQueryFromState());
     },
     [dispatch]
   );

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

@@ -8,7 +8,6 @@ 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";
@@ -46,7 +45,6 @@ const WorkPeriods = () => (
         </div>
       </ContentBlock>
     </Content>
-    <PeriodsUrl />
   </Page>
 );
 

src/routes/WorkPeriods/index.jsx

@@ -7,12 +7,11 @@ let nextErrorId = 1;
  * Creates an action denoting the start of loading specific challenge page.
  *
  * @param {Object} cancelSource object that can be used to cancel network request
- * @param {number} pageNumber the requested challenge page number
  * @returns {Object}
  */
-export const loadWorkPeriodsPagePending = (cancelSource, pageNumber) => ({
+export const loadWorkPeriodsPagePending = (cancelSource) => ({
   type: ACTION_TYPE.WP_LOAD_PAGE_PENDING,
-  payload: { cancelSource, pageNumber },
+  payload: cancelSource,
 });
 
 /**