Fix Task: #64

src/screens/Writing/Lyrics.js

@@ -1,5 +1,11 @@
 import { View, ScrollView, Alert } from "react-native";
-import React, { useMemo, useState, useCallback, useEffect } from "react";
+import React, {
+  useMemo,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
 import Page from "../../layouts/Page";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import { navigate } from "../../navigation/NavigationService";
@@ -14,9 +20,12 @@ import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { useUser } from "../../providers/UserDataProvider";
 
 const Lyrics = ({ navigation }) => {
+  const scrollRef = useRef(null);
   const [containerLayout, setContainerLayout] = useState(null);
   const { setIsLoading } = useMinuit();
   const { selectedProjectId, selectedProject } = useUser();
+  const [isFocus, setIsFocus] = useState(null);
+  const [itemsContainerLayout, setItemsContainerLayout] = useState([]);
 
   // Effective sources from provider only
   const projectTitle = selectedProject?.title || "";
@@ -103,7 +112,7 @@ const Lyrics = ({ navigation }) => {
       if (invalid) {
         Alert.alert(
           "Champs incomplets",
-          "Chaque couplet et refrain doit contenir du texte.",
+          "Chaque couplet et refrain doit contenir du texte."
         );
         return;
       }
@@ -124,7 +133,7 @@ const Lyrics = ({ navigation }) => {
         normalizedOldLyrics.every(
           (s, i) =>
             s.type === normalizedNewLyrics[i]?.type &&
-            s.lyrics === normalizedNewLyrics[i]?.lyrics,
+            s.lyrics === normalizedNewLyrics[i]?.lyrics
         );
 
       // 1) Appel de la Cloud Function de modération avant tout enregistrement
@@ -148,7 +157,7 @@ const Lyrics = ({ navigation }) => {
               : null;
             Alert.alert(
               "Contenu interdit",
-              [data?.message, quotes].filter(Boolean).join("\n\n"),
+              [data?.message, quotes].filter(Boolean).join("\n\n")
             );
             return; // stop here
           }
@@ -156,7 +165,7 @@ const Lyrics = ({ navigation }) => {
           if (data?.errorCode === "ANALYSE_FAILED") {
             Alert.alert(
               "Analyse indisponible",
-              "Impossible de vérifier la toxicité pour le moment. Réessayez plus tard.",
+              "Impossible de vérifier la toxicité pour le moment. Réessayez plus tard."
             );
             return;
           }
@@ -191,11 +200,11 @@ const Lyrics = ({ navigation }) => {
       } catch (moderationError) {
         console.log(
           "Moderation call failed",
-          moderationError?.message || moderationError,
+          moderationError?.message || moderationError
         );
         Alert.alert(
           "Analyse indisponible",
-          "Impossible de vérifier la toxicité pour le moment. Réessayez plus tard.",
+          "Impossible de vérifier la toxicité pour le moment. Réessayez plus tard."
         );
         return;
       }
@@ -250,8 +259,12 @@ const Lyrics = ({ navigation }) => {
         }}
         onLayout={(e) => setContainerLayout(e.nativeEvent.layout)}
       >
-        <ItemContainer height={containerLayout?.height}>
+        <ItemContainer
+          height={containerLayout?.height}
+          disableKeyboardHeight={isFocus !== sections.length - 1 || !isFocus}
+        >
           <ScrollView
+            ref={scrollRef}
             contentContainerStyle={{
               paddingHorizontal: 14,
               paddingVertical: 10,
@@ -267,6 +280,13 @@ const Lyrics = ({ navigation }) => {
               setValue={setTitleValue}
               multiline={false}
               maxLength={60}
+              onLayout={(e) => {
+                e.persist();
+                setItemsContainerLayout((prev) => [
+                  ...prev,
+                  e?.nativeEvent?.layout,
+                ]);
+              }}
             />
             {sections.map((s, idx) => {
               // Calculer l'index humain par type
@@ -284,6 +304,19 @@ const Lyrics = ({ navigation }) => {
                   height={type === "refrain" ? 170 : 225}
                   value={s?.lyrics || ""}
                   setValue={(val) => setSectionAt(idx, val)}
+                  onFocus={() => {
+                    setIsFocus(idx);
+                    scrollRef?.current?.scrollTo({
+                      y: itemsContainerLayout[idx + 1]?.y,
+                    });
+                  }}
+                  onLayout={(e) => {
+                    e.persist();
+                    setItemsContainerLayout((prev) => [
+                      ...prev,
+                      e?.nativeEvent?.layout,
+                    ]);
+                  }}
                 />
               );
             })}