upgrade navbar

src/Api/src/services/LocationService.ts

@@ -2,15 +2,15 @@ import { UserLocation } from '../models/Location';
 import LocationSchema from "../database/LocationSchema";
 
 class LocationService {
-    private locations = LocationSchema;
+    private location = LocationSchema;
     public async getNearUser(userId: string, musicId: string, latitude: number, longitude: number) {
-        await this.locations.findOneAndUpdate(
+        await this.location.findOneAndUpdate(
             { userId },
             { userId, musicId, latitude, longitude },
             { upsert: true }
         );
 
-        const snapshot = await this.locations.find({ userId: { $ne: userId } });
+        const snapshot = await this.location.find({ userId: { $ne: userId } });
         if (!snapshot.length) {
             console.log('No matching documents.');
             return;
@@ -50,6 +50,17 @@ class LocationService {
             return dist;
         }
     }
+
+    public async delete(
+        id: string
+    ): Promise<void | Error> {
+        try {
+            await this.location.findByIdAndRemove(id);
+        } catch (error: any) {
+            throw new Error(error.message);
+        }
+    }
+
 }
 
 export default LocationService;

src/Api/src/services/UserService.ts

@@ -1,5 +1,4 @@
 import { IMusic } from "../models/Music";
-import LocationSchema from "../database/LocationSchema";
 import UserSchema from "../database/UserSchema";
 import token from "./TokenService";
 import { IPerson } from "../models/Person";
@@ -7,7 +6,6 @@ import mongoose from "mongoose";
 
 class UserService {
     private user = UserSchema;
-    private location = LocationSchema;
 
     public async register(
         name: string,
@@ -52,7 +50,6 @@ class UserService {
     ): Promise<void | Error> {
         try {
             await this.user.findByIdAndRemove(id);
-            await this.location.findByIdAndRemove(id);
         } catch (error: any) {
             throw new Error(error.message);
         }

src/FLAD/components/SimilarMusicComponent.tsx

@@ -1,5 +1,5 @@
 import { View, Text, StyleSheet, Image } from 'react-native';
-import Music from '../model/Music';
+import Music from '../models/Music';
 import normalize from './Normalize';
 
 export interface RenderCellProps {
@@ -18,7 +18,7 @@ export const SimilarMusic = (props: RenderCellProps) => {
 const styles = StyleSheet.create({
 
     similarContainer: {
-        marginHorizontal: normalize(7)
+        marginHorizontal: 6
     },
     similarTitle: {
         color: "#DADADA",

src/FLAD/components/UserInfoBadgeComponent.tsx

@@ -41,26 +41,36 @@ export default function UserInfoBadge(props: UserInfoProps) {
 
     const date = formatDate(props.date);
 
-    return (
-        <View style={styles.container}>
-            <Image source={{ uri: props.image }} style={styles.image} />
-            <Text style={styles.text}>Il y a </Text>
-            {date.days !== 0 ? (
+    let timeSection;
+
+    if (date.days !== 0) {
+        timeSection = (
             <View style={styles.section}>
                 <Text style={[styles.text, styles.boldText]}>{date.days}</Text>
                 <Text style={styles.text}>j </Text>
             </View>
-            ) : date.hours !== 0 ? (
+        );
+    } else if (date.hours !== 0) {
+        timeSection = (
             <View style={styles.section}>
                 <Text style={[styles.text, styles.boldText]}>{date.hours}</Text>
                 <Text style={styles.text}>h </Text>
             </View>
-            ) : (
+        );
+    } else {
+        timeSection = (
             <View style={styles.section}>
                 <Text style={[styles.text, styles.boldText]}>{date.minutes}</Text>
                 <Text style={styles.text}>min</Text>
             </View>
-            )}
+        );
+    }
+
+    return (
+        <View style={styles.container}>
+            <Image source={{ uri: props.image }} style={styles.image} />
+            <Text style={styles.text}>Il y a </Text>
+            {timeSection}
             <Text style={styles.text}> {'<'} </Text>
             <Text style={[styles.text, styles.boldText]}>{props.distance}</Text>
             <Text style={styles.text}>m</Text>

src/FLAD/navigation/HomeNavigation.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { View, Alert } from 'react-native';
+import { View, Alert, Platform } from 'react-native';
 import { faUser, faEnvelope, faHeart, faMusic } from "@fortawesome/free-solid-svg-icons"
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import FavoriteNavigation from './FavoriteNavigation';
 import SettingNavigation from './SettingNavigation';
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
@@ -16,6 +16,7 @@ import * as Location from 'expo-location';
 import { getSpotList } from '../redux/thunk/spotThunk';
 import Music from '../models/Music';
 import normalize from '../components/Normalize';
+import { BlurView } from 'expo-blur';
 
 export default function HomeNavigation() {
   //@ts-ignore
@@ -113,16 +114,25 @@ export default function HomeNavigation() {
     }
   }, [errorEmptyMusic]);
 
+  const MenuBlur = () => {
+    return (
+      <BlurView
+        intensity={30}
+        style={{ flex: 1, backgroundColor: isDark ? 'rgba(20, 20, 20, 0.9)' : 'rgba(255, 255, 255, 0.7)' }}
+      />
+    );
+  };
 
   return (
-    // @ts-ignore
-    <NavigationContainer theme={isDark ? DarkTheme : DefaultTheme}>
+    <NavigationContainer>
       <BottomTabNavigator.Navigator
         initialRouteName="Spots"
         screenOptions={{
+          tabBarBackground: Platform.OS === 'ios' ? () => <MenuBlur /> : undefined,
           tabBarActiveTintColor: isDark ? "white" : "rgb(255, 45, 85)",
           tabBarStyle: {
-            backgroundColor: isDark ? "rgb(46,46,46)" : "white",
+            position: 'absolute',
+            borderTopColor: isDark ? 'rgba(255, 255, 255, 0.25)' : 'rgba(50, 50, 50, 0.07)',
           },
         }}>
         <BottomTabNavigator.Screen name="Spots" component={SpotNavigation}
@@ -138,7 +148,7 @@ export default function HomeNavigation() {
               maxWidth: 12.5,
               marginTop: 3,
               maxHeight: 13,
-              borderRadius: 7,
+              borderRadius: 6.5,
               fontSize: normalize(10),
               lineHeight: 12,
             },

src/FLAD/redux/reducers/appReducer.tsx

@@ -9,7 +9,7 @@ const initialState = {
   favoriteMusic: [] as Spot[],
   userCurrentMusic: null,
   nbAddedFavoriteMusic: 0,
-  oldSpot: [] as String[],
+  oldSpot: [] as string[],
 }
 
 const appReducer = (state = initialState, action: any) => {

src/FLAD/screens/ConversationScreen.tsx

@@ -1,5 +1,5 @@
 import { useNavigation } from "@react-navigation/native";
-import { SafeAreaView, StyleSheet, Text, View, FlatList, TouchableOpacity } from "react-native";
+import { StyleSheet, Text, View, FlatList, TouchableOpacity } from "react-native";
 import { useSelector } from "react-redux";
 import { colorsDark } from '../constants/colorsDark';
 import { colorsLight } from '../constants/colorsLight';
@@ -48,7 +48,7 @@ export default function ConversationScreen() {
     })
 
     return (
-        <SafeAreaView style={styles.mainSafeArea}>
+        <View style={styles.mainSafeArea}>
             <View style={styles.titleContainer}>
                 <Text style={styles.title}>Messages</Text>
                 <Text style={styles.description}>Retrouvez ici les discussions</Text>
@@ -65,6 +65,6 @@ export default function ConversationScreen() {
                     </TouchableOpacity>
                 )}
             />
-        </SafeAreaView>
+        </View>
     )
 }

src/FLAD/screens/DetailScreen.tsx

@@ -1,5 +1,5 @@
 import { useIsFocused, useNavigation } from "@react-navigation/native";
-import { View, Text, Image, StyleSheet, TouchableOpacity, ScrollView, Share, Alert, SafeAreaView, Linking, FlatList, ActivityIndicator } from "react-native";
+import { View, Text, Image, StyleSheet, TouchableOpacity, ScrollView, Share, Alert, Linking, FlatList, ActivityIndicator, Platform, SafeAreaView } from "react-native";
 import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, withSpring } from "react-native-reanimated";
 import { Audio } from 'expo-av';
 import { useEffect, useState } from "react";
@@ -133,12 +133,11 @@ export default function DetailScreen({ route }) {
         mainSafeArea: {
             height: '100%',
             width: '100%',
-            paddingTop: insets.top
         },
         backgroundSection: {
             height: "100%",
             width: "100%",
-            position: "absolute"
+            position: "absolute",
         },
         back_drop: {
             height: "100%",
@@ -149,13 +148,14 @@ export default function DetailScreen({ route }) {
             height: "100%",
         },
         card: {
-            alignItems: 'center'
+            alignItems: 'center',
+            paddingTop: insets.top
         },
         cardCover: {
             width: normalize(390),
             height: normalize(390),
             borderRadius: 16,
-            resizeMode: 'stretch'
+            resizeMode: 'stretch',
         },
         section1: {
             flexDirection: "row",
@@ -204,7 +204,7 @@ export default function DetailScreen({ route }) {
             fontWeight: "bold",
             color: "white",
             fontSize: normalize(17),
-            paddingLeft: normalize(5)
+            paddingLeft: "2%"
         },
         date: {
             fontWeight: "400",
@@ -279,12 +279,10 @@ export default function DetailScreen({ route }) {
     return (
         <View>
             <View style={styles.backgroundSection}>
-
                 <Image
+                    blurRadius={Platform.OS !== 'ios' ? 10 : undefined}
                     style={styles.back_drop}
-                    source={{
-                        uri: item.cover,
-                    }}
+                    source={{ uri: item.cover }}
                 />
                 <View style={styles.overlay} />
                 <BlurView
@@ -299,7 +297,6 @@ export default function DetailScreen({ route }) {
             </View>
             <SafeAreaView style={styles.mainSafeArea}>
                 <ScrollView>
-
                     <View style={styles.card}>
                         <TouchableOpacity onPress={() => { Linking.openURL(item.url); }}>
                             <Animated.Image source={{ uri: item.cover }} style={[styles.cardCover, styleAnimatedImage]} />
@@ -325,7 +322,7 @@ export default function DetailScreen({ route }) {
                             </View>
                         </View>
 
-                        {item.trackPreviewUrl && (
+                        {!!item.trackPreviewUrl && (
                             <TouchableOpacity style={styles.playButton} onPress={play}>
                                 <View style={styles.bodyPlayButton}>
                                     <Image style={styles.imagePlayButton} source={isPlaying ? require('../assets/images/play_icon.png') : require('../assets/images/pause_icon.png')} />
@@ -349,8 +346,6 @@ export default function DetailScreen({ route }) {
                         </TouchableOpacity>
                     </View>
 
-
-
                     <View style={{ paddingTop: normalize(25) }}>
                         <Text style={styles.similarTitle} >Similaire</Text>
                         {loading ? (

src/FLAD/screens/FavoriteScreen.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, View, FlatList, SafeAreaView, SectionList, TouchableOpacity, RefreshControl } from 'react-native';
+import { StyleSheet, Text, View, FlatList, SectionList, TouchableOpacity, RefreshControl } from 'react-native';
 import CardMusic from '../components/CardMusicComponent';
 import normalize from '../components/Normalize';
 import { Svg, Path } from 'react-native-svg';
 import FladyComponent from '../components/FladyComponent';
-import { useNavigation } from "@react-navigation/native";
+import { useNavigation, useFocusEffect } from "@react-navigation/native";
 import { useSelector, useDispatch } from 'react-redux';
 import { colorsDark } from '../constants/colorsDark';
 import { colorsLight } from '../constants/colorsLight';
@@ -12,7 +12,6 @@ import { getFavoriteMusic } from '../redux/thunk/appThunk';
 import { Spot } from '../models/Spot';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { resetNbAddedFavoriteMusic } from '../redux/actions/appActions';
-import { useFocusEffect } from '@react-navigation/native';
 
 export default function FavoriteScreen() {
 
@@ -125,7 +124,7 @@ export default function FavoriteScreen() {
     });
 
     return (
-        <SafeAreaView style={styles.mainSafeArea}>
+        <View style={styles.mainSafeArea}>
             <View style={styles.titleContainer}>
                 <View style={styles.header}>
                     <Text style={styles.title}>Favoris</Text>
@@ -176,6 +175,6 @@ export default function FavoriteScreen() {
                 nestedScrollEnabled={true}
 
             />
-        </SafeAreaView>
+        </View>
     );
 };

src/FLAD/screens/ProfilScreen.tsx

@@ -7,7 +7,7 @@ import { useNavigation } from "@react-navigation/native";
 import { useDispatch, useSelector } from 'react-redux';
 import normalize from '../components/Normalize';
 import * as ImagePicker from 'expo-image-picker';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { colorsDark } from '../constants/colorsDark';
 import { colorsLight } from '../constants/colorsLight';
 import { deleteUser } from '../redux/thunk/authThunk';
@@ -177,10 +177,13 @@ export default function ProfilScreen() {
         }
     }, [errorUpdate]);
 
+    const insets = useSafeAreaInsets();
+
     const styles = StyleSheet.create({
         mainSafeArea: {
             flex: 1,
             backgroundColor: style.body,
+            paddingTop: insets.top
         },
         container: {
             marginTop: 20,
@@ -393,7 +396,7 @@ export default function ProfilScreen() {
 
     return (
         <DismissKeyboard>
-            <SafeAreaView style={styles.mainSafeArea}>
+            <View style={styles.mainSafeArea}>
                 <ScrollView>
                     <View style={styles.container}>
                         <TouchableOpacity
@@ -505,7 +508,7 @@ export default function ProfilScreen() {
                         </Modal>
                     </View>
                 </ScrollView>
-            </SafeAreaView>
+            </View>
         </DismissKeyboard>
     );
 };

src/FLAD/screens/SettingScreen.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, SafeAreaView, Alert } from 'react-native';
+import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, Alert } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 import { useNavigation } from "@react-navigation/native";
 import { useDispatch, useSelector } from 'react-redux';
@@ -272,7 +272,7 @@ export default function SettingScreen() {
     })
     return (
         <DismissKeyboard>
-            <SafeAreaView style={styles.mainSafeArea}>
+            <View style={styles.mainSafeArea}>
                 <ScrollView>
                     <View style={styles.container}>
                         <Text style={styles.title}>Réglages</Text>
@@ -384,7 +384,7 @@ export default function SettingScreen() {
                         </View>
                     </View>
                 </ScrollView>
-            </SafeAreaView>
+            </View>
         </DismissKeyboard>
     );
 };

src/FLAD/screens/SpotScreen.tsx

@@ -8,17 +8,20 @@ import Loading from '../components/LoadingComponent';
 import { useNavigation } from '@react-navigation/native';
 import { useDispatch, useSelector } from 'react-redux';
 import { Spot } from '../models/Spot';
-import { removeFromSpotList } from '../redux/actions/spotActions';
-import { MusicServiceProvider } from '../models/MusicServiceProvider';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Artist from '../models/Artist';
 import { addMusicToFavorite } from '../redux/thunk/appThunk';
 import { addToPlaylist, removeSpot } from '../redux/thunk/spotThunk';
 import UserInfoBadge from '../components/UserInfoBadgeComponent';
+import { colorsDark } from '../constants/colorsDark';
+import { colorsLight } from '../constants/colorsLight';
 
 export default function SpotScreen() {
   //@ts-ignore
   const spotReducer: Spot[] = useSelector(state => state.appReducer.spot)
+   // @ts-ignore
+   const isDark = useSelector(state => state.userReducer.dark);
+   const style = isDark ? colorsDark : colorsLight;
 
   const [cards, setCards] = useState<Spot[]>(spotReducer);
   const [currentCard, setcurrentCard] = useState<Spot>(cards[cards.length - 1]);
@@ -66,7 +69,7 @@ export default function SpotScreen() {
       justifyContent: 'center',
       alignItems: 'center',
       flex: 1,
-      backgroundColor: "#141414",
+      backgroundColor: style.body,
       paddingTop: insets.top
     },
     posterBackground: {
@@ -106,7 +109,7 @@ export default function SpotScreen() {
       paddingHorizontal: 30,
       width: '100%',
       position: "absolute",
-      top: "85%"
+      top: "80%"
     },
     button: {
       alignItems: 'center',