feat: ajout de la gestion des alertes avec des actions personnalisées…

… dans les paramètres
PapillonApp · Jan 20, 2025 · f88d64f · f88d64f
1 parent 43bc526
commit f88d64f
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 38 deletions.
diff --git a/src/providers/AlertProvider.tsx b/src/providers/AlertProvider.tsx
@@ -12,6 +12,7 @@ type AlertAction = {
   onPress?: () => void;
   icon?: React.ReactElement;
   primary?: boolean;
+  danger?: boolean;
   backgroundColor?: string;
 };
 
@@ -182,7 +183,7 @@ const AlertProvider = ({ children }: AlertProviderProps) => {
               </View>
 
               <View style={[styles.buttons, { borderColor: colors.border, backgroundColor: colors.text + "0a" }]}>
-                {(alert.actions ?? []).map(({ title, onPress, icon, primary, backgroundColor }) => (
+                {(alert.actions ?? []).map(({ title, onPress, icon, primary, danger, backgroundColor }) => (
                   <Pressable
                     key={title}
                     onPress={() => {
@@ -195,6 +196,9 @@ const AlertProvider = ({ children }: AlertProviderProps) => {
                       primary && {
                         backgroundColor: backgroundColor ? backgroundColor : colors.primary,
                       },
+                      danger && {
+                        backgroundColor: "#b62000",
+                      },
                       {
                         opacity: primary ? (pressed ? 0.6 : 1) : (pressed ? 0.3 : 0.6),
                       }

diff --git a/src/router/screens/settings/navigator.tsx b/src/router/screens/settings/navigator.tsx
@@ -2,19 +2,22 @@ import type { RouteParameters, Screen } from "@/router/helpers/types";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import screens from ".";
 import { navigatorScreenOptions } from "@/router/helpers/create-screen";
+import AlertProvider from "@/providers/AlertProvider";
 
 export const SettingsStack = createNativeStackNavigator<RouteParameters>();
 export const SettingsScreen: Screen<"SettingStack"> = ({ route }) => {
   return (
-    <SettingsStack.Navigator screenOptions={navigatorScreenOptions}>
-      {screens.map((screen) => (
+    <AlertProvider>
+      <SettingsStack.Navigator screenOptions={navigatorScreenOptions}>
+        {screens.map((screen) => (
         // @ts-expect-error : type not compatible, but it works fine.
-        <SettingsStack.Screen
-          key={screen.name}
-          {...screen}
-          initialParams={{ ...route.params }}
-        />
-      ))}
-    </SettingsStack.Navigator>
+          <SettingsStack.Screen
+            key={screen.name}
+            {...screen}
+            initialParams={{ ...route.params }}
+          />
+        ))}
+      </SettingsStack.Navigator>
+    </AlertProvider>
   );
 };
diff --git a/src/views/settings/SettingsIcons.tsx b/src/views/settings/SettingsIcons.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
-import { Text, ScrollView, View, TouchableOpacity, Image, Alert } from "react-native";
+import { Text, ScrollView, View, TouchableOpacity, Image } from "react-native";
 import type { Screen } from "@/router/helpers/types";
 import { useTheme } from "@react-navigation/native";
-import { Sparkles } from "lucide-react-native";
+import { Info, Sparkles } from "lucide-react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { NativeList, NativeItem, NativeListHeader, NativeText } from "@/components/Global/NativeComponents";
 import IconsContainerCard from "@/components/Settings/IconsContainerCard";
@@ -13,6 +13,7 @@ import colorsList from "@/utils/data/colors.json";
 import { getIconName, setIconName } from "@candlefinance/app-icon";
 import PapillonCheckbox from "@/components/Global/PapillonCheckbox";
 import { expoGoWrapper } from "@/utils/native/expoGoAlert";
+import { useAlert } from "@/providers/AlertProvider";
 
 type Icon = {
   id: string;
@@ -39,6 +40,7 @@ export const removeColor = (icon: string) => {
 const SettingsIcons: Screen<"SettingsIcons"> = ({ navigation }) => {
   const theme = useTheme();
   const { colors } = theme;
+  const {showAlert} = useAlert();
   const insets = useSafeAreaInsets();
   const data = icones as { [key: string]: Icon[] };
 
@@ -103,10 +105,11 @@ const SettingsIcons: Screen<"SettingsIcons"> = ({ navigation }) => {
                       backgroundColor: colors.primary + "22",
                     }}
                     onPress={() => {
-                      Alert.alert(
-                        "Icônes dynamiques",
-                        "Les icônes dynamiques changent de couleur en fonction de ton thème.",
-                      );
+                      showAlert({
+                        icon: <Info />,
+                        title: "Icônes dynamiques",
+                        message: "Les icônes dynamiques changent de couleur en fonction de ton thème.",
+                      });
                     }}
                   >
                     <Text
@@ -158,10 +161,11 @@ const SettingsIcons: Screen<"SettingsIcons"> = ({ navigation }) => {
                     {icon.isVariable ? (
                       <TouchableOpacity
                         onPress={() => {
-                          Alert.alert(
-                            "Icône dynamique",
-                            "Cette icône est dynamique, elle change de couleur en fonction de ton thème.",
-                          );
+                          showAlert({
+                            icon: <Info />,
+                            title: "Icônes dynamiques",
+                            message: "Les icônes dynamiques changent de couleur en fonction de ton thème.",
+                          });
                         }}
                       >
                         <Sparkles color={colors.primary} style={{ marginRight: 10}}/>

diff --git a/src/views/settings/SettingsSubjects.tsx b/src/views/settings/SettingsSubjects.tsx
@@ -17,11 +17,12 @@ import { NativeItem, NativeList, NativeText } from "@/components/Global/NativeCo
 import { useCurrentAccount } from "@/stores/account";
 import MissingItem from "@/components/Global/MissingItem";
 import BottomSheet from "@/components/Modals/PapillonBottomSheet";
-import { Trash2 } from "lucide-react-native";
+import { Trash2, X } from "lucide-react-native";
 import ColorIndicator from "@/components/Lessons/ColorIndicator";
 import { COLORS_LIST } from "@/services/shared/Subject";
 import type { Screen } from "@/router/helpers/types";
 import SubjectContainerCard from "@/components/Settings/SubjectContainerCard";
+import { useAlert } from "@/providers/AlertProvider";
 
 const MemoizedNativeItem = React.memo(NativeItem);
 const MemoizedNativeList = React.memo(NativeList);
@@ -36,6 +37,8 @@ const SettingsSubjects: Screen<"SettingsSubjects"> = ({ navigation }) => {
   const insets = useSafeAreaInsets();
   const colors = useTheme().colors;
 
+  const { showAlert } = useAlert();
+
   const [subjects, setSubjects] = useState<Array<Item>>([]);
   const [localSubjects, setLocalSubjects] = useState<Array<Item>>([]);
   const [selectedSubject, setSelectedSubject] = useState<Item | null>(null);
@@ -132,24 +135,33 @@ const SettingsSubjects: Screen<"SettingsSubjects"> = ({ navigation }) => {
       headerRight: () => (
         <TouchableOpacity
           onPress={() => {
-            Alert.alert(
-              "Réinitialiser les matières",
-              "Veux-tu vraiment réinitialiser les matières ?",
-              [
-                { text: "Annuler", style: "cancel" },
-                { text: "Réinitialiser", style: "destructive", onPress: () => {
-                  setSubjects([]);
-                  setLocalSubjects([]);
-                  setCurrentTitle("");
-                  setCurrentEmoji("");
+            showAlert({
+              title: "Réinitialiser les matières",
+              message: "Tu es sûr de vouloir réinitialiser toutes les matières ?",
+              actions: [
+                {
+                  title: "Annuler",
+                  icon: <X />,
+                },
+                {
+                  title: "Réinitialiser",
+                  icon: <Trash2 />,
+                  primary: true,
+                  danger: true,
+                  onPress: () => {
+                    setSubjects([]);
+                    setLocalSubjects([]);
+                    setCurrentTitle("");
+                    setCurrentEmoji("");
 
-                  mutateProperty("personalization", {
-                    ...account.personalization,
-                    subjects: {},
-                  });
-                }},
-              ]
-            );
+                    mutateProperty("personalization", {
+                      ...account.personalization,
+                      subjects: {},
+                    });
+                  },
+                },
+              ],
+            });
           }}
           style={{ marginRight: 2 }}
         >