StopSearch: Simplify and use new router state hook

* Drop the duplicate StopRegistryMainPage. In the MVP version the only
  thing on that page is the search filters form. For now we can just
  drop the page completely and use the actual proper Search page as
  the "Main" or front page of the Stop Registry.
* Switch from manual History API state handling to the new unified
  typed router state hook.

Author: Huulivoide

cypress/e2e/stop-registry/stopSearch.cy.ts

@@ -177,24 +177,18 @@ describe('Stop search', () => {
     );
   }
 
-  function setupTestsAndNavigateToPage(
-    qs: Record<string, unknown>,
-    startOnResultPage: boolean = false,
-  ) {
+  function setupTestsAndNavigateToPage(qs: Record<string, unknown>) {
     cy.setupTests();
     cy.mockLogin();
 
-    if (startOnResultPage) {
-      cy.visit({ url: '/stop-registry/search', qs });
-    } else {
-      cy.visit({ url: '/stop-registry', qs });
-    }
+    cy.visit({ url: '/stop-registry/search', qs });
+
     stopSearchBar.getSearchInput().clear();
   }
 
   function initWithHardcodedData() {
     insertHardcodedTestDataBeforeEach();
-    setupTestsAndNavigateToPage({}, false);
+    setupTestsAndNavigateToPage({});
   }
 
   describe('by label', () => {
@@ -1272,7 +1266,7 @@ describe('Stop search', () => {
         stopPlaces,
       });
 
-      setupTestsAndNavigateToPage({}, true);
+      setupTestsAndNavigateToPage({});
     });
 
     it('should visualise priorities correctly', () => {
@@ -1468,7 +1462,7 @@ describe('Stop search', () => {
         .then((infoSpotData) => cy.task('insertInfoSpots', infoSpotData));
     });
 
-    beforeEach(() => setupTestsAndNavigateToPage({ pageSize: 100 }, true));
+    beforeEach(() => setupTestsAndNavigateToPage({ pageSize: 100 }));
 
     function shouldHaveResultWithout(
       ...unexpectedStops: ReadonlyArray<string | ReadonlyArray<string>>
@@ -1782,7 +1776,7 @@ describe('Stop search', () => {
     }
 
     it('Should show and zoom-in on a tightly packed result set', () => {
-      setupTestsAndNavigateToPage({ pageSize: 100 }, true);
+      setupTestsAndNavigateToPage({ pageSize: 100 });
 
       searchAndOpenPoleTypeResultsOnAMap(
         StopRegistryShelterType.Urban,
@@ -1794,7 +1788,7 @@ describe('Stop search', () => {
 
     it('Should show and zoom-out to a sparsely distributed result set', () => {
       // Simulate situation with many results that don't fit on a single page.
-      setupTestsAndNavigateToPage({ pageSize: 2 }, true);
+      setupTestsAndNavigateToPage({ pageSize: 2 });
 
       searchAndOpenPoleTypeResultsOnAMap(
         StopRegistryShelterType.Post,

ui/src/components/stop-registry/index.ts

@@ -1,3 +1,2 @@
-export * from './main';
 export * from './search';
 export * from './stops';

ui/src/components/stop-registry/main/StopRegistryMainPage.tsx

@@ -1,13 +1,11 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
-import { Link, To, useLocation } from 'react-router';
 import { Container, Row } from '../../../layoutComponents';
-import { resetSelectedRowsAction } from '../../../redux';
-import { Path } from '../../../router/routeDetails';
 import { defaultPagingInfo } from '../../../types';
+import { CloseIconButton } from '../../../uiComponents';
+import { areEqual } from '../../../utils';
 import { PageTitle } from '../../common';
-import { useToggle } from '../../common/hooks/useToggle';
+import { OpenDefaultMapButton } from '../../common/OpenDefaultMapButton';
 import { StopsByLineSearchResults } from './by-line';
 import { StopSearchByStopResults } from './by-stop';
 import { StopSearchBar } from './components';
@@ -17,28 +15,55 @@ import {
   SearchBy,
   SearchFor,
   StopSearchFilters,
-  StopSearchNavigationState,
   StopSearchResultsProps,
   defaultFilters,
   defaultSortingInfo,
 } from './types';
-import { trSearchFor, useStopSearchUrlState } from './utils';
+import { trSearchFor, useStopSearchRouterState } from './utils';
 
 const testIds = {
   container: 'StopSearchResultsPage::Container',
   closeButton: 'StopSearchResultsPage::closeButton',
 };
 
-function useCloseLink(): To {
-  const { search } = useLocation();
-  return { pathname: Path.stopRegistry, search };
-}
+const NoFiltersHeader: FC = () => {
+  const { t } = useTranslation();
 
-function getNavigationState(
-  searchIsExpanded: boolean,
-): StopSearchNavigationState {
-  return { searchExpanded: searchIsExpanded };
-}
+  return (
+    <Row className="justify-between">
+      <PageTitle.H1>{t('stops.stops')}</PageTitle.H1>
+      <OpenDefaultMapButton />
+    </Row>
+  );
+};
+
+type ActiveFiltersHeaderProps = {
+  readonly resetSearch: () => void;
+  readonly searchFor: SearchFor;
+};
+
+const ActiveFiltersHeader: FC<ActiveFiltersHeaderProps> = ({
+  resetSearch,
+  searchFor,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Row className="justify-between">
+      <PageTitle.H1>
+        {t('search.searchResultsTitleFor', {
+          for: trSearchFor(t, searchFor),
+        })}
+      </PageTitle.H1>
+      <CloseIconButton
+        className="text-lg font-bold text-brand"
+        label={t('close')}
+        onClick={resetSearch}
+        testId={testIds.closeButton}
+      />
+    </Row>
+  );
+};
 
 const Results: FC<StopSearchResultsProps> = ({
   filters,
@@ -95,26 +120,19 @@ const Results: FC<StopSearchResultsProps> = ({
 };
 
 export const StopSearchResultPage: FC = () => {
-  const { t } = useTranslation();
-  const dispatch = useDispatch();
-  const location = useLocation();
-
-  const closeLink = useCloseLink();
   const {
     state: { filters, pagingInfo, sortingInfo },
-    setFlatState,
+    historyState: { searchIsExpanded },
+    setHistoryState,
     setPagingInfo,
+    setSearchState,
     setSortingInfo,
-  } = useStopSearchUrlState();
+  } = useStopSearchRouterState();
 
-  const [searchIsExpanded, toggleSearchIsExpanded] = useToggle(
-    location.state?.searchExpanded,
-  );
+  const hasActiveFilters = !areEqual(defaultFilters, filters);
 
   const onSubmitFilters = (nextFilters: StopSearchFilters) => {
-    dispatch(resetSelectedRowsAction());
-
-    setFlatState({
+    setSearchState({
       ...defaultFilters,
       ...nextFilters,
       ...defaultSortingInfo,
@@ -125,34 +143,42 @@ export const StopSearchResultPage: FC = () => {
 
   return (
     <Container testId={testIds.container}>
-      <Row>
-        <PageTitle.H1>
-          {`${t('search.searchResultsTitle')} | ${trSearchFor(t, filters.searchFor)}`}
-        </PageTitle.H1>
-        <Link
-          className="ml-auto text-base font-bold text-brand"
-          to={closeLink}
-          data-testid={testIds.closeButton}
-          state={getNavigationState(searchIsExpanded)}
-        >
-          {t('close')}
-          <i className="icon-close-large ml-4 text-lg" />
-        </Link>
-      </Row>
+      {hasActiveFilters ? (
+        <ActiveFiltersHeader
+          resetSearch={() =>
+            setSearchState({
+              ...defaultFilters,
+              ...defaultSortingInfo,
+              ...defaultPagingInfo,
+            })
+          }
+          searchFor={filters.searchFor}
+        />
+      ) : (
+        <NoFiltersHeader />
+      )}
+
       <StopSearchBar
         initialFilters={filters}
         searchIsExpanded={searchIsExpanded}
-        toggleSearchIsExpanded={toggleSearchIsExpanded}
+        toggleSearchIsExpanded={() =>
+          setHistoryState((p) => ({
+            ...p,
+            searchIsExpanded: !p.searchIsExpanded,
+          }))
+        }
         onSubmit={onSubmitFilters}
       />
 
-      <Results
-        filters={filters}
-        pagingInfo={pagingInfo}
-        setPagingInfo={setPagingInfo}
-        setSortingInfo={setSortingInfo}
-        sortingInfo={sortingInfo}
-      />
+      {hasActiveFilters && (
+        <Results
+          filters={filters}
+          pagingInfo={pagingInfo}
+          setPagingInfo={setPagingInfo}
+          setSortingInfo={setSortingInfo}
+          sortingInfo={sortingInfo}
+        />
+      )}
     </Container>
   );
 };

ui/src/components/stop-registry/main/index.ts

@@ -3,6 +3,5 @@ export * from './SearchFor';
 export * from './SortingInfo';
 export * from './SortStopsBy';
 export * from './StopSearchFilters';
-export * from './StopSearchNavigationState';
 export * from './StopSearchResultsProps';
 export * from './StringMunicipality';

ui/src/components/stop-registry/search/StopSearchResultsPage.tsx

@@ -1,3 +1,3 @@
 export * from './trSearchFor';
 export * from './useNumericSortingCollator';
-export * from './useStopSearchUrlState';
+export * from './useStopSearchRouterState';