feat: add location search history

src/components/search/__tests__/search.test.tsx

@@ -20,7 +20,6 @@ import userEvent from '@testing-library/user-event';
 import { SWRConfig } from 'swr';
 import React from 'react';
 import SwapButton from '../swap-button';
-import GeolocationButton from '../geolocation-button';
 
 const result = [
   {
@@ -212,20 +211,19 @@ describe('search box', () => {
   });
 
   it('should call getCurrentPosition when geolocating', async () => {
-    customRender(
-      <Search
-        label="Test"
-        placeholder="Test"
-        onChange={() => {}}
-        button={<GeolocationButton onGeolocate={() => {}} />}
-      />,
-    );
+    const fn = vi.fn();
+    customRender(<Search label="Test" placeholder="Test" onChange={fn} />);
 
-    const geolocationButton = screen.getByRole('button', {
-      name: 'Finn min posisjon',
+    // Set focus to open the dropdown
+    const input = screen.getByRole('textbox', {
+      name: /test/i,
     });
+    await userEvent.click(input);
 
-    await userEvent.click(geolocationButton);
+    const geolocationOption = screen.getByRole('option', {
+      name: 'Min posisjon',
+    });
+    await userEvent.click(geolocationOption);
 
     expect(mockGeolocation.getCurrentPosition).toHaveBeenCalled();
   });

src/components/search/index.ts

@@ -1,4 +1,3 @@
 export { default } from './search';
-export { default as GeolocationButton } from './geolocation-button';
 export { default as SwapButton } from './swap-button';
 export { default as ClearButton } from './clear-button';

src/components/search/search.module.css

@@ -59,6 +59,9 @@
   overflow-y: auto;
   z-index: 100;
 }
+.menuHeading {
+  padding-left: token('spacing.small');
+}
 
 .item {
   padding: token('spacing.small');

src/components/search/search.tsx

@@ -7,11 +7,17 @@ import { andIf } from '@atb/utils/css';
 import { GeocoderFeature } from '@atb/page-modules/departures';
 import { logSpecificEvent } from '@atb/modules/firebase';
 import { ComponentText, useTranslation } from '@atb/translations';
+import useLocalStorage from '@atb/utils/use-localstorage';
+import { Typo } from '../typography';
+import { useGeolocation } from './use-geolocation';
+import { MonoIcon } from '../icon';
+import { LoadingIcon } from '../loading';
 
 type SearchProps = {
   label: string;
   placeholder: string;
-  onChange: (selection: any) => void;
+  onChange: (selection: GeocoderFeature) => void;
+  onGeolocationError?: (error: string | null) => void;
   button?: ReactNode;
   initialFeature?: GeocoderFeature;
   selectedItem?: GeocoderFeature;
@@ -23,21 +29,41 @@ export default function Search({
   label,
   placeholder,
   onChange,
+  onGeolocationError,
   button,
   initialFeature,
   selectedItem,
   autocompleteFocusPoint,
   testID,
 }: SearchProps) {
   const [query, setQuery] = useState('');
+  const [focus, setFocus] = useState(false);
   const { data } = useAutocomplete(query, autocompleteFocusPoint);
   const { t } = useTranslation();
+  const [recentFeatureSearches, setRecentFeatureSearches] = useLocalStorage<
+    GeocoderFeature[]
+  >('recentFeatureSearches', []);
+  const {
+    getPosition,
+    isLoading: isGeolocationLoading,
+    isUnavailable: isGeolocationUnavailable,
+    isError: isGeolocationError,
+  } = useGeolocation(onChange, onGeolocationError);
 
   function getA11yStatusMessage({
     isOpen,
     resultCount,
     previousResultCount,
-  }: A11yStatusMessageOptions<GeocoderFeature>) {
+    inputValue,
+  }: A11yStatusMessageOptions<GeocoderFeature | 'location'>) {
+    if (focus && inputValue === '') {
+      return t(
+        ComponentText.SearchInput.previousResultA11yLabel(
+          recentFeatureSearches.length,
+        ),
+      );
+    }
+
     if (!isOpen) {
       return '';
     }
@@ -53,13 +79,27 @@ export default function Search({
     return '';
   }
 
+  const handleOnChange = (feature: GeocoderFeature | 'location' | null) => {
+    if (!feature) return;
+    if (feature === 'location') {
+      getPosition();
+      return;
+    }
+    // Add to recent searches, or move to top of list if already in list
+    setRecentFeatureSearches([
+      feature,
+      ...recentFeatureSearches.filter((f) => f.id !== feature.id).splice(0, 4),
+    ]);
+    onChange(feature);
+  };
+
   return (
-    <Downshift<GeocoderFeature>
+    <Downshift<GeocoderFeature | 'location'>
       onInputValueChange={(inputValue) => {
         logSpecificEvent('select_search');
         return setQuery(inputValue || '');
       }}
-      onChange={onChange}
+      onChange={handleOnChange}
       itemToString={geocoderFeatureToString}
       selectedItem={selectedItem || initialFeature || null}
       getA11yStatusMessage={getA11yStatusMessage}
@@ -89,13 +129,16 @@ export default function Search({
               placeholder={placeholder}
               {...getInputProps()}
               data-testid={testID}
+              onFocus={() => setFocus(true)}
+              onBlur={() => setFocus(false)}
             />
           </div>
 
           {button ?? null}
 
           <ul className={style.menu} {...getMenuProps()}>
             {isOpen &&
+              inputValue !== '' &&
               data?.map((item, index) => (
                 <li
                   className={andIf({
@@ -116,6 +159,64 @@ export default function Search({
                   <span className={style.itemLocality}>{item.locality}</span>
                 </li>
               ))}
+            {focus && inputValue === '' && (
+              <>
+                <li
+                  className={andIf({
+                    [style.item]: true,
+                    [style.itemHighlighted]: highlightedIndex === 0,
+                  })}
+                  {...getItemProps({
+                    index: 0,
+                    item: 'location',
+                  })}
+                  data-testid={`list-item-0`}
+                >
+                  <div className={style.itemIcon} aria-hidden>
+                    {isGeolocationLoading ? (
+                      <LoadingIcon />
+                    ) : (
+                      <MonoIcon icon="places/Location" />
+                    )}
+                  </div>
+                  <span className={style.itemName}>
+                    {isGeolocationUnavailable || isGeolocationError
+                      ? t(ComponentText.SearchInput.positionNotAvailable)
+                      : t(ComponentText.SearchInput.myPosition)}
+                  </span>
+                </li>
+                {recentFeatureSearches.length > 0 && (
+                  <li className={style.item}>
+                    <Typo.span
+                      textType="body__secondary"
+                      className={style.menuHeading}
+                    >
+                      {t(ComponentText.SearchInput.recentSearches)}
+                    </Typo.span>
+                  </li>
+                )}
+                {recentFeatureSearches.map((item, index) => (
+                  <li
+                    className={andIf({
+                      [style.item]: true,
+                      [style.itemHighlighted]: highlightedIndex === index + 1,
+                    })}
+                    key={item.id}
+                    {...getItemProps({
+                      index: index + 1,
+                      item,
+                    })}
+                    data-testid={`list-item-${index + 1}`}
+                  >
+                    <div className={style.itemIcon} aria-hidden>
+                      <VenueIcon categories={item.category} />
+                    </div>
+                    <span className={style.itemName}>{item.name}</span>
+                    <span className={style.itemLocality}>{item.locality}</span>
+                  </li>
+                ))}
+              </>
+            )}
           </ul>
         </div>
       )}
@@ -124,8 +225,12 @@ export default function Search({
 }
 
 function geocoderFeatureToString(
-  feature: GeocoderFeature | null | undefined,
+  feature: GeocoderFeature | 'location' | null | undefined,
 ): string {
+  if (feature === 'location') {
+    // Location has been selected, but it hasn't been resolved to a feature yet
+    return '';
+  }
   return feature
     ? `${feature.name}${feature.locality ? ', ' + feature.locality : ''}`
     : '';

src/components/search/geolocation-button/index.tsx → src/components/search/use-geolocation.tsx

@@ -1,52 +1,15 @@
-import { Component, useEffect, useState } from 'react';
-import { LoadingIcon } from '@atb/components/loading';
+import { useEffect, useState } from 'react';
 import { reverse } from '@atb/page-modules/departures/client';
 import { GeocoderFeature } from '@atb/page-modules/departures';
 import {
   ComponentText,
   TranslateFunction,
   useTranslation,
 } from '@atb/translations';
-import { MonoIcon } from '@atb/components/icon';
 
-type GeolocationButtonProps = {
-  onGeolocate: (feature: GeocoderFeature) => void;
-  onError?: (error: string | null) => void;
-  className?: string;
-};
-function GeolocationButton({
-  onGeolocate,
-  onError,
-  className,
-}: GeolocationButtonProps) {
-  const { t } = useTranslation();
-  const { getPosition, isLoading, isUnavailable } = useGeolocation(
-    onGeolocate,
-    onError,
-  );
-
-  if (isUnavailable) return null;
-
-  return isLoading ? (
-    <div className={className}>
-      <LoadingIcon a11yText={t(ComponentText.GeolocationButton.loading)} />
-    </div>
-  ) : (
-    <button
-      className={className}
-      onClick={getPosition}
-      title={t(ComponentText.GeolocationButton.alt)}
-      aria-label={t(ComponentText.GeolocationButton.alt)}
-      type="button"
-    >
-      <MonoIcon icon="places/Location" />
-    </button>
-  );
-}
-
-function useGeolocation(
+export function useGeolocation(
   onSuccess: (feature: GeocoderFeature) => void,
-  onError: (error: string | null) => void = () => { },
+  onError: (error: string | null) => void = () => {},
 ) {
   const { t } = useTranslation();
   const [error, setError] = useState<GeolocationPositionError | null>(null);
@@ -82,12 +45,11 @@ function useGeolocation(
     getPosition,
     error,
     isLoading,
+    isError: !!error,
     isUnavailable,
   };
 }
 
-export default GeolocationButton;
-
 function getErrorMessage(code: number, t: TranslateFunction) {
   switch (code) {
     case GeolocationPositionError.PERMISSION_DENIED:

src/page-modules/assistant/layout.tsx

@@ -2,11 +2,7 @@ import { Button, ButtonLink } from '@atb/components/button';
 import { MonoIcon } from '@atb/components/icon';
 import EmptySearch from '@atb/components/loading-empty-results';
 import { MessageBox } from '@atb/components/message-box';
-import Search, {
-  ClearButton,
-  GeolocationButton,
-  SwapButton,
-} from '@atb/components/search';
+import Search, { ClearButton, SwapButton } from '@atb/components/search';
 import { Typo } from '@atb/components/typography';
 import type { SearchTime } from '@atb/modules/search-time';
 import SearchTimeSelector from '@atb/modules/search-time/selector';
@@ -160,13 +156,7 @@ function AssistantLayout({ children, tripQuery }: AssistantLayoutProps) {
               onChange={onFromSelected}
               selectedItem={tripQuery.from ?? undefined}
               testID="searchFrom"
-              button={
-                <GeolocationButton
-                  className={style.searchInputButton}
-                  onGeolocate={onFromSelected}
-                  onError={setGeolocationError}
-                />
-              }
+              onGeolocationError={setGeolocationError}
             />
             <Search
               label={t(PageText.Assistant.search.input.to)}
@@ -182,6 +172,7 @@ function AssistantLayout({ children, tripQuery }: AssistantLayoutProps) {
                 />
               }
               autocompleteFocusPoint={tripQuery.from ?? undefined}
+              onGeolocationError={setGeolocationError}
             />
           </div>
           <div className={style.date}>
@@ -245,6 +236,7 @@ function AssistantLayout({ children, tripQuery }: AssistantLayoutProps) {
                           />
                         )
                       }
+                      onGeolocationError={setGeolocationError}
                     />
                   </div>
 

src/page-modules/departures/layout.tsx

@@ -1,8 +1,7 @@
-import { Button, ButtonLink } from '@atb/components/button';
+import { Button } from '@atb/components/button';
 import LoadingEmptySearch from '@atb/components/loading-empty-results';
 import { MessageBox } from '@atb/components/message-box';
 import Search from '@atb/components/search';
-import GeolocationButton from '@atb/components/search/geolocation-button';
 import { Typo } from '@atb/components/typography';
 import { SearchTime, SearchTimeSelector } from '@atb/modules/search-time';
 import type { GeocoderFeature } from '@atb/page-modules/departures';
@@ -66,13 +65,7 @@ function DeparturesLayout({ children, fromQuery }: DeparturesLayoutProps) {
               selectedItem={fromQuery.from ?? undefined}
               onChange={onSelectFeature}
               testID="searchFrom"
-              button={
-                <GeolocationButton
-                  className={style.geolocationButton}
-                  onGeolocate={onSelectFeature}
-                  onError={setGeolocationError}
-                />
-              }
+              onGeolocationError={setGeolocationError}
             />
           </div>