313 lines
9.1 KiB
TypeScript
313 lines
9.1 KiB
TypeScript
import React, { useEffect, useState, useMemo } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Platform,
|
|
TouchableOpacity,
|
|
ScrollView,
|
|
ActivityIndicator,
|
|
} from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import { useLocalSearchParams, useRouter } from "expo-router";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { useI18n } from "@/hooks/use-i18n";
|
|
import { useThemeContext } from "@/hooks/use-theme-context";
|
|
import { TRIP_STATUS_CONFIG } from "@/components/diary/types";
|
|
import {
|
|
convertFishingGears,
|
|
convertTripCosts,
|
|
} from "@/utils/tripDataConverters";
|
|
|
|
// Reuse existing components
|
|
import CrewList from "@/components/diary/TripCrewModal/CrewList";
|
|
import FishingGearList from "@/components/diary/TripFormModal/FishingGearList";
|
|
import MaterialCostList from "@/components/diary/TripFormModal/MaterialCostList";
|
|
|
|
// Section components
|
|
import {
|
|
SectionCard,
|
|
AlertsSection,
|
|
FishingLogsSection,
|
|
BasicInfoSection,
|
|
} from "@/components/diary/TripDetailSections";
|
|
|
|
export default function TripDetailPage() {
|
|
const { t } = useI18n();
|
|
const { colors } = useThemeContext();
|
|
const router = useRouter();
|
|
const { tripId, tripData: tripDataParam } = useLocalSearchParams<{
|
|
tripId: string;
|
|
tripData?: string;
|
|
}>();
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
const [trip, setTrip] = useState<Model.Trip | null>(null);
|
|
const [alerts] = useState<Model.Alarm[]>([]); // TODO: Fetch from API
|
|
|
|
// Parse trip data from params or fetch from API
|
|
useEffect(() => {
|
|
if (tripDataParam) {
|
|
try {
|
|
const parsedTrip = JSON.parse(tripDataParam) as Model.Trip;
|
|
setTrip(parsedTrip);
|
|
} catch (e) {
|
|
console.error("Error parsing trip data:", e);
|
|
}
|
|
}
|
|
// TODO: Fetch trip detail from API using tripId if not passed via params
|
|
setLoading(false);
|
|
}, [tripDataParam, tripId]);
|
|
|
|
// Convert trip data to component format using memoization
|
|
const fishingGears = useMemo(
|
|
() => convertFishingGears(trip?.fishing_gears, "view"),
|
|
[trip?.fishing_gears]
|
|
);
|
|
|
|
const tripCosts = useMemo(
|
|
() => convertTripCosts(trip?.trip_cost, "view"),
|
|
[trip?.trip_cost]
|
|
);
|
|
|
|
const statusConfig = useMemo(() => {
|
|
const status = trip?.trip_status ?? 0;
|
|
return TRIP_STATUS_CONFIG[status as keyof typeof TRIP_STATUS_CONFIG] || TRIP_STATUS_CONFIG[0];
|
|
}, [trip?.trip_status]);
|
|
|
|
// Empty section component
|
|
const EmptySection = ({ icon, message }: { icon: string; message: string }) => (
|
|
<View style={styles.emptySection}>
|
|
<Ionicons name={icon as any} size={40} color={colors.textSecondary} />
|
|
<Text style={[styles.emptyText, { color: colors.textSecondary }]}>
|
|
{message}
|
|
</Text>
|
|
</View>
|
|
);
|
|
|
|
// Render loading state
|
|
if (loading) {
|
|
return (
|
|
<SafeAreaView style={[styles.container, { backgroundColor: colors.background }]} edges={["top"]}>
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator size="large" color={colors.primary} />
|
|
<Text style={[styles.loadingText, { color: colors.textSecondary }]}>
|
|
{t("common.loading")}
|
|
</Text>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
// Render error state
|
|
if (!trip) {
|
|
return (
|
|
<SafeAreaView style={[styles.container, { backgroundColor: colors.background }]} edges={["top"]}>
|
|
<Header title={t("diary.tripDetail.title")} onBack={() => router.back()} colors={colors} />
|
|
<View style={styles.errorContainer}>
|
|
<Ionicons name="alert-circle-outline" size={48} color={colors.error || "#FF3B30"} />
|
|
<Text style={[styles.errorText, { color: colors.textSecondary }]}>
|
|
{t("diary.tripDetail.notFound")}
|
|
</Text>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={[styles.container, { backgroundColor: colors.background }]} edges={["top"]}>
|
|
{/* Header with status badge */}
|
|
<View style={[styles.header, { backgroundColor: colors.card, borderBottomColor: colors.separator }]}>
|
|
<TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
|
|
<Ionicons name="arrow-back" size={24} color={colors.text} />
|
|
</TouchableOpacity>
|
|
<View style={styles.headerTitles}>
|
|
<Text style={[styles.title, { color: colors.text }]} numberOfLines={1}>
|
|
{trip.name || t("diary.tripDetail.title")}
|
|
</Text>
|
|
<View style={[styles.statusBadge, { backgroundColor: statusConfig.bgColor }]}>
|
|
<Ionicons name={statusConfig.icon as any} size={12} color={statusConfig.textColor} />
|
|
<Text style={[styles.statusText, { color: statusConfig.textColor }]}>
|
|
{statusConfig.label}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.placeholder} />
|
|
</View>
|
|
|
|
{/* Content */}
|
|
<ScrollView
|
|
style={styles.content}
|
|
contentContainerStyle={styles.contentContainer}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Basic Info */}
|
|
<BasicInfoSection trip={trip} />
|
|
|
|
{/* Alerts */}
|
|
<AlertsSection alerts={alerts} />
|
|
|
|
{/* Trip Costs */}
|
|
<SectionCard
|
|
title={t("diary.tripDetail.costs")}
|
|
icon="wallet-outline"
|
|
count={tripCosts.length}
|
|
collapsible
|
|
defaultExpanded
|
|
>
|
|
{tripCosts.length > 0 ? (
|
|
<View style={styles.sectionInnerContent}>
|
|
<MaterialCostList items={tripCosts} onChange={() => {}} disabled hideTitle />
|
|
</View>
|
|
) : (
|
|
<EmptySection icon="receipt-outline" message={t("diary.tripDetail.noCosts")} />
|
|
)}
|
|
</SectionCard>
|
|
|
|
{/* Fishing Gears */}
|
|
<SectionCard
|
|
title={t("diary.tripDetail.gears")}
|
|
icon="construct-outline"
|
|
count={fishingGears.length}
|
|
collapsible
|
|
defaultExpanded
|
|
>
|
|
{fishingGears.length > 0 ? (
|
|
<View style={styles.sectionInnerContent}>
|
|
<FishingGearList items={fishingGears} onChange={() => {}} disabled hideTitle />
|
|
</View>
|
|
) : (
|
|
<EmptySection icon="build-outline" message={t("diary.tripDetail.noGears")} />
|
|
)}
|
|
</SectionCard>
|
|
|
|
{/* Crew List */}
|
|
<SectionCard
|
|
title={t("diary.tripDetail.crew")}
|
|
icon="people-outline"
|
|
count={trip.crews?.length || 0}
|
|
collapsible
|
|
defaultExpanded
|
|
>
|
|
{trip.crews && trip.crews.length > 0 ? (
|
|
<CrewList crews={trip.crews} />
|
|
) : (
|
|
<EmptySection icon="person-add-outline" message={t("diary.tripDetail.noCrew")} />
|
|
)}
|
|
</SectionCard>
|
|
|
|
{/* Fishing Logs */}
|
|
<FishingLogsSection fishingLogs={trip.fishing_logs} />
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
// Header component for reuse
|
|
function Header({
|
|
title,
|
|
onBack,
|
|
colors,
|
|
}: {
|
|
title: string;
|
|
onBack: () => void;
|
|
colors: any;
|
|
}) {
|
|
return (
|
|
<View style={[styles.header, { backgroundColor: colors.card, borderBottomColor: colors.separator }]}>
|
|
<TouchableOpacity onPress={onBack} style={styles.backButton}>
|
|
<Ionicons name="arrow-back" size={24} color={colors.text} />
|
|
</TouchableOpacity>
|
|
<View style={styles.headerTitles}>
|
|
<Text style={[styles.title, { color: colors.text }]}>{title}</Text>
|
|
</View>
|
|
<View style={styles.placeholder} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
loadingContainer: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
gap: 12,
|
|
},
|
|
loadingText: {
|
|
fontSize: 14,
|
|
fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
borderBottomWidth: 1,
|
|
},
|
|
backButton: {
|
|
padding: 4,
|
|
},
|
|
headerTitles: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
gap: 6,
|
|
},
|
|
title: {
|
|
fontSize: 18,
|
|
fontWeight: "700",
|
|
fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
|
|
},
|
|
statusBadge: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 4,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 4,
|
|
borderRadius: 12,
|
|
},
|
|
statusText: {
|
|
fontSize: 11,
|
|
fontWeight: "600",
|
|
fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
|
|
},
|
|
placeholder: {
|
|
width: 32,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
},
|
|
contentContainer: {
|
|
padding: 16,
|
|
paddingBottom: 40,
|
|
},
|
|
errorContainer: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
gap: 12,
|
|
paddingHorizontal: 20,
|
|
},
|
|
errorText: {
|
|
fontSize: 14,
|
|
textAlign: "center",
|
|
fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
|
|
},
|
|
sectionInnerContent: {
|
|
marginTop: 5,
|
|
},
|
|
emptySection: {
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingVertical: 24,
|
|
gap: 8,
|
|
},
|
|
emptyText: {
|
|
fontSize: 14,
|
|
fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
|
|
},
|
|
});
|