new project modal & seperate playback and music likes

src/screens/Library/components/BackTracks.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import {
   FlatList,
   Image,
@@ -7,6 +7,7 @@ import {
   View,
   useWindowDimensions,
 } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
 import GradientButton from "../../../components/GradientButton";
 import useLayoutType from "../../../hooks/useLayoutType";
 import { Routes } from "../../../navigation";
@@ -29,7 +30,10 @@ const BackTracks = () => {
     0,
     Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns)
   );
-  console.log("BackTracks items:", items);
+
+  const openPlaybackPicker = useCallback(() => {
+    SheetManager.show("PlaybackPicker");
+  }, []);
 
   return (
     <CardContainer
@@ -41,7 +45,7 @@ const BackTracks = () => {
           liked: false,
         })
       }
-      onPressPlus={() => navigate(Routes.WritingLyrics)}
+      onPressPlus={openPlaybackPicker}
     >
       <View>
         {items.length > 0 ? (
@@ -85,7 +89,7 @@ const BackTracks = () => {
             </Text>
             <GradientButton
               containerStyle={{ padding: 2 }}
-              onPress={() => navigate(Routes.WritingLyrics)}
+              onPress={openPlaybackPicker}
               title="     Créer un playback"
             ></GradientButton>
           </View>

src/screens/Library/components/MusicCard.js

@@ -13,7 +13,7 @@ import { responsiveWidth } from "react-native-responsive-dimensions";
 import { useGlobal } from "reactn";
 import { icons, img } from "../../../assets";
 import PressableScale from "../../../components/PressableScale";
-import { arrayRemove, arrayUnion, projectsRef } from "../../../config/firebase";
+import { LIKE_TARGET, toggleProjectLike } from "../../../utils/likes";
 import { Palette, Style } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
 import { size } from "../../../styles/Style";
@@ -26,6 +26,7 @@ const MusicCard = ({
   imageUri = null,
   projectId = null,
   likedBy = [],
+  likeTarget = LIKE_TARGET.SONG,
 }) => {
   const [currentUID] = useGlobal("currentUID");
   const [selected, setSelected] = useState(false);
@@ -58,8 +59,11 @@ const MusicCard = ({
     const next = !selected;
     setSelected(next);
     try {
-      await projectsRef.doc(projectId).update({
-        likedBy: next ? arrayUnion(currentUID) : arrayRemove(currentUID),
+      await toggleProjectLike({
+        projectId,
+        target: likeTarget,
+        currentUID,
+        next,
       });
     } catch (e) {
       // rollback on failure