Remove hardcoded transporttype and add pikaratikka color to numbers

Also refactor some duplicated functions under the same module
HSLdevcom · Sep 8, 2023 · 983a938 · 983a938
1 parent 5a64437
commit 983a938
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 61 deletions.
diff --git a/src/components/home.js b/src/components/home.js
@@ -25,14 +25,13 @@ class Home extends React.Component {
 
   lineNumbers = (selectedLines) => {
     return selectedLines.map((line, index) => {
-      const type =
-        line.routes.nodes.length > 0 ? line.routes.nodes[0].mode : line.transportType;
       return (
         <div key={index} className={styles.row}>
           <div
             className={classnames(styles.lineNumber, {
-              [styles.tram]: type === "TRAM",
-              [styles.bus]: type !== "TRAM",
+              [styles.lrail]: line.transportType === "L_RAIL",
+              [styles.tram]: line.transportType === "TRAM",
+              [styles.bus]: line.transportType === "BUS",
               [styles.trunk]: line.trunkRoute === "1",
             })}>
             {line.lineNumber}

diff --git a/src/components/lineList.js b/src/components/lineList.js
@@ -8,45 +8,27 @@ import { get, groupBy, orderBy } from "lodash";
 import Line from "./line";
 import LineSearch from "./lineSearch";
 import styles from "./lineList.module.css";
-
-const transportTypeOrder = ["tram", "bus"];
+import {
+  parseLineNumber,
+  parseTransportType,
+  compareLineNameOrder,
+} from "../utils/lineDataUtils";
 
 const removeTrainsFilter = (line) => line.lineId.substring(0, 1) !== "3";
 const removeFerryFilter = (line) => {
   return line.routes.nodes[0].type !== "07";
 };
 
-const setTransportTypeMapper = (line) => {
-  if (line.lineId.substring(0, 4) >= 1001 && line.lineId.substring(0, 4) <= 1010) {
-    return { ...line, transportType: "tram" };
-  }
-  return { ...line, transportType: "bus" };
-};
-
-const parseLineNumber = (lineId) =>
-  // Remove 1st number, which represents the city
-  // Remove all zeros from the beginning
-  lineId.substring(1).replace(/^0+/, "");
+const setTransportTypeMapper = (line) => ({
+  ...line,
+  transportType: parseTransportType(line),
+});
 
 const lineNumberMapper = (line) => ({
   ...line,
   lineNumber: parseLineNumber(line.lineId),
 });
 
-const linesSorter = (a, b) => {
-  if (a.transportType !== b.transportType) {
-    return transportTypeOrder.indexOf(a.transportType) >
-      transportTypeOrder.indexOf(b.transportType)
-      ? 1
-      : -1;
-  } else if (a.lineId.substring(1, 4) !== b.lineId.substring(1, 4)) {
-    return a.lineId.substring(1, 4) > b.lineId.substring(1, 4) ? 1 : -1;
-  } else if (a.lineId.substring(0, 1) !== b.lineId.substring(0, 1)) {
-    return a.lineId.substring(0, 1) > b.lineId.substring(0, 1) ? 1 : -1;
-  }
-  return a.lineId.substring(4, 6) > b.lineId.substring(4, 6) ? 1 : -1;
-};
-
 const allLinesQuery = gql`
   query AllLinesQuery {
     allLines {
@@ -156,7 +138,7 @@ const LineList = (props) => {
       .filter((line) => isIgnoredLine(line))
       .map(setTransportTypeMapper)
       .map(lineNumberMapper)
-      .sort(linesSorter)
+      .sort(compareLineNameOrder)
       .filter((value) => {
         if (value.lineId) {
           return (
@@ -184,7 +166,7 @@ const LineList = (props) => {
             lineId={line.lineId}
             longName={line.nameFi}
             shortName={line.lineNumber}
-            transportType={line.routes.nodes[0].mode}
+            transportType={line.transportType}
             dateBegin={line.dateBegin}
             dateEnd={line.dateEnd}
             trunkRoute={line.trunkRoute === "1"}

diff --git a/src/components/mapContainer.js b/src/components/mapContainer.js
@@ -7,17 +7,7 @@ import uniq from "lodash/uniq";
 import Map from "./map";
 import dayjs from "dayjs";
 
-const parseLineNumber = (lineId) =>
-  // Remove 1st number, which represents the city
-  // Remove all zeros from the beginning
-  lineId.substring(1).replace(/^0+/, "");
-
-const getTransportType = (line) => {
-  if (line.lineId.substring(0, 4) >= 1001 && line.lineId.substring(0, 4) <= 1010) {
-    return "tram";
-  }
-  return "bus";
-};
+import { parseLineNumber, parseTransportType } from "../utils/lineDataUtils";
 
 const lineQuery = gql`
   query lineQuery($id: String!, $dateBegin: Date!, $dateEnd: Date!) {
@@ -249,7 +239,7 @@ class MapContainer extends Component {
         lineId: line.lineId,
         nameFi: line.nameFi,
         lineKey: lineKey,
-        transportType: getTransportType(line),
+        transportType: parseTransportType(line),
         lineNumber: parseLineNumber(line.lineId),
         lineRoutes: sortBy(line.routes.nodes, "dateBegin"),
         trunkRoute: line.trunkRoute === "1",

diff --git a/src/components/sidebar.js b/src/components/sidebar.js
@@ -1,16 +1,16 @@
 import React from "react";
-import { FiXCircle } from "react-icons/fi";
+import { FiXCircle, FiChevronDown, FiChevronUp } from "react-icons/fi";
 import { inject, observer } from "mobx-react";
 import classnames from "classnames";
 import RouteFilter from "./routeFilter";
 import LineList from "./lineList";
-import { FiChevronDown, FiChevronUp } from "react-icons/fi";
 import Header from "./header";
 import Notes from "./notes";
 import styles from "./sidebar.module.css";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import LineAlertList from "./lineAlertList";
 import { runInAction } from "mobx";
+import { compareLineNameOrder } from "../utils/lineDataUtils";
 
 class Sidebar extends React.Component {
   constructor() {
@@ -63,20 +63,7 @@ class Sidebar extends React.Component {
         )}
       </div>
     );
-    const sortedLines = this.props.lines.sort((a, b) => {
-      const transportTypeOrder = ["tram", "bus"];
-      if (a.transportType !== b.transportType) {
-        return transportTypeOrder.indexOf(a.transportType) >
-          transportTypeOrder.indexOf(b.transportType)
-          ? 1
-          : -1;
-      } else if (a.lineId.substring(1, 4) !== b.lineId.substring(1, 4)) {
-        return a.lineId.substring(1, 4) > b.lineId.substring(1, 4) ? 1 : -1;
-      } else if (a.lineId.substring(0, 1) !== b.lineId.substring(0, 1)) {
-        return a.lineId.substring(0, 1) > b.lineId.substring(0, 1) ? 1 : -1;
-      }
-      return a.lineId.substring(4, 6) > b.lineId.substring(4, 6) ? 1 : -1;
-    });
+    const sortedLines = this.props.lines.sort(compareLineNameOrder);
     const isMobile = this.props.isMobile;
     const mappedAlerts = this.props.alerts.map(({ lineId, alerts }) => {
       return {

diff --git a/src/utils/lineDataUtils.js b/src/utils/lineDataUtils.js
@@ -0,0 +1,28 @@
+// Util functions to handle line data.
+
+const parseLineNumber = (lineId) =>
+  // Remove 1st number, which represents the city
+  // Remove all zeros from the beginning
+  lineId.substring(1).replace(/^0+/, "");
+
+const parseTransportType = (line) => {
+  if (line.routes.nodes.length > 0) {
+    return line.routes.nodes[0].mode;
+  }
+  // Backup if mode not found from routes. The old hardcoded way.
+  if (line.lineId.substring(0, 4) >= 1001 && line.lineId.substring(0, 4) <= 1010) {
+    return "TRAM";
+  }
+  return "BUS";
+};
+
+const compareLineNameOrder = (a, b) => {
+  if (a.lineId.substring(1, 4) !== b.lineId.substring(1, 4)) {
+    return a.lineId.substring(1, 4) > b.lineId.substring(1, 4) ? 1 : -1;
+  } else if (a.lineId.substring(0, 1) !== b.lineId.substring(0, 1)) {
+    return a.lineId.substring(0, 1) > b.lineId.substring(0, 1) ? 1 : -1;
+  }
+  return a.lineId.substring(4, 6) > b.lineId.substring(4, 6) ? 1 : -1;
+};
+
+export { parseLineNumber, parseTransportType, compareLineNameOrder };