instrumental introduction

src/screens/Writing/CustomizeSongStructure.js

@@ -23,15 +23,14 @@ import {
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 
 const randomSuffix = () => Math.random().toString(36).slice(2, 8);
-const createItemId = (type) => `${type}-${Date.now()}-${randomSuffix()}`;
 const createSortableItem = (type, index = 0) => ({
   id: `${type}-${index}-${randomSuffix()}`,
   type,
   value: type,
 });
 
-const buildInitialItems = (structure = []) =>
-  sanitizeStructureList(structure).map((type, index) =>
+const buildSortableItems = (values = []) =>
+  sanitizeStructureList(values).map((type, index) =>
     createSortableItem(type, index)
   );
 
@@ -42,24 +41,17 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
     [baseStructure]
   );
   const [sortableItems, setSortableItems] = useState(() =>
-    buildInitialItems(sanitizedBase)
+    buildSortableItems(sanitizedBase)
   );
 
   useEffect(() => {
-    setSortableItems((prev) => {
-      const prevTypes = prev.map((item) => item.type);
-      if (
-        prevTypes.length === sanitizedBase.length &&
-        prevTypes.every((type, index) => type === sanitizedBase[index])
-      ) {
-        return prev;
-      }
-      return buildInitialItems(sanitizedBase);
-    });
+    setSortableItems(buildSortableItems(sanitizedBase));
   }, [sanitizedBase]);
 
   useEffect(() => {
-    const values = sortableItems.map((item) => item.type).filter(Boolean);
+    const values = sortableItems
+      .map((item) => item?.type || item?.value)
+      .filter(Boolean);
     onChange?.(values);
   }, [sortableItems, onChange]);
 
@@ -99,20 +91,21 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
 
   const toggleOptionalSegment = (type) => {
     setSortableItems((prev) => {
-      const existsIndex = prev.findIndex((item) => item.type === type);
-      if (existsIndex !== -1) {
-        return prev.filter((item) => item.type !== type);
+      const currentValues = prev.map((item) => item.type || item.value);
+      if (currentValues.includes(type)) {
+        const filtered = currentValues.filter((value) => value !== type);
+        return buildSortableItems(filtered);
       }
       const meta = getSegmentMeta(type);
-      let next = [...prev];
+      let nextValues = [...currentValues];
       if (meta?.exclusiveGroup) {
-        next = next.filter((item) => {
-          const itemMeta = getSegmentMeta(item.type || item.value);
+        nextValues = nextValues.filter((value) => {
+          const itemMeta = getSegmentMeta(value);
           return itemMeta?.exclusiveGroup !== meta.exclusiveGroup;
         });
       }
-      next.push(createSortableItem(type, next.length));
-      return next;
+      nextValues.push(type);
+      return buildSortableItems(nextValues);
     });
   };
 
@@ -182,15 +175,11 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
               customHandle
               scrollableRef={scrollRef}
               onDragEnd={({ data: newData }) => {
-                const next = (newData || []).map((it, index) => {
-                  const nextType = it?.type || it?.value;
-                  return {
-                    id: it?.id || createItemId(nextType || `section-${index}`),
-                    type: nextType,
-                    value: nextType,
-                  };
-                });
-                setSortableItems(next.filter((item) => item.type));
+                const values = (newData || [])
+                  .map((it) => it?.type || it?.value)
+                  .filter(Boolean);
+                const sanitized = sanitizeStructureList(values);
+                setSortableItems(buildSortableItems(sanitized));
               }}
             />
             <FlatList