refactor(ServiceOptGroup): simplified text (#2263)

* refactor(ServiceOptGroup): simplified text

* fix(DailySchedule): holiday sorting by date only

assets/ts/helpers/__tests__/service-test.ts

@@ -1,15 +1,13 @@
 import {
   ServiceGroupNames,
   groupServicesByDateRating,
-  serviceDays,
-  hasMultipleWeekdaySchedules,
   isInCurrentRating,
   isCurrentValidService,
   isInFutureRating,
   optGroupComparator,
   isInFutureService
 } from "../service";
-import { Service, DayInteger } from "../../__v3api";
+import { Service } from "../../__v3api";
 import { Dictionary } from "lodash";
 import { shortDate, stringToDateObject } from "../date";
 
@@ -341,32 +339,3 @@ it("isInFutureRating evaluates whether date falls within service future rating d
     isInFutureRating(serviceWithoutRating, stringToDateObject("2020-08-08"))
   ).toBe(false);
 });
-
-it("hasMultipleWeekdaySchedules indicates presence of multiple weekday schedules", () => {
-  expect(hasMultipleWeekdaySchedules(services)).toEqual(true);
-
-  const simplerServices = [services[0], services[2], services[3]];
-  expect(hasMultipleWeekdaySchedules(simplerServices)).toEqual(false);
-});
-
-it("serviceDays lists weekday days of service", () => {
-  expect(serviceDays(services[0])).toEqual("Weekday");
-  expect(serviceDays(services[1])).toEqual("Friday");
-  expect(serviceDays(services[2])).toEqual("");
-  expect(serviceDays(services[3])).toEqual("");
-  expect(serviceDays(services[4])).toEqual("");
-
-  const someDays = {
-    ...services[0],
-    valid_days: [1, 3, 4] as DayInteger[]
-  };
-
-  expect(serviceDays(someDays)).toEqual("Monday, Wednesday, Thursday");
-
-  const someConsecutiveDays = {
-    ...services[0],
-    valid_days: [1, 2, 3, 4] as DayInteger[]
-  };
-
-  expect(serviceDays(someConsecutiveDays)).toEqual("Monday - Thursday");
-});

assets/ts/helpers/service.ts

@@ -212,26 +212,12 @@ const serviceTypicalityOrder: { [key in ServiceTypicality]: number } = {
 };
 /* eslint-enable camelcase */
 
