login/register offline modal

src/screens/LoginScreen/index.tsx

@@ -1,10 +1,10 @@
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { NavigationProp, useNavigation, CommonActions } from '@react-navigation/native';
 import { Formik } from 'formik';
 import * as yup from 'yup';
 
-import { Header, Input, Button, BigText, PageWrapper } from '../../components';
+import { Header, Input, Button, BigText, PageWrapper, WarningModal } from '../../components';
 
 import { ButtonVariants } from '../../types/components';
 import { StoreType, storage } from '../../storage';
@@ -12,6 +12,7 @@ import { NAVIGATION_PAGES } from '../../types';
 
 import { useLoginMutation } from '@api/auth';
 import { fetchAndSaveStatistics } from 'src/database/statisticsService';
+import { useNetInfo } from '@react-native-community/netinfo';
 
 type Props = {
   navigation: NavigationProp<any>;
@@ -32,6 +33,9 @@ const LoginScreen: FC<Props> = ({ navigation }) => {
     await fetchAndSaveStatistics(token);
   };
 
+  const [isWarningModalVisible, setIsWarningModalVisible] = useState(false);
+  const netInfo = useNetInfo();
+
   useEffect(() => {
     if (data && data.token) {
       storage.set('token', data.token);
@@ -64,10 +68,14 @@ const LoginScreen: FC<Props> = ({ navigation }) => {
           pass: ''
         }}
         onSubmit={({ login, pass }) => {
-          userLogin({
-            login,
-            pass
-          });
+          if (netInfo?.isInternetReachable) {
+            userLogin({
+              login,
+              pass
+            });
+          } else {
+            setIsWarningModalVisible(true);
+          }
         }}
         validationSchema={LoginSchema}
       >
@@ -108,6 +116,11 @@ const LoginScreen: FC<Props> = ({ navigation }) => {
           </>
         )}
       </Formik>
+      <WarningModal
+        isVisible={isWarningModalVisible}
+        onClose={() => setIsWarningModalVisible(false)}
+        type="offline"
+      />
     </PageWrapper>
   );
 };

src/screens/RegisterScreen/JoinUs/index.tsx

@@ -1,15 +1,24 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { View, Text, ScrollView, TouchableOpacity, Linking } from 'react-native';
 import { NavigationProp } from '@react-navigation/native';
 import { Formik } from 'formik';
 import * as yup from 'yup';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
-import { PageWrapper, Header, Button, BigText, CheckBox, Input } from '../../../components';
+import {
+  PageWrapper,
+  Header,
+  Button,
+  BigText,
+  CheckBox,
+  Input,
+  WarningModal
+} from '../../../components';
 import { NAVIGATION_PAGES } from '../../../types';
 import { useJoinTestMutation } from '@api/auth';
 import store from '../../../storage/zustand';
 import { styles } from './styles';
+import { useNetInfo } from '@react-native-community/netinfo';
 
 type Props = {
   navigation: NavigationProp<any>;
@@ -28,6 +37,8 @@ const JoinSchema = yup.object({
 
 const JoinUsScreen: FC<Props> = ({ navigation }) => {
   const { data, mutateAsync: JoinTest } = useJoinTestMutation();
+  const [isWarningModalVisible, setIsWarningModalVisible] = useState(false);
+  const netInfo = useNetInfo();
 
   const [updateRegistrationUserData] = store((state) => [
     state.registration.updateRegistrationUserData
@@ -51,6 +62,10 @@ const JoinUsScreen: FC<Props> = ({ navigation }) => {
               validationSchema={JoinSchema}
               onSubmit={(values) => {
                 const { email, username, password } = values;
+                if (!netInfo?.isInternetReachable) {
+                  setIsWarningModalVisible(true);
+                  return;
+                }
 
                 JoinTest({
                   email,
@@ -141,6 +156,11 @@ const JoinUsScreen: FC<Props> = ({ navigation }) => {
           </KeyboardAwareScrollView>
         </View>
       </ScrollView>
+      <WarningModal
+        isVisible={isWarningModalVisible}
+        onClose={() => setIsWarningModalVisible(false)}
+        type="offline"
+      />
     </PageWrapper>
   );
 };