refactor(workout): extract shared WorkoutSummary component from PostSwim and SessionDetail screens

src/features/active-workout/screens/PostSwimScreen.tsx

@@ -1,23 +1,42 @@
 import { useEffect, useState } from "react";
-import { View, Text, Pressable } from "react-native";
+import { View, Text } from "react-native";
 import { useTranslation } from "react-i18next";
 import { useNavigation, useRoute } from "@react-navigation/native";
 import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
-import type { RootStackParamList } from "@navigation/types";
 import type { RouteProp } from "@react-navigation/native";
+import type { RootStackParamList } from "@navigation/types";
 import { getWorkoutWithSets, getWorkoutLaps } from "@db/operations";
-import { formatTime } from "@utils/formatTime";
-import { formatDistance } from "@utils/formatDistance";
+import { WorkoutSummary } from "../components/WorkoutSummary";
+
+type Set = {
+  stroke: string;
+  distancePerRep: number;
+  repCount: number;
+  position: number;
+};
+
+type Lap = {
+  setPosition: number;
+  repNumber: number;
+  distance: number;
+  duration: number;
+  heartRate: number | null;
+  swolf: number | null;
+};
 
 export function PostSwimScreen() {
   const { t } = useTranslation("active-workout");
-  const { t: tc } = useTranslation("common");
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const route = useRoute<RouteProp<RootStackParamList, "PostSwim">>();
-  const [summary, setSummary] = useState<{
-    distance: number;
-    duration: number;
-    laps: number;
+  const [data, setData] = useState<{
+    name: string | null;
+    poolLength: number;
+    totalDistance: number;
+    totalDuration: number;
+    calories: number | null;
+    avgHeartRate: number | null;
+    sets: Set[];
+    laps: Lap[];
     avgSwolf: number | null;
   } | null>(null);
 
@@ -37,59 +56,39 @@ export function PostSwimScreen() {
         ? Math.round(laps.reduce((acc, l) => acc + (l.swolf ?? 0), 0) / laps.length)
         : null;
 
-    setSummary({
-      distance: workout.totalDistance ?? 0,
-      duration: totalDuration,
-      laps: laps.length,
+    setData({
+      name: workout.name,
+      poolLength: workout.poolLength,
+      totalDistance: workout.totalDistance ?? 0,
+      totalDuration,
+      calories: workout.calories,
+      avgHeartRate: workout.avgHeartRate,
+      sets: workout.sets ?? [],
+      laps,
       avgSwolf,
     });
   };
 
-  return (
-    <View className="flex-1 bg-white p-4">
-      <View className="items-center mb-8">
-        <Text className="text-3xl mb-2">🏊</Text>
-        <Text className="text-2xl font-bold text-slate-900 mb-1">{t("swimComplete")}</Text>
-        <Text className="text-slate-500">{t("greatJob")}</Text>
+  if (!data) {
+    return (
+      <View className="flex-1 bg-white items-center justify-center">
+        <Text className="text-slate-400">{t("loadingSummary")}</Text>
       </View>
+    );
+  }
 
-      {summary ? (
-        <View className="gap-3 mb-8">
-          <View className="bg-sky-50 rounded-2xl p-5 flex-row justify-between items-center">
-            <Text className="text-slate-600">{tc("distance")}</Text>
-            <Text className="text-xl font-bold text-sky-600">
-              {formatDistance(summary.distance)}
-            </Text>
-          </View>
-          <View className="bg-sky-50 rounded-2xl p-5 flex-row justify-between items-center">
-            <Text className="text-slate-600">{tc("duration")}</Text>
-            <Text className="text-xl font-bold text-sky-600">
-              {formatTime(summary.duration)}
-            </Text>
-          </View>
-          <View className="bg-sky-50 rounded-2xl p-5 flex-row justify-between items-center">
-            <Text className="text-slate-600">{tc("laps")}</Text>
-            <Text className="text-xl font-bold text-sky-600">{summary.laps}</Text>
-          </View>
-          {summary.avgSwolf && (
-            <View className="bg-sky-50 rounded-2xl p-5 flex-row justify-between items-center">
-              <Text className="text-slate-600">{tc("avgSwolf")}</Text>
-              <Text className="text-xl font-bold text-sky-600">{summary.avgSwolf}</Text>
-            </View>
-          )}
-        </View>
-      ) : (
-        <View className="py-8 items-center">
-          <Text className="text-slate-400">{t("loadingSummary")}</Text>
-        </View>
-      )}
-
-      <Pressable
-        onPress={() => navigation.popToTop()}
-        className="bg-slate-900 rounded-2xl py-4 items-center"
-      >
-        <Text className="text-white font-bold text-lg">{tc("done")}</Text>
-      </Pressable>
-    </View>
+  return (
+    <WorkoutSummary
+      name={data.name}
+      totalDistance={data.totalDistance}
+      totalDuration={data.totalDuration}
+      calories={data.calories}
+      avgHeartRate={data.avgHeartRate}
+      poolLength={data.poolLength}
+      sets={data.sets}
+      laps={data.laps}
+      avgSwolf={data.avgSwolf}
+      onDone={() => navigation.popToTop()}
+    />
   );
 }