feat(venues): add highlighting for matched substrings in Venue Search (#3722)

Author: mongj

website/src/views/venues/VenueList.tsx

@@ -6,13 +6,16 @@ import { Link, LinkProps } from 'react-router-dom';
 import { Venue, VenueLocationMap } from 'types/venues';
 import { venuePage } from 'views/routes/paths';
 
+import { highlight } from 'utils/react';
+import { tokenize } from 'utils/moduleSearch';
 import styles from './VenueList.scss';
 
 type Props = {
   venues: Venue[];
   venueLocations?: VenueLocationMap;
   selectedVenue?: Venue | null;
   linkProps?: Omit<LinkProps, 'to'>;
+  query?: string;
 };
 
 const VenueList: React.FC<Props> = (props) => {
@@ -21,6 +24,8 @@ const VenueList: React.FC<Props> = (props) => {
   const venueList = groupBy(physicalVenues, (venue) => venue.charAt(0).toUpperCase());
   const sortedVenueList = sortBy(toPairs(venueList), ([key]) => key);
 
+  const tokens = props.query ? tokenize(props.query.toLowerCase()) : [];
+
   return (
     <ul className={styles.venueList}>
       {sortedVenueList.map(([heading, venues]) => (
@@ -41,15 +46,15 @@ const VenueList: React.FC<Props> = (props) => {
                   )}
                   {...props.linkProps}
                 >
-                  <div>{venue}</div>
+                  <div>{highlight(venue, tokens)}</div>
                   {props.venueLocations && props.venueLocations[venue] ? (
                     <div
                       className={classnames(
                         'font-weight-light d-inline-block text-truncate',
                         styles.subtitle,
                       )}
                     >
-                      {props.venueLocations[venue].roomName}
+                      <span>{highlight(`${props.venueLocations[venue].roomName}`, tokens)}</span>
                     </div>
                   ) : null}
                 </Link>

website/src/views/venues/VenuesContainer.tsx

@@ -331,6 +331,7 @@ export class VenuesContainerComponent extends Component<Props, State> {
               venues={matchedVenues.map(([venue]) => venue)}
               venueLocations={venueLocations}
               selectedVenue={selectedVenue}
+              query={searchTerm}
             />
           )}
         </div>