feat:(grades) Réactions aux notes

src/components/Global/MissingItem.tsx

@@ -1,10 +1,12 @@
 import Reanimated, { AnimatedStyle, EntryExitTransition, FadeInUp, FadeOutDown, LinearTransition } from "react-native-reanimated";
 import { type StyleProp, Text, type ViewStyle } from "react-native";
 import { NativeText } from "./NativeComponents";
+import AnimatedEmoji from "../Grades/AnimatedEmoji";
 
 interface MissingItemProps {
   style?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
-  emoji: string;
+  emoji?: string;
+  animatedEmoji?: boolean;
   title: string;
   description: string;
   entering?: EntryExitTransition;
@@ -14,6 +16,7 @@ interface MissingItemProps {
 const MissingItem: React.FC<MissingItemProps> = ({
   style,
   emoji,
+  animatedEmoji,
   title,
   description,
   entering,
@@ -31,9 +34,13 @@ const MissingItem: React.FC<MissingItemProps> = ({
       entering={entering ? entering : FadeInUp}
       exiting={exiting ? exiting : FadeOutDown}
     >
-      <Text style={{ fontSize: 32 }}>
-        {emoji}
-      </Text>
+      {!animatedEmoji ? (
+        <Text style={{ fontSize: 32 }}>
+          {emoji}
+        </Text>
+      ) : (
+        <AnimatedEmoji initialScale={1.2} size={40} />
+      )}
 
       <NativeText variant="title" style={{ textAlign: "center", marginTop: 3 }}>
         {title}

src/components/Grades/AnimatedEmoji.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect } from "react";
+import { View, Text } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  withSpring,
+  withSequence,
+  Easing,
+} from "react-native-reanimated";
+
+interface AnimatedEmojiProps {
+  initialScale?: number;
+  size?: number; // Taille de la police
+}
+
+const AnimatedEmoji: React.FC<AnimatedEmojiProps> = ({ initialScale = 1, size = 20 }) => {
+  const scale = useSharedValue(initialScale);
+  const opacity = useSharedValue(1);
+  const emojis = ["😍", "🙄", "😭", "🥳", "😱", "😳", "🤓", "🤡", "🤯", "😨", "🤔", "🫠"];
+  const [currentEmoji, setCurrentEmoji] = React.useState(emojis[0]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scale.value }],
+      opacity: opacity.value,
+    };
+  });
+
+  const changeEmoji = () => {
+    scale.value = withSequence(
+      withSpring(initialScale * 0.5, {
+        damping: 10,
+        stiffness: 100,
+      }),
+      withSpring(initialScale, {
+        damping: 12,
+        stiffness: 200,
+      })
+    );
+
+    opacity.value = withSequence(
+      withTiming(0, {
+        duration: 100,
+        easing: Easing.inOut(Easing.ease),
+      }),
+      withTiming(1, {
+        duration: 200,
+        easing: Easing.inOut(Easing.ease),
+      })
+    );
+
+    setTimeout(() => {
+      const nextIndex = (emojis.indexOf(currentEmoji) + 1) % emojis.length;
+      setCurrentEmoji(emojis[nextIndex]);
+    }, 100);
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      changeEmoji();
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, [currentEmoji]);
+
+  return (
+    <View
+      style={{
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Animated.Text
+        style={[
+          {
+            color: "#FFFFFF",
+            fontSize: size,
+            fontFamily: "semibold",
+            textAlign: "center",
+            textAlignVertical: "center",
+            marginTop: -2,
+          },
+          animatedStyle,
+        ]}
+      >
+        {currentEmoji}
+      </Animated.Text>
+    </View>
+  );
+};
+
+export default AnimatedEmoji;

src/components/Grades/GradeModal.tsx

@@ -0,0 +1,238 @@
+import React from "react";
+import {
+  Modal,
+  View,
+  Image,
+  TouchableOpacity,
+  Text,
+  Platform,
+  Alert
+} from "react-native";
+import { Download, Trash, Maximize2, Share, Delete } from "lucide-react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { BlurView } from "expo-blur";
+import { ScrollView } from "react-native-gesture-handler";
+import * as Sharing from "expo-sharing";
+import * as FileSystem from "expo-file-system";
+import * as MediaLibrary from "expo-media-library";
+interface GradeModalProps {
+  isVisible: boolean;
+  imageBase64: string;
+  onClose: () => void;
+  DeleteGrade: () => void;
+}
+
+const GradeModal: React.FC<GradeModalProps> = ({
+  isVisible,
+  imageBase64,
+  onClose,
+  DeleteGrade,
+}) => {
+  const insets = useSafeAreaInsets();
+
+  const shareImage = async () => {
+    try {
+      const fileUri = FileSystem.cacheDirectory + "image.jpg";
+      await FileSystem.writeAsStringAsync(fileUri, imageBase64, { encoding: FileSystem.EncodingType.Base64 });
+      await Sharing.shareAsync(fileUri);
+    } catch (error) {
+      console.error("Failed to share image:", error);
+    }
+  };
+
+  const saveimage = async () => {
+    try {
+      const fileUri = FileSystem.cacheDirectory + "image.jpg";
+      await FileSystem.writeAsStringAsync(fileUri, imageBase64, { encoding: FileSystem.EncodingType.Base64 });
+      const asset = await MediaLibrary.createAssetAsync(fileUri);
+      await MediaLibrary.createAlbumAsync("Download", asset, false);
+      Alert.alert("Image sauvegardée", "L'image a été sauvegardée dans votre galerie.");
+    } catch (error) {
+      console.error("Failed to save image:", error);
+    }
+  };
+
+  return (
+    <Modal
+      transparent={true}
+      visible={isVisible}
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <BlurView
+        intensity={100}
+        tint="dark"
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <View
+          style={{
+            width: "100%",
+            height: "100%",
+            borderRadius: 20,
+            alignItems: "center",
+            flexDirection: "column",
+            paddingTop: insets.top,
+          }}
+        >
+          <Image
+            source={{ uri: `data:image/jpeg;base64,${imageBase64}` }}
+            style={{
+              width: "90%",
+              height: 500,
+              objectFit: "contain",
+            }}
+          />
+          <View
+            style={{
+              width: "100%",
+              height: 170,
+              padding: 20,
+
+              justifyContent: "center",
+              alignItems: "center",
+              flexDirection: "row",
+              gap: 35,
+            }}
+          >
+            <TouchableOpacity
+              style={{
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: 7,
+              }}
+              onPress={saveimage}
+            >
+              <View
+                style={{
+                  padding: 15,
+                  borderRadius: 100,
+                  backgroundColor: "#000000",
+                }}
+              >
+                <Download color="white" size={30} />
+              </View>
+              <Text
+                style={{
+                  color: "#FFFFFF",
+                  fontSize: 15,
+                  fontFamily: "semibold",
+                  textAlign: "center",
+                  textAlignVertical: "center"
+                }}
+              >
+                Télécharger
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: 7,
+              }}
+              onPress={shareImage}
+            >
+              <View
+                style={{
+                  padding: 15,
+                  borderRadius: 100,
+                  backgroundColor: "#0E7CCB",
+                }}
+              >
+                <Share color="white" size={30} />
+              </View>
+              <Text
+                style={{
+                  color: "#FFFFFF",
+                  fontSize: 15,
+                  fontFamily: "semibold",
+                  textAlign: "center",
+                  textAlignVertical: "center"
+                }}
+              >
+                Partager
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: 7,
+              }}
+              onPress={DeleteGrade}
+            >
+              <View
+                style={{
+                  padding: 15,
+                  borderRadius: 100,
+                  backgroundColor: "#888888",
+                }}
+              >
+                <Trash color="white" size={30} />
+              </View>
+              <Text
+                style={{
+                  color: "#FFFFFF",
+                  fontSize: 15,
+                  fontFamily: "semibold",
+                  textAlign: "center",
+                  textAlignVertical: "center"
+                }}
+              >
+                Supprimer
+              </Text>
+            </TouchableOpacity>
+
+          </View>
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-around",
+              alignItems: "center",
+              width: "100%",
+              gap: 20,
+              paddingHorizontal: 20,
+              position: "absolute",
+              bottom: insets.bottom+50,
+              left: 0,
+            }}
+          >
+            <TouchableOpacity
+              style={{
+                flex: 1,
+                paddingHorizontal: 10,
+                paddingVertical: 20,
+                backgroundColor: "#FFFFFF50",
+                justifyContent: "center",
+                alignItems: "center",
+                borderRadius: 100,
+              }}
+              onPress={onClose}
+            >
+              <Text
+                style={{
+                  fontSize: 16,
+                  fontFamily: "semibold",
+                  letterSpacing: 1,
+                  textTransform: "uppercase",
+                  textAlign: "center",
+                  color: "#FFFFFF",
+                }}
+              >
+                Fermer
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </BlurView>
+    </Modal>
+  );
+};
+
+export default GradeModal;