Remove dropdown from CT map (#324)

Author: Eric-Arellano

packages/ct/src/js/dropdownGroups.ts

@@ -0,0 +1,13 @@
+import { DropdownRequest } from "@prn-parking-lots/shared/src/js/city-ui/dropdownUtils";
+import type { CityStatsCollection } from "@prn-parking-lots/shared/src/js/model/types";
+
+import type { CityStats } from "./types";
+
+export default function createDropdownRequest(
+  data: CityStatsCollection<CityStats>,
+): DropdownRequest {
+  return {
+    useGroups: false,
+    value: Object.entries(data).map(([id, { name }]) => ({ name, id })),
+  };
+}

packages/ct/src/js/dropdownRequest.ts

@@ -5,7 +5,7 @@ import {
   CITY_BOUNDARIES_GEOJSON,
   PARKING_LOT_GEOJSON_MODULES,
 } from "./data";
-import createDropdownGroups from "./dropdownGroups";
+import createDropdownRequest from "./dropdownRequest";
 import formatScorecard from "./scorecard";
 
 export default async function initApp(): Promise<void> {
@@ -15,7 +15,7 @@ export default async function initApp(): Promise<void> {
       boundaries: CITY_BOUNDARIES_GEOJSON,
       parkingLots: PARKING_LOT_GEOJSON_MODULES,
     },
-    dropdownGroups: createDropdownGroups(CITY_STATS_DATA),
+    dropdownRequest: createDropdownRequest(CITY_STATS_DATA),
     scorecardFormatter: formatScorecard,
     initialCity: "stratford-center",
   });

packages/ct/src/js/main.ts

@@ -0,0 +1,29 @@
+import { expect, test } from "@playwright/test";
+
+import createDropdownRequest from "../src/js/dropdownRequest";
+
+test("createDropdownRequest", () => {
+  const common = {
+    percentage: "",
+    population: "",
+    transitStation: null,
+    county: "",
+  };
+  const input = {
+    city1: {
+      ...common,
+      name: "City 1",
+    },
+    city2: {
+      ...common,
+      name: "City 2",
+    },
+  };
+  expect(createDropdownRequest(input)).toEqual({
+    useGroups: false,
+    value: [
+      { id: "city1", name: "City 1" },
+      { id: "city2", name: "City 2" },
+    ],
+  });
+});

packages/ct/tests/dropdownGroups.test.ts

@@ -1,31 +1,34 @@
 import {
-  DropdownGroup,
-  DropdownChoiceId,
+  DropdownRequest,
+  DropdownChoiceRequest,
 } from "@prn-parking-lots/shared/src/js/city-ui/dropdownUtils";
 import type { CityStatsCollection } from "@prn-parking-lots/shared/src/js/model/types";
 
 import type { CityStats } from "./types";
 
-export default function createDropdownGroups(
+export default function createDropdownRequest(
   data: CityStatsCollection<CityStats>,
-): DropdownGroup[] {
-  const official: DropdownChoiceId[] = [];
-  const community: DropdownChoiceId[] = [];
+): DropdownRequest {
+  const official: DropdownChoiceRequest[] = [];
+  const community: DropdownChoiceRequest[] = [];
   Object.entries(data).forEach(([id, { name, contribution }]) => {
     if (contribution) {
       community.push({ id, name });
     } else {
       official.push({ id, name });
     }
   });
-  return [
-    {
-      label: "Official maps",
-      cities: official,
-    },
-    {
-      label: "Community maps",
-      cities: community,
-    },
-  ];
+  return {
+    useGroups: true,
+    value: [
+      {
+        label: "Official maps",
+        cities: official,
+      },
+      {
+        label: "Community maps",
+        cities: community,
+      },
+    ],
+  };
 }

packages/ct/tests/dropdownRequest.test.ts

@@ -5,7 +5,7 @@ import {
   CITY_BOUNDARIES_GEOJSON,
   PARKING_LOT_GEOJSON_MODULES,
 } from "./data";
-import createDropdownGroups from "./dropdownGroups";
+import createDropdownRequest from "./dropdownRequest";
 import formatScorecard from "./scorecard";
 
 export default async function initApp(): Promise<void> {
@@ -15,7 +15,7 @@ export default async function initApp(): Promise<void> {
       boundaries: CITY_BOUNDARIES_GEOJSON,
       parkingLots: PARKING_LOT_GEOJSON_MODULES,
     },
-    dropdownGroups: createDropdownGroups(CITY_STATS_DATA),
+    dropdownRequest: createDropdownRequest(CITY_STATS_DATA),
     scorecardFormatter: formatScorecard,
     initialCity: "atlanta-ga",
   });

