Feat(News): intégration "J'ai pris connaissance..." + changes

src/components/Global/PapillonPicker.tsx

@@ -70,10 +70,8 @@ const PapillonPicker: React.FC<PapillonPickerProps> = ({
             styles.picker,
             direction === "left" ? {
               left: 0,
-              transformOrigin: "left top",
             } : {
               right: 0,
-              transformOrigin: "left right",
             },
             {
               backgroundColor: Platform.OS === "ios" ? theme.colors.card + 50 : theme.colors.card,

src/router/screens/views/index.ts

@@ -42,6 +42,7 @@ export default [
     headerTitle: "Item",
     presentation: "modal",
     headerShown: false,
+    animation: "slide_from_right",
   }),
   createScreen("AddonLogs", AddonLogs, {
     headerTitle: "Logs",

src/utils/magic/categorizeMessages.ts

@@ -42,7 +42,7 @@ export const categorizeMessages = (messages: Information[]): CategorizedMessages
       message.title = "";
     }
 
-    if (matchCount > 0 && !read) {
+    if (matchCount > 0 && !read && importantMessages.length < 3) {
       importantMessages.push({ ...message, matchCount, matchingWords, important: true });
 
       // Log the matching words or phrases for this message
@@ -52,7 +52,5 @@ export const categorizeMessages = (messages: Information[]): CategorizedMessages
     }
   }
 
-  const limitedImportantMessages = importantMessages.slice(0, 3);
-
-  return { importantMessages: limitedImportantMessages, normalMessages };
+  return { importantMessages, normalMessages };
 };

src/views/account/News/Atoms/Item.tsx

@@ -59,7 +59,7 @@ const NewsListItem: React.FC<NewsListItemProps> = ({ index, message, navigation,
           {message.author}
         </NativeText>
 
-        {!message.read && isED && (
+        {!message.read && !isED && (
           <View style={{
             width: 8,
             height: 8,

src/views/account/News/Document.tsx

@@ -1,5 +1,10 @@
 import InsetsBottomView from "@/components/Global/InsetsBottomView";
-import { NativeItem, NativeList, NativeListHeader, NativeText } from "@/components/Global/NativeComponents";
+import {
+  NativeItem,
+  NativeList,
+  NativeListHeader,
+  NativeText,
+} from "@/components/Global/NativeComponents";
 import InitialIndicator from "@/components/News/InitialIndicator";
 import { Information } from "@/services/shared/Information";
 import formatDate from "@/utils/format/format_date_complets";
@@ -11,26 +16,32 @@ import {
   Link,
   MoreHorizontal,
 } from "lucide-react-native";
-import React, { useEffect, useLayoutEffect } from "react";
-import {View, Dimensions, Linking, TouchableOpacity, type GestureResponderEvent, StyleSheet} from "react-native";
+import React, { useEffect, useLayoutEffect, useState } from "react";
+import {View, Dimensions, Linking, TouchableOpacity, type GestureResponderEvent, Text, StyleSheet} from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 import HTMLView from "react-native-htmlview";
-import { PapillonModernHeader} from "@/components/Global/PapillonModernHeader";
-import {LinearGradient} from "expo-linear-gradient";
-import {setNewsRead} from "@/services/news";
-import {useCurrentAccount} from "@/stores/account";
+import { PapillonModernHeader } from "@/components/Global/PapillonModernHeader";
+import { LinearGradient } from "expo-linear-gradient";
+import { setNewsRead } from "@/services/news";
+import { useCurrentAccount } from "@/stores/account";
 import PapillonPicker from "@/components/Global/PapillonPicker";
 import {Screen} from "@/router/helpers/types";
 import {AttachmentType} from "@/services/shared/Attachment";
+import PapillonCheckbox from "@/components/Global/PapillonCheckbox";
+import { newsInformationAcknowledge } from "pawnote";
 import parse_initials from "@/utils/format/format_pronote_initials";
 import { selectColorSeed } from "@/utils/format/select_color_seed";
+import { AccountService } from "@/stores/account/types";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const NewsItem: Screen<"NewsItem"> = ({ route, navigation }) => {
-  let message = JSON.parse(route.params.message) as Information;
+  const [message, setMessage] = useState<Information>(JSON.parse(route.params.message) as Information);
   const important = route.params.important;
   const isED = route.params.isED;
   const account = useCurrentAccount((store) => store.account!);
 
+  const insets = useSafeAreaInsets();
+
   const theme = useTheme();
   const stylesText = StyleSheet.create({
     body: {
@@ -54,7 +65,10 @@ const NewsItem: Screen<"NewsItem"> = ({ route, navigation }) => {
 
   useEffect(() => {
     setNewsRead(account, message, true);
-    message.read = true;
+    setMessage((prev) => ({
+      ...prev,
+      read: true,
+    }));
   }, [account.instance]);
 
   const tagsStyles = {
@@ -73,14 +87,14 @@ const NewsItem: Screen<"NewsItem"> = ({ route, navigation }) => {
 
   const renderersProps = {
     a: {
-      onPress: onPress
-    }
+      onPress: onPress,
+    },
   };
 
   return (
-    <View style={{flex: 1}}>
+    <View style={{ flex: 1 }}>
       <PapillonModernHeader native height={110} outsideNav={true}>
-        <View style={{flexDirection: "row", gap: 12, alignItems: "center"}}>
+        <View style={{ flexDirection: "row", gap: 12, alignItems: "center" }}>
           <InitialIndicator
             initial={parse_initials(message.author)}
             color={selectColorSeed(message.author)}
@@ -89,30 +103,41 @@ const NewsItem: Screen<"NewsItem"> = ({ route, navigation }) => {
             <NativeText variant="title" numberOfLines={1}>{message.title === "" ? message.author : message.title}</NativeText>
             <NativeText variant="subtitle" numberOfLines={1}>{message.title === "" ? formatDate(message.date.toDateString()) : message.author}</NativeText>
           </View>
-          {isED && <PapillonPicker
-            animated
-            direction="right"
-            delay={0}
-            data={[
-              {
-                icon: message.read ? <EyeOff /> : <Eye />,
-                label:  message.read ? "Marquer comme non lu" : "Marquer comme lu",
-                onPress: () => {
-                  setNewsRead(account, message, !message.read);
-                  message.read = !message.read;
-                }
-              }
-            ]}
-          >
-            <TouchableOpacity>
-              <MoreHorizontal size={24} color={theme.colors.text} />
-            </TouchableOpacity>
-          </PapillonPicker>}
+          {!isED && (
+            <PapillonPicker
+              animated
+              direction="right"
+              delay={0}
+              data={[
+                {
+                  icon: message.read ? <EyeOff /> : <Eye />,
+                  label: message.read
+                    ? "Marquer comme non lu"
+                    : "Marquer comme lu",
+                  onPress: () => {
+                    setNewsRead(account, message, !message.read);
+                    setMessage((prev) => ({
+                      ...prev,
+                      read: !prev.read,
+                    }));
+                  },
+                },
+              ]}
+            >
+              <TouchableOpacity>
+                <MoreHorizontal size={24} color={theme.colors.text} />
+              </TouchableOpacity>
+            </PapillonPicker>
+          )}
         </View>
       </PapillonModernHeader>
       {important && (
         <LinearGradient
-          colors={!theme.dark ? [theme.colors.card, "#BFF6EF"] : [theme.colors.card, "#2C2C2C"]}
+          colors={
+            !theme.dark
+              ? [theme.colors.card, "#BFF6EF"]
+              : [theme.colors.card, "#2C2C2C"]
+          }
           start={[0, 0]}
           end={[2, 2]}
           style={{
@@ -130,13 +155,52 @@ const NewsItem: Screen<"NewsItem"> = ({ route, navigation }) => {
       <ScrollView
         style={{
           flex: 1,
-        }}
-        contentContainerStyle={{
-          paddingBottom: 16,
-          paddingTop: 106,
+          paddingBottom: 16 + insets.bottom,
+          paddingTop: 106 - 16,
         }}
       >
-        <View style={{paddingHorizontal: 16}}>
+        <View
+          style={{
+            paddingHorizontal: 16,
+          }}
+        >
+
+          {account.service === AccountService.Pronote && message.ref.needToAcknowledge && (
+            <NativeList inline
+              style={{
+                marginBottom: 16,
+              }}
+            >
+              <NativeItem
+                leading={
+                  <PapillonCheckbox
+                    checked={message.acknowledged}
+                    onPress={async () => {
+                      if (!message.acknowledged && account.instance) {
+                        await newsInformationAcknowledge(
+                          account.instance,
+                          message.ref
+                        );
+
+                        setMessage((prev) => ({
+                          ...prev,
+                          read: true,
+                          acknowledged: true,
+                        }));
+                      }
+                    }}
+                    color="green"
+                  />
+                }
+              >
+                <NativeText variant="body">
+                  J'ai lu et pris connaissance
+                </NativeText>
+              </NativeItem>
+            </NativeList>
+          )}
+
+
           <HTMLView
             value={`<body>${message.content}</body`}
             stylesheet={stylesText}
@@ -167,7 +231,7 @@ const NewsItem: Screen<"NewsItem"> = ({ route, navigation }) => {
         </ScrollView>}
 
         {message.attachments.length > 0 && (
-          <View style={{paddingHorizontal: 16}}>
+          <View style={{ paddingHorizontal: 16 }}>
             <NativeListHeader label="Pièces jointes" />
             <NativeList>
               {message.attachments.map((attachment, index) => (

src/views/account/News/News.tsx

@@ -29,6 +29,7 @@ const NewsScreen: Screen<"News"> = ({ route, navigation }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [importantMessages, setImportantMessages] = useState<NewsItem[]>([]);
   const [sortedMessages, setSortedMessages] = useState<NewsItem[]>([]);
+  const [isED, setIsED] = useState(false);
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -43,22 +44,52 @@ const NewsScreen: Screen<"News"> = ({ route, navigation }) => {
   }, [account]);
 
   useEffect(() => {
-    navigation.addListener("focus", () => fetchData(true));
-    fetchData();
-  }, [account.instance]);
+    if (account.service === AccountService.EcoleDirecte) setIsED(true);
+    if (sortedMessages.length === 0) {
+      navigation.addListener("focus", () => fetchData(true));
+      fetchData();
+    }
+  }, [sortedMessages, account.instance]);
 
   useEffect(() => {
     if (informations) {
-      if (account.personalization?.magicEnabled) {
-        const { importantMessages, normalMessages } = categorizeMessages(informations);
-        setImportantMessages(importantMessages.map(message => ({ ...message, date: message.date.toString() })));
-        setSortedMessages(normalMessages.map(message => ({ ...message, date: message.date.toString(), important: false })).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()));
+      if (account.personalization.MagicNews) {
+        const { importantMessages, normalMessages } =
+          categorizeMessages(informations);
+        setImportantMessages(
+          importantMessages.map((message) => ({
+            ...message,
+            date: message.date.toString(),
+          }))
+        );
+        setSortedMessages(
+          normalMessages
+            .map((message) => ({
+              ...message,
+              date: message.date.toString(),
+              important: false,
+            }))
+            .sort(
+              (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+            )
+        );
       } else {
         setImportantMessages([]);
-        setSortedMessages(informations.map(info => ({ ...info, date: info.date.toString(), title: info.title || "", important: false })).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()));
+        setSortedMessages(
+          informations
+            .map((info) => ({
+              ...info,
+              date: info.date.toString(),
+              title: info.title || "",
+              important: false,
+            }))
+            .sort(
+              (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+            )
+        );
       }
     }
-  }, [informations, account.personalization?.magicEnabled]);
+  }, [informations, account.personalization.MagicNews]);
 
   const renderItem: ListRenderItem<NewsItem> = useCallback(({ item, index }) => (
     <NewsListItem
@@ -123,6 +154,7 @@ const NewsScreen: Screen<"News"> = ({ route, navigation }) => {
                 data={importantMessages}
                 renderItem={renderItem}
                 keyExtractor={(_, index) => `important-${index}`}
+                scrollEnabled={false}
               />
             </LinearGradient>
           </NativeList>
@@ -140,6 +172,7 @@ const NewsScreen: Screen<"News"> = ({ route, navigation }) => {
               data={sortedMessages}
               renderItem={renderItem}
               keyExtractor={(_, index) => `sorted-${index}`}
+              scrollEnabled={false}
             />
           </NativeList>
         </Reanimated.View>