Added risk notification component

App/components/RiskNotification.tsx

@@ -0,0 +1,61 @@
+import React, {useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {NativeModules, StyleSheet, Text, View} from 'react-native';
+
+import {global} from '../styles';
+import {BlurBackground} from './BackgroundBlur';
+import BasicButton from './BasicButton';
+
+const styles = StyleSheet.create({
+  IDMatchPopup: {
+    backgroundColor: 'white',
+    marginLeft: 20,
+    marginRight: 20,
+    padding: 16,
+    zIndex: 2,
+  },
+  IDMatchText: {
+    fontFamily: 'Ubuntu-R',
+    fontSize: 18,
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+});
+
+const RiskNotification: React.FC = () => {
+  const [showIDMatch, setIDMatchShow] = useState<boolean>(false);
+  const [hasSeenIDMatch, setIDMatchSeen] = useState<boolean>(false);
+  const {t} = useTranslation();
+
+  useEffect(() => {
+    function refresh(): void {
+      if (NativeModules.ItoBluetooth.isPossiblyInfected() && !hasSeenIDMatch) {
+        setIDMatchShow(true);
+      }
+    }
+    const interval = setInterval(refresh, 2500);
+    return (): void => clearInterval(interval);
+  }, [hasSeenIDMatch]);
+
+  const closeIDMatch = (): void => {
+    setIDMatchShow(false);
+    setIDMatchSeen(true);
+  };
+
+  return (
+    <View style={[global.container, {paddingBottom: 100}]}>
+      {showIDMatch && (
+        <BlurBackground>
+          <View style={styles.IDMatchPopup}>
+            <Text style={styles.IDMatchText}>
+              {t('home.alertContactDiscovered')}
+            </Text>
+            <BasicButton title={t('home.whatNext')} onPress={closeIDMatch} />
+          </View>
+        </BlurBackground>
+      )}
+    </View>
+  );
+};
+
+export default RiskNotification;

App/screens/Home.tsx

@@ -13,8 +13,6 @@ import {RootStackParamList} from 'App/App';
 import Header from '../components/Header';
 
 import {global} from '../styles';
-import BasicButton from '../components/BasicButton';
-import {BlurBackground} from '../components/BackgroundBlur';
 import {useTranslation} from 'react-i18next';
 import {BottomMenu} from '../components/BottomMenu';
 import {ButtonPopup} from '../components/ButtonPopup';
@@ -137,8 +135,6 @@ export const Home: React.FC<{
 }> = ({navigation}) => {
   const {t} = useTranslation();
   const [distances, setDistances] = useState<never[]>([]);
-  const [showIDMatch, setIDMatchShow] = useState<boolean>(false);
-  const [hasSeenIDMatch, setIDMatchSeen] = useState<boolean>(false);
   const emitter = useRef<NativeEventEmitter | null>(null);
   const latestFetchTime = NativeModules.ItoBluetooth.getLatestFetchTime();
   console.log('Latest fetch time:', latestFetchTime);
@@ -164,21 +160,6 @@ export const Home: React.FC<{
     };
   }, [distances.length]);
 
-  useEffect(() => {
-    function refresh(): void {
-      if (NativeModules.ItoBluetooth.isPossiblyInfected() && !hasSeenIDMatch) {
-        setIDMatchShow(true);
-      }
-    }
-    const interval = setInterval(refresh, 2500);
-    return (): void => clearInterval(interval);
-  }, [navigation, hasSeenIDMatch]);
-
-  const closeIDMatch = (): void => {
-    setIDMatchShow(false);
-    setIDMatchSeen(true);
-  };
-
   const closeDistances = distances.filter((d) => d <= 1.5);
   const furtherDistances = distances.filter((d) => d > 1.5 && d <= 5);
   // let contactDescription;
@@ -245,16 +226,6 @@ export const Home: React.FC<{
   return (
     <TouchableWithoutFeedback>
       <View style={[global.container, {paddingBottom: 100}]}>
-        {showIDMatch && (
-          <BlurBackground>
-            <View style={styles.IDMatchPopup}>
-              <Text style={styles.IDMatchText}>
-                {t('home.alertContactDiscovered')}
-              </Text>
-              <BasicButton title={t('home.whatNext')} onPress={closeIDMatch} />
-            </View>
-          </BlurBackground>
-        )}
         <Header />
         <View style={styles.lastFetchRow}>
           <Text style={styles.lastFetch}>

App/screens/HomeBluetooth.tsx

@@ -152,8 +152,6 @@ export const HomeBluetooth: React.FC<{
 }> = ({navigation}) => {
   const {t} = useTranslation();
   const [distances, setDistances] = useState<never[]>([]);
-  const [showIDMatch, setIDMatchShow] = useState<boolean>(false);
-  const [hasSeenIDMatch, setIDMatchSeen] = useState<boolean>(false);
   const emitter = useRef<NativeEventEmitter | null>(null);
   const latestFetchTime = NativeModules.ItoBluetooth.getLatestFetchTime();
   console.log('Latest fetch time:', latestFetchTime);
@@ -179,21 +177,6 @@ export const HomeBluetooth: React.FC<{
     };
   }, [distances.length]);
 
-  useEffect(() => {
-    function refresh(): void {
-      if (NativeModules.ItoBluetooth.isPossiblyInfected() && !hasSeenIDMatch) {
-        setIDMatchShow(true);
-      }
-    }
-    const interval = setInterval(refresh, 2500);
-    return (): void => clearInterval(interval);
-  }, [navigation, hasSeenIDMatch]);
-
-  const closeIDMatch = (): void => {
-    setIDMatchShow(false);
-    setIDMatchSeen(true);
-  };
-
   const r1Distances = distances.filter((d) => d <= 1.5);
   const r2Distances = distances.filter((d) => d > 1.5 && d <= 5);
   const r3Distances = distances.filter((d) => d > 5);
@@ -278,16 +261,6 @@ export const HomeBluetooth: React.FC<{
   return (
     <TouchableWithoutFeedback>
       <View style={global.container}>
-        {showIDMatch && (
-          <BlurBackground>
-            <View style={styles.IDMatchPopup}>
-              <Text style={styles.IDMatchText}>
-                {t('home.alertContactDiscovered')}
-              </Text>
-              <BasicButton title={t('home.whatNext')} onPress={closeIDMatch} />
-            </View>
-          </BlurBackground>
-        )}
         <Header
           showHelp={true}
           navigationButton={{