feat: fixes and formatter

src/screens/Login.js

@@ -1,33 +1,33 @@
 /* eslint-disable react/display-name */
-import * as AppleAuthentication from "expo-apple-authentication";
-import React, { useCallback, useState } from "react";
-import { ActivityIndicator, Pressable, StyleSheet, Text, View } from "react-native";
-import Svg, { Path } from "react-native-svg";
-import { useGlobal } from "reactn";
-import { handleFirebaseError } from "../actions/signupActions.js";
-import { background } from "../assets";
-import GradientButton from "../components/GradientButton.js";
-import { Input } from "../components/Input.js";
-import ItemContainer from "../components/ItemContainer/ItemContainer";
-import firebase from "../config/firebase";
-import useSocialAuth from "../hooks/useSocialAuth";
-import { isWeb } from "../hooks/useLayoutType";
-import Page from "../layouts/Page.js";
-import { Routes } from "../navigation";
-import { navigate } from "../navigation/NavigationService.js";
-import { FONT_FAMILY } from "../styles/Fonts.js";
-import Palette from "../styles/Palette.js";
+import * as AppleAuthentication from 'expo-apple-authentication'
+import React, { useCallback, useState } from 'react'
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+import { useGlobal } from 'reactn'
+import { handleFirebaseError } from '../actions/signupActions.js'
+import { background } from '../assets'
+import GradientButton from '../components/GradientButton.js'
+import { Input } from '../components/Input.js'
+import ItemContainer from '../components/ItemContainer/ItemContainer'
+import firebase from '../config/firebase'
+import useSocialAuth from '../hooks/useSocialAuth'
+import { isWeb } from '../hooks/useLayoutType'
+import Page from '../layouts/Page.js'
+import { Routes } from '../navigation'
+import { navigate } from '../navigation/NavigationService.js'
+import { FONT_FAMILY } from '../styles/Fonts.js'
+import Palette from '../styles/Palette.js'
 
 export default ({ navigation }) => {
-  const [, setTooltip] = useGlobal("_tooltip");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [loading, setLoading] = useState(false);
+  const [, setTooltip] = useGlobal('_tooltip')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState(false)
   const afterLoginNavigate = useCallback(async () => {
-    const uid = firebase.auth().currentUser?.uid;
-    if (!uid) throw new Error("Aucun utilisateur après connexion");
-    navigation.reset({ index: 0, routes: [{ name: Routes.BottomTab }] });
-  }, [navigation]);
+    const uid = firebase.auth().currentUser?.uid
+    if (!uid) throw new Error('Aucun utilisateur après connexion')
+    navigation.reset({ index: 0, routes: [{ name: Routes.BottomTab }] })
+  }, [navigation])
 
   const {
     signInWithGoogle,
@@ -36,47 +36,42 @@ export default ({ navigation }) => {
     isLoading: socialLoading,
   } = useSocialAuth({
     onSuccess: afterLoginNavigate,
-  });
+  })
 
-  const isBusy = loading || socialLoading;
+  const isBusy = loading || socialLoading
 
   const onLogin = async () => {
     try {
-      setLoading(true);
-      await firebase.auth().signInWithEmailAndPassword(email.trim(), password);
-      await afterLoginNavigate();
+      setLoading(true)
+      await firebase.auth().signInWithEmailAndPassword(email.trim(), password)
+      await afterLoginNavigate()
     } catch (e) {
-      console.log("Login error", e?.message);
+      console.log('Login error', e?.message)
       const message =
-        e?.code && e.code.startsWith("auth/")
+        e?.code && e.code.startsWith('auth/')
           ? handleFirebaseError(e.code)
-          : e?.message || "Connexion impossible";
-      setTooltip({ text: message, type: "error" });
+          : e?.message || 'Connexion impossible'
+      setTooltip({ text: message, type: 'error' })
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   return (
     <Page
       width={isWeb ? 600 : null}
       backgroundImg={isWeb ? background.loginBgWeb : background.homeBG}
       headerType="NAVIGATION"
-      title={isWeb ? "" : "Connexion"}
+      title={isWeb ? '' : 'Connexion'}
       hideBackButton
     >
       <View style={styles.screen}>
-        <ItemContainer
-          height={isWeb ? 520 : 550}
-          disableKeyboardHeight
-          style={styles.loginCard}
-        >
+        <ItemContainer height={isWeb ? 520 : 550} disableKeyboardHeight style={styles.loginCard}>
           <View style={styles.cardContent}>
             <View style={styles.greetingSection}>
-              <Text style={styles.greetingTitle}>{"Bonjour !"}</Text>
+              <Text style={styles.greetingTitle}>{'Bonjour !'}</Text>
               <Text style={styles.greetingSubtitle}>
-                Nous sommes heureux de te revoir parmi nous. Prêt·e à reprendre
-                le rythme ?
+                Nous sommes heureux de te revoir parmi nous. Prêt·e à reprendre le rythme ?
               </Text>
             </View>
             <View style={styles.formFields}>
@@ -99,10 +94,7 @@ export default ({ navigation }) => {
                 />
                 <Pressable
                   onPress={() => navigate(Routes.ForgotPassword)}
-                  style={({ pressed }) => [
-                    styles.linkPressable,
-                    pressed && styles.linkPressed,
-                  ]}
+                  style={({ pressed }) => [styles.linkPressable, pressed && styles.linkPressed]}
                 >
                   <Text style={styles.linkText}>Mot de passe oublié ?</Text>
                 </Pressable>
@@ -111,8 +103,8 @@ export default ({ navigation }) => {
             <GradientButton
               title="Se connecter"
               containerStyle={{
-                width: "90%",
-                alignSelf: "center",
+                width: '90%',
+                alignSelf: 'center',
               }}
               onPress={onLogin}
               disabled={isBusy || !email || !password}
@@ -131,37 +123,31 @@ export default ({ navigation }) => {
                 loading={socialLoading}
               />
             </View>
-
           </View>
         </ItemContainer>
         <View style={styles.bottomFooter}>
           <Text style={styles.bottomFooterText}>
-            Tu n'as pas de compte ?{" "}
-            <Text
-              style={styles.bottomFooterLink}
-              onPress={() => navigate(Routes.Register)}
-            >
+            Tu n'as pas de compte ?{' '}
+            <Text style={styles.bottomFooterLink} onPress={() => navigate(Routes.Register)}>
               Créer un compte
             </Text>
           </Text>
         </View>
       </View>
     </Page>
-  );
-};
+  )
+}
 
 const AppleAuthButton = ({ onPress, disabled, loading }) => {
   if (isWeb) {
-    return null;
+    return null
   }
 
   return (
     <View style={styles.nativeButtonWrapper}>
       <AppleAuthentication.AppleAuthenticationButton
         buttonType={AppleAuthentication.AppleAuthenticationButtonType.CONTINUE}
-        buttonStyle={
-          AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
-        }
+        buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.WHITE}
         style={styles.nativeButton}
         cornerRadius={12}
         onPress={onPress}
@@ -173,8 +159,8 @@ const AppleAuthButton = ({ onPress, disabled, loading }) => {
         </View>
       ) : null}
     </View>
-  );
-};
+  )
+}
 
 const GoogleAuthButton = ({ onPress, disabled, loading }) => (
   <Pressable
@@ -199,28 +185,28 @@ const GoogleAuthButton = ({ onPress, disabled, loading }) => (
       )}
     </View>
   </Pressable>
