continue flow integartion

src/screens/Studio/CreatingSong.js

@@ -9,26 +9,133 @@ import ProgressBar from "../../components/ProgressBar";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
 import GradientButton from "../../components/GradientButton";
+import firebase from "../../config/firebase";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
+import moment from "moment";
 
-const CreatingSong = ({ active }) => {
+const CreatingSong = ({ active, config }) => {
   const [progress, setProgress] = useState(0);
+  const [called, setCalled] = useState(false);
+  const [result, setResult] = useState(null);
+  const { setIsLoading } = useMinuit();
+  const [musicStatus, setMusicStatus] = useState(null);
+  const [generationStartAt, setGenerationStartAt] = useState(null);
+  const progressTimerRef = React.useRef(null);
+
+  // Abonnement au document projet pour suivre le statut et la date de début
+  useEffect(() => {
+    if (!config?.projectId) return undefined;
+    const unsub = firebase
+      .firestore()
+      .collection("projects")
+      .doc(config.projectId)
+      .onSnapshot((doc) => {
+        const data = doc.data() || {};
+        setMusicStatus(data?.musicStatus || null);
+        setGenerationStartAt(data?.generationStartAt || null);
+      });
+    return () => {
+      if (typeof unsub === "function") unsub();
+    };
+  }, [config?.projectId]);
+
+  // Progression basée sur 8 minutes max, arrête si statut change avant
+  useEffect(() => {
+    const totalMs = 8 * 60 * 1000; // 8 minutes
+
+    const clearTimer = () => {
+      if (progressTimerRef.current) {
+        globalThis.clearInterval(progressTimerRef.current);
+        progressTimerRef.current = null;
+      }
+    };
+
+    if (musicStatus && musicStatus !== "GENERATING") {
+      setProgress(100);
+      clearTimer();
+      return () => clearTimer();
+    }
+
+    if (!generationStartAt) {
+      // En attente de la date de début
+      return () => clearTimer();
+    }
+
+    const startDate = generationStartAt?.toDate
+      ? generationStartAt.toDate()
+      : new Date(generationStartAt);
+
+    const update = () => {
+      const elapsed = moment().diff(moment(startDate));
+      const pct = Math.max(
+        0,
+        Math.min(100, Math.floor((elapsed / totalMs) * 100)),
+      );
+      setProgress(pct);
+      if (pct >= 100) {
+        clearTimer();
+      }
+    };
+
+    // Initial update + interval chaque seconde
+    update();
+    clearTimer();
+    progressTimerRef.current = globalThis.setInterval(update, 1000);
+
+    return () => clearTimer();
+  }, [generationStartAt, musicStatus]);
 
   useEffect(() => {
-    if (active) {
-      const interval = setInterval(() => {
-        setProgress((prevProgress) => {
-          if (prevProgress >= 100) {
-            clearInterval(interval);
-
-            return 100;
-          }
-          return prevProgress + 1;
+    const run = async () => {
+      try {
+        setCalled(true);
+        await setIsLoading(true);
+        const callable = firebase
+          .functions()
+          .httpsCallable("music-generateMusic");
+        const { data } = await callable({
+          title: config?.title,
+          lyrics: config?.lyrics,
+          genres: config?.genres,
+          voice: config?.voice,
+          instruments: config?.instruments,
+          tempo: config?.tempo,
+          projectId: config?.projectId,
         });
-      }, 100);
+        setResult(data);
 
-      return () => clearInterval(interval);
+        // Extraire le taskId renvoyé par l'API Suno à travers la Cloud Function
+        const taskId =
+          data?.response?.data?.taskId || data?.response?.data?.task_id;
+
+        // Si un projectId et un taskId existent, mettre à jour le projet
+        if (config?.projectId && taskId) {
+          const projectRef = firebase
+            .firestore()
+            .collection("projects")
+            .doc(config.projectId);
+
+          await projectRef.set(
+            {
+              sunoTaskId: taskId,
+              musicStatus: "GENERATING",
+              generationStartAt: firebase.firestore.FieldValue.serverTimestamp(),
+              updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
+            },
+            { merge: true },
+          );
+        }
+      } catch (e) {
+        console.log(e);
+      } finally {
+        await setIsLoading(false);
+      }
+    };
+
+    if (active && !called) {
+      run();
     }
-  }, [active]);
+  }, [active, called, config, setIsLoading]);
 
   return (
     <View
@@ -95,7 +202,7 @@ const CreatingSong = ({ active }) => {
                   textAlign: "center",
                 }}
               >
-                Ton texte est{"\n"}en cours de création
+                Ta musique est{"\n"}en cours de création
               </Text>
               <View style={{ alignItems: "center", gap: 16 }}>
                 <ProgressBar gradient progress={progress} />
@@ -110,12 +217,12 @@ const CreatingSong = ({ active }) => {
                 </Text>
               </View>
               <GradientButton
-                title="Découvrir mon texte"
+                title="Découvrir ma musique"
                 containerStyle={{
                   width: "80%",
                   alignSelf: "center",
                 }}
-                onPress={() => navigate(Routes.SongReady)}
+                onPress={() => navigate(Routes.SongReady, { result })}
               />
             </View>
           </BlurView>