feat: Papillon 100% hors connexion

src/components/Global/PapillonModernHeader.tsx

@@ -1,27 +1,15 @@
-import React, { Children, useEffect, useRef, useState } from "react";
-import { Button, StyleSheet, View } from "react-native";
-
-import { Screen } from "@/router/helpers/types";
-import { NativeText } from "@/components/Global/NativeComponents";
-import InfiniteDatePager from "@/components/Global/InfiniteDatePager";
-import { useCurrentAccount } from "@/stores/account";
-import { useTimetableStore } from "@/stores/timetable";
-import { AccountService } from "@/stores/account/types";
-import { updateTimetableForWeekInCache } from "@/services/timetable";
-import { set } from "lodash";
-import { dateToEpochWeekNumber } from "@/utils/epochWeekNumber";
-
-import Reanimated, { FadeIn, FadeInDown, FadeInLeft, FadeOut, FadeOutLeft, FadeOutRight, FadeOutUp, LinearTransition, ZoomIn, ZoomOut } from "react-native-reanimated";
+import React, { useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import Reanimated, { FadeIn, FadeOut, LinearTransition, ZoomIn, ZoomOut } from "react-native-reanimated";
 import { animPapillon } from "@/utils/ui/animations";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import PapillonSpinner from "@/components/Global/PapillonSpinner";
 import { PressableScale } from "react-native-pressable-scale";
 import { useTheme } from "@react-navigation/native";
 import { BlurView } from "expo-blur";
-import AnimatedNumber from "@/components/Global/AnimatedNumber";
 import { LinearGradient } from "expo-linear-gradient";
-import { TouchableOpacity } from "react-native-gesture-handler";
-import { ArrowLeftToLine, ArrowUp, CalendarCheck, CalendarClock, CalendarPlus, CalendarSearch, History, ListRestart, Loader, Plus, Rewind } from "lucide-react-native";
+import NetInfo from "@react-native-community/netinfo";
+import { WifiOff } from "lucide-react-native";
 
 interface ModernHeaderProps {
   children: React.ReactNode,
@@ -33,9 +21,6 @@ interface ModernHeaderProps {
 };
 
 export const PapillonModernHeader: React.FC<ModernHeaderProps> = (props) => {
-  const theme = useTheme();
-  const insets = useSafeAreaInsets();
-
   if (props.native) {
     return (
       <NativeModernHeader {...props} />
@@ -243,6 +228,13 @@ export const PapillonHeaderSelector: React.FC<{
   loading = false,
 }) => {
   const theme = useTheme();
+  const [isOnline, setIsOnline] = useState(true);
+
+  useEffect(() => {
+    return NetInfo.addEventListener(state => {
+      setIsOnline(state.isConnected ?? false);
+    });
+  }, []);
 
   return (
     <Reanimated.View
@@ -268,7 +260,9 @@ export const PapillonHeaderSelector: React.FC<{
           >
             {children}
 
-            {loading &&
+            {!isOnline ? (
+              <WifiOff size={20} color="red" />
+            ) : loading &&
               <PapillonSpinner
                 size={18}
                 color={theme.colors.text}

src/components/Home/AccountSwitcher.tsx

@@ -1,11 +1,10 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Image, StyleSheet, View } from "react-native";
 import { useTheme } from "@react-navigation/native";
-import { ChevronDown } from "lucide-react-native";
+import { ChevronDown, WifiOff } from "lucide-react-native";
 
 import Reanimated, {
-  interpolateColor,
-  LinearTransition, useAnimatedStyle,
+  LinearTransition,
   ZoomIn,
   ZoomOut,
 } from "react-native-reanimated";
@@ -16,68 +15,46 @@ import PapillonSpinner from "../Global/PapillonSpinner";
 import { animPapillon } from "@/utils/ui/animations";
 import Animated from "react-native-reanimated";
 import { BlurView } from "expo-blur";
+import NetInfo from "@react-native-community/netinfo";
 
 const ReanimatedBlurView = Reanimated.createAnimatedComponent(BlurView);
 
 const AccountSwitcher: React.FC<{
-  small?: boolean,
-  opened?: boolean,
-  modalOpen?: boolean,
-  translationY?: Reanimated.SharedValue<number>,
-  loading?: boolean,
+  small?: boolean;
+  opened?: boolean;
+  modalOpen?: boolean;
+  translationY?: Reanimated.SharedValue<number>;
+  loading?: boolean;
 }> = ({ small, opened, modalOpen, translationY, loading }) => {
   const theme = useTheme();
   const { colors } = theme;
 
-  const account = useCurrentAccount(store => store.account!);
+  const account = useCurrentAccount((store) => store.account!);
 
   const shouldHideName = account.personalization.hideNameOnHomeScreen || false;
-  const shouldHidePicture = account.personalization.hideProfilePicOnHomeScreen || false;
+  const shouldHidePicture =
+    account.personalization.hideProfilePicOnHomeScreen || false;
 
-  const borderAnimatedStyle = useAnimatedStyle(() => ({
-    borderWidth: 1,
-    borderRadius: 80,
-    borderColor: interpolateColor(
-      translationY.value,
-      [200, 251],
-      ["#ffffff50", colors.border],
-    ),
-    backgroundColor: interpolateColor(
-      translationY.value,
-      [200, 251],
-      ["#ffffff30", "transparent"],
-    ),
-  }));
-
-  const textAnimatedStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(
-      translationY.value,
-      [200, 251],
-      ["#FFF", colors.text],
-    ),
-    fontSize: 16,
-    fontFamily: "semibold",
-    maxWidth: 140,
-  }));
+  const [isOnline, setIsOnline] = useState(true);
 
+  useEffect(() => {
+    return NetInfo.addEventListener((state) => {
+      setIsOnline(state.isConnected ?? false);
+    });
+  }, []);
 
   const AnimatedChevronDown = Animated.createAnimatedComponent(ChevronDown);
-  const iconAnimatedStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(
-      translationY.value,
-      [200, 251],
-      ["#FFF", colors.text],
-    ),
-    marginLeft: -6,
-  }));
 
   return (
     <Reanimated.View
       style={{
-        backgroundColor:
-          opened ?
-            theme.dark && !modalOpen ? "#00000044" : "#FFFFFF22"
-            : modalOpen ? colors.text + "10" : "#FFFFFF12",
+        backgroundColor: opened
+          ? theme.dark && !modalOpen
+            ? "#00000044"
+            : "#FFFFFF22"
+          : modalOpen
+            ? colors.text + "10"
+            : "#FFFFFF12",
         borderRadius: 12,
         borderCurve: "continuous",
         overflow: "hidden",
@@ -109,7 +86,7 @@ const AccountSwitcher: React.FC<{
               borderRadius: 0,
               paddingVertical: 0,
               backgroundColor: "transparent",
-            }
+            },
           ]}
         >
           <Reanimated.View
@@ -124,24 +101,31 @@ const AccountSwitcher: React.FC<{
           >
             {!shouldHidePicture ? (
               <Image
-                source={(account.personalization.profilePictureB64 && account.personalization.profilePictureB64.trim() !== "") ? { uri: account.personalization.profilePictureB64 } : defaultProfilePicture(account.service)}
+                source={
+                  account.personalization.profilePictureB64 &&
+                  account.personalization.profilePictureB64.trim() !== ""
+                    ? { uri: account.personalization.profilePictureB64 }
+                    : defaultProfilePicture(account.service)
+                }
                 style={[
                   styles.avatar,
                   {
                     backgroundColor: colors.text + "22",
                     height: small ? 30 : 28,
                     width: small ? 30 : 28,
                     borderColor: modalOpen ? colors.text + "20" : "#FFFFFF32",
-                  }
+                  },
                 ]}
               />
             ) : (
-              <View style={[
-                {
-                  marginLeft: -8,
-                  height: small ? 30 : 28,
-                }
-              ]} />
+              <View
+                style={[
+                  {
+                    marginLeft: -8,
+                    height: small ? 30 : 28,
+                  },
+                ]}
+              />
             )}
 
             <Reanimated.Text
@@ -154,25 +138,28 @@ const AccountSwitcher: React.FC<{
               numberOfLines={1}
               ellipsizeMode="tail"
             >
-              {account.studentName ? (
-                account.studentName?.first + (shouldHideName ? "" : " " + account.studentName.last)
-              ) : "Mon compte"}
+              {account.studentName
+                ? account.studentName?.first +
+                  (shouldHideName ? "" : " " + account.studentName.last)
+                : "Mon compte"}
             </Reanimated.Text>
 
-            {loading && (
-              <PapillonSpinner
-                size={20}
-                strokeWidth={3}
-                color={modalOpen && !opened ? colors.text : "#FFF"}
-                animated
-                entering={animPapillon(ZoomIn)}
-                exiting={animPapillon(ZoomOut)}
-              />
+            {!isOnline ? (
+              <WifiOff size={20} color="red" />
+            ) : (
+              loading && (
+                <PapillonSpinner
+                  size={20}
+                  strokeWidth={3}
+                  color={modalOpen && !opened ? colors.text : "#FFF"}
+                  animated
+                  entering={animPapillon(ZoomIn)}
+                  exiting={animPapillon(ZoomOut)}
+                />
+              )
             )}
 
-            <Reanimated.View
-              layout={animPapillon(LinearTransition)}
-            >
+            <Reanimated.View layout={animPapillon(LinearTransition)}>
               <AnimatedChevronDown
                 size={24}
                 strokeWidth={2.3}
@@ -212,9 +199,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
   },
 
-  accountSwitcherText: {
-
-  },
+  accountSwitcherText: {},
 });
 
 export default AccountSwitcher;