AB#74 refactore near you view thoroughly

app/component/DepartureRow.js

@@ -50,7 +50,7 @@ export default function DepartureRow(
   let backgroundShape;
   let sr;
   if (
-    route?.alerts?.filter(alert => isAlertValid(alert, props.currentTime))
+    route.alerts?.filter(alert => isAlertValid(alert, props.currentTime))
       ?.length > 0
   ) {
     const alert = getMostSevereAlert(route);
@@ -72,7 +72,7 @@ export default function DepartureRow(
   const headsign =
     departure.headsign ||
     trip.tripHeadsign ||
-    getHeadsignFromRouteLongName(trip.route);
+    getHeadsignFromRouteLongName(route);
   let shownTime;
   if (timeDiffInMinutes <= 0) {
     shownTime = intl.formatMessage({
@@ -90,7 +90,7 @@ export default function DepartureRow(
       { minutes: timeDiffInMinutes },
     );
   }
-  const { shortName } = trip.route;
+  const { shortName } = route;
   const lowerCaseShortName = shortName?.toLowerCase();
   const nameOrIcon =
     shortName?.length > 6 || !shortName?.length ? (
@@ -163,7 +163,7 @@ export default function DepartureRow(
         className={cx('route-number-container', {
           long: shortName && shortName.length <= 6 && shortName.length >= 5,
         })}
-        style={{ backgroundColor: `#${trip.route.color}` }}
+        style={{ backgroundColor: `#${route.color}` }}
       >
         <div aria-hidden="true" className="route-number">
           {nameOrIcon}
@@ -185,7 +185,7 @@ export default function DepartureRow(
       </td>
       <td className={cx('route-headsign', departure.bottomRow ? 'bottom' : '')}>
         <div className="headsign">
-          {headsign} {departure.bottomRow && departure.bottomRow}
+          {headsign} {departure.bottomRow}
         </div>
       </td>
       <td className="time-cell">