big refacto change all flows

src/screens/Studio/ComposeSong.js

@@ -11,9 +11,8 @@ import ChooseGenre from "./ChooseGenre";
 import CustomizeVoice from "./CustomizeVoice";
 import ChooseInstruments from "./ChooseInstruments";
 import ChooseRhythm from "./ChooseRhythm";
-import { useRoute } from "@react-navigation/native";
 import { projectsRef } from "../../config/firebase";
-import useDataFromRef from "../../hooks/useDataFromRef";
+import { useUser } from "../../providers/UserDataProvider";
 import { Routes } from "../../navigation";
 
 const { width } = Dimensions.get("window");
@@ -23,8 +22,7 @@ const ComposeSong = () => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [progress, setProgress] = useState(18);
   const [containerLayout, setContainerLayout] = useState(null);
-  const route = useRoute();
-  const projectId = route?.params?.projectId;
+  const { selectedProjectId, selectedProject, updateProjectData } = useUser();
 
   // Selections state
   const [genres, setGenres] = useState([]);
@@ -32,14 +30,6 @@ const ComposeSong = () => {
   const [instruments, setInstruments] = useState([]);
   const [rhythm, setRhythm] = useState(null);
 
-  // Fetch selected project to get title + lyrics
-  const { data: project } = useDataFromRef({
-    ref: projectId ? projectsRef.doc(projectId) : null,
-    simpleRef: true,
-    listener: true,
-    condition: !!projectId,
-  });
-
   const isStepValid = useMemo(() => {
     switch (selectedIndex) {
       case 0:
@@ -57,31 +47,54 @@ const ComposeSong = () => {
 
   const musicConfig = useMemo(() => {
     let lyricsArr = [];
-    if (Array.isArray(project?.lyrics)) {
-      lyricsArr = project.lyrics.map((s) => ({
+    if (Array.isArray(selectedProject?.lyrics)) {
+      lyricsArr = selectedProject.lyrics.map((s) => ({
         type: (s?.type || "").toLowerCase(),
         lyrics: s?.lyrics || "",
       }));
     } else {
-      const c = project?.lyrics?.couplet;
-      const r = project?.lyrics?.refrain;
+      const c = selectedProject?.lyrics?.couplet;
+      const r = selectedProject?.lyrics?.refrain;
       if (c) lyricsArr.push({ type: "couplet", lyrics: c });
       if (r) lyricsArr.push({ type: "refrain", lyrics: r });
     }
     return {
-      title: project?.title || "",
+      title: selectedProject?.title || "",
       lyrics: lyricsArr,
       genres: Array.isArray(genres) ? genres : [],
       voice: voice || undefined,
       instruments: Array.isArray(instruments) ? instruments : [],
       tempo: rhythm || undefined,
-      projectId: projectId || undefined,
+      projectId: selectedProjectId || undefined,
     };
-  }, [project, genres, voice, instruments, rhythm, projectId]);
+  }, [selectedProject, genres, voice, instruments, rhythm, selectedProjectId]);
 
-  const onPressNext = () => {
+  const onPressNext = async () => {
     if (selectedIndex === 3) {
-      navigate(Routes.GeneratingSong, { config: musicConfig, projectId });
+      try {
+        // Persist config on the selected selectedProject so GeneratingSong can pick it up
+        if (selectedProjectId) {
+          await updateProjectData({
+            musicConfig: {
+              title: musicConfig?.title || "",
+              lyrics: Array.isArray(musicConfig?.lyrics)
+                ? musicConfig.lyrics
+                : [],
+              genres: Array.isArray(musicConfig?.genres)
+                ? musicConfig.genres
+                : [],
+              voice: musicConfig?.voice || "",
+              instruments: Array.isArray(musicConfig?.instruments)
+                ? musicConfig.instruments
+                : [],
+              tempo: musicConfig?.tempo || "",
+            },
+            musicStatus: null,
+          });
+        }
+      } catch (e) {}
+      // Also pass the config to the screen to avoid any race condition
+      navigate(Routes.GeneratingSong, { config: musicConfig });
       return;
     }
     setSelectedIndex(selectedIndex + 1);