-);
+)
 
 const styles = StyleSheet.create({
   screen: {
     flex: 1,
-    width: "100%",
-    justifyContent: "center",
-    alignItems: "center",
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   loginCard: {
-    width: "100%",
+    width: '100%',
     maxWidth: 520,
   },
   cardContent: {
     gap: 28,
     paddingTop: 8,
     paddingHorizontal: 5,
-    width: "100%",
+    width: '100%',
   },
   greetingSection: {
     gap: 6,
-    width: "100%",
+    width: '100%',
   },
   greetingTitle: {
     fontSize: 22,
@@ -235,14 +221,14 @@ const styles = StyleSheet.create({
   },
   formFields: {
     gap: 20,
-    width: "100%",
+    width: '100%',
   },
   passwordField: {
     gap: 8,
-    width: "100%",
+    width: '100%',
   },
   linkPressable: {
-    alignSelf: "flex-end",
+    alignSelf: 'flex-end',
   },
   linkPressed: {
     opacity: 0.6,
@@ -251,7 +237,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterRegular,
-    textAlign: "right",
+    textAlign: 'right',
   },
   bottomFooter: {
     marginTop: 16,
@@ -261,55 +247,55 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: Palette.white,
     fontFamily: FONT_FAMILY.HelveticaNeueRegular,
-    textAlign: "center",
+    textAlign: 'center',
   },
   bottomFooterLink: {
     fontFamily: FONT_FAMILY.InterSemiBold,
     color: Palette.white,
   },
   socialWrapper: {
-    width: "100%",
+    width: '100%',
     gap: 16,
-    alignItems: "center",
+    alignItems: 'center',
   },
   socialButton: {
-    alignSelf: "center",
+    alignSelf: 'center',
     borderRadius: 12,
-    width: "90%",
+    width: '90%',
     backgroundColor: Palette.white,
     borderWidth: 1,
-    borderColor: "#E3E7EF",
+    borderColor: '#E3E7EF',
     paddingVertical: 12,
     paddingHorizontal: 20,
-    shadowColor: "rgba(12, 6, 34, 0.08)",
+    shadowColor: 'rgba(12, 6, 34, 0.08)',
     shadowOffset: { width: 0, height: 8 },
     shadowOpacity: 0.3,
     shadowRadius: 16,
     elevation: 2,
   },
   socialButtonPressed: {
-    backgroundColor: "#F4F7FF",
+    backgroundColor: '#F4F7FF',
   },
   socialButtonDisabled: {
     opacity: 0.7,
   },
   socialButtonContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
     gap: 12,
   },
   socialIconContainer: {
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: 'center',
+    alignItems: 'center',
     width: 28,
     height: 28,
   },
   socialButtonText: {
     flex: 1,
-    textAlign: "center",
+    textAlign: 'center',
     fontSize: 15,
-    color: "#202124",
+    color: '#202124',
     fontFamily: FONT_FAMILY.InterSemiBold,
   },
   socialRightSpacer: {
@@ -317,21 +303,21 @@ const styles = StyleSheet.create({
     height: 24,
   },
   nativeButtonWrapper: {
-    alignSelf: "center",
-    width: "90%",
+    alignSelf: 'center',
+    width: '90%',
     height: 50,
-    justifyContent: "center",
+    justifyContent: 'center',
   },
   nativeButton: {
-    width: "100%",
+    width: '100%',
     height: 50,
   },
   nativeLoadingOverlay: {
     ...StyleSheet.absoluteFillObject,
-    alignItems: "center",
-    justifyContent: "center",
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-});
+})
 
 const GoogleLogo = () => (
   <Svg width={24} height={24} viewBox="0 0 18 18">
@@ -352,4 +338,4 @@ const GoogleLogo = () => (
       d="M9 3.54c1.32 0 2.5.45 3.43 1.33l2.57-2.57C13.47.9 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.02 2.32A5.31 5.31 0 0 1 9 3.54Z"
     />
   </Svg>
-);
+)