continue flow integartion

src/screens/Studio/Studio.js

@@ -1,5 +1,5 @@
-import { View } from "react-native";
-import React from "react";
+import { View, Text, ScrollView, Pressable } from "react-native";
+import React, { useEffect, useState, useMemo } from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
 import GradientButton from "../../components/GradientButton";
@@ -8,9 +8,29 @@ import { Routes } from "../../navigation";
 import { gutters } from "../../styles";
 import firebase from "../../config/firebase";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
+import useDataFromRef from "../../hooks/useDataFromRef";
 
 const Studio = () => {
   const { setIsLoading } = useMinuit();
+  const [selectedId, setSelectedId] = useState(null);
+  const isDisabled = useMemo(() => !selectedId, [selectedId]);
+
+  const user = firebase.auth().currentUser;
+  const { data: projects } = useDataFromRef({
+    ref: user
+      ? firebase
+          .firestore()
+          .collection("projects")
+          .where("userId", "==", user.uid)
+          .orderBy("createdAt", "desc")
+      : firebase
+          .firestore()
+          .collection("projects")
+          .orderBy("createdAt", "desc"),
+    simpleRef: false,
+    listener: true,
+    condition: true,
+  });
 
   async function generateMusic() {
     try {
@@ -98,10 +118,87 @@ const Studio = () => {
         padding: gutters * 2,
       }}
     >
-      <View style={{ flex: 1, justifyContent: "flex-end" }}>
+      <View style={{ flex: 1 }}>
+        {projects?.length > 0 && (
+          <View style={{ marginBottom: gutters * 2 }}>
+            <Text
+              style={{
+                color: "#fff",
+                fontSize: 18,
+                marginBottom: 12,
+                fontWeight: "600",
+              }}
+            >
+              Derniers projets générés
+            </Text>
+            <ScrollView
+              style={{ maxHeight: 260 }}
+              contentContainerStyle={{ gap: 10, paddingRight: 6 }}
+            >
+              {projects.map((p) => {
+                const couplet = p?.lyrics?.couplet || "";
+                const preview = couplet.split("\n").slice(0, 2).join(" ");
+                const selected = selectedId === p.id;
+                const createdAt = p?.createdAt?.toDate
+                  ? p.createdAt.toDate()
+                  : p?.createdAt
+                    ? new Date(p.createdAt)
+                    : null;
+                const createdLabel =
+                  createdAt && !Number.isNaN(createdAt.getTime())
+                    ? `${createdAt.toLocaleDateString("fr-FR")} • ${createdAt.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })}`
+                    : "";
+                return (
+                  <Pressable
+                    key={p.id}
+                    onPress={() => setSelectedId(p.id)}
+                    style={{
+                      backgroundColor: "#0F0C1933",
+                      borderRadius: 12,
+                      padding: 12,
+                      borderWidth: selected ? 2 : 0,
+                      borderColor: selected ? "#F94697" : "transparent",
+                    }}
+                  >
+                    <Text
+                      style={{ color: "#fff", fontSize: 16, fontWeight: "600" }}
+                    >
+                      {p?.title || "Sans titre"}
+                    </Text>
+                    {!!createdLabel && (
+                      <Text
+                        style={{ color: "#bbb", marginTop: 4, fontSize: 12 }}
+                      >
+                        {createdLabel}
+                      </Text>
+                    )}
+                    {!!preview && (
+                      <Text
+                        style={{ color: "#ddd", marginTop: 6 }}
+                        numberOfLines={2}
+                      >
+                        {preview}
+                      </Text>
+                    )}
+                    {p?.config?.style && (
+                      <Text
+                        style={{ color: "#aaa", marginTop: 6, fontSize: 12 }}
+                      >
+                        Style: {String(p.config.style)}
+                      </Text>
+                    )}
+                  </Pressable>
+                );
+              })}
+            </ScrollView>
+          </View>
+        )}
+      </View>
+      <View style={{ justifyContent: "flex-end" }}>
         <GradientButton
           title="Commencer"
-          onPress={() => navigate(Routes.Compose)}
+          disabled={isDisabled}
+          onPress={() => navigate(Routes.Compose, { projectId: selectedId })}
         />
       </View>
     </Page>