Fixes and minimal addons

app/JAM/activities/Authentication.js

@@ -17,7 +17,7 @@ import PrimaryButton from "../components/PrimaryButton";
 import SegmentedControl from "@react-native-segmented-control/segmented-control";
 import {Ionicons} from "@expo/vector-icons";
 import {signIn, signUp} from "../services/AuthService";
-import {FIREBASE_AUTH, FIREBASE_DB} from "../config/FirebaseConfig";
+import {FIREBASE_AUTH} from "../config/FirebaseConfig";
 import ImagePickerBox from "../components/ImagePickerBox";
 import {useTranslation} from "react-i18next";
 

app/JAM/activities/Favourites.js

@@ -8,8 +8,7 @@ import {getStatusComponent} from "../services/StreetService";
 import {useTranslation} from "react-i18next";
 
 function Favourites({navigation}){
-    const [favs, setFavs] = useState([])
-    const [filteredFavs, setFilteredFavs] = useState([])
+    const [favs, setFavs] = useState([]);
     const { streetsInfos, updateFavs } = useContext(StreetsInfosContext);
     const { t } = useTranslation();
     function getDotColor(status) {
@@ -54,7 +53,7 @@ function Favourites({navigation}){
         },
         statusDot: {
             backgroundColor: Colors.grey,
-            borderRadius: '50%',
+            borderRadius: 50,
             width: 10,
             height: 10
         },

app/JAM/activities/Feed.js

@@ -7,6 +7,7 @@ import {getUserFavourites, getUserNotifications, removeNotification} from "../se
 import {StreetsInfosContext} from "../components/StreetsInfosProvider";
 import {MaterialCommunityIcons, MaterialIcons} from "@expo/vector-icons";
 import Animated, {
+    Extrapolate, interpolate,
     runOnJS,
     useAnimatedGestureHandler,
     useAnimatedStyle,
@@ -18,7 +19,7 @@ import {useTranslation} from "react-i18next";
 
 function Feed(){
     const [notifications, setNotifications] = useState(new Map());
-    const {updateNotifications} = useContext(StreetsInfosContext);
+    const {updateNotifications, setUpdateNotifications} = useContext(StreetsInfosContext);
     const { t } = useTranslation();
 
     const deviceWidth = Dimensions.get('window').width;
@@ -30,6 +31,8 @@ function Feed(){
         const gestureHandler = useAnimatedGestureHandler({
             onActive: (e) => {
                 dragX.value = e.translationX;
+                const opacityValue = interpolate(e.translationX, [0, -deviceWidth], [1, 0], Extrapolate.CLAMP);
+                opacity.value = opacityValue;
             },
             onEnd: (e) => {
                 if (threshold < e.translationX) {
@@ -39,6 +42,7 @@ function Feed(){
                     height.value = withTiming(0);
                     opacity.value = withTiming(0);
                     runOnJS(removeNotification)(notificationId);
+                    runOnJS(setUpdateNotifications)(currentUpdate => currentUpdate + 1);
                 }
             }
         });
@@ -51,7 +55,7 @@ function Feed(){
                 ],
                 height: height.value,
                 opacity: opacity.value,
-                marginTop: opacity.value === 1 ? 10 : 0
+                marginTop: opacity.value === 1 ? 10 : 10
             }
         })
         return (
@@ -106,8 +110,6 @@ function Feed(){
 
         if (timeDifference < 5) { // Consider timestamps within 5 seconds as "just now"
             return "just now";
-        } else if (timeDifference < 60) {
-            return `${timeDifference}s ago`;
         } else if (timeDifference < 3600) {
             const minutes = Math.floor(timeDifference / 60);
             return `${minutes}m ago`;
@@ -196,11 +198,12 @@ function Feed(){
                             notifications[a]['date'].toDate() - notifications[b]['date'].toDate() > 0 ? -1 : 1
                         )}
                         renderItem={({item}) => <Item title={notifications[item]['title']} description={notifications[item]['description']} notificationType={notifications[item]['notificationType']} date={notifications[item]['date']} notificationId={item}/>}
-                        KeyExtractor={({item}) => item}
+                        KeyExtractor={({ item }) => item.toString()}
                         style={styles.flatList}
                         persistentScrollbar={true}
                         showsVerticalScrollIndicator={true}
                         contentContainerStyle={{ paddingBottom: 300 }}
+                        extraData={updateNotifications}
                     />
                 </GestureHandlerRootView>
             </View>

app/JAM/activities/Home.js

@@ -1,11 +1,9 @@
-import {Text, View, StyleSheet, Platform} from "react-native";
+import {Text, View, StyleSheet} from "react-native";
 import TopBar from "./TopBar";
 import MapView from "react-native-maps";
 import {StatusBar} from "expo-status-bar";
-import {useContext, useEffect, useRef, useState} from "react";
+import {useContext, useEffect, useState} from "react";
 import MapViewDirections from "react-native-maps-directions";
-import * as Notifications from "expo-notifications";
-import Constants from "expo-constants";
 import StreetModal from "../components/StreetModal";
 import {StreetsInfosContext} from "../components/StreetsInfosProvider";
 import {Colors} from "../res/Colors";

app/JAM/activities/Settings.js

@@ -2,10 +2,11 @@ import {StyleSheet, Text, View} from "react-native";
 import TopBar from "./TopBar";
 import {Colors} from "../res/Colors";
 import {Picker} from "@react-native-picker/picker";
-import {useEffect, useReducer, useState} from "react";
+import {useState} from "react";
 import i18n from "../services/i18n"
 import {useTranslation} from "react-i18next";
 import {changeUserLanguagePref} from "../services/UserService";
+import Constants from "expo-constants";
 
 function Settings({navigation}){
     const [selectedLanguage, setSelectedLanguage] = useState(i18n.language);
@@ -41,6 +42,10 @@ function Settings({navigation}){
         },
         pickerItem: {
             height: 50
+        },
+        versionText: {
+            color: Colors.surface500,
+            fontStyle: "italic"
         }
     })
     return(
@@ -59,6 +64,7 @@ function Settings({navigation}){
                     </Picker>
                 </View>
             </View>
+            <Text style={styles.versionText}>{"JAM version: " + Constants.expoConfig.version}</Text>
         </View>
     )
 }

app/JAM/navigation/UserStack.js

@@ -1,10 +1,7 @@
-import React, {createContext, useContext, useEffect, useRef, useState} from "react";
+import React, {useContext, useEffect, useRef, useState} from "react";
 import { NavigationContainer } from "@react-navigation/native";
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import Home from "../activities/Home";
 import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
 import Feed from "../activities/Feed";
-import Favourites from "../activities/Favourites";
 import {Colors} from "../res/Colors";
 import {Ionicons, MaterialCommunityIcons, MaterialIcons} from "@expo/vector-icons";
 import {View, StyleSheet} from "react-native";
@@ -18,21 +15,27 @@ import Constants from "expo-constants";
 import * as Notifications from "expo-notifications";
 import {getUserLanguagePref, registerForPushNotificationsAsync} from "../services/UserService";
 import i18n from "../services/i18n";
+import * as Device from "expo-device";
 
 const Tab = createBottomTabNavigator();
 
 export default function UserStack() {
-    const { streetsInfos, setStreetsInfos, setLocation, setErrorMsg, setUpdate, setUpdateNotifications } = useContext(StreetsInfosContext);
+    const { streetsInfos, setStreetsInfos, location, setLocation, setErrorMsg, setUpdate, setUpdateNotifications } = useContext(StreetsInfosContext);
     const [expoPushToken, setExpoPushToken] = useState('');
     const [notification, setNotification] = useState(false);
     const notificationListener = useRef();
     const responseListener = useRef();
     const projectId = Constants.expoConfig.extra.eas.projectId;
     async function getToken() {
-        const token = await Notifications.getExpoPushTokenAsync({
-            projectId
-        });
-        return token.data;
+        if (Device.isDevice) {
+            const token = await Notifications.getExpoPushTokenAsync({
+                projectId
+            });
+
+            return token.data;
+        } else {
+            return '';
+        }
     }
 
     async function checkLangCorrespondence() {
@@ -42,6 +45,12 @@ export default function UserStack() {
         }
     }
 
+    async function retrieveAndSendLocation() {
+        let location = await Location.getCurrentPositionAsync({});
+        setLocation(location);
+        lamqttClient.publicPosition(location.coords.latitude, location.coords.longitude);
+    }
+
     useEffect(() => {
         checkLangCorrespondence();
     }, []);
@@ -83,9 +92,9 @@ export default function UserStack() {
             const expoPToken = await getToken();
             let subscriptionStatus = await lamqttClient.subscribeGeofence("parking", new MQTTBaseReceiver(streetsInfos, setStreetsInfos, setUpdate, expoPToken, setUpdateNotifications));
             console.log('SUBSCRIPTION STATUS:', subscriptionStatus);
-            await lamqttClient.publicPosition(44.499789104418404, 11.350433839312743);
+            await lamqttClient.publicPosition(location.coords.latitude, location.coords.longitude);
             setInterval(() => {
-                lamqttClient.publicPosition(44.499789104418404, 11.350433839312743)
+                retrieveAndSendLocation();
             }, 20000);
         })();
     }, []);

app/JAM/services/UserService.js

@@ -233,6 +233,7 @@ export async function registerForPushNotificationsAsync() {
         console.log(token);
     } else {
         alert('Must use physical device for Push Notifications');
+        return '';
     }
 
     return token.data;