Upgrade to sdk50 #176

OpenBracketsCH · Feb 19, 2024 · 36ae04d · 36ae04d
1 parent ccffe6f
commit 36ae04d
Show file tree

Hide file tree

Showing 8 changed files with 3,129 additions and 4,291 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -9,31 +9,31 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@expo/vector-icons": "^13.0.0",
+    "@expo/vector-icons": "^14.0.0",
     "axios": "^1.6.2",
     "dotenv": "^16.3.1",
-    "expo": "~49.0.15",
-    "expo-location": "~16.1.0",
-    "expo-status-bar": "~1.6.0",
+    "expo": "^50.0.7",
+    "expo-location": "~16.5.3",
+    "expo-status-bar": "~1.11.1",
     "i18next": "^23.7.6",
     "intl-pluralrules": "^2.0.1",
     "libphonenumber-js": "^1.10.49",
     "moment": "^2.29.4",
     "opening_hours": "^3.8.0",
     "react": "18.2.0",
     "react-hook-form": "^7.48.2",
-    "react-native": "0.72.6",
-    "react-native-gesture-handler": "~2.12.0",
+    "react-native": "0.73.4",
+    "react-native-gesture-handler": "~2.14.0",
     "react-native-map-clustering": "^3.4.2",
-    "react-native-maps": "1.7.1",
+    "react-native-maps": "1.10.0",
     "react-native-open-maps": "^0.4.3",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "~3.29.0",
     "react-navigation": "^4.4.4",
     "react-navigation-stack": "^2.10.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"
   },
   "private": true
-}
+}
diff --git a/app/src/components/Map.js b/app/src/components/Map.js
@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
-import { Marker, UrlTile } from 'react-native-maps';
+import React, { useEffect, useState } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
 import MapView from 'react-native-map-clustering';
-import { currentDefisOnMap, isPointInRegion } from '../helpers/markersOnMap.js'
-import DefiMarker from './DefiMarker';
-import SimpleMarker from './SimpleMarker';
+import { Marker, UrlTile } from 'react-native-maps';
+import { currentDefisOnMap, isPointInRegion } from '../helpers/markersOnMap.js';
 import CreateMapOverlay from './CreateMapOverlay';
-import MapInfoPanel from './MapInfoPanel';
+import DefiMarker from './DefiMarker';
 import DetailMapOverlay from './DetailMapOverlay';
 import LocationButton from './LocationButton.js';
+import MapInfoPanel from './MapInfoPanel';
 import MapLayerButton from './MapLayersButton.js';
 import OsmContributerOverlay from './OsmContributerOverlay.js';
+import SimpleMarker from './SimpleMarker';
 
 const Map = ({ initCoords, mapRef, defibrillators, defibrillatorsLoading, isCreateMode, setIsCreateMode }) => {
   const [region, setRegion] = useState(initCoords);
@@ -25,7 +25,7 @@ const Map = ({ initCoords, mapRef, defibrillators, defibrillatorsLoading, isCrea
       latitude,
       longitude,
       latitudeDelta: 0.01,
-      longitudeDelta: 0.01
+      longitudeDelta: 0.01,
     });
   };
 
