delete and ref map

Narfidort · Narfidort · commit bb1457a3b8e6 · 2025-10-19T14:51:53.000+09:00
diff --git a/frontend/src/navigation/AppNavigator.tsx b/frontend/src/navigation/AppNavigator.tsx
@@ -4,22 +4,23 @@ import React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 // 1. react-native-vector-iconsからアイコンコンポーネントをインポートします
 import Icon from 'react-native-vector-icons/FontAwesome';
+import type { RootStackParamList } from '../types/navigation';
 
 // 各画面コンポーネントをインポート
 import PhotoGalleryScreen from '../screens/PhotoGalleryScreen';
 import MapViewScreen from '../screens/MapViewScreen';
 import SharedFeedScreen from '../screens/SharedFeedScreen';
 import SettingsScreen from '../screens/SettingsScreen';
 
-const Tab = createBottomTabNavigator();
+const Tab = createBottomTabNavigator<RootStackParamList>();
 
 const AppNavigator = () => {
   return (
     <Tab.Navigator
       screenOptions={({ route }) => ({
         headerShown: false,
         // 2. tabBarIconオプションをここに追加します
-        tabBarIcon: ({ focused, color, size }) => {
+        tabBarIcon: ({ color, size }) => {
           let iconName = 'image'; // デフォルトのアイコン
 
           // 3. 表示しているルート(画面)の名前に応じて、表示するアイコンを切り替えます
diff --git a/frontend/src/screens/MapViewScreen.tsx b/frontend/src/screens/MapViewScreen.tsx
@@ -1,11 +1,13 @@
 // src/screens/MapViewScreen.tsx
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 // 1. StyleSheetとSafeAreaViewをインポートします
-import { StyleSheet, View, Text, Image, ActivityIndicator } from 'react-native';
+import { StyleSheet, View, Text, Image } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 // 2. react-native-mapsからMapViewとMarkerをインポートします
 import MapView, { Marker, Region } from 'react-native-maps';
+import { useRoute, RouteProp } from '@react-navigation/native';
+import type { RootStackParamList } from '../types/navigation';
 
 // 3. APIが完成するまでの「ダミーのピンデータ」を作成します
 //    東京の名所の座標をいくつか用意しましょう
@@ -58,21 +60,24 @@ type Nearby_Photos = {
   created_at: string;
 };
 
+type MapViewScreenRouteProp = RouteProp<RootStackParamList, 'Map'>;
+
 const MapViewScreen = () => {
+  const route = useRoute<MapViewScreenRouteProp>();
+  const mapRef = useRef<MapView>(null);
 
   const [markers, setMarkers] = useState<Nearby_Photos[]>([]);
-  const [loading, setLoading] = useState(true);
   const [region, setRegion] = useState<Region>({
-    latitude: 35.6895,
-    longitude: 139.6917,
-    latitudeDelta: 0.1,
-    longitudeDelta: 0.1,
+    latitude: route.params?.latitude || 35.6895,
+    longitude: route.params?.longitude || 139.6917,
+    latitudeDelta: route.params?.latitude ? 0.01 : 0.1,
+    longitudeDelta: route.params?.longitude ? 0.01 : 0.1,
   });
 
   const BACKEND = 'http://localhost:8000';
-  const fetchNearbyPhotos = async (lat: number, lng: number) => {
+  
+  const fetchNearbyPhotos = useCallback(async (lat: number, lng: number) => {
     try {
-      setLoading(true);
       const res = await fetch(
         `${BACKEND}/photos/nearby/photos?lat=${lat}&lng=${lng}`
       );
@@ -81,14 +86,29 @@ const MapViewScreen = () => {
       setMarkers(data);
     } catch (error) {
       console.error('Error fetching markers:', error);
-    } finally {
-      setLoading(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
-    fetchNearbyPhotos(region.latitude, region.longitude);
-  }, []);
+    const initialLat = route.params?.latitude || 35.6895;
+    const initialLng = route.params?.longitude || 139.6917;
+    
+    fetchNearbyPhotos(initialLat, initialLng);
+    
+    // パラメータで位置が指定されている場合、その位置にアニメーション
+    if (route.params?.latitude && route.params?.longitude && mapRef.current) {
+      setTimeout(() => {
+        if (mapRef.current && route.params?.latitude && route.params?.longitude) {
+          mapRef.current.animateToRegion({
+            latitude: route.params.latitude,
+            longitude: route.params.longitude,
+            latitudeDelta: 0.01,
+            longitudeDelta: 0.01,
+          }, 1000);
+        }
+      }, 500);
+    }
+  }, [route.params, fetchNearbyPhotos]);
 
   const onRegionChangeComplete = async (newRegion: Region) => {
     setRegion(newRegion);
@@ -104,6 +124,7 @@ const MapViewScreen = () => {
 
       {/* 5. MapViewコンポーネントを設置します */}
       <MapView
+        ref={mapRef}
         style={styles.map}
         initialRegion={region}
         onRegionChangeComplete={onRegionChangeComplete}
diff --git a/frontend/src/screens/PhotoGalleryScreen.tsx b/frontend/src/screens/PhotoGalleryScreen.tsx
@@ -17,11 +17,16 @@ import {
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/FontAwesome';
+import { useNavigation } from '@react-navigation/native';
+import type { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
+import type { RootStackParamList } from '../types/navigation';
 
 // 3. サービスとフックをインポート
 import photoService from '../services/photoService';
 import { useImagePicker } from '../hooks/useImagePicker';
 
+type NavigationProp = BottomTabNavigationProp<RootStackParamList, 'Gallery'>;
+
 const { width } = Dimensions.get('window');
 const ITEM_SIZE = (width - 20) / 2; // アイテムサイズを計算
 
@@ -32,6 +37,8 @@ interface Photo {
   source?: ReturnType<typeof require>; // require() の戻り値の型（ローカル画像の場合）
   uri?: string; // API画像のURL
   createdAt: number; // ソート用の仮のタイムスタンプ (追加日時)
+  lat?: number; // 緯度
+  lng?: number; // 経度
 }
 
 // 型エイリアス（後方互換性のため）
@@ -51,6 +58,9 @@ const SORT_OPTIONS: { key: SortOrder; label: string }[] = [
 ];
 
 const PhotoGalleryScreen = () => {
+  // Navigation hookを使用
+  const navigation = useNavigation<NavigationProp>();
+  
   // 状態変数: 表示する写真リスト、ソート順序、ローディング状態
   const [photos, setPhotos] = useState<Photo[]>([]);
   const [sortOrder, setSortOrder] = useState<SortOrder>('added_desc');
@@ -77,6 +87,8 @@ const PhotoGalleryScreen = () => {
           name: photo.title || '無題',
           uri: photo.s3_key, // S3のURLを直接使用
           createdAt: new Date(photo.created_at).getTime(),
+          lat: photo.lat,
+          lng: photo.lng,
         };
       });
     } catch (error) {
@@ -172,13 +184,63 @@ const PhotoGalleryScreen = () => {
     }
   };
 
+  // 写真をクリックしてMap画面に遷移する関数
+  const handlePhotoPress = (photo: Photo) => {
+    if (photo.lat !== undefined && photo.lng !== undefined) {
+      navigation.navigate('Map', {
+        latitude: photo.lat,
+        longitude: photo.lng,
+        photoId: photo.id,
+        photoTitle: photo.name,
+      });
+    } else {
+      Alert.alert('位置情報なし', 'この写真には位置情報が含まれていません');
+    }
+  };
+
+  // 写真を削除する関数
+  const handleDeletePhoto = async (photoId: string, photoName: string) => {
+    Alert.alert(
+      '写真を削除',
+      `「${photoName}」を削除しますか？`,
+      [
+        {
+          text: 'キャンセル',
+          style: 'cancel',
+        },
+        {
+          text: '削除',
+          style: 'destructive',
+          onPress: async () => {
+            try {
+              await photoService.deletePhoto(photoId);
+              // 写真を再読み込み
+              await fetchAndSortLocalPhotos(sortOrder);
+              Alert.alert('成功', '写真を削除しました');
+            } catch (error) {
+              console.error('削除エラー:', error);
+              const errorMessage = error instanceof Error ? error.message : '写真の削除に失敗しました';
+              Alert.alert('エラー', errorMessage);
+            }
+          },
+        },
+      ],
+      { cancelable: true }
+    );
+  };
+
   // --- FlatList の各写真アイテムをレンダリングする関数 ---
   const renderPhotoItem = ({ item }: { item: Photo }) => {
     // 画像ソースを決定
     const imageSource = item.source ? item.source : { uri: item.uri };
     
     return (
-      <TouchableOpacity style={styles.photoItem}>
+      <TouchableOpacity 
+        style={styles.photoItem}
+        onPress={() => handlePhotoPress(item)}
+        onLongPress={() => handleDeletePhoto(item.id, item.name)}
+        delayLongPress={500}
+      >
         <Image 
           source={imageSource} 
           style={styles.photoImage} 
@@ -191,6 +253,12 @@ const PhotoGalleryScreen = () => {
           }}
         />
         <Text style={styles.photoName} numberOfLines={1}>{item.name}</Text>
+        {/* 位置情報があるかどうかを示すアイコン */}
+        {item.lat !== undefined && item.lng !== undefined && (
+          <View style={styles.locationBadge}>
+            <Icon name="map-marker" size={12} color="white" />
+          </View>
+        )}
       </TouchableOpacity>
     );
   };
@@ -299,9 +367,21 @@ const styles = StyleSheet.create({
   loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
   loadingText: { marginTop: 10, color: '#666' },
   listContent: { paddingHorizontal: 5, paddingBottom: 80 },
-  photoItem: { width: ITEM_SIZE, margin: 5, alignItems: 'center' },
+  photoItem: { width: ITEM_SIZE, margin: 5, alignItems: 'center', position: 'relative' },
   photoImage: { width: '100%', height: ITEM_SIZE * 1.2, borderRadius: 8, backgroundColor: '#E0E0E0' },
   photoName: { marginTop: 5, color: '#333', fontSize: 12, textAlign: 'center' },
+  locationBadge: {
+    position: 'absolute',
+    top: 5,
+    right: 5,
+    backgroundColor: 'rgba(200, 181, 111, 0.9)',
+    borderRadius: 12,
+    padding: 4,
+    width: 24,
+    height: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   emptyContainer: { flexGrow: 1, justifyContent: 'center', alignItems: 'center', paddingVertical: 50 },
   emptyText: { marginTop: 10, fontSize: 16, color: '#666' },
   emptySubText: { marginTop: 5, fontSize: 12, color: '#999', textAlign: 'center' },
diff --git a/frontend/src/types/navigation.ts b/frontend/src/types/navigation.ts
@@ -0,0 +1,13 @@
+// src/types/navigation.ts
+
+export type RootStackParamList = {
+  Gallery: undefined;
+  Map: {
+    latitude?: number;
+    longitude?: number;
+    photoId?: string;
+    photoTitle?: string;
+  };
+  Feed: undefined;
+  Settings: undefined;
+};
