Added utility to format stop time

Author: jurevans

package-lock.json

@@ -15,6 +15,7 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@turf/turf": "^6.5.0",
     "graphql": "^16.0.1",
+    "luxon": "^2.2.0",
     "react": "17.0.2",
     "react-native": "0.66.3",
     "react-native-dotenv": "^3.3.0",
@@ -30,6 +31,7 @@
     "@expo/config-plugins": "^4.0.11",
     "@react-native-community/eslint-config": "^2.0.0",
     "@types/jest": "^26.0.23",
+    "@types/luxon": "^2.0.7",
     "@types/react-native": "^0.66.4",
     "@types/react-native-dotenv": "^0.2.0",
     "@types/react-redux": "^7.1.20",

package.json

@@ -17,12 +17,20 @@ const getCircleStyles = (
   color: string,
   isActive: boolean,
 ): CircleLayerStyle => ({
-  circleRadius: isActive ? 12 : 6,
-  circleColor: `#${color || 'ddd'}`,
+  circleRadius: isActive ? 16 : 6,
+  circleColor: `#${isActive ? 'ddd' : color || 'ddd'}`,
   circleStrokeColor: `#ddd`,
   circleStrokeWidth: 2,
   circlePitchScale: 'map',
   circlePitchAlignment: 'map',
+  circleColorTransition: {
+    duration: 4000,
+    delay: 4000,
+  },
+  circleRadiusTransition: {
+    duration: 500,
+    delay: 500,
+  },
 });
 
 const Stop: FC<Props> = ({

src/components/Stop.tsx

@@ -53,3 +53,9 @@ export interface IShape {
     coordinates: Coordinate[];
   };
 }
+
+export interface IInterval {
+  hours: number;
+  minutes: number;
+  seconds: number;
+}

src/interfaces/index.ts

@@ -9,13 +9,14 @@ import {
 import { useQuery } from '@apollo/client';
 import { Navigation } from 'react-native-navigation';
 import { NavigationContext } from 'react-native-navigation-hooks';
-import Loading from 'components/Loading';
-import Error from 'components/Error';
 import { useAppDispatch } from 'store';
 import { setActiveStop } from 'slices/stops';
 import { setActiveTrip } from 'slices/trips';
 import { GET_TRIP } from 'apollo/queries';
+import Loading from 'components/Loading';
+import Error from 'components/Error';
 import { IRoute, ITrip, IStopTime } from 'interfaces';
+import { getTimeFromInterval } from 'util/';
 import styles from './styles';
 
 type Props = {
@@ -76,17 +77,18 @@ const TripScreen: FC<Props> = ({ route }) => {
     }
   }, [nextTrip, dispatch]);
 
-  const renderItem = ({ item }: ListRenderItemInfo<IStopTime>) => (
-    <TouchableOpacity style={styles.button} onPress={() => goToStop(item)}>
-      <Text>
-        {item.stopSequence} - {item.stop.stopId} - {item.stop.stopName}
-      </Text>
-      <Text>
-        Departs at: {item.departureTime.hours}:{item.departureTime.minutes}:
-        {item.departureTime.seconds ? item.departureTime.seconds : '00'}
-      </Text>
-    </TouchableOpacity>
-  );
+  const renderItem = ({ item }: ListRenderItemInfo<IStopTime>) => {
+    const time = getTimeFromInterval(item.departureTime);
+
+    return (
+      <TouchableOpacity style={styles.button} onPress={() => goToStop(item)}>
+        <Text>
+          {item.stopSequence} - {item.stop.stopId} - {item.stop.stopName}
+        </Text>
+        <Text>Departs at: {time}</Text>
+      </TouchableOpacity>
+    );
+  };
 
   const renderTrip = (trip: ITrip): React.ReactElement => {
     return (

src/screens/trip/TripScreen.tsx

@@ -0,0 +1,21 @@
+import { DateTime } from 'luxon';
+import { IInterval } from 'interfaces';
+
+const TIME_ZONE = 'America/New_York';
+
+/**
+ * Get human-readable time, 12 hour format, from interval
+ * @param interval
+ * @returns {string}
+ */
+export const getTimeFromInterval = (interval: IInterval): string => {
+  const { hours: hour, minutes: minute, seconds: second } = interval;
+  const time = DateTime.fromObject({
+    hour,
+    minute,
+    second,
+  })
+    .setZone(TIME_ZONE)
+    .toLocaleString(DateTime.TIME_SIMPLE);
+  return time;
+};

src/util/index.ts

@@ -0,0 +1,3 @@
+{
+  "name": "util"
+}