add click outside close windows component

frontend/package.json

@@ -8,39 +8,39 @@
   },
   "dependencies": {
     "@react-google-maps/api": "^2.8.1",
-    "@react-navigation/bottom-tabs": "^6.0.9",
-    "@react-navigation/native": "^6.0.6",
-    "@react-navigation/native-stack": "^6.2.5",
-    "axios": "^0.24.0",
-    "dateformat": "^5.0.2",
-    "expo": "^44.0.4",
-    "expo-notifications": "^0.14.0",
-    "expo-permissions": "^13.1.0",
-    "expo-secure-store": "^11.1.0",
-    "expo-status-bar": "~1.1.0",
+    "@react-navigation/bottom-tabs": "^6.3.1",
+    "@react-navigation/native": "^6.0.10",
+    "@react-navigation/native-stack": "^6.6.2",
+    "axios": "^0.26.1",
+    "dateformat": "^5.0.3",
+    "expo": "^44.0.6",
+    "expo-notifications": "^0.14.1",
+    "expo-permissions": "^13.1.1",
+    "expo-secure-store": "^11.1.1",
+    "expo-status-bar": "~1.2.0",
     "google-map-react": "^2.1.10",
     "lodash": "^4.17.21",
     "lodash.isempty": "^4.4.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
     "react-google-maps": "^9.4.5",
     "react-google-maps-loader": "^4.3.0",
-    "react-native": "0.64.3",
+    "react-native": "0.68.1",
     "react-native-elements": "^3.4.2",
     "react-native-normalize": "^1.0.1",
-    "react-native-paper": "^4.11.1",
+    "react-native-paper": "^4.12.0",
     "react-native-paper-form-builder": "^2.1.2",
-    "react-native-safe-area-context": "3.3.2",
-    "react-native-screens": "~3.8.0",
-    "react-native-vector-icons": "^9.0.0",
-    "react-native-web": "0.17.1",
-    "react-redux": "^7.2.6",
+    "react-native-safe-area-context": "4.2.4",
+    "react-native-screens": "~3.13.1",
+    "react-native-vector-icons": "^9.1.0",
+    "react-native-web": "0.17.7",
+    "react-redux": "^8.0.1",
     "rn-fetch-blob": "^0.12.0",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "react-hook-form": "^7.22.5"
+    "react-hook-form": "^7.30.0"
   },
   "private": true
 }

frontend/src/components/ComponentVisible.js

+import { useEffect, useRef, useState } from 'react';
+
+export default function useComponentVisible(initialIsVisible) {
+  const [isComponentVisible, setIsComponentVisible] = useState(
+    initialIsVisible
+  );
+  const ref = useRef(null);
+
+  const handleHideDropdown = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      setIsComponentVisible(false);
+    }
+  };
+
+  const handleClickOutside = event => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setIsComponentVisible(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleHideDropdown, true);
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("keydown", handleHideDropdown, true);
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  });
+
+  return { ref, isComponentVisible, setIsComponentVisible };
+}

frontend/src/pages/map/map.js

-
-
+import { TouchableOpacity } from 'react-native';
 
 const MY_API_KEY = "AIzaSyB6HzGgBMx02aU48usTEQU6eijbvT8Sswo"
 
-import React, { Component } from 'react';
+import React, { Component, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash.isempty';
 import  jsonFile  from '../../../public/places.json';
 import GoogleMap from '../../components/googleMap';
 
+
+
+import useComponentVisible from '../../components/ComponentVisible'
+
+
+
+
+
+
 const InfoWindow = (props) => {
   const { place } = props;
+
+  const { ref, isComponentVisible } = useComponentVisible(true);
+
+
+
   const infoWindowStyle = {
     position: 'relative',
     bottom: 150,
@@ -22,35 +35,43 @@ const InfoWindow = (props) => {
     fontSize: 14,
     zIndex: 100,
   };
-
   return (
-    <div style={infoWindowStyle}>
-      <div style={{ fontSize: 16 }}>
-        {place.name}
-      </div>
-      <div style={{ fontSize: 14 }}>
+    <div ref={ref}>
+      {isComponentVisible &&(
+    <TouchableOpacity>
+
+            <div  style={infoWindowStyle}>
+
+              <div style={{ fontSize: 16 }}>
+                {place.name}
+              </div>
+              <div style={{ fontSize: 14 }}>
         <span style={{ color: 'grey' }}>
           {place.rating}
           {' '}
         </span>
-        <span style={{ color: 'orange' }}>
+                <span style={{ color: 'orange' }}>
           {String.fromCharCode(9733).repeat(Math.floor(place.rating))}
         </span>
-        <span style={{ color: 'lightgrey' }}>
+                <span style={{ color: 'lightgrey' }}>
           {String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
         </span>
-      </div>
-      <div style={{ fontSize: 14, color: 'grey' }}>
-        {place.types[0]}
-      </div>
-      <div style={{ fontSize: 14, color: 'grey' }}>
-        {'$'.repeat(place.price_level)}
-      </div>
-      <div style={{ fontSize: 14, color: 'green' }}>
-        {place.loue.loue ? 'disponible' : 'occupé'}
-      </div>
+              </div>
+              <div style={{ fontSize: 14, color: 'grey' }}>
+                {place.types[0]}
+              </div>
+              <div style={{ fontSize: 14, color: 'grey' }}>
+                {'$'.repeat(place.price_level)}
+              </div>
+              <div style={{ fontSize: 14, color: 'green' }}>
+                {place.loue.loue ? 'disponible' : 'occupé'}
+              </div>
+            </div>
+    </TouchableOpacity>
+      )}
     </div>
   );
+
 };
 
 // Marker component