feat: fixes and formatter

src/screens/NewMusicOptions.js

@@ -1,100 +1,94 @@
-import FontAwesome from "@expo/vector-icons/FontAwesome";
-import { BlurView } from "expo-blur";
-import React, { useCallback, useMemo } from "react";
-import { Image, Platform, Pressable, Text, View } from "react-native";
-import { ai, background, cardsImg } from "../assets";
-import Page from "../layouts/Page";
-import { navigate } from "../navigation/NavigationService";
-import { useUserData } from "../providers/UserDataProvider";
-import { getCreationStageStates, getStageAction } from "../utils/projectStages";
-import { Palette } from "../styles";
-import { FONT_FAMILY } from "../styles/Fonts";
-import palette from "../styles/Palette";
+import FontAwesome from '@expo/vector-icons/FontAwesome'
+import { BlurView } from 'expo-blur'
+import React, { useCallback, useMemo } from 'react'
+import { Image, Platform, Pressable, Text, View } from 'react-native'
+import { ai, background, cardsImg } from '../assets'
+import Page from '../layouts/Page'
+import { navigate } from '../navigation/NavigationService'
+import { useUserData } from '../providers/UserDataProvider'
+import { getCreationStageStates, getStageAction } from '../utils/projectStages'
+import { Palette } from '../styles'
+import { FONT_FAMILY } from '../styles/Fonts'
+import palette from '../styles/Palette'
 
 const CREATE_DATA = [
   {
-    stageKey: "songwriter",
+    stageKey: 'songwriter',
     img: ai.nathalie,
     bg: background.writingBG,
-    label: "Nathalie",
-    desc: "Let’s write lyrics together !",
-    type: "Songwriter",
+    label: 'Nathalie',
+    desc: 'Let’s write lyrics together !',
+    type: 'Songwriter',
   },
   {
-    stageKey: "beatmaker",
+    stageKey: 'beatmaker',
     img: ai.theo,
     bg: background.studioBG,
-    label: "Theo",
-    desc: "Come back, when\nyou’ll have lyrics!",
-    type: "Beatmaker",
+    label: 'Theo',
+    desc: 'Come back, when\nyou’ll have lyrics!',
+    type: 'Beatmaker',
   },
   {
-    stageKey: "director",
+    stageKey: 'director',
     img: ai.john,
     bg: background.playbackBG,
-    label: "Theo",
+    label: 'Theo',
     desc: "Theo t'accompagne pour créer ton playback.",
-    type: "Director",
+    type: 'Director',
   },
   {
-    stageKey: "publisher",
+    stageKey: 'publisher',
     img: cardsImg.production,
     bg: background.productionBG2,
-    label: "Publication",
-    desc: "Publions ta vidéo sur YouTube !",
-    type: "Producteur",
+    label: 'Publication',
+    desc: 'Publions ta vidéo sur YouTube !',
+    type: 'Producteur',
   },
-];
+]
 
 const NewMusicOptions = () => {
-  const { selectedProject } = useUserData();
-  const stageStates = useMemo(
-    () => getCreationStageStates(selectedProject),
-    [selectedProject],
-  );
+  const { selectedProject } = useUserData()
+  const stageStates = useMemo(() => getCreationStageStates(selectedProject), [selectedProject])
 
   const stageStateByKey = useMemo(() => {
     return stageStates.reduce((acc, stage) => {
-      acc[stage.key] = stage;
-      return acc;
-    }, {});
-  }, [stageStates]);
+      acc[stage.key] = stage
+      return acc
+    }, {})
+  }, [stageStates])
 
   const onPressOption = useCallback(
     (stageKey) => {
-      const stageState = stageStateByKey[stageKey];
+      const stageState = stageStateByKey[stageKey]
       if (!stageState || stageState.isLocked) {
-        return;
+        return
       }
-      const action = getStageAction(stageKey, selectedProject);
+      const action = getStageAction(stageKey, selectedProject)
       if (!action?.route) {
-        return;
+        return
       }
-      navigate(action.route, action.params);
+      navigate(action.route, action.params)
     },
-    [stageStateByKey, selectedProject],
-  );
+    [stageStateByKey, selectedProject]
+  )
 
   return (
     <Page
       backgroundImg={background.homeBG}
       headerType="NAVIGATION"
-      title={!!selectedProject ? "Continuer la création" : "Nouvelle musique"}
+      title={!!selectedProject ? 'Continuer la création' : 'Nouvelle musique'}
       scrollEnabled={true}
     >
       <View style={{ gap: 10 }}>
         {CREATE_DATA.map((item) => {
-          const locked = stageStateByKey[item.stageKey]?.isLocked ?? true;
+          const locked = stageStateByKey[item.stageKey]?.isLocked ?? true
           return (
-            <Pressable
-              key={item.stageKey}
-              onPress={() => onPressOption(item.stageKey)}
-            >
+            <Pressable key={item.stageKey} onPress={() => onPressOption(item.stageKey)}>
               <BlurView
                 tint="dark"
-                intensity={Platform.OS !== "ios" ? 10 : 20}
+                intensity={Platform.OS !== 'ios' ? 10 : 20}
                 style={{
-                  position: "absolute",
+                  position: 'absolute',
                   zIndex: 1,
                   left: 110,
                   top: 10,
@@ -102,7 +96,7 @@ const NewMusicOptions = () => {
                   paddingHorizontal: 12,
                   borderRadius: 14,
                   borderBottomLeftRadius: 0,
-                  overflow: "hidden",
+                  overflow: 'hidden',
                   backgroundColor: Palette.glass,
                 }}
                 // experimentalBlurMethod={
@@ -131,31 +125,27 @@ const NewMusicOptions = () => {
               <Image
                 source={item.bg}
                 style={{
-                  width: "100%",
+                  width: '100%',
                   height: 152,
                   borderRadius: 20,
-                  position: "absolute",
+                  position: 'absolute',
                   bottom: 0,
                 }}
               />
-              <Image
-                source={item.img}
-                style={{ width: 130, height: 200 }}
-                resizeMode="contain"
-              />
+              <Image source={item.img} style={{ width: 130, height: 200 }} resizeMode="contain" />
               {locked && (
                 <View
                   pointerEvents="none"
                   style={{
-                    position: "absolute",
+                    position: 'absolute',
                     left: 0,
                     right: 0,
                     top: 0,
                     bottom: 0,
-                    backgroundColor: "rgba(0,0,0,0.35)",
+                    backgroundColor: 'rgba(0,0,0,0.35)',
                     borderRadius: 20,
-                    justifyContent: "center",
-                    alignItems: "center",
+                    justifyContent: 'center',
+                    alignItems: 'center',
                   }}
                 >
                   <View
@@ -163,25 +153,21 @@ const NewMusicOptions = () => {
                       width: 36,
                       height: 36,
                       borderRadius: 18,
-                      backgroundColor: "rgba(0,0,0,0.4)",
-                      alignItems: "center",
-                      justifyContent: "center",
+                      backgroundColor: 'rgba(0,0,0,0.4)',
+                      alignItems: 'center',
+                      justifyContent: 'center',
                     }}
                   >
-                    <FontAwesome
-                      name="lock"
-                      size={24}
-                      color={palette.primary}
-                    />
+                    <FontAwesome name="lock" size={24} color={palette.primary} />
                   </View>
                 </View>
               )}
             </Pressable>
-          );
+          )
         })}
       </View>
     </Page>
-  );
-};
+  )
+}
 
-export default NewMusicOptions;
+export default NewMusicOptions