continue fix generating flow

src/screens/Studio/ComposeSong.js

@@ -4,17 +4,17 @@ import Page from "../../layouts/Page";
 import { background } from "../../assets";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import GradientButton from "../../components/GradientButton";
-import { goBack } from "../../navigation/NavigationService";
+import { goBack, navigate } from "../../navigation/NavigationService";
 import { gutters } from "../../styles";
 import SwiperFlatList from "react-native-swiper-flatlist";
 import ChooseGenre from "./ChooseGenre";
 import CustomizeVoice from "./CustomizeVoice";
 import ChooseInstruments from "./ChooseInstruments";
 import ChooseRhythm from "./ChooseRhythm";
-import CreatingSong from "./CreatingSong";
 import { useRoute } from "@react-navigation/native";
-import firebase from "../../config/firebase";
+import { projectsRef } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
+import { Routes } from "../../navigation";
 
 const { width } = Dimensions.get("window");
 
@@ -27,20 +27,14 @@ const ComposeSong = () => {
   const projectId = route?.params?.projectId;
 
   // Selections state
-  const [genres, setGenres] = useState(__DEV__ ? ["Hip Hop/Rap", "Punk"] : []);
-  const [voice, setVoice] = useState(
-    __DEV__ ? "Deux voix pour interpreter ta chanson" : null,
-  );
-  const [instruments, setInstruments] = useState(
-    __DEV__ ? ["Synthétiseur", "Trompette", "Piano classique"] : [],
-  );
-  const [rhythm, setRhythm] = useState(__DEV__ ? "Rapide" : null);
+  const [genres, setGenres] = useState([]);
+  const [voice, setVoice] = useState(null);
+  const [instruments, setInstruments] = useState([]);
+  const [rhythm, setRhythm] = useState(null);
 
   // Fetch selected project to get title + lyrics
   const { data: project } = useDataFromRef({
-    ref: projectId
-      ? firebase.firestore().collection("projects").doc(projectId)
-      : null,
+    ref: projectId ? projectsRef.doc(projectId) : null,
     simpleRef: true,
     listener: true,
     condition: !!projectId,
@@ -86,6 +80,10 @@ const ComposeSong = () => {
   }, [project, genres, voice, instruments, rhythm, projectId]);
 
   const onPressNext = () => {
+    if (selectedIndex === 3) {
+      navigate(Routes.GeneratingSong, { config: musicConfig, projectId });
+      return;
+    }
     setSelectedIndex(selectedIndex + 1);
     setProgress(progress + 9);
     scrollRef.current.scrollToIndex({
@@ -159,15 +157,6 @@ const ComposeSong = () => {
             >
               <ChooseRhythm selected={rhythm} setSelected={setRhythm} />
             </View>
-            <View
-              style={{
-                width: width,
-                height: containerLayout?.height,
-                paddingHorizontal: gutters,
-              }}
-            >
-              <CreatingSong active={selectedIndex === 4} config={musicConfig} />
-            </View>
           </SwiperFlatList>
         </View>
         {selectedIndex !== 4 && (