-// enable sorting of services by rating dates,
-// service type, service typicality, and service dates
-export const serviceComparator = (
-  {
-    type: type1,
-    valid_days: validDays1,
-    typicality: typicality1,
-    start_date: date1
-  }: Service,
-  {
-    type: type2,
-    valid_days: validDays2,
-    typicality: typicality2,
-    start_date: date2
-  }: Service
-): number =>
-  serviceTypeOrder[type2] - serviceTypeOrder[type1] ||
-  validDays1[0] - validDays2[0] ||
-  serviceTypicalityOrder[typicality2] - serviceTypicalityOrder[typicality1] ||
-  stringToDateObject(date1).getTime() - stringToDateObject(date2).getTime();
+// enable sorting of services by service type, service typicality, and start
+export const serviceComparator = [
+  (service: Service) => -serviceTypeOrder[service.type],
+  (service: Service) => -serviceTypicalityOrder[service.typicality],
+  "start_date"
+];
 
 // group names may have extra verbiage
 export const optGroupComparator = (groupA: string, groupB: string): number => {
@@ -240,46 +226,3 @@ export const optGroupComparator = (groupA: string, groupB: string): number => {
   const b = optGroupNames.find(name => groupB.includes(name));
   return optGroupOrder[b!] - optGroupOrder[a!];
 };
-
-export const hasMultipleWeekdaySchedules = (services: Service[]): boolean =>
-  services.filter(
-    service =>
-      service.type === "weekday" && service.typicality !== "holiday_service"
-  ).length > 1;
-
-const dayIntegerToString = (day: DayInteger): string =>
-  [
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-    "Sunday"
-  ][day - 1];
-
-const daysAreConsecutive = (days: DayInteger[]): boolean => {
-  const [day, nextDay, ...rest] = days;
-  if (rest.length === 0) return day + 1 === nextDay;
-  if (day + 1 !== nextDay) return false;
-  return daysAreConsecutive([nextDay, ...rest]);
-};
-
-export const serviceDays = ({
-  type,
-  valid_days: validDays
-}: Service): string => {
-  if (type === "saturday" || type === "sunday") return "";
-
-  if (validDays.length === 1) return `${dayIntegerToString(validDays[0])}`;
-
-  if (daysAreConsecutive(validDays)) {
-    return validDays[0] === 1 && validDays[validDays.length - 1] === 5
-      ? "Weekday"
-      : `${dayIntegerToString(validDays[0])} - ${dayIntegerToString(
-          validDays[validDays.length - 1]
-        )}`;
-  }
-
-  return `${validDays.map(dayIntegerToString).join(", ")}`;
-};

assets/ts/schedule/components/schedule-finder/daily-schedule/DailySchedule.tsx

@@ -1,10 +1,9 @@
 import React, { ReactElement, useEffect, useState } from "react";
-import { Dictionary, each, join, split } from "lodash";
+import { Dictionary, each, join, sortBy, split } from "lodash";
 import { DirectionId, Service } from "../../../../__v3api";
 import Loading from "../../../../components/Loading";
 import { stringToDateObject } from "../../../../helpers/date";
 import {
-  hasMultipleWeekdaySchedules,
   groupServicesByDateRating,
   isCurrentValidService,
   serviceStartDateComparator,
@@ -124,17 +123,18 @@ const SchedulesSelect = ({
               .sort(optGroupComparator)
               .map((group: string) => {
                 const groupedServices = servicesByOptGroup[group];
+                const sortedService =
+                  group === "Holiday Schedules"
+                    ? sortBy(groupedServices, "start_date")
+                    : sortBy(groupedServices, serviceComparator);
                 /* istanbul ignore next */
                 if (groupedServices.length <= 0) return null;
 
                 return (
                   <ServiceOptGroup
                     key={group}
                     label={group}
-                    services={groupedServices.sort(serviceComparator)}
-                    multipleWeekdays={hasMultipleWeekdaySchedules(
-                      groupedServices
-                    )}
+                    services={sortedService}
                     todayServiceId={todayServiceId}
                   />
                 );

assets/ts/schedule/components/schedule-finder/daily-schedule/ServiceOptGroup.tsx

@@ -4,36 +4,29 @@ import { Service } from "../../../../__v3api";
 import { shortDate, stringToDateObject } from "../../../../helpers/date";
 import {
   ServiceGroupNames,
-  serviceDays,
   dedupeServices,
   isInCurrentService
 } from "../../../../helpers/service";
 
 interface Props {
   label: string;
   services: Service[];
-  multipleWeekdays: boolean;
   todayServiceId: string;
   nowDate?: Date;
 }
 
 const ServiceOptGroup = ({
   label,
   services,
-  multipleWeekdays,
   todayServiceId,
   nowDate = new Date()
 }: Props): ReactElement<HTMLElement> | null =>
   services.length === 0 ? null : (
     <optgroup label={label}>
       {dedupeServices(services).map(service => {
-        const isMultipleWeekday =
-          multipleWeekdays &&
-          service.type === "weekday" &&
-          service.typicality !== "holiday_service";
-
         const startDate = stringToDateObject(service.start_date);
         const endDate = stringToDateObject(service.end_date);
+        const dateRange = `${shortDate(startDate)} to ${shortDate(endDate)}`;
         let optionText = "";
 
         if (
@@ -42,7 +35,7 @@ const ServiceOptGroup = ({
         ) {
           optionText = service.description;
         } else if (
-          service.typicality === "holiday_service" &&
+          ["extra_service", "holiday_service"].includes(service.typicality) &&
           service.added_dates &&
           service.added_dates_notes
         ) {
@@ -53,14 +46,9 @@ const ServiceOptGroup = ({
             stringToDateObject(addedDate)
           )}`;
         } else if (label === ServiceGroupNames.OTHER) {
-          optionText = isMultipleWeekday
-            ? `${serviceDays(service)} schedule`
-            : service.description;
-          optionText += `, ${shortDate(startDate)} to ${shortDate(endDate)}`;
+          optionText = `${service.description}, ${dateRange}`;
         } else {
-          optionText = isMultipleWeekday
-            ? `${serviceDays(service)} schedule`
-            : service.description;
+          optionText = service.description;
           if (service.rating_description) {
             optionText += `, ${service.rating_description}`;
           }

assets/ts/schedule/components/schedule-finder/daily-schedule/__tests__/ServiceOptGroupTest.tsx

@@ -14,7 +14,6 @@ describe("ServiceOptGroup", () => {
         <ServiceOptGroup
           label={"Group label"}
           services={services}
-          multipleWeekdays={false}
           todayServiceId=""
         />
       )
@@ -25,12 +24,7 @@ describe("ServiceOptGroup", () => {
   it("returns null if no services", () => {
     createReactRoot();
     const tree = renderer.create(
-      <ServiceOptGroup
-        label={""}
-        services={[]}
-        multipleWeekdays={false}
-        todayServiceId=""
-      />
+      <ServiceOptGroup label={""} services={[]} todayServiceId="" />
     );
     expect(tree.toJSON()).toBeNull();
   });
@@ -91,7 +85,6 @@ describe("ServiceOptGroup", () => {
             "n"
           )
         )}
-        multipleWeekdays={false}
         todayServiceId="n"
         nowDate={new Date("2019-09-07")}
       />
@@ -106,7 +99,6 @@ describe("ServiceOptGroup", () => {
       <ServiceOptGroup
         label={"Test services"}
         services={servicesList}
-        multipleWeekdays={false}
         todayServiceId="fs"
       />
     );
@@ -120,7 +112,6 @@ describe("ServiceOptGroup", () => {
       <ServiceOptGroup
         label={"Test services"}
         services={servicesList}
-        multipleWeekdays={false}
         todayServiceId=""
       />
     );

assets/ts/schedule/components/schedule-finder/daily-schedule/__tests__/__snapshots__/DailyScheduleTest.tsx.snap

@@ -49,10 +49,10 @@ Array [
               Weekday schedule, Test
             </option>
             <option
-              aria-label="Current Schedules (Test, ends Oct 25) Friday schedule, Test"
+              aria-label="Current Schedules (Test, ends Oct 25) Weekday schedule, Test"
               value="BUS319-D-Wdy-02"
             >
-              Friday schedule, Test
+              Weekday schedule, Test
             </option>
             <option
               aria-label="Current Schedules (Test, ends Oct 25) Saturday schedule, Test (Starting July 6, 2019)"