refactoring: TypeScript migration, security fixes,

client/src/components/Trips/TripFormModal.tsx

@@ -1,12 +1,21 @@
-import React, { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import Modal from '../shared/Modal'
 import { Calendar, Camera, X, Clipboard } from 'lucide-react'
 import { tripsApi } from '../../api/client'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
+import type { Trip } from '../../types'
 
-export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUpdate }) {
+interface TripFormModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (data: Record<string, string | number | null>) => Promise<void> | void
+  trip: Trip | null
+  onCoverUpdate: (tripId: number, coverUrl: string) => void
+}
+
+export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUpdate }: TripFormModalProps) {
   const isEditing = !!trip
   const fileRef = useRef(null)
   const toast = useToast()
@@ -68,8 +77,8 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
         }
       }
       onClose()
-    } catch (err) {
-      setError(err.message || t('places.saveError'))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('places.saveError'))
     } finally {
       setIsLoading(false)
     }
@@ -88,7 +97,7 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
   }
 
   const handleCoverChange = (e) => {
-    handleCoverSelect(e.target.files?.[0])
+    handleCoverSelect((e.target as HTMLInputElement).files?.[0])
     e.target.value = ''
   }
 
@@ -128,7 +137,7 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
   const handlePaste = (e) => {
     const items = e.clipboardData?.items
     if (!items) return
-    for (const item of items) {
+    for (const item of Array.from(items)) {
       if (item.type.startsWith('image/')) {
         e.preventDefault()
         const file = item.getAsFile()

client/src/components/Trips/TripMembersModal.tsx

@@ -1,13 +1,20 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import Modal from '../shared/Modal'
 import { tripsApi, authApi } from '../../api/client'
 import { useToast } from '../shared/Toast'
 import { useAuthStore } from '../../store/authStore'
 import { Crown, UserMinus, UserPlus, Users, LogOut } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { getApiErrorMessage } from '../../types'
 import CustomSelect from '../shared/CustomSelect'
 
-function Avatar({ username, avatarUrl, size = 32 }) {
+interface AvatarProps {
+  username: string
+  avatarUrl: string | null
+  size?: number
+}
+
+function Avatar({ username, avatarUrl, size = 32 }: AvatarProps) {
   if (avatarUrl) {
     return <img src={avatarUrl} alt="" style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />
   }
@@ -25,7 +32,14 @@ function Avatar({ username, avatarUrl, size = 32 }) {
   )
 }
 
-export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }) {
+interface TripMembersModalProps {
+  isOpen: boolean
+  onClose: () => void
+  tripId: number
+  tripTitle: string
+}
+
+export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }: TripMembersModalProps) {
   const [data, setData] = useState(null)
   const [allUsers, setAllUsers] = useState([])
   const [loading, setLoading] = useState(false)
@@ -71,8 +85,8 @@ export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle })
       setSelectedUserId('')
       await loadMembers()
       toast.success(`${target.username} ${t('members.added')}`)
-    } catch (err) {
-      toast.error(err.response?.data?.error || t('members.addError'))
+    } catch (err: unknown) {
+      toast.error(getApiErrorMessage(err, t('members.addError')))
     } finally {
       setAdding(false)
     }