refactor: upgrade TNM input to AutocompleteJSv1 (#2041)

* refactor: upgrade TNM input to AutocompleteJSv1 * update Playwright test
mbta · May 14, 2024 · 5f97417 · 5f97417
1 parent 09fbe54
commit 5f97417
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 204 deletions.
diff --git a/assets/css/_autocomplete-theme.scss b/assets/css/_autocomplete-theme.scss
@@ -171,7 +171,8 @@
 }
 
 #proposed-sales-locations,
-#sales-locations {
+#sales-locations,
+#transit-near-me-locations {
   @extend %large-autocomplete;
 
   .c-search-bar__autocomplete-results {

diff --git a/assets/ts/tnm/__tests__/transit-near-me-search_test.ts b/assets/ts/tnm/__tests__/transit-near-me-search_test.ts
diff --git a/assets/ts/tnm/search.ts b/assets/ts/tnm/search.ts
diff --git a/assets/ts/tnm/transit-near-me-loader.tsx b/assets/ts/tnm/transit-near-me-loader.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { MapData } from "../leaflet/components/__mapdata";
-import TransitNearMeSearch from "./search";
 import TransitNearMe from "./components/TransitNearMe";
 import { parseQuery } from "../helpers/query";
 
@@ -30,27 +29,8 @@ const render = (): void => {
   );
 };
 
-const renderMap = (): void => {
-  render();
-};
-
-const setupSearch = (): void => {
-  const el = document.getElementById(TransitNearMeSearch.SELECTORS.container);
-  if (el) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    search = new TransitNearMeSearch();
-  }
-};
-
-export interface GeolocationData extends CustomEvent {
-  data: {
-    url: string;
-  };
-}
-
 export const onLoad = (): void => {
-  renderMap();
-  setupSearch();
+  render();
 };
 
 export default onLoad;
diff --git a/assets/ts/ui/autocomplete/index.ts b/assets/ts/ui/autocomplete/index.ts
@@ -29,7 +29,10 @@ function getLikelyQueryParams(): string | undefined {
     window.location.search,
     window.decodeURIComponent
   );
-  return searchParams.query || searchParams.name || searchParams.address;
+  const { query, name, address, latitude, longitude } = searchParams;
+  const latlon =
+    latitude && longitude ? `${latitude}, ${longitude}` : undefined;
+  return query || name || address || latlon;
 }
 
 /**

diff --git a/integration/scenarios/find-transit-near-me.js b/integration/scenarios/find-transit-near-me.js
@@ -4,10 +4,13 @@ exports.scenario = async ({ page, baseURL }) => {
   await page.goto(`${baseURL}/transit-near-me`);
 
   await page
-    .locator("input#search-transit-near-me__input")
-    .pressSequentially("Boston City Hall");
-  await page.waitForSelector("div.c-search-bar__-dataset-locations");
-  await page.locator("a.c-search-result__link").first().click();
+    .getByPlaceholder('Enter a location')
+    .pressSequentially('Boston City Hall');
+
+  await page.locator("#search-locations-list[role='listbox']")
+    .getByRole("option")
+    .first()
+    .click();
 
   await page.waitForSelector("div.m-tnm-sidebar__route");
   await expect

diff --git a/lib/dotcom_web/templates/transit_near_me/_input.html.eex b/lib/dotcom_web/templates/transit_near_me/_input.html.eex
diff --git a/lib/dotcom_web/templates/transit_near_me/_input.html.heex b/lib/dotcom_web/templates/transit_near_me/_input.html.heex
@@ -0,0 +1,12 @@
+<h2 class="h5">Find nearby stops and stations</h2>
+<div class="m-transit-near-me__input">
+  <.algolia_autocomplete 
+    id="transit-near-me-locations"
+    geolocation={true}
+    locations_count={5} 
+    locations_url_type="transit-near-me"
+    placeholder="Enter a location"
+    submit_handler={nil}
+    initial_state={true}
+  />
+</div>
diff --git a/lib/dotcom_web/views/transit_near_me_view.ex b/lib/dotcom_web/views/transit_near_me_view.ex
@@ -1,6 +1,5 @@
 defmodule DotcomWeb.TransitNearMeView do
   use DotcomWeb, :view
-  alias LocationService.Address
   alias Phoenix.HTML
   alias Dotcom.React
 
@@ -27,12 +26,4 @@ defmodule DotcomWeb.TransitNearMeView do
       }
     )
   end
-
-  defp input_value({:ok, [%Address{formatted: address}]}) do
-    address
-  end
-
-  defp input_value(_) do
-    ""
-  end
 end