feat: fixes and formatter

src/components/Alert.js

@@ -1,56 +1,48 @@
-import { PortalProvider } from "@gorhom/portal";
-import React, { useState } from "react";
-import { Alert, Platform, StyleSheet, Text, View } from "react-native";
+import { PortalProvider } from '@gorhom/portal'
+import React, { useState } from 'react'
+import { Alert, Platform, StyleSheet, Text, View } from 'react-native'
 
-import { BlurView } from "expo-blur";
-import { Fonts, Palette, gutters } from "../styles";
-import GradientButton from "./GradientButton";
-import { LinearGradient } from "./LinearGradient/LinearGradient";
-import Overlay from "./Overlay";
+import { BlurView } from 'expo-blur'
+import { Fonts, Palette, gutters } from '../styles'
+import GradientButton from './GradientButton'
+import { LinearGradient } from './LinearGradient/LinearGradient'
+import Overlay from './Overlay'
 const WebAlertModal = ({ title, description, options }) => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(true)
 
-  const confirmOption = options?.find(({ style }) => style !== "cancel");
-  const cancelOption = options?.find(({ style }) => style === "cancel");
-  const hasSecondaryAction = Boolean(cancelOption);
-  const buttonContainerStyle = hasSecondaryAction
-    ? styles.actionButton
-    : styles.singleActionButton;
+  const confirmOption = options?.find(({ style }) => style !== 'cancel')
+  const cancelOption = options?.find(({ style }) => style === 'cancel')
+  const hasSecondaryAction = Boolean(cancelOption)
+  const buttonContainerStyle = hasSecondaryAction ? styles.actionButton : styles.singleActionButton
 
   const onConfirm = () => {
-    setVisible(false);
-    confirmOption?.onPress();
-  };
+    setVisible(false)
+    confirmOption?.onPress()
+  }
 
   const onCancel = () => {
-    setVisible(false);
-    cancelOption?.onPress();
-  };
+    setVisible(false)
+    cancelOption?.onPress()
+  }
 
   const renderDescription = () => {
-    if (
-      typeof description === "string" ||
-      typeof description === "number"
-    ) {
-      return <Text style={styles.description}>{description}</Text>;
+    if (typeof description === 'string' || typeof description === 'number') {
+      return <Text style={styles.description}>{description}</Text>
     }
 
     if (!description) {
-      return null;
+      return null
     }
 
-    return <View style={styles.customDescription}>{description}</View>;
-  };
+    return <View style={styles.customDescription}>{description}</View>
+  }
 
   return (
     <PortalProvider>
-      <Overlay
-        isVisible={visible}
-        contentContainerStyle={styles.overlayContent}
-      >
+      <Overlay isVisible={visible} contentContainerStyle={styles.overlayContent}>
         <View style={styles.modalWrapper}>
           <LinearGradient
-            colors={["rgba(255,255,255,0.18)", "rgba(255,255,255,0.04)"]}
+            colors={['rgba(255,255,255,0.18)', 'rgba(255,255,255,0.04)']}
             start={{ x: 0, y: 0 }}
             end={{ x: 1, y: 1 }}
             style={styles.modalBorder}
@@ -59,24 +51,19 @@ const WebAlertModal = ({ title, description, options }) => {
               <Text style={styles.title}>{title}</Text>
               {renderDescription()}
               <View style={styles.divider} />
-              <View
-                style={hasSecondaryAction ? styles.actionsRow : styles.actions}
-              >
+              <View style={hasSecondaryAction ? styles.actionsRow : styles.actions}>
                 {cancelOption && (
                   <GradientButton
                     title={cancelOption.text}
                     onPress={onCancel}
-                    colors={[
-                      "rgba(255,255,255,0.16)",
-                      "rgba(255,255,255,0.08)",
-                    ]}
+                    colors={['rgba(255,255,255,0.16)', 'rgba(255,255,255,0.08)']}
                     textStyle={styles.secondaryButtonText}
                     gradientStyle={styles.secondaryButtonGradient}
                     containerStyle={buttonContainerStyle}
                   />
                 )}
                 <GradientButton
-                  title={confirmOption?.text || "OK"}
+                  title={confirmOption?.text || 'OK'}
                   onPress={onConfirm}
                   containerStyle={buttonContainerStyle}
                 />
@@ -86,16 +73,16 @@ const WebAlertModal = ({ title, description, options }) => {
         </View>
       </Overlay>
     </PortalProvider>
-  );
-};
+  )
+}
 
 const alertPolyfill = (title, description, options, extra) => {
-  const rootDiv = document.createElement("div");
-  document.body.appendChild(rootDiv);
+  const rootDiv = document.createElement('div')
+  document.body.appendChild(rootDiv)
 
   const closeModal = () => {
-    document.body.removeChild(rootDiv);
-  };
+    document.body.removeChild(rootDiv)
+  }
 
   const WebAlertComponent = () => (
     <WebAlertModal
@@ -104,38 +91,38 @@ const alertPolyfill = (title, description, options, extra) => {
       options={options}
       onDismiss={closeModal}
     />
-  );
+  )
 
   // Render the React component into the div
