Merge branch 'main' into fix/fonts

PapillonApp · Nov 16, 2024 · 6443753 · 6443753
2 parents 3666423 + c14741e
commit 6443753
Show file tree

Hide file tree

Showing 9 changed files with 208 additions and 318 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -78,13 +78,13 @@
     "react-native-draggable-flatlist": "^4.0.1",
     "react-native-draglist": "^3.6.1",
     "react-native-gesture-handler": "^2.16.1",
+    "react-native-htmlview": "^0.17.0",
     "react-native-infinite-pager": "^0.3.16",
     "react-native-pager-view": "6.3.0",
     "react-native-parsed-text": "^0.0.22",
     "react-native-pressable-scale": "^2.1.0",
     "react-native-qrcode-svg": "^6.3.1",
     "react-native-reanimated": "~3.10.1",
-    "react-native-render-html": "^6.3.4",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-svg": "^15.2.0",
@@ -105,6 +105,7 @@
     "@types/html-to-text": "^9.0.4",
     "@types/lodash": "^4.17.7",
     "@types/react": "~18.2.45",
+    "@types/react-native-htmlview": "^0.16.5",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "eslint": "^8.57.0",

diff --git a/src/views/account/Chat/Modals/Chat.tsx b/src/views/account/Chat/Modals/Chat.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from "react";
-import {ActivityIndicator, Platform, ScrollView, Text, View,} from "react-native";
+import {ActivityIndicator, Platform, ScrollView, StyleSheet, Text, View,} from "react-native";
 import {useTheme} from "@react-navigation/native";
 
 import type {Screen} from "@/router/helpers/types";
@@ -11,7 +11,7 @@ import parse_initials from "@/utils/format/format_pronote_initials";
 import InitialIndicator from "@/components/News/InitialIndicator";
 import {PapillonModernHeader} from "@/components/Global/PapillonModernHeader";
 import {useSafeAreaInsets} from "react-native-safe-area-context";
-import RenderHTML from "react-native-render-html";
+import HTMLView from "react-native-htmlview";
 import Reanimated, {FadeIn, FadeOut} from "react-native-reanimated";
 import {AccountService} from "@/stores/account/types";
 import * as WebBrowser from "expo-web-browser";
