[OSDEV-1701] - Refactor Go Back button

doc/release/RELEASE-NOTES.md

@@ -61,7 +61,7 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
     All other traffic will be redirected to the React application.
 
 ### Bugfix
-* *Describe bugfix here.*
+* [OSDEV-1701](https://opensupplyhub.atlassian.net/browse/OSDEV-1701) - Refactored "Go Back" button in production location info page.
 
 ### What's new
 * [OSDEV-1662](https://opensupplyhub.atlassian.net/browse/OSDEV-1662) - Added a new field, `action_perform_by`, to the moderation event. This data appears on the Contribution Record page when a moderator perform any actions like `APPROVED` or `REJECTED`.

src/react/src/components/Contribute/ProductionLocationInfo.jsx

@@ -1,16 +1,10 @@
-import React, {
-    useEffect,
-    useMemo,
-    useState,
-    useRef,
-    useCallback,
-} from 'react';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import { useLocation, useParams, useHistory } from 'react-router-dom';
 import { withStyles } from '@material-ui/core/styles';
-import { array, bool, func, number, object, shape, string } from 'prop-types';
+import { array, bool, func, number, object, string } from 'prop-types';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
-import { endsWith, isEmpty, isNil, omitBy, toString } from 'lodash';
+import { endsWith, isEmpty, toString } from 'lodash';
 import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import TextField from '@material-ui/core/TextField';
@@ -52,7 +46,6 @@ import {
 import {
     mockedSectors,
     productionLocationInfoRouteCommon,
-    searchByNameAndAddressResultRoute,
     MODERATION_STATUSES_ENUM,
 } from '../../util/constants';
 import COLOURS from '../../util/COLOURS';
@@ -77,7 +70,6 @@ const ProductionLocationInfo = ({
     fetchProductionLocation,
     singleProductionLocationData,
     innerWidth,
-    searchParameters,
     handleCleanupContributionRecord,
     handleResetPendingModerationEvent,
 }) => {
@@ -160,14 +152,6 @@ const ProductionLocationInfo = ({
         setAddressTouched(true);
         setInputAddress(event.target.value);
     };
-    const handleGoBack = useCallback(() => {
-        const { name, address, country } = searchParameters;
-        const filteredParams = omitBy({ name, address, country }, isNil);
-        const params = new URLSearchParams(filteredParams);
-
-        const url = `${searchByNameAndAddressResultRoute}?${params.toString()}`;
-        history.push(url);
-    }, [searchParameters, history]);
 
     let handleProductionLocation;
     switch (submitMethod) {
@@ -756,7 +740,7 @@ const ProductionLocationInfo = ({
                     <div className={classes.buttonsContainerStyles}>
                         <Button
                             variant="outlined"
-                            onClick={handleGoBack}
+                            onClick={() => history.goBack()}
                             className={classes.goBackButtonStyles}
                         >
                             Go Back
@@ -810,11 +794,6 @@ ProductionLocationInfo.defaultProps = {
     singleModerationEventItem: null,
     singleModerationEventItemFetching: false,
     singleModerationEventItemError: null,
-    searchParameters: shape({
-        name: null,
-        address: null,
-        country: null,
-    }),
 };
 
 ProductionLocationInfo.propTypes = {
@@ -836,11 +815,6 @@ ProductionLocationInfo.propTypes = {
     submitMethod: string.isRequired,
     classes: object.isRequired,
     innerWidth: number.isRequired,
-    searchParameters: shape({
-        name: string,
-        address: string,
-        country: string,
-    }),
     handleCleanupContributionRecord: func.isRequired,
     handleResetPendingModerationEvent: func.isRequired,
 };
@@ -868,7 +842,6 @@ const mapStateToProps = ({
     ui: {
         window: { innerWidth },
     },
-    searchParameters,
 }) => ({
     countriesOptions,
     facilityProcessingTypeOptions,
@@ -880,7 +853,6 @@ const mapStateToProps = ({
     singleModerationEventItemError,
     singleProductionLocationData,
     innerWidth,
-    searchParameters,
 });
 
 function mapDispatchToProps(dispatch) {

src/react/src/components/Contribute/SearchByNameAndAddressSuccessResult.jsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import { connect } from 'react-redux';
+import React, { useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import { arrayOf, func, object } from 'prop-types';
 import Button from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
@@ -10,28 +9,17 @@ import { makeSearchByNameAndAddressSuccessResultStyles } from '../../util/styles
 import { productionLocationPropType } from '../../util/propTypes';
 import ConfirmNotFoundLocationDialog from './ConfirmNotFoundLocationDialog';
 import ProductionLocationDetails from './ProductionLocationDetails';
-import {
-    saveSearchParameters,
-    clearSearchParameters,
-} from '../../actions/searchParameters';
 
 const SearchByNameAndAddressSuccessResult = ({
     productionLocations,
     clearLocations,
     classes,
-    handleSaveSearchParameters,
-    handleClearSearchParameters,
 }) => {
     const history = useHistory();
-    const location = useLocation();
 
     const [confirmDialogIsOpen, setConfirmDialogIsOpen] = useState(false);
     const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
-    useEffect(() => {
-        handleClearSearchParameters();
-    }, []);
-
     useEffect(() => {
         const handleScroll = () => {
             const isAtBottom =
@@ -46,22 +34,12 @@ const SearchByNameAndAddressSuccessResult = ({
         };
     }, []);
 
-    const handleSelectLocation = useCallback(
-        productionLocation => {
-            if (location?.search) {
-                const queryParams = new URLSearchParams(location.search);
-                const name = queryParams.get('name');
-                const address = queryParams.get('address');
-                const country = queryParams.get('country');
-                handleSaveSearchParameters({ name, address, country });
-            }
-            const baseUrl = makeContributeProductionLocationUpdateURL(
-                productionLocation.os_id,
-            );
-            history.push(baseUrl);
-        },
-        [handleSaveSearchParameters, history, location],
-    );
+    const handleSelectLocation = location => {
+        const baseUrl = makeContributeProductionLocationUpdateURL(
+            location.os_id,
+        );
+        history.push(baseUrl);
+    };
 
     const handleNotFoundLocation = () => {
         setConfirmDialogIsOpen(true);
@@ -159,23 +137,8 @@ SearchByNameAndAddressSuccessResult.propTypes = {
     productionLocations: arrayOf(productionLocationPropType).isRequired,
     clearLocations: func.isRequired,
     classes: object.isRequired,
-    handleSaveSearchParameters: func.isRequired,
-    handleClearSearchParameters: func.isRequired,
 };
 
-function mapDispatchToProps(dispatch) {
-    return {
-        handleSaveSearchParameters: parameters =>
-            dispatch(saveSearchParameters(parameters)),
-        handleClearSearchParameters: () => dispatch(clearSearchParameters()),
-    };
-}
-
-export default connect(
-    null,
-    mapDispatchToProps,
-)(
-    withStyles(makeSearchByNameAndAddressSuccessResultStyles)(
-        SearchByNameAndAddressSuccessResult,
-    ),
+export default withStyles(makeSearchByNameAndAddressSuccessResultStyles)(
+    SearchByNameAndAddressSuccessResult,
 );

src/react/src/reducers/index.js

@@ -36,7 +36,6 @@ import FacilityCardsReducer from './FacilityCardsReducer';
 import ContributeProductionLocationReducer from './ContributeProductionLocationReducer';
 import DashboardModerationQueueReducer from './DashboardModerationQueueReducer';
 import DashboardContributionRecordReducer from './DashboardContributionRecordReducer';
-import SearchParametersReducer from './SearchParametersReducer';
 
 export default combineReducers({
     auth: AuthReducer,
@@ -69,5 +68,4 @@ export default combineReducers({
     contributeProductionLocation: ContributeProductionLocationReducer,
     dashboardModerationQueue: DashboardModerationQueueReducer,
     dashboardContributionRecord: DashboardContributionRecordReducer,
-    searchParameters: SearchParametersReducer,
 });