refactor(useSearchResultsByProperty): Return location results too

mbta · Jul 28, 2023 · 739ba8c · 739ba8c
1 parent ec2201f
commit 739ba8c
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 104 deletions.
diff --git a/assets/src/components/mapPage/searchResultsByProperty.tsx b/assets/src/components/mapPage/searchResultsByProperty.tsx
@@ -10,7 +10,6 @@ import { Vehicle, Ghost } from "../../realtime"
 import { setPropertyMatchLimit } from "../../state/searchPageState"
 import SearchResults, { NoResults } from "../searchResults"
 import React from "react"
-import { useLocationSearchResults } from "../../hooks/useLocationSearchResults"
 import { Card, CardBody } from "../card"
 import { LocationSearchResult } from "../../models/locationSearchResult"
 import {
@@ -29,14 +28,11 @@ const VehicleSearchResultSection = ({
   onShowMore,
 }: {
   property: SearchProperty
-  results: LoadingResult | Ok<LimitedSearchResults> | null
+  results: LoadingResult | Ok<LimitedSearchResults<Vehicle | Ghost>> | null
   onSelectVehicle: (vehicle: Vehicle | Ghost) => void
   onShowMore: () => void
 }) => {
-  if (
-    results === null ||
-    (isOk(results) && results.ok.matchingVehicles.length === 0)
-  ) {
+  if (results === null || (isOk(results) && results.ok.matches.length === 0)) {
     return <></>
   }
 
@@ -53,10 +49,10 @@ const VehicleSearchResultSection = ({
       </h2>
       {isLoading(results) ? (
         <Loading />
-      ) : results.ok.matchingVehicles.length > 0 ? (
+      ) : results.ok.matches.length > 0 ? (
         <>
           <SearchResults
-            vehicles={results.ok.matchingVehicles}
+            vehicles={results.ok.matches}
             selectedVehicleId={null}
             onClick={onSelectVehicle}
           />
@@ -79,18 +75,17 @@ const VehicleSearchResultSection = ({
 }
 
 const LocationSearchResultSection = ({
-  text,
-  limit,
+  results,
   onSelectLocation,
   onShowMore,
 }: {
-  text: string
-  limit: number
+  results: LoadingResult | Ok<LimitedSearchResults<LocationSearchResult>> | null
   onSelectLocation: (location: LocationSearchResult) => void
   onShowMore: () => void
 }) => {
-  const locationSearchResults = useLocationSearchResults(text)
-
+  if (results === null || (isOk(results) && results.ok.matches.length === 0)) {
+    return <></>
+  }
   return (
     <section
       className="c-map-page__search_results_section"
@@ -102,31 +97,29 @@ const LocationSearchResultSection = ({
       >
         {searchPropertyDisplayConfig.location.name}
       </h2>
-      {locationSearchResults === null ? (
+      {isLoading(results) ? (
         <Loading />
-      ) : locationSearchResults.length > 0 ? (
+      ) : (
         <>
           <ul className="c-search-results__list">
-            {locationSearchResults
-              .slice(0, limit)
-              .map((locationSearchResult) => (
-                <li key={locationSearchResult.id}>
-                  <Card
-                    style="white"
-                    title={
-                      locationSearchResult.name || locationSearchResult.address
-                    }
-                    openCallback={() => onSelectLocation(locationSearchResult)}
-                  >
-                    {locationSearchResult.name &&
-                      locationSearchResult.address && (
-                        <CardBody>{locationSearchResult.address}</CardBody>
-                      )}
-                  </Card>
-                </li>
-              ))}
+            {results.ok.matches.map((locationSearchResult) => (
+              <li key={locationSearchResult.id}>
+                <Card
+                  style="white"
+                  title={
+                    locationSearchResult.name || locationSearchResult.address
+                  }
+                  openCallback={() => onSelectLocation(locationSearchResult)}
+                >
+                  {locationSearchResult.name &&
+                    locationSearchResult.address && (
+                      <CardBody>{locationSearchResult.address}</CardBody>
+                    )}
+                </Card>
+              </li>
+            ))}
           </ul>
-          {locationSearchResults.length > limit && (
+          {results.ok.hasMoreMatches && (
             <div className="c-map_page__search_results_actions">
               <button
                 className="c-map-page__show_more button-text"
@@ -137,8 +130,6 @@ const LocationSearchResultSection = ({
             </div>
           )}
         </>
-      ) : (
-        "No results found"
       )}
     </section>
   )
@@ -167,10 +158,16 @@ const SearchResultsByProperty = ({
 
   const searchHasNoResults = Object.values(resultsByProperty)
     .filter(
-      (result): result is LoadingResult | Ok<LimitedSearchResults> =>
-        result !== null
+      (
+        result
+      ): result is
+        | LoadingResult
+        | Ok<LimitedSearchResults<Vehicle | Ghost>>
+        | Ok<LimitedSearchResults<LocationSearchResult>> => result !== null
+    )
+    .every(
+      (result) => !("is_loading" in result) && result.ok.matches.length === 0
     )
-    .every((result) => isOk(result) && result.ok.matchingVehicles.length === 0)
 
   return (
     <div aria-label="Grouped Search Results">
@@ -192,8 +189,7 @@ const SearchResultsByProperty = ({
             property === "location" ? (
               <LocationSearchResultSection
                 key={property}
-                text={searchPageState.query.text}
-                limit={limit}
+                results={resultsByProperty[property]}
                 onSelectLocation={onSelectLocationResult}
                 onShowMore={() => onShowMore(property, limit)}
               />

diff --git a/assets/src/hooks/useSearchResults.ts b/assets/src/hooks/useSearchResults.ts
@@ -35,22 +35,22 @@ const useSearchResults = (
   })
 }
 
-const limitedSearchResultsData = type({
+const limitedVehicleSearchResultsData = type({
   matching_vehicles: dataStruct,
   has_more_matches: boolean(),
 })
 
-type LimitedSearchResultsData = Infer<typeof limitedSearchResultsData>
-export type LimitedSearchResults = {
-  matchingVehicles: (Vehicle | Ghost)[]
+type LimitedSearchResultsData = Infer<typeof limitedVehicleSearchResultsData>
+export type LimitedSearchResults<T> = {
+  matches: T[]
   hasMoreMatches: boolean
 }
 
 const parseLimitedSearchResults = (
   data: LimitedSearchResultsData
-): Ok<LimitedSearchResults> => ({
+): Ok<LimitedSearchResults<Vehicle | Ghost>> => ({
   ok: {
-    matchingVehicles: parser(data.matching_vehicles),
+    matches: parser(data.matching_vehicles),
     hasMoreMatches: data.has_more_matches,
   },
 })
@@ -60,19 +60,19 @@ const loadingState: Loading = { is_loading: true }
 export const useLimitedSearchResults = (
   socket: Socket | undefined,
   query: { property: SearchProperty; text: string; limit: number } | null
-): Ok<LimitedSearchResults> | Loading | null => {
+): Ok<LimitedSearchResults<Vehicle | Ghost>> | Loading | null => {
   const topic: string | null =
     query && `vehicles_search:limited:${query.property}:${query.text}`
 
   const [state, pushUpdate] = useCheckedTwoWayChannel<
     LimitedSearchResultsData,
-    Ok<LimitedSearchResults> | Loading,
+    Ok<LimitedSearchResults<Vehicle | Ghost>> | Loading,
     { limit: number }
   >({
     socket,
     topic: topic,
     event: "search",
-    dataStruct: limitedSearchResultsData,
+    dataStruct: limitedVehicleSearchResultsData,
     parser: parseLimitedSearchResults,
     loadingState: loadingState,
   })

diff --git a/assets/src/hooks/useSearchResultsByProperty.ts b/assets/src/hooks/useSearchResultsByProperty.ts
@@ -5,16 +5,24 @@ import {
   LimitedSearchResults,
   useLimitedSearchResults,
 } from "./useSearchResults"
+import { useLocationSearchResults } from "./useLocationSearchResults"
+import { LocationSearchResult } from "../models/locationSearchResult"
+import { Vehicle, Ghost } from "../realtime"
+
+type vehicleResultType =
+  | Ok<LimitedSearchResults<Vehicle | Ghost>>
+  | Loading
+  | null
 
 const useSearchResultsByProperty = (
   socket: Socket | undefined,
   text: string,
   properties: PropertyLimits
 ): {
-  vehicle: Ok<LimitedSearchResults> | Loading | null
-  operator: Ok<LimitedSearchResults> | Loading | null
-  run: Ok<LimitedSearchResults> | Loading | null
-  location: Ok<LimitedSearchResults> | Loading | null
+  vehicle: vehicleResultType
+  operator: vehicleResultType
+  run: vehicleResultType
+  location: Ok<LimitedSearchResults<LocationSearchResult>> | Loading | null
 } => {
   // To avoid conditionally calling hooks, use search result hooks for each property.
   // Conditionally use the results only if the limit is present
@@ -37,11 +45,24 @@ const useSearchResultsByProperty = (
       ? null
       : { property: "run", text: text, limit: properties.run }
   )
+
+  const locationResults = useLocationSearchResults(text)
+
   return {
     vehicle: properties.vehicle === null ? null : vehicleResults,
     operator: properties.operator === null ? null : operatorResults,
     run: properties.run === null ? null : runResults,
-    location: null,
+    location:
+      properties.location === null
+        ? null
+        : locationResults === null
+        ? { is_loading: true }
+        : {
+            ok: {
+              matches: locationResults.slice(0, properties.location),
+              hasMoreMatches: locationResults.length > properties.location,
+            },
+          },
   }
 }