Updates

.eslintrc.js

@@ -3,6 +3,10 @@ module.exports = {
   extends: ['@react-native-community', 'prettier'],
   rules: {
     'prettier/prettier': 'error',
+    'no-shadow': [
+      'error',
+      { builtinGlobals: true, hoist: 'functions', allow: ['tripId'] },
+    ],
   },
   plugins: ['prettier'],
 };

README.md

@@ -73,10 +73,11 @@ npx react-native run-ios
 Read more about the frameworks and libraries this app utilizes at the links below:
 
 - [React-Native](https://reactnative.dev/)
-- [React Native Navigation](https://wix.github.io/react-native-navigation/docs/before-you-start/)
-- [React Native Navigation Hooks](https://underscopeio.github.io/react-native-navigation-hooks/docs/before-you-start/)
-- [TypeScript](https://www.typescriptlang.org/)
+- [React Native Navigation](https://wix.github.io/react-native-navigation/)
+- [React Native Navigation Hooks](https://underscopeio.github.io/react-native-navigation-hooks/)
+- [React Native MapboxGL](https://github.com/react-native-mapbox-gl/)
 - [MapBox](https://www.mapbox.com/)
+- [TypeScript](https://www.typescriptlang.org/)
 - [ApolloClient](https://www.apollographql.com/docs/react/)
 - [Redux Toolkit](https://redux-toolkit.js.org/)
 - [Turfjs](https://github.com/Turfjs/turf)

src/components/Error.tsx → src/components/ErrorView.tsx

@@ -6,7 +6,7 @@ type Props = {
   styles?: StyleProp<any>;
 };
 
-const Error: FC<Props> = ({ message, styles = {} }) => {
+const ErrorView: FC<Props> = ({ message, styles = {} }) => {
   return (
     <View>
       <Text style={{ ...styles }}>
@@ -16,4 +16,4 @@ const Error: FC<Props> = ({ message, styles = {} }) => {
   );
 };
 
-export default Error;
+export default ErrorView;

src/components/Loading.tsx → src/components/LoadingView.tsx

@@ -6,12 +6,12 @@ type Props = {
   styles?: StyleProp<any>;
 };
 
-const Loading: FC<Props> = ({ message, styles = {} }) => {
+const LoadingView: FC<Props> = ({ message, styles = {} }) => {
   return (
     <View>
       <Text style={{ ...styles }}>{message || 'Loading...'}</Text>
     </View>
   );
 };
 
-export default Loading;
+export default LoadingView;

src/components/Map.tsx → src/components/MapView.tsx

@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const Map: FC<Props> = ({
+const MapView: FC<Props> = ({
   centerCoordinate,
   zoomLevel,
   pitch,
@@ -62,4 +62,4 @@ const Map: FC<Props> = ({
   );
 };
 
-export default Map;
+export default MapView;

src/components/Stop.tsx → src/components/StopShape.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import MapboxGL, { CircleLayerStyle } from '@react-native-mapbox-gl/maps';
 import { point, Position } from '@turf/turf';
-import { StopTimeCallback } from './StopTime';
+import { StopTimeCallback } from './StopTimeButton';
 
 type Props = {
   feedIndex: number;
@@ -34,7 +34,7 @@ const getCircleStyles = (
   },
 });
 
-const Stop: FC<Props> = ({
+const StopShape: FC<Props> = ({
   feedIndex,
   tripId,
   stopId,
@@ -61,4 +61,4 @@ const Stop: FC<Props> = ({
   );
 };
 
-export default Stop;
+export default StopShape;

src/components/StopTime.tsx → src/components/StopTimeButton.tsx

@@ -31,7 +31,7 @@ type Props = {
   onPress: StopTimeCallback;
 };
 
-const StopTime: FC<Props> = ({
+const StopTimeButton: FC<Props> = ({
   feedIndex,
   tripId,
   stopId,
@@ -52,4 +52,4 @@ const StopTime: FC<Props> = ({
   );
 };
 
-export default StopTime;
+export default StopTimeButton;

src/components/Trip.tsx → src/components/TripList.tsx

@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 import { FlatList, ListRenderItemInfo } from 'react-native';
-import StopTime, {
+import StopTimeButton, {
   IStopTimeStyles,
   StopTimeCallback,
-} from 'components/StopTime';
+} from 'components/StopTimeButton';
 import { IStopTime } from 'interfaces';
 
 type Props = {
@@ -22,7 +22,7 @@ const getRenderItem = (
   const { stop, departure } = stopTime;
   const { feedIndex, stopId, stopName } = stop;
   return (
-    <StopTime
+    <StopTimeButton
       feedIndex={feedIndex}
       tripId={tripId}
       stopId={stopId}
@@ -36,7 +36,7 @@ const getRenderItem = (
   );
 };
 
-const Trip: FC<Props> = ({ tripId, stopTimes, styles = {}, onPress }) => {
+const TripList: FC<Props> = ({ tripId, stopTimes, styles = {}, onPress }) => {
   return (
     <FlatList
       data={stopTimes}
@@ -48,4 +48,4 @@ const Trip: FC<Props> = ({ tripId, stopTimes, styles = {}, onPress }) => {
   );
 };
 
-export default Trip;
+export default TripList;

src/screens/dashboard/DashboardScreen.tsx

@@ -9,8 +9,8 @@ import {
 import { useNavigation } from 'react-native-navigation-hooks';
 import { useQuery } from '@apollo/client';
 import { GET_FEEDS } from 'apollo/queries';
-import Loading from 'components/Loading';
-import Error from 'components/Error';
+import LoadingView from 'components/LoadingView';
+import ErrorView from 'components/ErrorView';
 import { Screens } from 'navigation/screens';
 import { IFeed } from 'interfaces';
 import config from 'config';
@@ -21,8 +21,8 @@ const DashboardScreen: FC = () => {
 
   const { loading, error, data } = useQuery<{ feeds: IFeed[] }>(GET_FEEDS);
 
-  if (loading) <Loading message="Loading feeds" />;
-  if (error) <Error message={error.message} />;
+  if (loading) <LoadingView message="Loading feeds" />;
+  if (error) <ErrorView message={error.message} />;
 
   const { feeds } = data || {};
 

src/screens/map/MapScreen.tsx

@@ -6,15 +6,16 @@ import { RegionPayload } from '@react-native-mapbox-gl/maps';
 import { Navigation } from 'react-native-navigation';
 import { NavigationContext } from 'react-native-navigation-hooks';
 import { useAppDispatch, useAppSelector } from 'store/hooks';
-import Map from 'components/Map';
+import MapView from 'components/MapView';
 import TripShape from 'components/TripShape';
-import Stop from 'components/Stop';
+import StopShape from 'components/StopShape';
 import StopMarker from 'components/StopMarker';
-import { StopTimeCallback } from 'components/StopTime';
+import { StopTimeCallback } from 'components/StopTimeButton';
 import { setActiveStop } from 'slices/stops';
 import { GET_SHAPE } from 'apollo/queries';
 import { ROUTE_FIELDS, STOP_FIELDS, TRIP_FIELDS } from 'apollo/fragments';
 import { IRoute, IShape, IStop, IStopTime, ITrip } from 'interfaces';
+// import { getRadiusByZoomLat } from 'util/';
 import styles from './styles';
 
 const DEFAULT_COORD: Position = [-73.94594865587045, 40.7227534777328];
@@ -31,7 +32,7 @@ const MapScreen: FC = () => {
   const client = useApolloClient();
   const { componentId = '' } = useContext(NavigationContext);
 
-  const [isMarkerVisible, setMarkerVisible] = useState(true);
+  const [isMarkerVisible, setMarkerVisible] = useState(false);
   const [cameraState, setCameraState] = useState({
     zoomLevel: DEFAULT_ZOOM,
     centerCoordinate: DEFAULT_COORD,
@@ -87,6 +88,19 @@ const MapScreen: FC = () => {
     }));
   }, [componentId, stop]);
 
+  // useEffect(() => {
+  //   const radius = getRadiusByZoomLat(
+  //     cameraState.zoomLevel,
+  //     cameraState.centerCoordinate[0],
+  //   );
+
+  //   console.log({
+  //     location: cameraState.centerCoordinate,
+  //     radius,
+  //     pitch: cameraState.pitch,
+  //   });
+  // }, [cameraState]);
+
   const onStopPress = useCallback<StopTimeCallback>(
     ({ stopId, tripId, feedIndex }) => {
       setMarkerVisible(false);
@@ -108,10 +122,11 @@ const MapScreen: FC = () => {
   const onRegionDidChange = useCallback(
     (feature: Feature<Point, RegionPayload>) => {
       setMarkerVisible(true);
-      setCameraState(state => ({
-        ...state,
+      setCameraState({
+        centerCoordinate: feature.geometry.coordinates,
         pitch: feature.properties.pitch,
-      }));
+        zoomLevel: feature.properties.zoomLevel,
+      });
     },
     [],
   );
@@ -135,7 +150,7 @@ const MapScreen: FC = () => {
   return (
     <View style={styles.page}>
       <View style={styles.container}>
-        <Map
+        <MapView
           centerCoordinate={centerCoordinate}
           zoomLevel={zoomLevel}
           pitch={pitch}
@@ -162,7 +177,7 @@ const MapScreen: FC = () => {
           )}
           {trip?.stopTimes &&
             trip?.stopTimes.map((st: IStopTime) => (
-              <Stop
+              <StopShape
                 key={st.stop.stopId}
                 feedIndex={trip.feedIndex}
                 stopId={st.stop.stopId}
@@ -174,7 +189,7 @@ const MapScreen: FC = () => {
                 onPress={onStopPress}
               />
             ))}
-        </Map>
+        </MapView>
       </View>
     </View>
   );

src/screens/routes/RoutesScreen.tsx

@@ -15,8 +15,8 @@ import { gql, useApolloClient, useQuery } from '@apollo/client';
 import { GET_ROUTES } from 'apollo/queries';
 import { FEED_FIELDS } from 'apollo/fragments';
 import { Screens } from 'navigation/screens';
-import Error from 'components/Error';
-import Loading from 'components/Loading';
+import ErrorView from 'components/ErrorView';
+import LoadingView from 'components/LoadingView';
 import { IFeed, IRoute } from 'interfaces';
 import styles from './styles';
 
@@ -80,8 +80,8 @@ const RoutesScreen: FC<Props> = ({ feedIndex }) => {
     </TouchableOpacity>
   );
 
-  if (loading) return <Loading message="Loading routes..." />;
-  if (error) return <Error message={error.message} styles={styles.error} />;
+  if (loading) return <LoadingView message="Loading routes..." />;
+  if (error) return <ErrorView message={error.message} styles={styles.error} />;
 
   return (
     <View style={styles.root}>

src/screens/trip/TripScreen.tsx

@@ -5,8 +5,8 @@ import { Navigation } from 'react-native-navigation';
 import { NavigationContext } from 'react-native-navigation-hooks';
 import { useAppDispatch } from 'store';
 import { setActiveStop } from 'slices/stops';
-import Trip from 'components/Trip';
-import { StopTimeCallback } from 'components/StopTime';
+import TripList from 'components/TripList';
+import { StopTimeCallback } from 'components/StopTimeButton';
 import { TRIP_FIELDS } from 'apollo/fragments';
 import { IRoute, ITrip } from 'interfaces';
 import styles from './styles';
@@ -41,7 +41,6 @@ const TripScreen: FC<Props> = ({ tripId, route }) => {
   }, [componentId, trip]);
 
   const goToStop = useCallback<StopTimeCallback>(
-    // eslint-disable-next-line no-shadow
     ({ stopId, tripId, feedIndex }) => {
       dispatch(
         setActiveStop({
@@ -71,7 +70,7 @@ const TripScreen: FC<Props> = ({ tripId, route }) => {
           <Text style={styles.tripHeader}>
             {trip.tripHeadsign} -{trip.directionId ? 'Inbound' : 'Outbound'}
           </Text>
-          <Trip
+          <TripList
             tripId={trip?.tripId}
             stopTimes={trip.stopTimes}
             styles={{

src/screens/trips/TripsScreen.tsx

@@ -13,8 +13,8 @@ import {
 } from 'react-native-navigation-hooks';
 import { useQuery } from '@apollo/client';
 import { GET_TRIPS } from 'apollo/queries';
-import Loading from 'components/Loading';
-import Error from 'components/Error';
+import LoadingView from 'components/LoadingView';
+import ErrorView from 'components/ErrorView';
 import { IRoute, ITrip } from 'interfaces';
 import { Screens } from 'navigation/screens';
 import styles from './styles';
@@ -74,9 +74,9 @@ const TripsScreen: FC<Props> = ({ route }) => {
       <View style={styles.heading}>
         <Text style={styles.header}>Available Trips</Text>
       </View>
-      {loading && <Loading message="Loading trip times..." />}
+      {loading && <LoadingView message="Loading trip times..." />}
       {!loading && !data && <Text>No upcoming trips could be found</Text>}
-      {error && <Error message={error.message} />}
+      {error && <ErrorView message={error.message} />}
       {data && (
         <FlatList
           data={nextTrips}

src/slices/stops.ts

@@ -6,12 +6,23 @@ export interface IActiveStop {
   stopId: string;
 }
 
+export interface ITransferPayload {
+  stopId: string;
+  transfers: string[];
+}
+
+export type TransfersIndex = {
+  [key: string]: string[];
+};
+
 interface InitialState {
   activeStop: IActiveStop | null;
+  transfers: TransfersIndex;
 }
 
 const initialState: InitialState = {
   activeStop: null,
+  transfers: {},
 };
 
 const stopSlice = createSlice({
@@ -21,6 +32,13 @@ const stopSlice = createSlice({
     setActiveStop: (state, action: PayloadAction<IActiveStop>) => {
       state.activeStop = action.payload;
     },
+    setTransfers: (state, action: PayloadAction<ITransferPayload>) => {
+      const { stopId, transfers } = action.payload;
+
+      if (!(stopId in state.transfers)) {
+        state.transfers[stopId] = transfers;
+      }
+    },
   },
 });
 

src/util/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Calculate radius within which to fetch stops
+ * @param zoom
+ * @param lat
+ * @returns {number}
+ */
+export const getRadiusByZoomLat = (zoom: number, lat: number): number => {
+  const CIRCUMFERENCE = 40075016.686;
+  return (CIRCUMFERENCE * Math.cos(lat)) / 2 ** zoom / 100000;
+};

src/util/package.json

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