Refactor app flows and refresh UI components

src/screens/cover/ChooseCoverType.js

@@ -1,4 +1,5 @@
 import { BlurView } from 'expo-blur'
+import * as ImagePicker from 'expo-image-picker'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 import useMinuit from 'react-native-minuit/src/hooks/useMinuit'
@@ -7,6 +8,7 @@ import GradientButton from '../../components/GradientButton'
 import { Input } from '../../components/Input'
 import MusicLandHeader from '../../components/MusicLandHeader'
 import firebase, { projectsRef, usersRef } from '../../config/firebase'
+import { uploadFileToFirebase } from '../../helpers/uploadToFirebase'
 import Page from '../../layouts/Page'
 import { Routes } from '../../navigation'
 import { goBack, navigate } from '../../navigation/NavigationService'
@@ -16,6 +18,8 @@ import { FONT_FAMILY } from '../../styles/Fonts'
 import { buildFullName } from '../../utils/artistName'
 import { background } from '../../assets'
 
+const COVER_TEMPLATE = 'MUSICLAND_PLAYBACKER'
+
 export const ChooseCoverType = () => {
   const isIOS = Platform.OS === 'ios'
   const [choiceVisible, setChoiceVisible] = useState(false)
@@ -27,8 +31,14 @@ export const ChooseCoverType = () => {
   const [savingChoice, setSavingChoice] = useState(false)
   const [savingPseudo, setSavingPseudo] = useState(false)
 
-  const { selectedProject, selectedProjectId, currentUserData, currentUID } = useUserData()
-  const { setTooltip } = useMinuit()
+  const {
+    selectedProject,
+    selectedProjectId,
+    updateProjectData,
+    currentUserData,
+    currentUID,
+  } = useUserData()
+  const { setIsLoading, setTooltip } = useMinuit()
 
   const projectId = selectedProject?.id || selectedProjectId || null
   const hasArtistPreference = useMemo(() => {
@@ -104,6 +114,64 @@ export const ChooseCoverType = () => {
     ensureArtistPreference(() => navigate(Routes.PouchReady))
   }, [ensureArtistPreference])
 
+  const pickCenterImage = useCallback(async () => {
+    try {
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsEditing: true,
+        aspect: [1, 1],
+        quality: 1,
+      })
+
+      if (result.canceled) return
+
+      const uri = result.assets?.[0]?.uri
+      if (!uri || !projectId) {
+        throw new Error("Impossible d'identifier l'image ou le projet")
+      }
+
+      await setIsLoading(true)
+      const { resultURI } = await uploadFileToFirebase({
+        uri,
+        path: `musics/${projectId}/cover-center-image.jpg`,
+        shouldCompress: false,
+        fileType: 'IMAGE',
+      })
+
+      if (!resultURI) {
+        throw new Error("Le téléversement de l'image a échoué")
+      }
+
+      await updateProjectData(
+        {
+          coverCenterImageURL: resultURI,
+          coverStatus: 'PENDING',
+          cover: {
+            template: COVER_TEMPLATE,
+            result: null,
+            generatedBackground: null,
+            selectedOptionId: COVER_TEMPLATE,
+            options: [],
+          },
+        },
+        { merge: true }
+      )
+      navigate(Routes.PouchReady)
+    } catch (error) {
+      console.log('pickCenterImage error', error?.message)
+      setTooltip({
+        type: 'error',
+        text: error?.message || "Impossible de sélectionner l'image",
+      })
+    } finally {
+      await setIsLoading(false)
+    }
+  }, [projectId, setIsLoading, setTooltip, updateProjectData])
+
+  const handlePickCenterImage = useCallback(() => {
+    ensureArtistPreference(pickCenterImage)
+  }, [ensureArtistPreference, pickCenterImage])
+
   const closeChoiceModal = useCallback(() => {
     setChoiceVisible(false)
     setChoiceDismissAction(null)
@@ -259,10 +327,10 @@ export const ChooseCoverType = () => {
             gap: 12,
           }}
         >
-          {/* <BorderGradientButton
-            title="Choisir une image"
-            onPress={handlePickUserImage}
-          /> */}
+          <BorderGradientButton
+            title="Choisir l’image centrale"
+            onPress={handlePickCenterImage}
+          />
           <GradientButton
             title="Voir ma pochette"
             onPress={handleShowCover}

src/screens/cover/PouchReady.js

@@ -40,6 +40,7 @@ const PouchReady = () => {
       ? selectedProject.userName.trim()
       : currentUserData?.userName || 'MusicLand'
   const profilePictureURL = currentUserData?.profilePictureURL || null
+  const centerImageURL = selectedProject?.coverCenterImageURL || profilePictureURL
 
   const selectedOption = useMemo(() => {
     if (!coverUrl) {
@@ -119,7 +120,7 @@ const PouchReady = () => {
         }
         const coverBlob = await createMusiclandPlaybackCover({
           artistName,
-          profilePictureURL,
+          profilePictureURL: centerImageURL,
         })
         const storagePath = `users/${userId}/projects/${selectedProjectId}/cover-musicland-playbacker.png`
         const { resultURI } = await uploadFileToFirebase({
@@ -171,7 +172,7 @@ const PouchReady = () => {
   }, [
     artistName,
     coverUrl,
-    profilePictureURL,
+    centerImageURL,
     selectedOption,
     selectedProject,
     selectedProjectId,
@@ -184,12 +185,16 @@ const PouchReady = () => {
       <View style={styles.pageContent}>
         <CreateLyricsHeader
           title="Ta pochette MusicLand"
-          subTitle="Ta photo de profil et ton nom d’artiste apparaissent automatiquement."
+          subTitle={
+            selectedProject?.coverCenterImageURL
+              ? "L’image choisie et ton nom d’artiste apparaissent automatiquement."
+              : "Ta photo de profil et ton nom d’artiste apparaissent automatiquement."
+          }
         />
         <View style={[styles.previewArea, Style.containerCenter]}>
           <MusiclandPlaybackCover
             artistName={artistName}
-            profilePictureURL={profilePictureURL}
+            profilePictureURL={centerImageURL}
             coverUrl={coverUrl}
             style={isWeb ? styles.coverWeb : styles.coverMobile}
           />