add NetworkConnectionAlert.tsx

src/common/Menu/Menu.tsx

@@ -26,7 +26,7 @@ const Menu = ({ style, ...rest }: MenuProps) => {
             Linking.openURL(WEBSITE);
             break;
           case CONTACT_OPT_INDEX:
-            Linking.openURL(buildURL('mail', EMAIL));
+            Linking.openURL(buildURL('email', EMAIL));
             break;
         }
       },

src/screens/HomeScreen/HomeScreen.tsx

@@ -1,17 +1,14 @@
 import React, { useMemo, useState } from 'react';
 import { NetworkStatus, useQuery } from '@apollo/client';
-import { useUpdateEffect } from 'react-use';
 import { useVariables } from 'libs/native-base';
 import { Query, QueryProfessionsArgs } from 'libs/graphql';
-import { EMAIL } from 'config/app';
 import { QUERY_PROFESSIONS } from './queries';
-import buildURL from 'utils/buildURL';
 
-import { Alert, Linking } from 'react-native';
 import { Container, Content, Spinner } from 'native-base';
 import Professions from './components/Professions/Professions';
 import Header from './components/Header/Header';
 import ModeSelector, { Mode } from './components/ModeSelector/ModeSelector';
+import NetworkConnectionAlert from './components/NetworkConnectionAlert/NetworkConnectionAlert';
 
 const HomeScreen = () => {
   const [search, setSearch] = useState('');
@@ -30,21 +27,6 @@ const HomeScreen = () => {
       profession => profession.qualifications.length > 0,
     );
   }, [data]);
-  useUpdateEffect(() => {
-    if (error && error.networkError) {
-      Alert.alert(
-        'Problem z połączeniem',
-        'Prosimy o sprawdzenie połączenia z internetem / spróbowanie ponownie później. Przepraszamy za utrudnienia.',
-        [
-          {
-            text: 'Zgłoś problem',
-            onPress: () => Linking.openURL(buildURL('mail', EMAIL)),
-          },
-          { text: 'OK' },
-        ],
-      );
-    }
-  }, [error]);
 
   return (
     <Container>
@@ -63,6 +45,7 @@ const HomeScreen = () => {
           search={search}
         />
       )}
+      <NetworkConnectionAlert error={error} />
     </Container>
   );
 };

src/screens/HomeScreen/components/NetworkConnectionAlert/NetworkConnectionAlert.tsx

@@ -0,0 +1,31 @@
+import { ApolloError } from '@apollo/client';
+import { useUpdateEffect } from 'react-use';
+import { Alert, Linking } from 'react-native';
+import buildURL from 'utils/buildURL';
+import { EMAIL } from 'config/app';
+
+export interface NetworkConnectionAlertProps {
+  error?: ApolloError;
+}
+
+const NetworkConnectionAlert = ({ error }: NetworkConnectionAlertProps) => {
+  useUpdateEffect(() => {
+    if (error && error.networkError) {
+      Alert.alert(
+        'Problem z połączeniem',
+        'Prosimy o sprawdzenie połączenia z internetem / spróbowanie ponownie później. Przepraszamy za utrudnienia.',
+        [
+          {
+            text: 'Zgłoś problem',
+            onPress: () => Linking.openURL(buildURL('email', EMAIL)),
+          },
+          { text: 'OK' },
+        ],
+      );
+    }
+  }, [error]);
+
+  return null;
+};
+
+export default NetworkConnectionAlert;

src/screens/TestScreen/components/Test/Question.tsx

@@ -37,7 +37,7 @@ const Question = ({
             <Button
               dark
               danger
-              onPress={() => Linking.openURL(buildURL('mail', EMAIL))}
+              onPress={() => Linking.openURL(buildURL('email', EMAIL))}
             >
               <Text>Zgłoś go.</Text>
             </Button>

src/utils/buildURL.ts

@@ -1,6 +1,6 @@
 import { CDN_URI, IMAGE_RESIZING_SERVICE } from 'config/cdn';
 
-const buildURL = (type: 'cdn' | 'cdnimg' | 'mail', path: string): string => {
+const buildURL = (type: 'cdn' | 'cdnimg' | 'email', path: string): string => {
   switch (type) {
     case 'cdn':
       return CDN_URI + path;
@@ -9,7 +9,7 @@ const buildURL = (type: 'cdn' | 'cdnimg' | 'mail', path: string): string => {
         IMAGE_RESIZING_SERVICE +
         `?url=${CDN_URI + encodeURIComponent(path)}&w=640&q=75`
       );
-    case 'mail':
+    case 'email':
       return `mailto:${path}`;
   }
   return path;