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

src/router/screens/views/index.ts

@@ -38,6 +38,7 @@ export default [
     headerTitle: "Item",
     presentation: "modal",
     headerShown: false,
+    animation: "slide_from_right",
   }),
   createScreen("AddonLogs", AddonLogs, {
     headerTitle: "Logs",
@@ -75,6 +76,6 @@ export default [
   }),
   createScreen("Chat", Chat, {
     presentation: "modal",
-    headerShown: false
+    headerShown: false,
   }),
 ] as const;

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,22 +16,25 @@ import {
   Link,
   MoreHorizontal,
 } from "lucide-react-native";
-import React, { useEffect, useLayoutEffect } from "react";
-import {View, Dimensions, Linking, TouchableOpacity, type GestureResponderEvent} from "react-native";
+import React, { useEffect, useLayoutEffect, useState } from "react";
+import {View, Dimensions, Linking, TouchableOpacity, type GestureResponderEvent, Text} from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 import RenderHtml from "react-native-render-html";
-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";
 
 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!);
@@ -41,7 +49,10 @@ const NewsItem: Screen<"NewsItem"> = ({ route, navigation }) => {
 
   useEffect(() => {
     setNewsRead(account, message, true);
-    message.read = true;
+    setMessage((prev) => ({
+      ...prev,
+      read: true,
+    }));
   }, [account.instance]);
 
   const tagsStyles = {
@@ -60,14 +71,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)}
@@ -76,30 +87,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={{
@@ -117,15 +139,54 @@ const NewsItem: Screen<"NewsItem"> = ({ route, navigation }) => {
       <ScrollView
         style={{
           flex: 1,
-        }}
-        contentContainerStyle={{
           paddingBottom: 16,
           paddingTop: 106,
         }}
       >
-        <View style={{paddingHorizontal: 16}}>
+        <View
+          style={{
+            paddingHorizontal: 16,
+          }}
+        >
+          {account.service === AccountService.Pronote && message.ref.needToAcknowledge && (
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 10,
+                marginBottom: 25,
+              }}
+            >
+              <PapillonCheckbox
+                checked={message.acknowledged}
+                onPress={async () => {
+                  if (!message.acknowledged && account.instance) {
+                    await newsInformationAcknowledge(
+                      account.instance,
+                      message.ref
+                    );
+
+                    setMessage((prev) => ({
+                      ...prev,
+                      read: true,
+                      acknowledged: true,
+                    }));
+                  }
+                }}
+                style={{ marginLeft: 25 }}
+                color="green"
+              />
+              <Text
+                style={{
+                  color: message.acknowledged ? "grey" : theme.colors.text,
+                }}
+              >
+                J'ai lu et pris connaissance
+              </Text>
+            </View>
+          )}
           <RenderHtml
-            contentWidth={Dimensions.get("window").width - (16 * 2)}
+            contentWidth={Dimensions.get("window").width - 16 * 2}
             source={{
               html: message.content,
             }}
@@ -164,7 +225,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) => (