add maps

README.MD

@@ -25,14 +25,16 @@ Following are consideraitons that can be made for an app that helps with EV char
   - [x] based on device location
   - [x] as a list
   - [ ] based on given location (via mapbox.places API call)
-  - [ ] on a map (via RNMapBox)
-- [ ] call maps app to get directions
+  - [x] on a map (via gmaps)
+- [x] call maps app to get directions
 - [x] start charging for select station
 - [x] refresh list of charging stations on pull-down
 - [x] user-friendly API handling
 - [ ] consider key storage for list of charging stations if list gets too big
-- [ ] more testing for utils and components
+- [ ] more unit testing for utils and components
 - [ ] consider react-navigation to better structure moving around
+- [x] work on unnecessary re-renders of map component
+- [x] consider memoization of expensive calculations
 
 ### References
 - [Expo](https://expo.dev/)

package.json

@@ -18,7 +18,8 @@
     "expo-system-ui": "2.9.3",
     "react": "18.2.0",
     "react-native": "0.73.2",
-    "expo-location": "16.5.2"
+    "expo-location": "16.5.2",
+    "react-native-maps": "1.8.0"
   },
   "devDependencies": {
     "@babel/core": "7.23.9",

src/features/charging-station/charging-station-list-item/index.tsx

@@ -15,13 +15,13 @@ import { ChargingStationDataItem } from '../hooks';
 
 type Props = {
   item: ChargingStationDataItem;
-  onPress: (id: number) => void;
+  onChargingStationSelected: (id: number) => void;
 };
 
 export const ChargingStationListItem = (props: Props) => {
   const styles = useTheme(themeableStyles);
   return (
-    <Pressable onPress={() => props.onPress(props.item.id)}>
+    <Pressable onPress={() => props.onChargingStationSelected(props.item.id)}>
       <View style={styles.listItem}>
         <Ionicons
           style={styles.icon}

src/features/charging-station/charging-station-list/index.tsx

@@ -1,30 +1,27 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { FlatList } from 'react-native';
 
 import { ChargingStationDetails } from '../charging-station-details';
 import { ChargingStationListItem } from '../charging-station-list-item';
-import { ChargingStationDataItem } from '../hooks';
+import { ChargingStationDataItem, OptionalChargingStationDataItem } from '../hooks';
 
 type Props = {
   items: ChargingStationDataItem[];
+  selectedChargingStation: OptionalChargingStationDataItem;
+  onChargingStationSelected: (id: number | null) => void;
   onRefresh: () => void;
   refreshing: boolean;
 };
 
 export const ChargingStationList = (props: Props) => {
-  const [selectedChargingStationId, setSelectedChargingStationId] = useState<number | null>(null);
   const [activeChargingStationId, setActiveChargingStationId] = useState<number | null>(null);
-  const selectedChargingStation = useMemo(
-    () => props.items?.find((item) => item.id === selectedChargingStationId),
-    [selectedChargingStationId]
-  );
 
-  if (selectedChargingStation) {
+  if (props.selectedChargingStation) {
     return (
       <ChargingStationDetails
-        item={selectedChargingStation}
-        isActive={activeChargingStationId === selectedChargingStationId}
-        onBack={() => setSelectedChargingStationId(null)}
+        item={props.selectedChargingStation}
+        isActive={activeChargingStationId === props.selectedChargingStation?.id}
+        onBack={() => props.onChargingStationSelected(null)}
         onStart={setActiveChargingStationId}
       />
     );
@@ -34,7 +31,10 @@ export const ChargingStationList = (props: Props) => {
     <FlatList
       data={props.items}
       renderItem={({ item }) => (
-        <ChargingStationListItem item={item} onPress={setSelectedChargingStationId} />
+        <ChargingStationListItem
+          item={item}
+          onChargingStationSelected={props.onChargingStationSelected}
+        />
       )}
       onRefresh={props.onRefresh}
       refreshing={props.refreshing}