feat: fixes and formatter

src/screens/LandingPage.js

@@ -1,89 +1,82 @@
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useNavigation } from "@react-navigation/native";
-import { useCallback, useEffect, useState } from "react";
-import {
-  Image,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { background, icons } from "../assets";
-import FullscreenIntroVideo from "../components/FullscreenIntroVideo";
-import GradientButton from "../components/GradientButton";
-import { videosRef } from "../config/firebase";
-import useDataFromRef from "../hooks/useDataFromRef";
-import Page from "../layouts/Page";
-import { Routes } from "../navigation";
-import { useUser } from "../providers/UserDataProvider";
-import { Palette } from "../styles";
-import { FONT_FAMILY } from "../styles/Fonts";
-import { BlurView } from "expo-blur";
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { useNavigation } from '@react-navigation/native'
+import { useCallback, useEffect, useState } from 'react'
+import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { background, icons } from '../assets'
+import FullscreenIntroVideo from '../components/FullscreenIntroVideo'
+import GradientButton from '../components/GradientButton'
+import { videosRef } from '../config/firebase'
+import useDataFromRef from '../hooks/useDataFromRef'
+import Page from '../layouts/Page'
+import { Routes } from '../navigation'
+import { useUser } from '../providers/UserDataProvider'
+import { Palette } from '../styles'
+import { FONT_FAMILY } from '../styles/Fonts'
+import { BlurView } from 'expo-blur'
 
-const LANGUAGE_STORAGE_KEY = "preferredLanguage";
+const LANGUAGE_STORAGE_KEY = 'preferredLanguage'
 
 export default function LandingPage() {
-  const navigation = useNavigation();
-  const { currentUID } = useUser();
-  const [videoUrl, setVideoUrl] = useState(null);
-  const [selectedLanguage, setSelectedLanguage] = useState(null);
-  const [showFreeCreditsPopup, setShowFreeCreditsPopup] = useState(false);
-  const isAuthenticated = !!currentUID;
+  const navigation = useNavigation()
+  const { currentUID } = useUser()
+  const [videoUrl, setVideoUrl] = useState(null)
+  const [selectedLanguage, setSelectedLanguage] = useState(null)
+  const [showFreeCreditsPopup, setShowFreeCreditsPopup] = useState(false)
+  const isAuthenticated = !!currentUID
 
   const handleSelectLanguage = useCallback((language) => {
-    setSelectedLanguage(language);
+    setSelectedLanguage(language)
     AsyncStorage.setItem(LANGUAGE_STORAGE_KEY, language).catch((error) => {
-      console.warn("LandingPage: failed to persist language", error);
-    });
-  }, []);
+      console.warn('LandingPage: failed to persist language', error)
+    })
+  }, [])
 
   const handleLaunchAdventure = useCallback(() => {
     if (isAuthenticated) {
       navigation.navigate(Routes.BottomTab, {
         screen: Routes.HomeStack,
         params: { screen: Routes.Home },
-      });
-      return;
+      })
+      return
     }