@@ -24,6 +24,15 @@ const Chat: Screen<"Chat"> = ({ navigation, route }) => {
   const theme = useTheme();
   const { colors } = theme;
 
+  const stylesText = StyleSheet.create({
+    body: {
+      color: theme.colors.text,
+      fontFamily: "medium",
+      fontSize: 16,
+      lineHeight: 22,
+    }
+  });
+
   const account = useCurrentAccount((state) => state.account!);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
 
@@ -101,19 +110,12 @@ const Chat: Screen<"Chat"> = ({ navigation, route }) => {
           >
             <NativeList>
               <NativeItem>
-                <RenderHTML
-                  source={{
-                    html: messages[0].content.replaceAll(/<\/?font[^>]*>/g, ""),
-                  }}
-                  defaultTextProps={{
-                    style: {
-                      color: theme.colors.text,
-                      fontFamily: "medium",
-                      fontSize: 16,
-                      lineHeight: 22,
-                    },
-                  }}
-                  contentWidth={300}
+                <HTMLView
+                  value={`<body>${messages[0].content.replaceAll(
+                    /<\/?font[^>]*>/g,
+                    ""
+                  )}</body>`}
+                  stylesheet={stylesText}
                 />
               </NativeItem>
             </NativeList>

diff --git a/src/views/account/Grades/Document.tsx b/src/views/account/Grades/Document.tsx
@@ -329,7 +329,7 @@ const GradeDocument: Screen<"GradeDocument"> = ({ route, navigation }) => {
                 }}
                 numberOfLines={1}
               >
-                {grade.student.value.toFixed(2)}
+                {grade.student.value?.toFixed(2)}
               </Text>
               <Text
                 style={{

diff --git a/src/views/account/Homeworks/Atoms/Item.tsx b/src/views/account/Homeworks/Atoms/Item.tsx
@@ -7,10 +7,10 @@ import PapillonCheckbox from "@/components/Global/PapillonCheckbox";
 import Reanimated, { LinearTransition } from "react-native-reanimated";
 import { FadeIn, FadeOut } from "react-native-reanimated";
 import { animPapillon } from "@/utils/ui/animations";
-import RenderHTML from "react-native-render-html";
+import HTMLView from "react-native-htmlview";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { RouteParameters } from "@/router/helpers/types";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { Homework, HomeworkReturnType } from "@/services/shared/Homework";
 import detectCategory from "@/utils/magic/categorizeHomeworks";
 import { LinearGradient } from "expo-linear-gradient";
@@ -31,6 +31,15 @@ const HomeworkItem = ({ homework, navigation, onDonePressHandler, index, total }
   const [category, setCategory] = useState<string | null>(null);
   const account = useCurrentAccount((store) => store.account!);
 
+  const stylesText = StyleSheet.create({
+    body: {
+      color: theme.colors.text,
+      fontFamily: "medium",
+      fontSize: 16,
+      lineHeight: 22,
+    }
+  });
+
   useEffect(() => {
     if (account.personalization?.MagicHomeworks) {
       const data = getSubjectData(homework.subject);
@@ -156,18 +165,9 @@ const HomeworkItem = ({ homework, navigation, onDonePressHandler, index, total }
             entering={FadeIn.duration(200)}
             exiting={FadeOut.duration(200).delay(50)}
           >
-            <RenderHTML
-              source={{ html: homework.content }}
-              defaultTextProps={{
-                style: {
-                  color: theme.colors.text,
-                  fontFamily: "medium",
-                  fontSize: 16,
-                  lineHeight: 22,
-                },
-                numberOfLines: 3,
-              }}
-              contentWidth={300}
+            <HTMLView
+              value={`<body>${homework.content}</body>`}
+              stylesheet={stylesText}
             />
           </Reanimated.View>
           {homework.attachments.length > 0 && (

diff --git a/src/views/account/Homeworks/Document.tsx b/src/views/account/Homeworks/Document.tsx
@@ -12,6 +12,7 @@ import {
   TouchableOpacity,
   Alert,
   Platform,
+  StyleSheet,
 } from "react-native";
 import { Homework, HomeworkReturnType } from "@/services/shared/Homework";
 import { getSubjectData } from "@/services/shared/Subject";
@@ -22,7 +23,7 @@ import { FileText, Link, Paperclip, CircleAlert } from "lucide-react-native";
 
 import * as WebBrowser from "expo-web-browser";
 import { useTheme } from "@react-navigation/native";
-import RenderHTML from "react-native-render-html";
+import HTMLView from "react-native-htmlview";
 import { Screen } from "@/router/helpers/types";
 import { WebBrowserPresentationStyle } from "expo-web-browser/src/WebBrowser.types";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -33,6 +34,14 @@ import getAndOpenFile from "@/utils/files/getAndOpenFile";
 
 const HomeworksDocument: Screen<"HomeworksDocument"> = ({ route }) => {
   const theme = useTheme();
+  const stylesText = StyleSheet.create({
+    body: {
+      color: theme.colors.text,
+      fontFamily: "medium",
+      fontSize: 16,
+      lineHeight: 22,
+    }
+  });
 
   const homework: Homework = route.params.homework || {};
   const account = useCurrentAccount((store) => store.account!);
@@ -160,18 +169,7 @@ const HomeworksDocument: Screen<"HomeworksDocument"> = ({ route }) => {
           )}
 
           <NativeItem>
-            <RenderHTML
-              source={{ html: homework.content }}
-              defaultTextProps={{
-                style: {
-                  color: theme.colors.text,
-                  fontFamily: "medium",
-                  fontSize: 16,
-                  lineHeight: 22,
-                },
-              }}
-              contentWidth={300}
-            />
+            <HTMLView value={`<body>${homework.content}</body>`} stylesheet={stylesText} />
           </NativeItem>
         </NativeList>
 

diff --git a/src/views/account/Lessons/Document.tsx b/src/views/account/Lessons/Document.tsx
@@ -11,8 +11,8 @@ import {
   Text,
   Platform,
   Linking,
+  StyleSheet,
 } from "react-native";
-import { Homework, HomeworkReturnType } from "@/services/shared/Homework";
 import { getSubjectData } from "@/services/shared/Subject";
 import { Screen } from "@/router/helpers/types";
 
@@ -32,7 +32,7 @@ import {
 
 import * as WebBrowser from "expo-web-browser";
 import { Link, useTheme } from "@react-navigation/native";
-import RenderHTML from "react-native-render-html";
+import HTMLView from "react-native-htmlview";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { PapillonModernHeader } from "@/components/Global/PapillonModernHeader";
 import { TimetableClass } from "@/services/shared/Timetable";
@@ -52,6 +52,14 @@ const getDuration = (minutes: number): string => {
 
 const LessonDocument: Screen<"LessonDocument"> = ({ route, navigation }) => {
   const theme = useTheme();
+  const stylesText = StyleSheet.create({
+    body: {
+      color: theme.colors.text,
+      fontFamily: "medium",
+      fontSize: 16,
+      lineHeight: 22,
+    }
+  });
 
   const lesson = route.params.lesson as unknown as TimetableClass;
   const subjects = useClassSubjectStore();
@@ -275,18 +283,7 @@ const LessonDocument: Screen<"LessonDocument"> = ({ route, navigation }) => {
                 return (
                   <>
                     <NativeItem key={index}>
-                      <RenderHTML
-                        source={{ html: subject.content }}
-                        defaultTextProps={{
-                          style: {
-                            color: theme.colors.text,
-                            fontFamily: "medium",
-                            fontSize: 16,
-                            lineHeight: 22,
-                          },
-                        }}
-                        contentWidth={300}
-                      />
+                      <HTMLView value={`<body>${subject.content}</body>`} stylesheet={stylesText} />
                       {subject.attachments.map((attachment, index) => (
                         <NativeItem
                           key={index}

diff --git a/src/views/account/News/Atoms/Item.tsx b/src/views/account/News/Atoms/Item.tsx
@@ -16,7 +16,6 @@ import {NativeStackNavigationProp} from "@react-navigation/native-stack";
 import {RouteParameters} from "@/router/helpers/types";
 import {Information} from "@/services/shared/Information";
 import { selectColorSeed } from "@/utils/format/select_color_seed";
-import RenderHTML from "react-native-render-html";
 
 type NewsItem = Omit<Information, "date"> & { date: string, important: boolean };
 

diff --git a/src/views/account/News/Document.tsx b/src/views/account/News/Document.tsx
@@ -12,9 +12,9 @@ import {
   MoreHorizontal,
 } from "lucide-react-native";
 import React, { useEffect, useLayoutEffect } from "react";
-import {View, Dimensions, Linking, TouchableOpacity, type GestureResponderEvent} from "react-native";
+import {View, Dimensions, Linking, TouchableOpacity, type GestureResponderEvent, StyleSheet} from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import RenderHtml from "react-native-render-html";
+import HTMLView from "react-native-htmlview";
 import { PapillonModernHeader} from "@/components/Global/PapillonModernHeader";
 import {LinearGradient} from "expo-linear-gradient";
 import {setNewsRead} from "@/services/news";
@@ -32,6 +32,19 @@ const NewsItem: Screen<"NewsItem"> = ({ route, navigation }) => {
   const account = useCurrentAccount((store) => store.account!);
 
   const theme = useTheme();
+  const stylesText = StyleSheet.create({
+    body: {
+      fontFamily: "medium",
+      fontSize: 16,
+      lineHeight: 22,
+      color: theme.colors.text,
+    },
+    a: {
+      color: theme.colors.primary,
+      textDecorationColor: theme.colors.primary,
+      textDecorationLine: "underline",
+    },
+  });
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -124,19 +137,9 @@ const NewsItem: Screen<"NewsItem"> = ({ route, navigation }) => {
         }}
       >
         <View style={{paddingHorizontal: 16}}>
-          <RenderHtml
-            contentWidth={Dimensions.get("window").width - (16 * 2)}
-            source={{
-              html: message.content,
-            }}
-            tagsStyles={tagsStyles}
-            renderersProps={renderersProps}
-            ignoredStyles={["fontFamily", "fontSize"]}
-            baseStyle={{
-              fontFamily: "regular",
-              fontSize: 16,
-              color: theme.colors.text,
-            }}
+          <HTMLView
+            value={`<body>${message.content}</body`}
+            stylesheet={stylesText}
           />
         </View>