feat(offline): added checks for network connectivity

app.json

@@ -5,7 +5,7 @@
     "scheme": "com.zaniluca.ping4gitlab",
     "description": "Multiplatform react-native app that sends you instant notifications about gitlab activities",
     "slug": "ping4gitlab",
-    "version": "2.1.6",
+    "version": "2.2.1",
     "orientation": "portrait",
     "userInterfaceStyle": "automatic",
     "githubUrl": "https://github.com/zaniluca/ping-4-gitlab",

src/hooks/use-online-manager.ts

@@ -1,18 +1,41 @@
 import NetInfo from "@react-native-community/netinfo";
 import { onlineManager } from "@tanstack/react-query";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Platform } from "react-native";
+import { Toast } from "react-native-toast-message/lib/src/Toast";
 
 export function useOnlineManager() {
+  const [isOnline, setIsOnline] = useState<boolean | null>(null);
+
   useEffect(() => {
     if (Platform.OS !== "web") {
-      return NetInfo.addEventListener((state) => {
-        onlineManager.setOnline(
+      const unsubscribe = NetInfo.addEventListener((state) => {
+        const isOnline =
           state.isConnected != null &&
-            state.isConnected &&
-            Boolean(state.isInternetReachable)
-        );
+          state.isConnected &&
+          Boolean(state.isInternetReachable);
+
+        // The isOnline flag is null when the app starts
+        if (!isOnline && isOnline != null)
+          Toast.show({
+            type: "error",
+            text1: "No internet connection",
+            text2: "It seems you are offline",
+            autoHide: false,
+          });
+
+        // If we become online and we managed to have a toast, hide it
+        if (isOnline && isOnline != null) Toast.hide();
+
+        onlineManager.setOnline(isOnline);
+        setIsOnline(isOnline);
       });
+
+      return () => {
+        unsubscribe();
+      };
     }
   }, []);
+
+  return isOnline;
 }

src/hooks/use-updates.ts

@@ -3,7 +3,11 @@ import * as Updates from "expo-updates";
 import { useEffect } from "react";
 import Toast from "react-native-toast-message";
 
+import { useOnlineManager } from "./use-online-manager";
+
 export const useUpdates = () => {
+  const isOnline = useOnlineManager();
+
   const {
     isUpdateAvailable,
     isChecking,
@@ -15,13 +19,9 @@ export const useUpdates = () => {
   useEffect(() => {
     if (__DEV__) {
       console.log("Skipping updates check in development mode");
+    } else if (!isOnline) {
+      console.log("Skipping updates check because we are offline");
     } else {
-      Sentry.addBreadcrumb({
-        event_id: "check-for-update",
-        category: "updates",
-        message: "Checking for updates",
-        level: "info",
-      });
       Updates.checkForUpdateAsync();
     }
   }, []);
@@ -32,13 +32,14 @@ export const useUpdates = () => {
         "An error occurred during updates initialization",
         initializationError
       );
-      Sentry.captureException(initializationError);
+      Sentry.captureException(initializationError.message);
     } else if (checkError) {
       console.error("An error occurred during updates check", checkError);
-      Sentry.captureException(checkError);
+      Sentry.captureException(checkError.message);
     } else if (downloadError) {
       console.error("An error occurred during updates download", downloadError);
-      Sentry.captureException(downloadError);
+      Sentry.captureException(downloadError.message);
+
       Toast.show({
         type: "error",
         text1: "An error occurred while downloading the update",
@@ -68,13 +69,6 @@ export const useUpdates = () => {
 
     console.log("Update fetched", result);
 
-    Sentry.addBreadcrumb({
-      event_id: "fetch-update",
-      category: "updates",
-      message: "Update fetched",
-      level: "info",
-    });
-
     if (result.isNew) {
       console.log("New update available! Reloading...");
       try {