-    navigation.navigate(Routes.Register);
-  }, [isAuthenticated, navigation]);
+    navigation.navigate(Routes.Register)
+  }, [isAuthenticated, navigation])
 
   const handleOpenSubscriptions = useCallback(() => {
-    navigation.navigate(Routes.Payments);
-  }, [navigation]);
+    navigation.navigate(Routes.Payments)
+  }, [navigation])
 
   const { data: video } = useDataFromRef({
-    ref: videosRef.doc("fr"),
+    ref: videosRef.doc('fr'),
     simpleRef: true,
-  });
+  })
 
   useEffect(() => {
-    let isMounted = true;
+    let isMounted = true
     AsyncStorage.getItem(LANGUAGE_STORAGE_KEY)
       .then((storedLanguage) => {
         if (storedLanguage && isMounted) {
-          setSelectedLanguage(storedLanguage);
+          setSelectedLanguage(storedLanguage)
         }
       })
       .catch((error) => {
-        console.warn("LandingPage: failed to load language", error);
-      });
+        console.warn('LandingPage: failed to load language', error)
+      })
 
     return () => {
-      isMounted = false;
-    };
-  }, []);
+      isMounted = false
+    }
+  }, [])
 
   useEffect(() => {
     if (currentUID) {
-      setShowFreeCreditsPopup(false);
-      return;
+      setShowFreeCreditsPopup(false)
+      return
     }
     if (selectedLanguage) {
-      setShowFreeCreditsPopup(true);
+      setShowFreeCreditsPopup(true)
     }
-  }, [currentUID, selectedLanguage]);
+  }, [currentUID, selectedLanguage])
 
   return (
     <>
@@ -96,8 +89,8 @@ export default function LandingPage() {
         <View
           style={{
             flex: 1,
-            justifyContent: "center",
-            alignItems: "center",
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
         >
           <View style={styles.content}>
@@ -105,13 +98,13 @@ export default function LandingPage() {
               <View style={styles.languageRow}>
                 <TouchableOpacity
                   style={[styles.languageButton]}
-                  onPress={() => handleSelectLanguage("fr")}
+                  onPress={() => handleSelectLanguage('fr')}
                 >
                   <Text style={styles.languageText}>🇫🇷 Français</Text>
                 </TouchableOpacity>
                 <TouchableOpacity
                   style={[styles.languageButton]}
-                  onPress={() => handleSelectLanguage("en")}
+                  onPress={() => handleSelectLanguage('en')}
                 >
                   <Text style={styles.languageText}>🇬🇧 English</Text>
                 </TouchableOpacity>
@@ -127,11 +120,7 @@ export default function LandingPage() {
                 <GradientButton
                   title="Présentation de Musicland"
                   onPress={() =>
-                    setVideoUrl(
-                      Platform.OS === "web"
-                        ? video?.landingWeb
-                        : video?.landing,
-                    )
+                    setVideoUrl(Platform.OS === 'web' ? video?.landingWeb : video?.landing)
                   }
                   containerStyle={styles.actionButton}
                 />
@@ -139,9 +128,9 @@ export default function LandingPage() {
                   title={
                     isAuthenticated
                       ? "Continuer l'aventure"
-                      : Platform.OS === "web"
+                      : Platform.OS === 'web'
                         ? "Je me lance dans l'aventure"
-                        : "Commencer"
+                        : 'Commencer'
                   }
                   onPress={handleLaunchAdventure}
                   containerStyle={styles.actionButton}
@@ -157,12 +146,8 @@ export default function LandingPage() {
                   <BlurView style={styles.freeCreditsCard}>
                     <View style={styles.freeCreditsContent}>
                       <View style={styles.freeCreditsTextContainer}>
-                        <Text style={styles.freeCreditsTitle}>
-                          10 crédits offert
-                        </Text>
-                        <Text style={styles.freeCreditsSubtitle}>
-                          pour 1 parcours gratuit !
-                        </Text>
+                        <Text style={styles.freeCreditsTitle}>10 crédits offert</Text>
+                        <Text style={styles.freeCreditsSubtitle}>pour 1 parcours gratuit !</Text>
                       </View>
                       <TouchableOpacity
                         onPress={() => setShowFreeCreditsPopup(false)}
@@ -170,10 +155,7 @@ export default function LandingPage() {
                         accessibilityLabel="Fermer le message des crédits offerts"
                         style={styles.freeCreditsClose}
                       >
-                        <Image
-                          source={icons.close}
-                          style={styles.freeCreditsCloseIcon}
-                        />
+                        <Image source={icons.close} style={styles.freeCreditsCloseIcon} />
                       </TouchableOpacity>
                     </View>
                   </BlurView>
@@ -183,26 +165,22 @@ export default function LandingPage() {
           </View>
         </View>
       </Page>
-      <FullscreenIntroVideo
-        url={videoUrl}
-        visible={!!videoUrl}
-        onClose={() => setVideoUrl(null)}
-      />
+      <FullscreenIntroVideo url={videoUrl} visible={!!videoUrl} onClose={() => setVideoUrl(null)} />
     </>
-  );
+  )
 }
 
 const styles = StyleSheet.create({
   content: {
-    width: "100%",
+    width: '100%',
     maxWidth: 360,
-    alignItems: "center",
+    alignItems: 'center',
     gap: 32,
   },
   languageRow: {
-    flexDirection: "row",
+    flexDirection: 'row',
     gap: 16,
-    justifyContent: "center",
+    justifyContent: 'center',
   },
   languageButton: {
     borderRadius: 14,
@@ -212,7 +190,7 @@ const styles = StyleSheet.create({
     paddingVertical: 12,
     paddingHorizontal: 18,
     minWidth: 140,
-    alignItems: "center",
+    alignItems: 'center',
   },
   languageText: {
     fontSize: 16,
@@ -220,23 +198,23 @@ const styles = StyleSheet.create({
     fontFamily: FONT_FAMILY.InterSemiBold,
   },
   actions: {
-    width: "100%",
+    width: '100%',
     maxWidth: 320,
     gap: 16,
   },
   actionButton: {
-    width: "100%",
+    width: '100%',
   },
   freeCreditsCard: {
-    width: "100%",
+    width: '100%',
     borderRadius: 18,
     paddingVertical: 14,
     paddingHorizontal: 20,
-    overflow: "hidden"
+    overflow: 'hidden',
   },
   freeCreditsContent: {
-    flexDirection: "row",
-    alignItems: "center",
+    flexDirection: 'row',
+    alignItems: 'center',
     gap: 12,
   },
   freeCreditsTextContainer: {
@@ -262,4 +240,4 @@ const styles = StyleSheet.create({
     height: 14,
     tintColor: Palette.grayMid,
   },
-});
+})