Implement wifi no-download alert

android/app/src/main/java/org/languagetransfer/MainApplication.java

@@ -5,6 +5,8 @@
 import androidx.multidex.MultiDexApplication;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.reactnativecommunity.netinfo.NetInfoPackage;
+import com.reactnativecommunity.netinfo.NetInfoPackage;
 import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;

android/settings.gradle

@@ -1,4 +1,8 @@
 rootProject.name = 'LanguageTransfer'
+include ':@react-native-community_netinfo'
+project(':@react-native-community_netinfo').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/netinfo/android')
+include ':@react-native-community_netinfo'
+project(':@react-native-community_netinfo').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/netinfo/android')
 include ':react-native-gesture-handler'
 project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
 include ':react-native-navigation-bar-color'

ios/Podfile

@@ -8,6 +8,8 @@ target 'LanguageTransfer' do
 
   pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
 
+  pod 'react-native-netinfo', :path => '../node_modules/@react-native-community/netinfo'
+
   target 'LanguageTransferTests' do
     inherit! :complete
     # Pods for testing

ios/Podfile.lock

@@ -288,6 +288,8 @@ PODS:
     - React-Core
   - react-native-get-random-values (1.8.0):
     - React-Core
+  - react-native-netinfo (8.3.0):
+    - React-Core
   - react-native-safe-area-context (3.4.1):
     - React-Core
   - react-native-track-player (2.1.3):
@@ -428,6 +430,7 @@ DEPENDENCIES:
   - react-native-background-downloader (from `../node_modules/react-native-background-downloader`)
   - react-native-background-timer (from `../node_modules/react-native-background-timer`)
   - react-native-get-random-values (from `../node_modules/react-native-get-random-values`)
+  - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-track-player (from `../node_modules/react-native-track-player`)
   - react-native-webview (from `../node_modules/react-native-webview`)
@@ -515,6 +518,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-background-timer"
   react-native-get-random-values:
     :path: "../node_modules/react-native-get-random-values"
+  react-native-netinfo:
+    :path: "../node_modules/@react-native-community/netinfo"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-track-player:
@@ -599,6 +604,7 @@ SPEC CHECKSUMS:
   react-native-background-downloader: 4a034cf39a3b00fac57364984e360a4f180a5efb
   react-native-background-timer: 17ea5e06803401a379ebf1f20505b793ac44d0fe
   react-native-get-random-values: a6ea6a8a65dc93e96e24a11105b1a9c8cfe1d72a
+  react-native-netinfo: 3671b091c4843fda5e153612866ef4024b8f5d62
   react-native-safe-area-context: 9e40fb181dac02619414ba1294d6c2a807056ab9
   react-native-track-player: c4147afddd29de936caa06561f78a32d6502eb12
   react-native-webview: 8ec7ddf9eb4ddcd92b32cee7907efec19a9ec7cb
@@ -627,6 +633,6 @@ SPEC CHECKSUMS:
   Yoga: 99652481fcd320aefa4a7ef90095b95acd181952
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: bfa19de3e345f445377fed12260434b0ce04f43d
+PODFILE CHECKSUM: dc120fbf419dbc6f06e12a63498f07affa535eb5
 
 COCOAPODS: 1.11.3

js/components/AllLessons/AllLessons.react.tsx

@@ -15,6 +15,8 @@ import CourseData from '../../course-data';
 import DownloadManager from '../../download-manager';
 import prettyBytes from 'pretty-bytes';
 import {usePreference} from '../../persistence';
+import genConditionallyShowErrorOnNoWifi from '../../download-on-wifi-error';
+
 import {Icon} from 'react-native-elements';
 
 import {throttle} from 'lodash';
@@ -64,7 +66,9 @@ const AllLessons = ({route}: {route: any}) => {
         },
         {
           text: 'OK',
-          onPress: () => {
+          onPress: async() => {
+            await genConditionallyShowErrorOnNoWifi();
+
             indices
               .filter((lesson) => !downloadedMask[lesson])
               .forEach((lesson) => DownloadManager.startDownload(course, lesson));

js/components/AllLessons/LessonRow.react.tsx

@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from 'react';
-import {View, Text, StyleSheet, TouchableNativeFeedback} from 'react-native';
+import {Alert, View, Text, StyleSheet, TouchableNativeFeedback} from 'react-native';
 import ProgressCircle from 'react-native-progress-circle';
 
 import {Icon} from 'react-native-elements';
@@ -12,6 +12,7 @@ import {usePreference} from '../../persistence';
 import {log} from '../../metrics';
 import { useNavigation } from '@react-navigation/core';
 import { MainNavigationProp } from '../App.react';
+import genConditionallyShowErrorOnNoWifi from '../../download-on-wifi-error';
 
 export const LESSON_ROW_HEIGHT = 72;
 
@@ -98,6 +99,8 @@ const handleDownloadClick = async (
     });
     DownloadManager.stopDownload(DownloadManager.getDownloadId(course, lesson));
   } else if (!downloaded) {
+    await genConditionallyShowErrorOnNoWifi();
+
     log({
       action: 'download_lesson',
       surface: 'all_lessons',

js/download-on-wifi-error.js

@@ -0,0 +1,15 @@
+import NetInfo from '@react-native-community/netinfo';
+import {genPreferenceDownloadOnlyOnWifi} from './persistence';
+import { Alert } from 'react-native';
+
+export default async function downloadOnWifiError(){
+    const [wifiOnly, network] = await Promise.all([
+        genPreferenceDownloadOnlyOnWifi(),
+        NetInfo.fetch(),
+      ]);
+
+      if (wifiOnly && network.type !== 'wifi') {
+        Alert.alert(`Waiting for wi-fi to start download.\n
+        To download now, uncheck Settings > Download only on wi-fi.`);
+      }
+}

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.14.1",
     "@react-native-community/masked-view": "^0.1.10",
+    "@react-native-community/netinfo": "^8.3.0",
     "@react-navigation/drawer": "^5.8.5",
     "@react-navigation/native": "^5.7.0",
     "@react-navigation/stack": "^5.7.0",