[feat]: fetchTop5Tracks on FavoriteSongs search & fix some icon

llucasspot · Jan 21, 2024 · 0417d7d · 0417d7d
1 parent f400121
commit 0417d7d
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 15 deletions.
diff --git a/expo-boomboomapp/src/components/RegisterStepper/RegisterStepper.tsx b/expo-boomboomapp/src/components/RegisterStepper/RegisterStepper.tsx
@@ -48,7 +48,7 @@ export function RegisterStepper<T extends object>({
   const I18n = languageService.useTranslation();
   const nestedNavigationRef =
     createNavigationContainerRef<RegistrationStackScreenParamsList>();
-  const [step, setStep] = useState<number>(1);
+  const [step, setStep] = useState<number>(0);
   const [disableSubmit, setDisableSubmit] = useState<boolean>(true);
 
   const stepperLayoutCallback = useRef({
@@ -73,8 +73,8 @@ export function RegisterStepper<T extends object>({
     await stepperLayoutCallback.current.value({ navigateOnNextStep });
   };
 
-  const isLastStep = step === numberOfStep;
-  const progress = step / numberOfStep;
+  const isLastStep = step === numberOfStep - 1;
+  const progress = step / (numberOfStep - 1);
 
   const coreStyles = useCoreStyles();
   const styles = useEStyles({
@@ -117,9 +117,11 @@ export function RegisterStepper<T extends object>({
         <Progressheader onPressBack={onPressBack} progress={progress} />
         <View>
           <Text style={{ ...coreStyles.P, ...styles.stepTitle }}>
-            {I18n.t("common.stepperHeader", { step, numberOfStep })}
+            {I18n.t("common.stepperHeader", { step: step + 1, numberOfStep })}
+          </Text>
+          <Text style={{ ...coreStyles.H2 }}>
+            {I18n.t(`component.RegisterStepper.step.${step}.title`)}
           </Text>
-          <Text style={{ ...coreStyles.H2 }}>Upload profile picture</Text>
         </View>
       </View>
     );

diff --git a/expo-boomboomapp/src/components/RegisterStepper/steps/FavoriteSongs.tsx b/expo-boomboomapp/src/components/RegisterStepper/steps/FavoriteSongs.tsx
@@ -1,8 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { Modal, ScrollView, Text, TouchableOpacity, View } from "react-native";
 
 import { ProfileApiServiceI } from "../../../api/ProfileApiService/ProfileApiServiceI";
-import { Track } from "../../../api/SpotifyApiService/SpotifyApiServiceI";
+import {
+  SpotifyApiServiceI,
+  Track,
+} from "../../../api/SpotifyApiService/SpotifyApiServiceI";
 import useEStyles from "../../../hooks/useEStyles";
 import {
   RegisterStackParamsList,
@@ -18,9 +22,6 @@ import { SongCard } from "../../SongCard";
 import { SongPicker } from "../../SongPicker";
 import { StepProps } from "../RegisterStepper";
 
-// TODO use styles
-const CONTENT_PADDING = 20;
-
 export default function FavoriteSongs({
   setStepperLayoutCallback,
   setDisableSubmit,
@@ -32,7 +33,20 @@ export default function FavoriteSongs({
   const profileApiService = getGlobalInstance<ProfileApiServiceI>(
     ServiceInterface.ProfileApiServiceI,
   );
+  const spotifyApiService = getGlobalInstance<SpotifyApiServiceI>(
+    ServiceInterface.SpotifyApiServiceI,
+  );
   const [mySongs, setMySongs] = useState<Track[]>([]);
+  const { data: top5Tracks } = useQuery({
+    queryKey: [spotifyApiService.fetchTop5Tracks.name],
+    queryFn: () => spotifyApiService.fetchTop5Tracks(),
+  });
+
+  useEffect(() => {
+    if (top5Tracks) {
+      setMySongs(top5Tracks);
+    }
+  }, [top5Tracks]);
 
   const [pickSongModalVisible, setPickSongModalVisible] = useState(false);
 
@@ -83,7 +97,7 @@ export default function FavoriteSongs({
   }, []);
 
   useEffect(() => {
-    if (mySongs.length === 4) {
+    if (mySongs.length === 5) {
       setDisableSubmit(false);
     }
   }, [mySongs]);
@@ -105,8 +119,6 @@ export default function FavoriteSongs({
       <View
         style={{
           flex: 1,
-          paddingHorizontal: CONTENT_PADDING,
-          paddingVertical: 15,
         }}
       >
         <TouchableOpacity
@@ -122,7 +134,7 @@ export default function FavoriteSongs({
               ? "Add a new song..."
               : "Remove a song before adding a new one"}
           </Text>
-          <BaseButton color="$primaryColor" icon="arrow-left" />
+          <BaseButton color="$primaryColor" icon="magnify" />
         </TouchableOpacity>
 
         <ScrollView style={{ marginTop: 15 }}>
@@ -134,7 +146,7 @@ export default function FavoriteSongs({
                 icon={() => (
                   <BaseButton
                     color="$primaryColor"
-                    icon="arrow-left"
+                    icon="check"
                     onPress={() => removeSong(song.name)}
                   />
                 )}

diff --git a/expo-boomboomapp/src/components/SongCard.tsx b/expo-boomboomapp/src/components/SongCard.tsx
@@ -31,7 +31,7 @@ export function SongCard({ song, icon }: SongCardProps) {
   });
 
   return (
-    <View key={song.trackId} style={coreStyles.SONG_CARD}>
+    <View style={coreStyles.SONG_CARD}>
       <View style={styles.cardSubContainer}>
         {song.image && (
           <Image

diff --git a/expo-boomboomapp/src/services/LanguageService/Languages/en.ts b/expo-boomboomapp/src/services/LanguageService/Languages/en.ts
@@ -27,6 +27,19 @@ const en: LanguageTranslationType = {
     UserProfileForm: {
       errorMessage: "This is required.",
     },
+    RegisterStepper: {
+      step: {
+        "0": {
+          title: "Upload profile picture",
+        },
+        "1": {
+          title: "Tell us more about you",
+        },
+        "2": {
+          title: "Add favorites songs",
+        },
+      },
+    },
   },
   screen: {
     SignInScreen: {

diff --git a/expo-boomboomapp/src/services/LanguageService/Languages/fr.ts b/expo-boomboomapp/src/services/LanguageService/Languages/fr.ts
@@ -27,6 +27,19 @@ const fr: LanguageTranslationType = {
     UserProfileForm: {
       errorMessage: "Le champ est requis.",
     },
+    RegisterStepper: {
+      step: {
+        "0": {
+          title: "Télécharge ta photo de profil",
+        },
+        "1": {
+          title: "Dis-nous en plus sur toi",
+        },
+        "2": {
+          title: "Ajoute tes chansons favorites",
+        },
+      },
+    },
   },
   screen: {
     SignInScreen: {

diff --git a/expo-boomboomapp/src/services/LanguageService/beans/LanguageTranslationType.ts b/expo-boomboomapp/src/services/LanguageService/beans/LanguageTranslationType.ts
@@ -1,5 +1,9 @@
 import { Gender } from "../../UserService/userServiceI";
 
+type RegisterStepperStep = {
+  title: string;
+};
+
 type LanguageTranslationType = {
   common: {
     matches: string;
@@ -24,6 +28,13 @@ type LanguageTranslationType = {
     UserProfileForm: {
       errorMessage: string;
     };
+    RegisterStepper: {
+      step: {
+        "0": RegisterStepperStep;
+        "1": RegisterStepperStep;
+        "2": RegisterStepperStep;
+      };
+    };
   };
   screen: {
     SignInScreen: {