Skip to content

Commit

Permalink
feat: retain search context between places list and details
Browse files Browse the repository at this point in the history
  • Loading branch information
@DanWebb
DanWebb committed Jun 18, 2024
1 parent f8d0ab4 commit b8c8ec4
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 53 deletions.
2 changes: 1 addition & 1 deletion src/pages/[postcode]/places/map.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export function PlacesMapPageContent({
<diamond-grid-item small-mobile="6">
<diamond-button width="full-width" variant="primary" size="sm">
<Link
to={`/${postcode}/places/${activeLocationName}/${activeLocationPostcode}`}
to={`/${postcode}/places/${activeLocationName}/${activeLocationPostcode}?${searchParams.toString()}`}
>
{t('actions.viewDetails')}
</Link>
Expand Down
125 changes: 74 additions & 51 deletions src/pages/[postcode]/places/place/place.layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,14 @@ import { ComponentChildren } from 'preact';
import { Suspense } from 'preact/compat';
import { useRef } from 'preact/hooks';
import { useTranslation } from 'react-i18next';
import { Await, Link, NavLink, Outlet, useParams } from 'react-router-dom';
import {
Await,
Link,
NavLink,
Outlet,
useParams,
useSearchParams,
} from 'react-router-dom';
import '@etchteam/diamond-ui/canvas/Section/Section';
import '@etchteam/diamond-ui/composition/Grid/Grid';
import '@etchteam/diamond-ui/composition/Grid/GridItem';
Expand All @@ -19,18 +26,76 @@ import PlacesMap from '@/components/control/PlacesMap/PlacesMap';
import directions from '@/lib/directions';
import useAnalytics from '@/lib/useAnalytics';
import useScrollRestoration from '@/lib/useScrollRestoration';
import { Location } from '@/types/locatorApi';

import { usePlaceLoaderData } from './place.loader';

function PlaceMap({ location }: { readonly location: Location }) {
const { t } = useTranslation();
const [searchParams] = useSearchParams();
const { postcode } = useParams();
const { recordEvent } = useAnalytics();

const mapSearchParams = new URLSearchParams(searchParams);
mapSearchParams.set('lat', String(location.latitude));
mapSearchParams.set('lng', String(location.longitude));
mapSearchParams.set('activeLocation', location.id);
const mapUrl = `/${postcode}/places/map?${mapSearchParams.toString()}`;

return (
<PlacesMap
latitude={location.latitude}
longitude={location.longitude}
locations={[location]}
activeLocationId={location.id}
static
>
<Link to={mapUrl} aria-label={t('actions.showMap')}>
<locator-places-map-scrim />
</Link>
<locator-places-map-card>
<diamond-grid>
<diamond-grid-item small-mobile="6">
<diamond-button width="full-width" size="sm">
<Link to={mapUrl}>
<locator-icon icon="map" />
{t('actions.showMap')}
</Link>
</diamond-button>
</diamond-grid-item>
<diamond-grid-item small-mobile="6">
<diamond-button width="full-width" size="sm">
<a
href={directions(postcode, location.address)}
target="_blank"
rel="noopener noreferrer"
onClick={() => {
recordEvent({
category: 'PlaceDetails::Directions',
action: location.address,
});
}}
>
{t('actions.directions')}
<locator-icon icon="external" />
</a>
</diamond-button>
</diamond-grid-item>
</diamond-grid>
</locator-places-map-card>
</PlacesMap>
);
}

export default function PlaceLayout({
children,
}: {
readonly children?: ComponentChildren;
}) {
const { t } = useTranslation();
const [searchParams] = useSearchParams();
const { postcode, placeName, placePostcode } = useParams();
const { location: locationPromise } = usePlaceLoaderData();
const { recordEvent } = useAnalytics();
const layoutRef = useRef();
useScrollRestoration(layoutRef);
const safePlaceName = encodeURIComponent(placeName);
Expand All @@ -46,7 +111,10 @@ export default function PlaceLayout({
<locator-header-content>
<locator-header-title>
<diamond-button>
<Link to={`/${postcode}/places`} unstable_viewTransition>
<Link
to={`/${postcode}/places?${searchParams.toString()}`}
unstable_viewTransition
>
<locator-icon icon="arrow-left" label="Back"></locator-icon>
</Link>
</diamond-button>
Expand All @@ -63,7 +131,7 @@ export default function PlaceLayout({
<ul>
<li>
<NavLink
to={`/${postcode}/places/${safePlaceName}/${placePostcode}`}
to={`/${postcode}/places/${safePlaceName}/${placePostcode}?${searchParams.toString()}`}
unstable_viewTransition
end
>
Expand All @@ -72,7 +140,7 @@ export default function PlaceLayout({
</li>
<li>
<NavLink
to={`/${postcode}/places/${safePlaceName}/${placePostcode}/details`}
to={`/${postcode}/places/${safePlaceName}/${placePostcode}/details?${searchParams.toString()}`}
unstable_viewTransition
>
{t('place.nav.details')}
Expand All @@ -93,52 +161,7 @@ export default function PlaceLayout({
<Await resolve={locationPromise}>
{(location) =>
location?.latitude ? (
<PlacesMap
latitude={location.latitude}
longitude={location.longitude}
locations={[location]}
activeLocationId={location.id}
static
>
<Link
to={`/${postcode}/places/map?lat=${location.latitude}&lng=${location.longitude}&activeLocation=${location.id}`}
aria-label={t('actions.showMap')}
>
<locator-places-map-scrim />
</Link>
<locator-places-map-card>
<diamond-grid>
<diamond-grid-item small-mobile="6">
<diamond-button width="full-width" size="sm">
<Link
to={`/${postcode}/places/map?lat=${location.latitude}&lng=${location.longitude}&activeLocation=${location.id}`}
>
<locator-icon icon="map" />
{t('actions.showMap')}
</Link>
</diamond-button>
</diamond-grid-item>
<diamond-grid-item small-mobile="6">
<diamond-button width="full-width" size="sm">
<a
href={directions(postcode, location.address)}
target="_blank"
rel="noopener noreferrer"
onClick={() => {
recordEvent({
category: 'PlaceDetails::Directions',
action: location.address,
});
}}
>
{t('actions.directions')}
<locator-icon icon="external" />
</a>
</diamond-button>
</diamond-grid-item>
</diamond-grid>
</locator-places-map-card>
</PlacesMap>
<PlaceMap location={location} />
) : (
<locator-map-svg></locator-map-svg>
)
Expand Down
4 changes: 3 additions & 1 deletion src/pages/[postcode]/places/places.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,8 @@ function Places({
const currentPage = limit / 30;
const maxLimit = 120;
const showLoadMore = showLocations && count >= limit && limit !== maxLimit;
const locationSearchParams = new URLSearchParams(searchParams);
locationSearchParams.set('page', String(currentPage));

const handleResetSearch = () => {
searchParams.delete('materials');
Expand Down Expand Up @@ -150,7 +152,7 @@ function Places({
return (
<li key={`${location.id}`}>
<Link
to={`/${postcode}/places/${locationName}/${locationPostcode}`}
to={`/${postcode}/places/${locationName}/${locationPostcode}?${locationSearchParams.toString()}`}
>
<diamond-enter type="fade">
<diamond-card border radius>
Expand Down

0 comments on commit b8c8ec4

Please sign in to comment.