leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix web flow

Browse Source
This commit is contained in:
leon-morival
2025-10-02 14:24:19 +02:00
parent 0ccdcf3084
commit 6f25cad83f
6 changed files with 194 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Writing/CreateLyricsWithAi.js
+63 -32
View File
@@ -5,6 +5,7 @@ import { SwiperFlatList } from "react-native-swiper-flatlist";
import { background } from "../../assets";
import GradientButton from "../../components/GradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import { OTHER_OBJECTIVE_OPTION, OTHER_STYLE_OPTION } from "../../data/data";
import useLayoutType from "../../hooks/useLayoutType";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
@@ -44,6 +45,18 @@ const CreateLyricsWithAi = () => {
const [rhymes, setRhymes] = useState(null);
const [customStructure, setCustomStructure] = useState(null); // array like ['couplet','refrain']
const trimmedOtherObjective =
typeof otherObjective === "string" ? otherObjective.trim() : "";
const shouldUseOtherObjective = objective === OTHER_OBJECTIVE_OPTION;
const persistedOtherObjective = shouldUseOtherObjective
? trimmedOtherObjective
: "";
const trimmedOtherStyle =
typeof otherStyle === "string" ? otherStyle.trim() : "";
const shouldUseOtherStyle = style === OTHER_STYLE_OPTION;
const persistedOtherStyle = shouldUseOtherStyle ? trimmedOtherStyle : "";
// Pré-remplir les états depuis le projet sélectionné si disponibles
React.useEffect(() => {
if (!selectedProject) return;
@@ -52,19 +65,28 @@ const CreateLyricsWithAi = () => {
const rawOtherObjective =
typeof sel.otherObjective === "string" ? sel.otherObjective : "";
const hasSavedOtherObjective = rawOtherObjective.trim().length > 0;
const trimmedSavedOtherObjective = rawOtherObjective.trim();
const hasSavedOtherObjective = trimmedSavedOtherObjective.length > 0;
const savedObjective =
typeof sel.objective === "string" && sel.objective.trim().length > 0
? sel.objective
? sel.objective.trim()
: null;
if (!otherObjective && hasSavedOtherObjective) {
setOtherObjective(rawOtherObjective);
if (objective !== null) {
setObjective(null);
}
} else if (!hasSavedOtherObjective && objective == null && savedObjective) {
setObjective(savedObjective);
}
const shouldSelectOtherObjective =
hasSavedOtherObjective &&
(!savedObjective || savedObjective === OTHER_OBJECTIVE_OPTION);
const resolvedSavedObjective = shouldSelectOtherObjective
? OTHER_OBJECTIVE_OPTION
: savedObjective;
if (resolvedSavedObjective && objective !== resolvedSavedObjective) {
setObjective(resolvedSavedObjective);
} else if (!resolvedSavedObjective && objective !== null) {
setObjective(null);
}
if (!context && typeof sel.context === "string") setContext(sel.context);
@@ -86,19 +108,24 @@ const CreateLyricsWithAi = () => {
const rawOtherStyle =
typeof sel.otherStyle === "string" ? sel.otherStyle : "";
const hasSavedOtherStyle = rawOtherStyle.trim().length > 0;
const trimmedSavedOtherStyle = rawOtherStyle.trim();
const hasSavedOtherStyle = trimmedSavedOtherStyle.length > 0;
const savedStyle =
typeof sel.style === "string" && sel.style.trim().length > 0
? sel.style
? sel.style.trim()
: null;
if (!otherStyle && hasSavedOtherStyle) {
setOtherStyle(rawOtherStyle);
if (style !== null) {
setStyle(null);
}
} else if (!hasSavedOtherStyle && style == null && savedStyle) {
setStyle(savedStyle);
}
const shouldSelectOtherStyle =
hasSavedOtherStyle && (!savedStyle || savedStyle === OTHER_STYLE_OPTION);
const resolvedSavedStyle = shouldSelectOtherStyle
? OTHER_STYLE_OPTION
: savedStyle;
if (resolvedSavedStyle && style !== resolvedSavedStyle) {
setStyle(resolvedSavedStyle);
} else if (!resolvedSavedStyle && style !== null) {
setStyle(null);
}
if (!audience && typeof sel.audience === "string")
setAudience(sel.audience);
@@ -154,16 +181,21 @@ const CreateLyricsWithAi = () => {
}, [hasLyrics]);
const lyricsConfig = useMemo(() => {
const resolvedObjective = shouldUseOtherObjective
? persistedOtherObjective || undefined
: objective || undefined;
const resolvedStyle = shouldUseOtherStyle
? persistedOtherStyle || undefined
: style || undefined;
return {
objective: otherObjective?.trim()
? otherObjective.trim()
: objective || undefined,
objective: resolvedObjective,
context: context?.trim() ? context.trim() : undefined,
emotion:
emotion?.title && emotion?.description
? `${emotion.title} : ${emotion.description}`
: undefined,
style: otherStyle?.trim() ? otherStyle.trim() : style || undefined,
style: resolvedStyle,
audience: audience?.trim() ? audience.trim() : undefined,
structure:
(customStructure &&
@@ -174,12 +206,14 @@ const CreateLyricsWithAi = () => {
rhymes: rhymes || undefined,
};
}, [
shouldUseOtherObjective,
persistedOtherObjective,
objective,
otherObjective,
shouldUseOtherStyle,
persistedOtherStyle,
context,
emotion,
style,
otherStyle,
audience,
parsedStructure,
rhymes,
@@ -191,9 +225,7 @@ const CreateLyricsWithAi = () => {
case 0: {
const hasObjective =
typeof objective === "string" && objective.length > 0;
const hasOther =
typeof otherObjective === "string" &&
otherObjective.trim().length > 0;
const hasOther = trimmedOtherObjective.length > 0;
return !(hasObjective || hasOther);
}
case 1: {
@@ -209,8 +241,7 @@ const CreateLyricsWithAi = () => {
}
case 3: {
const hasStyle = typeof style === "string" && style.length > 0;
const hasOther =
typeof otherStyle === "string" && otherStyle.trim().length > 0;
const hasOther = trimmedOtherStyle.length > 0;
return !(hasStyle || hasOther);
}
case 4: {
@@ -233,11 +264,11 @@ const CreateLyricsWithAi = () => {
}, [
selectedIndex,
objective,
otherObjective,
trimmedOtherObjective,
context,
emotion,
style,
otherStyle,
trimmedOtherStyle,
audience,
structure,
rhymes,
@@ -257,11 +288,11 @@ const CreateLyricsWithAi = () => {
config: { structure: chosenStructure },
selections: {
objective,
otherObjective,
otherObjective: persistedOtherObjective,
context,
emotion,
style,
otherStyle,
otherStyle: persistedOtherStyle,
audience,
structure,
parsedStructure,
@@ -433,11 +464,11 @@ const CreateLyricsWithAi = () => {
config={lyricsConfig}
selections={{
objective,
otherObjective,
otherObjective: persistedOtherObjective,
context,
emotion,
style,
otherStyle,
otherStyle: persistedOtherStyle,
audience,
structure,
parsedStructure,
src/screens/Writing/CreateLyricsWithAi.web.js
+63 -32
View File
@@ -4,6 +4,7 @@ import { responsiveHeight } from "react-native-responsive-dimensions";
import { background } from "../../assets";
import GradientButton from "../../components/GradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import { OTHER_OBJECTIVE_OPTION, OTHER_STYLE_OPTION } from "../../data/data";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { goBack, navigate } from "../../navigation/NavigationService";
@@ -42,6 +43,18 @@ const CreateLyricsWithAi = () => {
const [rhymes, setRhymes] = useState(null);
const [customStructure, setCustomStructure] = useState(null); // array like ['couplet','refrain']
const trimmedOtherObjective =
typeof otherObjective === "string" ? otherObjective.trim() : "";
const shouldUseOtherObjective = objective === OTHER_OBJECTIVE_OPTION;
const persistedOtherObjective = shouldUseOtherObjective
? trimmedOtherObjective
: "";
const trimmedOtherStyle =
typeof otherStyle === "string" ? otherStyle.trim() : "";
const shouldUseOtherStyle = style === OTHER_STYLE_OPTION;
const persistedOtherStyle = shouldUseOtherStyle ? trimmedOtherStyle : "";
// Pré-remplir les états depuis le projet sélectionné si disponibles
React.useEffect(() => {
if (!selectedProject) return;
@@ -50,19 +63,28 @@ const CreateLyricsWithAi = () => {
const rawOtherObjective =
typeof sel.otherObjective === "string" ? sel.otherObjective : "";
const hasSavedOtherObjective = rawOtherObjective.trim().length > 0;
const trimmedSavedOtherObjective = rawOtherObjective.trim();
const hasSavedOtherObjective = trimmedSavedOtherObjective.length > 0;
const savedObjective =
typeof sel.objective === "string" && sel.objective.trim().length > 0
? sel.objective
? sel.objective.trim()
: null;
if (!otherObjective && hasSavedOtherObjective) {
setOtherObjective(rawOtherObjective);
if (objective !== null) {
setObjective(null);
}
} else if (!hasSavedOtherObjective && objective == null && savedObjective) {
setObjective(savedObjective);
}
const shouldSelectOtherObjective =
hasSavedOtherObjective &&
(!savedObjective || savedObjective === OTHER_OBJECTIVE_OPTION);
const resolvedSavedObjective = shouldSelectOtherObjective
? OTHER_OBJECTIVE_OPTION
: savedObjective;
if (resolvedSavedObjective && objective !== resolvedSavedObjective) {
setObjective(resolvedSavedObjective);
} else if (!resolvedSavedObjective && objective !== null) {
setObjective(null);
}
if (!context && typeof sel.context === "string") setContext(sel.context);
@@ -84,19 +106,24 @@ const CreateLyricsWithAi = () => {
const rawOtherStyle =
typeof sel.otherStyle === "string" ? sel.otherStyle : "";
const hasSavedOtherStyle = rawOtherStyle.trim().length > 0;
const trimmedSavedOtherStyle = rawOtherStyle.trim();
const hasSavedOtherStyle = trimmedSavedOtherStyle.length > 0;
const savedStyle =
typeof sel.style === "string" && sel.style.trim().length > 0
? sel.style
? sel.style.trim()
: null;
if (!otherStyle && hasSavedOtherStyle) {
setOtherStyle(rawOtherStyle);
if (style !== null) {
setStyle(null);
}
} else if (!hasSavedOtherStyle && style == null && savedStyle) {
setStyle(savedStyle);
}
const shouldSelectOtherStyle =
hasSavedOtherStyle && (!savedStyle || savedStyle === OTHER_STYLE_OPTION);
const resolvedSavedStyle = shouldSelectOtherStyle
? OTHER_STYLE_OPTION
: savedStyle;
if (resolvedSavedStyle && style !== resolvedSavedStyle) {
setStyle(resolvedSavedStyle);
} else if (!resolvedSavedStyle && style !== null) {
setStyle(null);
}
if (!audience && typeof sel.audience === "string")
setAudience(sel.audience);
@@ -159,16 +186,21 @@ const CreateLyricsWithAi = () => {
}, [hasLyrics]);
const lyricsConfig = useMemo(() => {
const resolvedObjective = shouldUseOtherObjective
? persistedOtherObjective || undefined
: objective || undefined;
const resolvedStyle = shouldUseOtherStyle
? persistedOtherStyle || undefined
: style || undefined;
return {
objective: otherObjective?.trim()
? otherObjective.trim()
: objective || undefined,
objective: resolvedObjective,
context: context?.trim() ? context.trim() : undefined,
emotion:
emotion?.title && emotion?.description
? `${emotion.title} : ${emotion.description}`
: undefined,
style: otherStyle?.trim() ? otherStyle.trim() : style || undefined,
style: resolvedStyle,
audience: audience?.trim() ? audience.trim() : undefined,
structure:
(customStructure &&
@@ -179,12 +211,14 @@ const CreateLyricsWithAi = () => {
rhymes: rhymes || undefined,
};
}, [
shouldUseOtherObjective,
persistedOtherObjective,
objective,
otherObjective,
shouldUseOtherStyle,
persistedOtherStyle,
context,
emotion,
style,
otherStyle,
audience,
parsedStructure,
rhymes,
@@ -196,9 +230,7 @@ const CreateLyricsWithAi = () => {
case 0: {
const hasObjective =
typeof objective === "string" && objective.length > 0;
const hasOther =
typeof otherObjective === "string" &&
otherObjective.trim().length > 0;
const hasOther = trimmedOtherObjective.length > 0;
return !(hasObjective || hasOther);
}
case 1: {
@@ -214,8 +246,7 @@ const CreateLyricsWithAi = () => {
}
case 3: {
const hasStyle = typeof style === "string" && style.length > 0;
const hasOther =
typeof otherStyle === "string" && otherStyle.trim().length > 0;
const hasOther = trimmedOtherStyle.length > 0;
return !(hasStyle || hasOther);
}
case 4: {
@@ -238,11 +269,11 @@ const CreateLyricsWithAi = () => {
}, [
selectedIndex,
objective,
otherObjective,
trimmedOtherObjective,
context,
emotion,
style,
otherStyle,
trimmedOtherStyle,
audience,
structure,
rhymes,
@@ -262,11 +293,11 @@ const CreateLyricsWithAi = () => {
config: { structure: chosenStructure },
selections: {
objective,
otherObjective,
otherObjective: persistedOtherObjective,
context,
emotion,
style,
otherStyle,
otherStyle: persistedOtherStyle,
audience,
structure,
parsedStructure,
@@ -365,11 +396,11 @@ const CreateLyricsWithAi = () => {
config={lyricsConfig}
selections={{
objective,
otherObjective,
otherObjective: persistedOtherObjective,
context,
emotion,
style,
otherStyle,
otherStyle: persistedOtherStyle,
audience,
structure,
parsedStructure,
src/screens/Writing/Goals.js
+11 -4
View File
@@ -1,8 +1,8 @@
import React, { useState } from "react";
import React, { useMemo, useState } from "react";
import { StyleSheet, View } from "react-native";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import ListSelection from "../../components/ListSelection/ListSelection";
import { GOALS } from "../../data/data";
import { GOALS, OTHER_OBJECTIVE_OPTION } from "../../data/data";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
@@ -19,9 +19,16 @@ const Goals = ({
const selected = selectedProp ?? internalSelected;
const setSelected = setSelectedProp ?? setInternalSelected;
const goalsOptions = useMemo(() => GOALS ?? [], []);
const handleOtherObjectiveChange = (value) => {
setOtherObjective?.(value);
if (value?.trim()?.length && selected != null) {
const trimmed = value?.trim() ?? "";
if (trimmed.length) {
if (selected !== OTHER_OBJECTIVE_OPTION) {
setSelected(OTHER_OBJECTIVE_OPTION);
}
} else if (selected === OTHER_OBJECTIVE_OPTION) {
setSelected(null);
}
};
@@ -34,7 +41,7 @@ const Goals = ({
<CreateLyricsHeader title="Quel est ton objectif ?" />
<ItemContainer>
<ListSelection
options={GOALS}
options={goalsOptions}
variant="simple"
selected={selected}
setSelected={setSelected}
src/screens/Writing/SongStyle.js
+12 -5
View File
@@ -1,7 +1,7 @@
import { View, StyleSheet } from "react-native";
import React, { useState } from "react";
import React, { useMemo, useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { SONG_STYLE } from "../../data/data";
import { OTHER_STYLE_OPTION, SONG_STYLE } from "../../data/data";
import { Palette } from "../../styles";
import CustomInput from "./components/CustomInput";
import { FONT_FAMILY } from "../../styles/Fonts";
@@ -18,9 +18,16 @@ const SongStyle = ({
const selected = selectedProp ?? internalSelected;
const setSelected = setSelectedProp ?? setInternalSelected;
const songStyleOptions = useMemo(() => SONG_STYLE ?? [], []);
const handleOtherStyleChange = (value) => {
setOtherStyle?.(value);
if (value?.trim()?.length && selected != null) {
const trimmed = value?.trim() ?? "";
if (trimmed.length) {
if (selected !== OTHER_STYLE_OPTION) {
setSelected(OTHER_STYLE_OPTION);
}
} else if (selected === OTHER_STYLE_OPTION) {
setSelected(null);
}
};
@@ -36,7 +43,7 @@ const SongStyle = ({
/>
<ItemContainer>
<ListSelection
options={SONG_STYLE}
options={songStyleOptions}
variant="titleDescription"
selected={selected}
setSelected={setSelected}
@@ -47,7 +54,7 @@ const SongStyle = ({
</View>
<CustomInput
label="Tu as un autre style de chanson ?"
placeholder="Décrire l’objectif"
placeholder="Décrire le style"
value={otherStyle}
setValue={handleOtherStyleChange}
/>