end of home

src/screens/NewMusicOptions.js

@@ -1,18 +1,19 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { BlurView } from "expo-blur";
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { Image, Platform, Pressable, Text, View } from "react-native";
 import { ai, background } from "../assets";
 import Page from "../layouts/Page";
-import { Routes } from "../navigation";
 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",
     img: ai.nathalie,
     bg: background.writingBG,
     label: "Nathalie",
@@ -20,6 +21,7 @@ const CREATE_DATA = [
     type: "Songwriter",
   },
   {
+    stageKey: "beatmaker",
     img: ai.theo,
     bg: background.studioBG,
     label: "Theo",
@@ -27,6 +29,7 @@ const CREATE_DATA = [
     type: "Beatmaker",
   },
   {
+    stageKey: "designer",
     img: ai.bena,
     bg: background.productionBG,
     label: "Bena",
@@ -34,6 +37,7 @@ const CREATE_DATA = [
     type: "Designer",
   },
   {
+    stageKey: "director",
     img: ai.john,
     bg: background.playbackBG,
     label: "John",
@@ -44,69 +48,32 @@ const CREATE_DATA = [
 
 const NewMusicOptions = () => {
   const { selectedProject } = useUserData();
+  const stageStates = useMemo(
+    () => getCreationStageStates(selectedProject),
+    [selectedProject],
+  );
 
-  // Lock rules per option index:
-  // 0 (Songwriter): allowed if no project OR no songUrl
-  // 1 (Beatmaker): allowed only if lyrics exist and no songUrl
-  // 2 (Designer): allowed only if songUrl exists and no coverUrl
-  // 3 (Director): allowed only if coverUrl exists
-  const isLocked = (index) => {
-    const songUrl = selectedProject?.songUrl || null;
-    const coverUrl = selectedProject?.coverUrl || null;
-    const playbackUrl = selectedProject?.songUrl || null;
-    const lyricsLen = Array.isArray(selectedProject?.lyrics)
-      ? selectedProject.lyrics.length
-      : 0;
+  const stageStateByKey = useMemo(() => {
+    return stageStates.reduce((acc, stage) => {
+      acc[stage.key] = stage;
+      return acc;
+    }, {});
+  }, [stageStates]);
 
-    switch (index) {
-      case 0: // Songwriter
-        return !!songUrl; // locked if a song already exists
-      case 1: // Beatmaker
-        return !(lyricsLen > 0 && !songUrl);
-      case 2: // Designer
-        return !(!!songUrl && !!playbackUrl);
-      case 3: // Director
-        return !!!coverUrl;
-      default:
-        return true;
-    }
-  };
-
-  const onPressOption = (index, item) => {
-    if (isLocked(index)) return;
-    switch (index) {
-      case 0:
-        if (selectedProject?.lyrics?.length) {
-          navigate(Routes.Lyrics);
-        } else {
-          navigate(Routes.WritingLyrics);
-        }
-        break;
-      case 1:
-        if (selectedProject?.musicStatus === "GENERATING") {
-          navigate(Routes.GeneratingSong);
-        } else if (selectedProject?.musicStatus === "GENERATED") {
-          navigate(Routes.SongReady);
-        } else {
-          navigate(Routes.Compose);
-        }
-        break;
-      case 2:
-        if (selectedProject?.coverUrl) {
-          navigate(Routes.ValidateCover);
-        } else {
-          navigate(Routes.ChooseCoverType);
-        }
-        break;
-      case 3:
-        console.log("test");
-        navigate(Routes.Playback, {
-          project: selectedProject,
-        });
-      default:
-        break;
-    }
-  };
+  const onPressOption = useCallback(
+    (stageKey) => {
+      const stageState = stageStateByKey[stageKey];
+      if (!stageState || stageState.isLocked) {
+        return;
+      }
+      const action = getStageAction(stageKey, selectedProject);
+      if (!action?.route) {
+        return;
+      }
+      navigate(action.route, action.params);
+    },
+    [stageStateByKey, selectedProject],
+  );
 
   return (
     <Page
@@ -116,10 +83,13 @@ const NewMusicOptions = () => {
       scrollEnabled={true}
     >
       <View style={{ gap: 10 }}>
-        {CREATE_DATA.map((item, index) => {
-          const locked = isLocked(index);
+        {CREATE_DATA.map((item) => {
+          const locked = stageStateByKey[item.stageKey]?.isLocked ?? true;
           return (
-            <Pressable key={index} onPress={() => onPressOption(index, item)}>
+            <Pressable
+              key={item.stageKey}
+              onPress={() => onPressOption(item.stageKey)}
+            >
               <BlurView
                 tint="dark"
                 intensity={Platform.OS !== "ios" ? 10 : 20}