Read stop from fragment instead of looping through stopTimes

Author: jurevans

src/apollo/client.ts

@@ -20,7 +20,13 @@ const authMiddleware = new ApolloLink((operation, forward) => {
 
 const client = new ApolloClient({
   link: concat(authMiddleware, link),
-  cache: new InMemoryCache(),
+  cache: new InMemoryCache({
+    typePolicies: {
+      Stop: {
+        keyFields: Stop => `${Stop.__typename}:${Stop.stopId}`,
+      },
+    },
+  }),
 });
 
 export default client;

src/apollo/fragments.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const STOP_FIELDS = gql`
+  fragment StopFields on Stop {
+    stopId
+    stopName
+    geom {
+      coordinates
+    }
+  }
+`;

src/components/Stop.tsx

@@ -1,12 +1,13 @@
 import React, { FC } from 'react';
 import MapboxGL, { CircleLayerStyle } from '@react-native-mapbox-gl/maps';
-import { IStop, IStopTime, ITrip } from 'interfaces';
+import { IStop } from 'interfaces';
 import * as turf from '@turf/turf';
 
 type Props = {
-  stopId: string;
-  trip: ITrip;
-  goToStop: (stop: IStop) => void;
+  stop: IStop;
+  color: string;
+  aboveLayerID: string;
+  onPress: (stop: IStop) => void;
 };
 
 const getCircleStyles = (color?: string): CircleLayerStyle => ({
@@ -18,26 +19,20 @@ const getCircleStyles = (color?: string): CircleLayerStyle => ({
   circlePitchAlignment: 'map',
 });
 
-const Stop: FC<Props> = ({ stopId, trip, goToStop }) => {
-  const stopTime: IStopTime | any = trip.stopTimes.find(
-    (st: IStopTime) => st.stop.stopId === stopId,
-  );
-  const { stop }: { stop: IStop } = stopTime || {};
-  const { shapeId } = trip;
+const Stop: FC<Props> = ({ stop, color, aboveLayerID, onPress }) => {
   const point = turf.point(stop.geom.coordinates);
-  const color = trip.route.routeColor;
 
   return (
     <MapboxGL.ShapeSource
       id={`shape-source-${stop.stopId}`}
       key={`${stop.stopId}`}
       shape={point}
-      onPress={() => goToStop(stop)}>
+      onPress={() => onPress(stop)}>
       <MapboxGL.CircleLayer
         id={`circle-layer-${stop.stopId}`}
         style={getCircleStyles(color)}
         minZoomLevel={12}
-        aboveLayerID={`line-layer-${shapeId}`}
+        aboveLayerID={aboveLayerID}
       />
     </MapboxGL.ShapeSource>
   );

src/components/TripShape.tsx

@@ -14,14 +14,13 @@ const getLineStyles = (trip: ITrip | null) => ({
   lineOpacity: 0.75,
 });
 
-const TripShape: FC<Props> = ({ shape, trip }) => {
-  const { shapeId, geom } = shape;
-  const lineString = turf.lineString(geom.coordinates as any);
+const TripShape: FC<Props> = ({ shape = {}, trip }) => {
+  let { shapeId, geom } = shape;
+
+  const lineString = turf.lineString(geom?.coordinates as any);
 
   return (
-    <MapboxGL.ShapeSource
-      id={`shape-source-${shape.shapeId}`}
-      shape={lineString}>
+    <MapboxGL.ShapeSource id={`shape-source-${shapeId}`} shape={lineString}>
       <MapboxGL.LineLayer
         id={`line-layer-${shapeId}`}
         style={getLineStyles(trip)}

src/interfaces/index.ts

@@ -1,3 +1,5 @@
+type Coordinate = [number, number];
+
 export interface IRoute {
   feedIndex: number;
   routeId: string;
@@ -11,7 +13,7 @@ export interface IStop {
   stopId: string;
   stopName: string;
   geom: {
-    coordinates: [number, number];
+    coordinates: Coordinate;
   };
 }
 
@@ -41,6 +43,6 @@ export interface IShape {
   length: number;
   geom: {
     type: string;
-    coordinates: [number, number];
+    coordinates: Coordinate[];
   };
 }

src/screens/dashboard/DashboardScreen.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native-navigation-hooks';
 import { gql, useQuery } from '@apollo/client';
 import { Screens } from 'navigation/screens';
-import { Route } from 'interfaces';
+import { IRoute } from 'interfaces';
 import styles from './styles';
 
 const DashboardScreen: FC = () => {
@@ -37,7 +37,7 @@ const DashboardScreen: FC = () => {
     feedIndex: number;
   }
 
-  const { loading, error, data } = useQuery<{ routes: Route[] }, RouteVars>(
+  const { loading, error, data } = useQuery<{ routes: IRoute[] }, RouteVars>(
     GET_ROUTES,
     {
       variables: {
@@ -46,7 +46,7 @@ const DashboardScreen: FC = () => {
     },
   );
 
-  const renderItem = ({ item }: ListRenderItemInfo<Route>) => (
+  const renderItem = ({ item }: ListRenderItemInfo<IRoute>) => (
     <TouchableOpacity
       style={{
         ...styles.button,
@@ -70,7 +70,7 @@ const DashboardScreen: FC = () => {
       <FlatList
         data={data?.routes}
         renderItem={renderItem}
-        keyExtractor={(route: Route) => route.routeId}
+        keyExtractor={(route: IRoute) => route.routeId}
       />
     </View>
   );

src/screens/map/MapScreen.tsx

@@ -11,13 +11,14 @@ import StopMarker from 'components/StopMarker';
 import { GET_TRIP } from 'screens/route/RouteScreen';
 import Stop from 'components/Stop';
 import { setActiveStop } from 'slices/stops';
+import { STOP_FIELDS } from 'apollo/fragments';
 
 MapboxGL.setAccessToken(MAPBOX_ACCESS_TOKEN);
 
 const DEFAULT_COORD = [-73.94594865587045, 40.7227534777328];
 const DEFAULT_ZOOM = 11;
 const STOP_ZOOM = 15;
-const ANIMATION_DURATION = 2000;
+const ANIMATION_DURATION = 1500;
 
 interface ShapeVars {
   shapeId: string;
@@ -58,8 +59,8 @@ const MapScreen: FC = () => {
     },
   });
 
-  const goToStop = useCallback(
-    stop => {
+  const onStopPress = useCallback(
+    (stop: IStop) => {
       setMarkerVisible(false);
       setTimeout(() => setMarkerVisible(true), ANIMATION_DURATION);
       dispatch(
@@ -81,11 +82,12 @@ const MapScreen: FC = () => {
 
   const { nextTrip: trip }: { nextTrip: ITrip } = tripInCache || {};
 
-  const stopTime: IStopTime | any =
-    trip?.stopTimes.find(
-      (st: IStopTime) => st.stop.stopId === activeStop?.stopId,
-    ) || null;
-  const { stop }: { stop: IStop } = stopTime || {};
+  const stop = client.readFragment({
+    id: `Stop:${activeStop?.stopId}`,
+    fragment: gql`
+      ${STOP_FIELDS}
+    `,
+  });
 
   useEffect(() => {
     if (stop) {
@@ -121,9 +123,10 @@ const MapScreen: FC = () => {
             trip?.stopTimes.map((st: IStopTime) => (
               <Stop
                 key={`stop-time-${st.stop.stopId}`}
-                stopId={st.stop.stopId}
-                trip={trip}
-                goToStop={goToStop}
+                stop={st.stop}
+                color={trip.route.routeColor}
+                aboveLayerID={`line-layer-${trip.shapeId}`}
+                onPress={onStopPress}
               />
             ))}
         </MapboxGL.MapView>

src/screens/route/RouteScreen.tsx

@@ -14,6 +14,7 @@ import { useAppDispatch } from 'store';
 import { setActiveStop } from 'slices/stops';
 import styles from './styles';
 import { setActiveTrip } from 'slices/trips';
+import { STOP_FIELDS } from 'apollo/fragments';
 
 type Props = {
   route: IRoute;
@@ -25,6 +26,7 @@ interface TripVars {
 }
 
 export const GET_TRIP = gql`
+  ${STOP_FIELDS}
   query GetTrip($feedIndex: Int!, $routeId: String!) {
     nextTrip(feedIndex: $feedIndex, routeId: $routeId) {
       feedIndex
@@ -47,11 +49,7 @@ export const GET_TRIP = gql`
           seconds
         }
         stop {
-          stopId
-          stopName
-          geom {
-            coordinates
-          }
+          ...StopFields
         }
       }
     }