@@ -40,7 +40,7 @@ const Map = ({ initCoords, mapRef, defibrillators, defibrillatorsLoading, isCrea
     if (isCreateMode && markerOutsideRegion) {
       setNewDefiCoords({ latitude: region.latitude, longitude: region.longitude });
     }
-  }, [region, isCreateMode])
+  }, [region, isCreateMode]);
 
   useEffect(() => {
     // debounce defis on map claculation for performance optimization
@@ -52,26 +52,20 @@ const Map = ({ initCoords, mapRef, defibrillators, defibrillatorsLoading, isCrea
       if (timerId) {
         clearTimeout(timerId);
       }
-    }
-  }, [region, defibrillators])
+    };
+  }, [region, defibrillators]);
 
   useEffect(() => {
     const firstload = defibrillators.length === 0 && defibrillatorsLoading;
     const info = defisOnMap.length > 1000 && !isCreateMode;
     const top = firstload ? 'load' : info ? 'info' : isCreateMode ? 'create' : 'loc';
     setMode(top);
-  }, [defisOnMap.length, defibrillators.length, defibrillatorsLoading, isCreateMode])
+  }, [defisOnMap.length, defibrillators.length, defibrillatorsLoading, isCreateMode]);
 
   const renderMarkers = (createMode, defibrillators, latlon, setLatLng) => {
     if (createMode) {
-      return (
-        <Marker draggable
-          coordinate={latlon}
-          onDragEnd={(e) => setLatLng(e.nativeEvent.coordinate)}
-        />
-      );
-    }
-    else {
+      return <Marker draggable coordinate={latlon} onDragEnd={(e) => setLatLng(e.nativeEvent.coordinate)} />;
+    } else {
       if (defibrillators.length >= 1000) {
         return null;
       }
@@ -84,8 +78,7 @@ const Map = ({ initCoords, mapRef, defibrillators, defibrillatorsLoading, isCrea
               coordinate={{ latitude: defibrillator.lat, longitude: defibrillator.lon }}
             />
           );
-        }
-        else {
+        } else {
           return (
             <SimpleMarker
               key={defibrillator.id.toString()}
@@ -95,56 +88,45 @@ const Map = ({ initCoords, mapRef, defibrillators, defibrillatorsLoading, isCrea
             />
           );
         }
-      }
-      );
+      });
     }
   };
 
   const renderOverlay = (mode) => {
     if (mode === 'create') {
-      return <CreateMapOverlay
-        isTopView={true}
-        setIsCreateMode={setIsCreateMode}
-        newDefiCoords={newDefiCoords} />
-    }
-    else if (selectedDefibrillator != null) {
-      return <DetailMapOverlay defibrillator={selectedDefibrillator} />
+      return <CreateMapOverlay isTopView={true} setIsCreateMode={setIsCreateMode} newDefiCoords={newDefiCoords} />;
+    } else if (selectedDefibrillator != null) {
+      return <DetailMapOverlay defibrillator={selectedDefibrillator} />;
     } else {
       return null;
     }
-  }
+  };
 
   const renderInfoPanel = (defibrillators, mode) => {
-    if (mode === 'info') { //defibrillators.length > 1000 && !isCreateMode
+    if (mode === 'info') {
+      //defibrillators.length > 1000 && !isCreateMode
       return (
         <MapInfoPanel
           isTopView={true}
-          text='Zoome in eine bestimmte Region um Defibrillatoren anzuzeigen.'
-          subText={`(${defibrillators.length} Defis im Kartenausschnitt, Anzeige ab < 1000)`} />
-      );
-    }
-    else if (mode === 'load') { //defibrillators.length === 0 && isLoading
-      return (
-        <MapInfoPanel
-          isTopView={true}
-          text="Lade Defibrillatoren..."
-          showLoading={true}
+          text="Zoome in eine bestimmte Region um Defibrillatoren anzuzeigen."
+          subText={`(${defibrillators.length} Defis im Kartenausschnitt, Anzeige ab < 1000)`}
         />
       );
+    } else if (mode === 'load') {
+      //defibrillators.length === 0 && isLoading
+      return <MapInfoPanel isTopView={true} text="Lade Defibrillatoren..." showLoading={true} />;
     }
-  }
+  };
 
-  const onMapPress = event => {
+  const onMapPress = (event) => {
     if (event.action !== null && event.action !== 'marker-press') {
       setSelectedDefibrillator(null);
     }
-  }
+  };
 
