Merge pull request #7 from jurevans/develop

Topbar titles, animation

Author: jurevans

src/apollo/client.ts

@@ -22,6 +22,9 @@ const client = new ApolloClient({
   link: concat(authMiddleware, link),
   cache: new InMemoryCache({
     typePolicies: {
+      FeedInfo: {
+        keyFields: FeedInfo => `${FeedInfo.__typename}:${FeedInfo.feedIndex}`,
+      },
       Stop: {
         keyFields: Stop =>
           `${Stop.__typename}:${Stop.feedIndex}:${Stop.stopId}`,

src/apollo/fragments.ts

@@ -1,10 +1,18 @@
 import { gql } from '@apollo/client';
 
+export const FEED_FIELDS = gql`
+  fragment FeedFields on FeedInfo {
+    feedIndex
+    feedPublisherName
+  }
+`;
+
 export const STOP_FIELDS = gql`
   fragment StopFields on Stop {
     feedIndex
     stopId
     stopName
+    parentStation
     geom {
       coordinates
     }

src/apollo/queries.ts

@@ -1,11 +1,16 @@
 import { gql } from '@apollo/client';
-import { ROUTE_FIELDS, STOP_FIELDS, TRIP_FIELDS } from './fragments';
+import {
+  FEED_FIELDS,
+  ROUTE_FIELDS,
+  STOP_FIELDS,
+  TRIP_FIELDS,
+} from './fragments';
 
 export const GET_FEEDS = gql`
+  ${FEED_FIELDS}
   query GetFeeds {
     feeds {
-      feedIndex
-      feedPublisherName
+      ...FeedFields
     }
   }
 `;

src/components/Map.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { GestureResponderEvent, StyleSheet } from 'react-native';
 import MapboxGL, { RegionPayload } from '@react-native-mapbox-gl/maps';
-import { Feature, Point, Position } from '@turf/helpers';
+import { Feature, Point, Position } from '@turf/turf';
 import { MAPBOX_ACCESS_TOKEN, MAPBOX_STYLE_URL } from '@env';
 
 type Props = {

src/components/Stop.tsx

@@ -1,13 +1,13 @@
 import React, { FC } from 'react';
 import MapboxGL, { CircleLayerStyle } from '@react-native-mapbox-gl/maps';
-import * as turf from '@turf/turf';
+import { point, Position } from '@turf/turf';
 import { StopTimeCallback } from './StopTime';
 
 type Props = {
   feedIndex: number;
   tripId: string;
   stopId: string;
-  coordinates: turf.Position;
+  coordinates: Position;
   color?: string;
   isActive?: boolean;
   aboveLayerId: string;
@@ -44,12 +44,12 @@ const Stop: FC<Props> = ({
   aboveLayerId,
   onPress,
 }) => {
-  const point = turf.point(coordinates);
+  const shape = point(coordinates);
   return (
     <MapboxGL.ShapeSource
       id={`shape-source-${feedIndex}:${stopId}`}
       key={`${stopId}`}
-      shape={point}
+      shape={shape}
       onPress={() => onPress({ feedIndex, tripId, stopId })}>
       <MapboxGL.CircleLayer
         id={`circle-layer-${feedIndex}:${stopId}`}

src/components/TripShape.tsx

@@ -1,6 +1,5 @@
 import MapboxGL, { LineLayerStyle } from '@react-native-mapbox-gl/maps';
-import * as turf from '@turf/turf';
-import { Position } from '@turf/turf';
+import { lineString, Position } from '@turf/turf';
 import React, { FC } from 'react';
 
 type Props = {
@@ -23,10 +22,9 @@ const TripShape: FC<Props> = ({
   color,
   coordinates = [],
 }) => {
-  const lineString = turf.lineString(coordinates);
-
+  const shape = lineString(coordinates);
   return (
-    <MapboxGL.ShapeSource id={shapeSourceId} shape={lineString}>
+    <MapboxGL.ShapeSource id={shapeSourceId} shape={shape}>
       <MapboxGL.LineLayer id={layerId} style={getLineStyles(color)} />
     </MapboxGL.ShapeSource>
   );

src/interfaces/index.ts

@@ -17,6 +17,7 @@ export interface IStop {
   feedIndex: number;
   stopId: string;
   stopName: string;
+  parentStation: string;
   geom: GeoJSON.Point;
 }
 

src/navigation/roots.ts

@@ -1,4 +1,5 @@
 import { Navigation } from 'react-native-navigation';
+import { Dimensions } from 'react-native';
 import { Screens } from './screens';
 import registerScreens from './registerScreens';
 
@@ -25,6 +26,28 @@ export const pushTabbedApp = () => {
                 bottomTab: {
                   text: 'Dashboard',
                 },
+                animations: {
+                  push: {
+                    content: {
+                      translationX: {
+                        from: Dimensions.get('window').width,
+                        to: 0,
+                        duration: 300,
+                        interpolation: { type: 'accelerate' },
+                      },
+                    },
+                  },
+                  pop: {
+                    content: {
+                      translationX: {
+                        from: 0,
+                        to: Dimensions.get('window').width,
+                        duration: 300,
+                        interpolation: { type: 'decelerate' },
+                      },
+                    },
+                  },
+                },
               },
             },
           },

src/screens/map/MapScreen.tsx

@@ -1,8 +1,10 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC, useCallback, useContext, useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { gql, useQuery, useApolloClient } from '@apollo/client';
 import { Feature, Point, Position } from '@turf/turf';
 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 TripShape from 'components/TripShape';
@@ -13,7 +15,6 @@ 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 styles from './styles';
 
 const DEFAULT_COORD: Position = [-73.94594865587045, 40.7227534777328];
@@ -28,6 +29,7 @@ const MapScreen: FC = () => {
   const { activeStop } = useAppSelector(state => state.stops);
   const dispatch = useAppDispatch();
   const client = useApolloClient();
+  const { componentId = '' } = useContext(NavigationContext);
 
   const [isMarkerVisible, setMarkerVisible] = useState(true);
   const [cameraState, setCameraState] = useState({
@@ -70,12 +72,20 @@ const MapScreen: FC = () => {
   });
 
   useEffect(() => {
+    Navigation.mergeOptions(componentId, {
+      topBar: {
+        title: {
+          text: stop?.stopName,
+        },
+      },
+    });
+
     setCameraState(state => ({
       ...state,
       centerCoordinate: stop?.geom.coordinates || DEFAULT_COORD,
       zoomLevel: STOP_ZOOM,
     }));
-  }, [stop]);
+  }, [componentId, stop]);
 
   const onStopPress = useCallback<StopTimeCallback>(
     ({ stopId, tripId, feedIndex }) => {

src/screens/routes/RoutesScreen.tsx

@@ -1,26 +1,55 @@
-import React, { FC } from 'react';
+import React, { FC, useContext, useEffect } from 'react';
 import {
   FlatList,
   ListRenderItemInfo,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
-import { useNavigation } from 'react-native-navigation-hooks';
-import { useQuery } from '@apollo/client';
+import { Navigation } from 'react-native-navigation';
+import {
+  NavigationContext,
+  useNavigation,
+} from 'react-native-navigation-hooks';
+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 { IRoute } from 'interfaces';
-import styles from './styles';
 import Error from 'components/Error';
 import Loading from 'components/Loading';
+import { IFeed, IRoute } from 'interfaces';
+import styles from './styles';
 
 type Props = {
   feedIndex: number;
 };
 
 const RoutesScreen: FC<Props> = ({ feedIndex }) => {
+  const client = useApolloClient();
   const { push } = useNavigation();
+  const { componentId = '' } = useContext(NavigationContext);
+
+  // Retrieve trip fragment from cache
+  const feed: IFeed | null = client.readFragment({
+    id: `FeedInfo:${feedIndex}`,
+    fragment: gql`
+      ${FEED_FIELDS}
+    `,
+  });
+
+  const { feedPublisherName } = feed || {};
+
+  useEffect(() => {
+    if (feedPublisherName) {
+      Navigation.mergeOptions(componentId, {
+        topBar: {
+          title: {
+            text: `${feedPublisherName}`,
+          },
+        },
+      });
+    }
+  }, [componentId, feedPublisherName]);
 
   interface RouteVars {
     feedIndex: number;