-  require("react-dom").render(<WebAlertComponent />, rootDiv);
-};
+  require('react-dom').render(<WebAlertComponent />, rootDiv)
+}
 
 const customAlert = (title, description, options, extra) => {
   // Utilisation de la propriété userInterfaceStyle pour le mettre en mode sombre
   Alert.alert(title, description, options, {
     ...extra,
-    userInterfaceStyle: "dark",
-  });
-};
+    userInterfaceStyle: 'dark',
+  })
+}
 
-const alert = Platform.OS === "web" ? alertPolyfill : customAlert;
+const alert = Platform.OS === 'web' ? alertPolyfill : customAlert
 
 export const showPremiumRequiredAlert = () =>
   alert(
-    "Accès premium requis",
-    "Vous devez payer pour créer une nouvelle musique."
+    'Accès premium requis',
+    'Vous devez payer pour créer une nouvelle musique.'
     // [{ text: "OK", style: "cancel" }]
-  );
+  )
 
-export default alert;
+export default alert
 
 const styles = StyleSheet.create({
   overlayContent: {
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   modalWrapper: {
-    width: "90%",
+    width: '90%',
     maxWidth: 460,
     paddingHorizontal: 12,
   },
@@ -147,49 +134,49 @@ const styles = StyleSheet.create({
     borderRadius: 23,
     paddingHorizontal: gutters * 1.8,
     paddingVertical: gutters,
-    backgroundColor: "rgba(15, 12, 20, 0.9)",
-    overflow: "hidden",
+    backgroundColor: 'rgba(15, 12, 20, 0.9)',
+    overflow: 'hidden',
     gap: gutters * 0.75,
   },
   title: Fonts({
-    type: "mainTitle",
+    type: 'mainTitle',
     fontSize: 3,
-    style: { textAlign: "center" },
+    style: { textAlign: 'center' },
   }),
   description: Fonts({
-    type: "default",
+    type: 'default',
     color: Palette.gray,
     fontSize: 2,
-    style: { lineHeight: 22, textAlign: "center" },
+    style: { lineHeight: 22, textAlign: 'center' },
   }),
   divider: {
     height: 1,
-    backgroundColor: "rgba(255,255,255,0.08)",
+    backgroundColor: 'rgba(255,255,255,0.08)',
     marginVertical: 0,
   },
   customDescription: {
-    width: "100%",
+    width: '100%',
   },
   actionsRow: {
-    flexDirection: "row",
+    flexDirection: 'row',
     gap: gutters,
-    width: "100%",
+    width: '100%',
   },
   actions: {
-    width: "100%",
+    width: '100%',
     gap: gutters,
   },
   actionButton: {
     flex: 1,
   },
   singleActionButton: {
-    width: "100%",
+    width: '100%',
   },
   secondaryButtonGradient: {
     borderWidth: 1,
-    borderColor: "rgba(255,255,255,0.2)",
+    borderColor: 'rgba(255,255,255,0.2)',
   },
   secondaryButtonText: {
     color: Palette.gray,
   },
-});
+})