packages/primary/src/js/dropdownGroups.ts …ckages/primary/src/js/dropdownRequest.tspackages/primary/src/js/dropdownGroups.ts renamed to packages/primary/src/js/dropdownRequest.ts packages/primary/src/js/dropdownGroups.ts renamed to packages/primary/src/js/dropdownRequest.ts

@@ -1,7 +1,7 @@
 import { expect, test } from "@playwright/test";
-import createDropdownGroups from "../src/js/dropdownGroups";
+import createDropdownRequest from "../src/js/dropdownRequest";
 
-test("createDropdownGroups", () => {
+test("createDropdownRequest", () => {
   const common = {
     percentage: "",
     cityType: "",
@@ -23,14 +23,17 @@ test("createDropdownGroups", () => {
       contribution: "some-email@web.com",
     },
   };
-  expect(createDropdownGroups(input)).toEqual([
-    {
-      label: "Official maps",
-      cities: [{ id: "city1-ny", name: "City 1, NY" }],
-    },
-    {
-      label: "Community maps",
-      cities: [{ id: "city2-ny", name: "City 2, NY" }],
-    },
-  ]);
+  expect(createDropdownRequest(input)).toEqual({
+    useGroups: true,
+    value: [
+      {
+        label: "Official maps",
+        cities: [{ id: "city1-ny", name: "City 1, NY" }],
+      },
+      {
+        label: "Community maps",
+        cities: [{ id: "city2-ny", name: "City 2, NY" }],
+      },
+    ],
+  });
 });

packages/primary/src/js/main.ts

@@ -1,6 +1,6 @@
 import subscribeScorecard, { ScorecardFormatter } from "./city-ui/scorecard";
 import initDropdown from "./city-ui/dropdown";
-import type { DropdownGroup } from "./city-ui/dropdownUtils";
+import type { DropdownRequest } from "./city-ui/dropdownUtils";
 
 import initAbout from "./layout/about";
 import initIcons from "./layout/fontAwesome";
@@ -24,7 +24,7 @@ import { initViewState } from "./state/ViewState";
 interface Args<T extends BaseCityStats> {
   data: DataSet<T>;
   initialCity: CityId;
-  dropdownGroups: DropdownGroup[];
+  dropdownRequest: DropdownRequest;
   scorecardFormatter: ScorecardFormatter<T>;
 }
 
@@ -50,7 +50,7 @@ export default async function bootstrapApp<T extends BaseCityStats>(
     args.initialCity,
   );
 
-  initDropdown(args.dropdownGroups, viewState);
+  initDropdown(args.dropdownRequest, viewState);
   subscribeScorecard(viewState, cityEntries, args.scorecardFormatter);
   subscribeShareLink(viewState);
   subscribeSnapToCity(viewState, map, cityEntries);

…ges/primary/tests/dropdownGroups.test.ts …es/primary/tests/dropdownRequest.test.tspackages/primary/tests/dropdownGroups.test.ts renamed to packages/primary/tests/dropdownRequest.test.ts packages/primary/tests/dropdownGroups.test.ts renamed to packages/primary/tests/dropdownRequest.test.ts

@@ -1,9 +1,9 @@
 import ChoicesJS from "choices.js";
 
-import { DropdownGroup, convertToChoicesGroups } from "./dropdownUtils";
+import { DropdownRequest, convertToChoicesJs } from "./dropdownUtils";
 import { ViewStateObservable } from "../state/ViewState";
 
-function createDropdown(groups: DropdownGroup[]): ChoicesJS {
+function createDropdown(dropdownRequest: DropdownRequest): ChoicesJS {
   const dropdown = new ChoicesJS("#city-dropdown", {
     position: "bottom",
     allowHTML: false,
@@ -15,15 +15,15 @@ function createDropdown(groups: DropdownGroup[]): ChoicesJS {
     // We already sort entries in the JSON file.
     shouldSort: false,
   });
-  dropdown.setChoices(convertToChoicesGroups(groups));
+  dropdown.setChoices(convertToChoicesJs(dropdownRequest));
   return dropdown;
 }
 
 export default function initDropdown(
-  groups: DropdownGroup[],
+  dropdownRequest: DropdownRequest,
   viewState: ViewStateObservable,
 ): void {
-  const dropdown = createDropdown(groups);
+  const dropdown = createDropdown(dropdownRequest);
 
   viewState.subscribe(
     ({ cityId }) => dropdown.setChoiceByValue(cityId),