-  const tileOverlay = isTileOverlayActive ? <UrlTile
-    urlTemplate='https://tile.osm.ch/osm-swiss-style/{z}/{x}/{y}.png'
-    maximumZ={19}
-    flipY={false}
-  /> : null;
+  const tileOverlay = isTileOverlayActive ? (
+    <UrlTile urlTemplate="https://tile.osm.ch/osm-swiss-style/{z}/{x}/{y}.png" maximumZ={19} flipY={false} />
+  ) : null;
 
   return (
     <View style={styles.containerStyle}>
@@ -158,7 +140,7 @@ const Map = ({ initCoords, mapRef, defibrillators, defibrillatorsLoading, isCrea
         spiralEnabled={false}
         onPress={(e) => onMapPress(e.nativeEvent)}
         showsMyLocationButton={false}
-        mapType={Platform.OS == "android" ? "standard" : "mutedStandard"}
+        mapType={Platform.OS == 'android' ? 'standard' : 'mutedStandard'}
         maxZoomLevel={19}
         maxZoom={17}
         moveOnMarkerPress={false}
@@ -172,7 +154,7 @@ const Map = ({ initCoords, mapRef, defibrillators, defibrillatorsLoading, isCrea
       {renderOverlay(mode)}
       <LocationButton isTopView={mode === 'loc'} animateToRegion={animateToRegion} />
       <MapLayerButton setLayerActive={setIsTileOverlayActive} layerIsActive={isTileOverlayActive} />
-    </View >
+    </View>
   );
 };
 
@@ -188,4 +170,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Map;
+export default Map;
diff --git a/app/src/components/MapLayersButton.js b/app/src/components/MapLayersButton.js
@@ -3,13 +3,15 @@ import { TouchableOpacity, Text, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 
 const LocationButton = ({ setLayerActive, layerIsActive }) => {
-
-  const layerIcon = layerIsActive ? 'ios-layers' : 'ios-layers-outline';
+  const layerIcon = layerIsActive ? 'layers' : 'layers-outline';
 
   return (
-    <TouchableOpacity style={styles.layerButtonStyle} onPress={async () => {
-      setLayerActive(!layerIsActive)
-    }}>
+    <TouchableOpacity
+      style={styles.layerButtonStyle}
+      onPress={async () => {
+        setLayerActive(!layerIsActive);
+      }}
+    >
       <Ionicons name={layerIcon} style={styles.iconStyle} />
       <Text style={styles.textStyle}>OSM</Text>
     </TouchableOpacity>
@@ -40,7 +42,7 @@ const styles = StyleSheet.create({
     color: 'white',
     fontSize: 8,
     fontWeight: '400',
-  }
+  },
 });
 
-export default LocationButton;
+export default LocationButton;
diff --git a/app/src/components/SimpleMarker.js b/app/src/components/SimpleMarker.js
@@ -2,13 +2,16 @@ import React, { useState } from 'react';
 import { View, Image, StyleSheet } from 'react-native';
 import { Marker } from 'react-native-maps';
 
+const markerImage = require('../../assets/marker.png');
+
 const SimpleMarker = ({ defibrillator, onMarkerSelected }) => {
   const [imageLoaded, setImageLoaded] = useState(false);
   const tags = defibrillator.tags;
 
-  let dayNightStyle = !tags || !tags.opening_hours || tags.opening_hours !== '24/7' ? styles.simpleDayMarkerStyle : styles.simpleDayNightMarkerStyle;
+  let dayNightStyle =
+    !tags || !tags.opening_hours || tags.opening_hours !== '24/7' ? styles.simpleDayMarkerStyle : styles.simpleDayNightMarkerStyle;
   if (defibrillator.new) {
-    dayNightStyle = { ...dayNightStyle, ...styles.newMarkerStyle }
+    dayNightStyle = { ...dayNightStyle, ...styles.newMarkerStyle };
   }
 
   return (
@@ -18,10 +21,7 @@ const SimpleMarker = ({ defibrillator, onMarkerSelected }) => {
       onPress={() => onMarkerSelected(defibrillator)}
     >
       <View style={dayNightStyle}>
-        <Image
-          style={styles.simpleImageStyle}
-          source={require('../../assets/marker.png')}
-          onLoadEnd={() => setImageLoaded(true)} />
+        <Image style={styles.simpleImageStyle} source={markerImage} onLoadEnd={() => setImageLoaded(true)} />
       </View>
     </Marker>
   );
@@ -53,7 +53,7 @@ const styles = StyleSheet.create({
     width: 34,
     borderColor: 'rgb(255, 80, 100)',
     borderWidth: 3,
-  }
+  },
 });
 
-export default SimpleMarker;
+export default SimpleMarker;