Implement stop lookup by location

.eslintrc.js

@@ -1,8 +1,8 @@
 module.exports = {
   root: true,
-  extends: ['@react-native-community', 'prettier'],
+  extends: ['@react-native-community'],
   rules: {
-    'prettier/prettier': 'error',
+    'prettier/prettier': 0,
     'no-shadow': [
       'error',
       { builtinGlobals: true, hoist: 'functions', allow: ['tripId'] },

package.json

@@ -15,6 +15,7 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@turf/turf": "^6.5.0",
     "graphql": "^16.0.1",
+    "lodash": "^4.17.21",
     "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/lodash": "^4.14.178",
     "@types/react-native": "^0.66.4",
     "@types/react-native-dotenv": "^0.2.0",
     "@types/react-redux": "^7.1.20",

src/apollo/client.ts

@@ -15,7 +15,10 @@ const authMiddleware = new ApolloLink((operation, forward) => {
       'x-api-key': GTFS_API_GATEWAY_KEY,
     },
   }));
-  return forward(operation);
+  return forward(operation).map(result => {
+    // console.info(operation.getContext().response);
+    return result;
+  });
 });
 
 const client = new ApolloClient({
@@ -27,7 +30,9 @@ const client = new ApolloClient({
       },
       Stop: {
         keyFields: Stop =>
-          `${Stop.__typename}:${Stop.feedIndex}:${Stop.stopId}`,
+          `${Stop.__typename}:${Stop.feedIndex}:${
+            Stop.parentStation || Stop.stopId
+          }`,
       },
       Trip: {
         keyFields: Trip =>

src/apollo/fragments.ts

@@ -12,7 +12,6 @@ export const STOP_FIELDS = gql`
     feedIndex
     stopId
     stopName
-    parentStation
     geom {
       coordinates
     }
@@ -44,10 +43,7 @@ export const TRIP_FIELDS = gql`
       stop {
         feedIndex
         stopId
-        stopName
-        geom {
-          coordinates
-        }
+        parentStation
       }
     }
   }

src/apollo/queries.ts

@@ -15,17 +15,38 @@ export const GET_FEEDS = gql`
   }
 `;
 
+export const GET_STATIONS = gql`
+  ${STOP_FIELDS}
+  query GetStations($feedIndex: Int!, $stationIds: [String!]) {
+    stations(feedIndex: $feedIndex, stationIds: $stationIds) {
+      ...StopFields
+    }
+  }
+`;
+
+export const GET_STOPS_BY_LOCATION = gql`
+  ${STOP_FIELDS}
+  query GetStopsByLocation($latitude: Float!, $longitude: Float!, $radius: Float!) {
+    stopsByLocation(
+      location: [$latitude, $longitude]
+		  radius: $radius
+    ) {
+      ...StopFields
+    }
+  }
+`;
+
 export const GET_TRIPS = gql`
   ${TRIP_FIELDS}
-  ${STOP_FIELDS}
   query GetNextTrips($feedIndex: Int!, $routeId: String!) {
     nextTrips(feedIndex: $feedIndex, routeId: $routeId) {
       ...TripFields
       stopTimes {
         stopSequence
         departure
         stop {
-          ...StopFields
+          stopId
+          parentStation
         }
       }
     }

src/components/ErrorView.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react';
 import { StyleProp, Text, View } from 'react-native';
 
-type Props = {
+interface Props {
   message?: string;
   styles?: StyleProp<any>;
-};
+}
 
 const ErrorView: FC<Props> = ({ message, styles = {} }) => {
   return (
@@ -16,4 +16,4 @@ const ErrorView: FC<Props> = ({ message, styles = {} }) => {
   );
 };
 
-export default ErrorView;
+export default React.memo(ErrorView);

src/components/LoadingView.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react';
 import { StyleProp, Text, View } from 'react-native';
 
-type Props = {
+interface Props {
   message?: string;
   styles?: StyleProp<any>;
-};
+}
 
 const LoadingView: FC<Props> = ({ message, styles = {} }) => {
   return (
@@ -14,4 +14,4 @@ const LoadingView: FC<Props> = ({ message, styles = {} }) => {
   );
 };
 
-export default LoadingView;
+export default React.memo(LoadingView);

src/components/MapView.tsx

@@ -1,22 +1,22 @@
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 import { GestureResponderEvent, StyleSheet } from 'react-native';
 import MapboxGL, { RegionPayload } from '@react-native-mapbox-gl/maps';
 import { Feature, Point, Position } from '@turf/turf';
 import { MAPBOX_ACCESS_TOKEN, MAPBOX_STYLE_URL } from '@env';
 
-type Props = {
+interface Props {
   centerCoordinate: Position;
   zoomLevel: number;
   pitch: number;
-  children: any;
+  children: ReactNode;
   onRegionWillChange?: (feature: Feature<Point, RegionPayload>) => void;
   onRegionDidChange?: (feature: Feature<Point, RegionPayload>) => void;
   onTouchStart?: (e: GestureResponderEvent) => void;
   onTouchEnd?: (e: GestureResponderEvent) => void;
   onLongPress?: (
     feature: Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>,
   ) => void;
-};
+}
 
 MapboxGL.setAccessToken(MAPBOX_ACCESS_TOKEN);
 

src/components/StopMarker.tsx

@@ -4,25 +4,31 @@ import { SvgProps } from 'react-native-svg';
 import { Position } from '@turf/turf';
 import Pin from 'assets/pin.svg';
 
-type Props = {
+interface Props {
   feedIndex: number;
   stopId: string;
   coordinates: Position;
-};
+  svgProps?: SvgProps;
+}
 
-const svgProps: SvgProps = {
+const svgDefaultProps: SvgProps = {
   width: 50,
   height: 50,
   fill: '#cc0000',
 };
 
-const StopMarker: FC<Props> = ({ feedIndex, stopId, coordinates }) => (
+const StopMarker: FC<Props> = ({
+  feedIndex,
+  stopId,
+  coordinates,
+  svgProps = {},
+}) => (
   <MapboxGL.MarkerView
     id={`marker-${feedIndex}:${stopId}`}
     coordinate={coordinates}
     anchor={{ x: 0.5, y: 1.0 }}>
-    <Pin nativeID={stopId} {...svgProps} />
+    <Pin nativeID={stopId} {...svgDefaultProps} {...svgProps} />
   </MapboxGL.MarkerView>
 );
 
-export default StopMarker;
+export default React.memo(StopMarker);

src/components/StopShape.tsx

@@ -3,24 +3,24 @@ import MapboxGL, { CircleLayerStyle } from '@react-native-mapbox-gl/maps';
 import { point, Position } from '@turf/turf';
 import { StopTimeCallback } from './StopTimeButton';
 
-type Props = {
+interface Props {
   feedIndex: number;
   tripId: string;
   stopId: string;
   coordinates: Position;
   color?: string;
   isActive?: boolean;
-  aboveLayerId: string;
+  aboveLayerId?: string;
   onPress: StopTimeCallback;
-};
+}
 
 const getCircleStyles = (
   color: string,
   isActive: boolean,
 ): CircleLayerStyle => ({
   circleRadius: isActive ? 16 : 6,
   circleColor: `#${isActive ? 'ddd' : color || 'ddd'}`,
-  circleStrokeColor: `#ddd`,
+  circleStrokeColor: '#ddd',
   circleStrokeWidth: 2,
   circlePitchScale: 'map',
   circlePitchAlignment: 'map',
@@ -61,4 +61,4 @@ const StopShape: FC<Props> = ({
   );
 };
 
-export default StopShape;
+export default React.memo(StopShape);

src/components/StopTimeButton.tsx

@@ -19,7 +19,7 @@ export interface IStopTimeStyles {
   departure?: StyleProp<TextStyle>;
 }
 
-type Props = {
+interface Props {
   feedIndex: number;
   tripId: string;
   stopId: string;
@@ -29,7 +29,7 @@ type Props = {
   labelStyles?: StyleProp<TextStyle>;
   departureStyles?: StyleProp<TextStyle>;
   onPress: StopTimeCallback;
-};
+}
 
 const StopTimeButton: FC<Props> = ({
   feedIndex,
@@ -52,4 +52,4 @@ const StopTimeButton: FC<Props> = ({
   );
 };
 
-export default StopTimeButton;
+export default React.memo(StopTimeButton);

src/components/TripList.tsx

@@ -6,12 +6,12 @@ import StopTimeButton, {
 } from 'components/StopTimeButton';
 import { IStopTime } from 'interfaces';
 
-type Props = {
+interface Props {
   tripId: string;
   stopTimes: IStopTime[];
   styles?: IStopTimeStyles;
   onPress: StopTimeCallback;
-};
+}
 
 const getRenderItem = (
   tripId: string,
@@ -20,12 +20,12 @@ const getRenderItem = (
   onPress: StopTimeCallback,
 ) => {
   const { stop, departure } = stopTime;
-  const { feedIndex, stopId, stopName } = stop;
+  const { feedIndex, stopId, parentStation, stopName } = stop;
   return (
     <StopTimeButton
       feedIndex={feedIndex}
       tripId={tripId}
-      stopId={stopId}
+      stopId={parentStation || stopId}
       stopName={stopName}
       departure={departure}
       buttonStyles={styles.button}
@@ -43,9 +43,12 @@ const TripList: FC<Props> = ({ tripId, stopTimes, styles = {}, onPress }) => {
       renderItem={({ item }: ListRenderItemInfo<IStopTime>) =>
         getRenderItem(tripId, item, styles, onPress)
       }
-      keyExtractor={(stopTime: IStopTime) => stopTime.stop.stopId}
+      keyExtractor={(stopTime: IStopTime) => {
+        const { feedIndex, stopId, parentStation } = stopTime.stop;
+        return `${feedIndex}:${parentStation || stopId}`;
+      }}
     />
   );
 };
 
-export default TripList;
+export default React.memo(TripList);

src/components/TripShape.tsx

@@ -2,12 +2,12 @@ import MapboxGL, { LineLayerStyle } from '@react-native-mapbox-gl/maps';
 import { lineString, Position } from '@turf/turf';
 import React, { FC } from 'react';
 
-type Props = {
+interface Props {
   shapeSourceId: string;
   layerId: string;
   color?: string;
   coordinates?: Position[];
-};
+}
 
 const getLineStyles = (color?: string): LineLayerStyle => ({
   lineColor: `#${color ? color : 'ddd'}`,
@@ -30,4 +30,4 @@ const TripShape: FC<Props> = ({
   );
 };
 
-export default TripShape;
+export default React.memo(TripShape);

src/navigation/providers.tsx

@@ -13,7 +13,7 @@ export const withProviders =
     store: any,
     client: any,
   ): FC<P & Props> =>
-  (props: P & Props): ReactElement =>
+    (props: P & Props): ReactElement =>
     (
       <NavigationProvider value={{ componentId: props.componentId }}>
         <Provider store={store}>

src/screens/dashboard/DashboardScreen.tsx

@@ -18,12 +18,8 @@ import styles from './styles';
 
 const DashboardScreen: FC = () => {
   const { push } = useNavigation();
-
   const { loading, error, data } = useQuery<{ feeds: IFeed[] }>(GET_FEEDS);
 
-  if (loading) <LoadingView message="Loading feeds" />;
-  if (error) <ErrorView message={error.message} />;
-
   const { feeds } = data || {};
 
   const renderItem = ({ item }: ListRenderItemInfo<IFeed>) => (
@@ -40,6 +36,8 @@ const DashboardScreen: FC = () => {
     <View style={styles.root}>
       <View style={styles.heading}>
         <Text style={styles.header}>Dashboard</Text>
+        {loading && <LoadingView message="Loading feeds" />}
+        {error && <ErrorView message={error.message} />}
       </View>
       <FlatList
         data={feeds}