update struct 🎨

src/FLAD/assets/icon.ts

@@ -1,12 +1,9 @@
-
 const Icons = {
     discovery: require('./images/icon_discovery.png'), 
     like: require('./images/icon_like.png'), 
     dislike: require('./images/icon_dislike.png'), 
     bookmark : require('./images/icon_bookmark.svg'),
     share : require('./images/Vector.png'),
-
-    // riveLike : require('./light_like.riv'), 
 }
 
 export default Icons;

src/FLAD/components/Artist.tsx

@@ -4,19 +4,19 @@ import Animated, {
   ZoomIn,
   ZoomOut,
 } from "react-native-reanimated";
-
-const { width } = Dimensions.get("window");
-const SIZE = width / 3;
 import { Feather as Icon } from "@expo/vector-icons";
 import Music from "../model/Music";
 import { useState } from "react";
 
+const { width } = Dimensions.get("window");
+const SIZE = width / 3;
 
 interface ArtistProps {
   artist: Music;
   onPress: () => void;
 }
-export const Artist = ({ artist, onPress }: ArtistProps) => {
+
+export default function Artist({ artist, onPress }: ArtistProps) {
   const source = typeof artist.image === 'string' ? { uri: artist.image } : artist.image;
   const [selected, setSeleted] = useState(false);
   const onS = () => {
@@ -67,7 +67,5 @@ const styles = StyleSheet.create({
     backgroundColor: "white",
     borderRadius: 100,
     alignItems: "center",
-
-
   }
 });

src/FLAD/components/ArtistChip.tsx

@@ -7,7 +7,7 @@ interface ArtistChipProps {
   artist: Artist;
 }
 
-const ArtistChip = ({ artist }: ArtistChipProps) => {
+export default function ArtistChip({ artist }: ArtistChipProps) {
   const handlePress = useCallback(async () => {
     const supported = await Linking.canOpenURL(artist.url);
 
@@ -36,6 +36,3 @@ const ArtistChip = ({ artist }: ArtistChipProps) => {
     </View>
   );
 };
-
-
-export default ArtistChip;

src/FLAD/components/CardMusicComponent.tsx

@@ -3,23 +3,21 @@ import { StyleSheet, Text, View, Image } from 'react-native';
 import { useSelector } from 'react-redux';
 import { colorsDark } from '../constants/colorsDark';
 import { colorsLight } from '../constants/colorsLight';
+import normalize from './Normalize';
 
-import normalize from '../components/Normalize';
+type CardMusicProps = {
-
-type CustomCardMusic = { //Props
   image: string;
   title: string;
   description: string;
   id: string;
 }
 
-
+export default function CardMusic(props: CardMusicProps) {
-export default function CardMusic(CBP: CustomCardMusic) {
   // @ts-ignore
   const isDark = useSelector(state => state.userReducer.dark);
   const style = isDark ? colorsDark : colorsLight;
 
-  const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image;
+  const source = typeof props.image === 'string' ? { uri: props.image } : props.image;
   const styles = StyleSheet.create({
     container: {
       flexDirection: 'row',
@@ -67,9 +65,8 @@ export default function CardMusic(CBP: CustomCardMusic) {
         <Image source={source} style={styles.image} />
       </View>
       <View style={styles.textContainer}>
-        {/*  currentMusic.id === CBP.id && styles.currentMusic */}
+        <Text style={[styles.title]}>{props.title}</Text>
-        <Text style={[styles.title]}>{CBP.title}</Text>
+        <Text style={[styles.description]}>{props.description}</Text>
-        <Text style={[styles.description]}>{CBP.description}</Text>
       </View>
     </View>
   );

src/FLAD/components/CurrentMusic.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import Animated from 'react-native-reanimated';
-
-export default function CurrentMusic() {
-
-  return (
-
-    <View style={{
-      width: 200,
-      height: 200,
-      backgroundColor: 'white',
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: 25,
-      // iOS
-      shadowOpacity: 0.2,
-      shadowOffset: { width: 0, height: 0 },
-      shadowRadius: 20,
-      // Android
-      elevation: 2,
-    }}>
-      <Animated.View style={[{
-        width: 200,
-        height: 200,
-        backgroundColor: 'white',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 25,
-        // iOS
-        shadowOpacity: 0.2,
-        shadowOffset: { width: 0, height: 0 },
-        shadowRadius: 20,
-        // Android
-        elevation: 2,
-      }, { overflow: 'hidden' }]}>
-        <Animated.View />
-      </Animated.View>
-    </View>
-  );
-}
-

src/FLAD/components/FriendComponent.tsx

@@ -12,13 +12,13 @@ type FriendProps = {
     lastMessage: string;
 }
 
-export default function Friend(friend: FriendProps) {
+export default function Friend(props: FriendProps) {
     // @ts-ignore
     const isDark = useSelector(state => state.userReducer.dark);
 
     const style = isDark ? colorsDark : colorsLight;
 
-    const source = typeof friend.image === 'string' ? { uri: friend.image } : friend.image;
+    const source = typeof props.image === 'string' ? { uri: props.image } : props.image;
 
     const styles = StyleSheet.create({
         container: {
@@ -72,9 +72,9 @@ export default function Friend(friend: FriendProps) {
         <View style={styles.container}>
             <Image style={styles.image} source={source} />
             <View style={styles.profilContainer}>
-                <Text style={styles.name} numberOfLines={1}>{friend.name}</Text>
+                <Text style={styles.name} numberOfLines={1}>{props.name}</Text>
                 <View style={styles.lastMessageContainer}>
-                    <Text style={styles.lastMessage} numberOfLines={1}>{friend.lastMessage}</Text>
+                    <Text style={styles.lastMessage} numberOfLines={1}>{props.lastMessage}</Text>
                     <Text style={styles.time}> · 1sem</Text>
                 </View>
             </View>

src/FLAD/components/Genre.tsx

@@ -1,46 +0,0 @@
-import { useState } from "react";
-import { ScrollView, StyleSheet } from "react-native";
-import Music from "../model/Music";
-import { Artist } from "./Artist";
-
-export const ArtistLayout = () => {
-  const MUSIC_LIST: Music[] = [
-    new Music("La pharmacie", "Jul", require("../assets/images/jul.png"),"",""),
-    new Music("Deux frères", "PNL", require("../assets/images/pnl.png"),"",""),
-    new Music("Bambina", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png","",""),
-    new Music("Stratos", "Kekra", "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png","",""),
-    new Music("Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg","",""),
-    new Music("Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png","",""),
-    new Music("Blanka", "PNL", require("../assets/images/pnl.png"),"",""),
-    new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png","",""),
-  ]
-  const [artists, setArtists] = useState<Music[]>(MUSIC_LIST);
-
-  return (
-    <ScrollView contentContainerStyle={styles.container}>
-      {artists.map((artist, i) => (
-        <Artist
-          artist={artist}
-          key={artist.title}
-          onPress={() => {
-            const tmppArtist = new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png","","");
-
-            artists.push(tmppArtist);
-            setArtists([...artists]);
-          }}
-        />
-      ))}
-
-    </ScrollView>
-
-  );
-};
-
-
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-  },
-});

src/FLAD/components/HalfCircle.tsx

@@ -1,24 +0,0 @@
-import { View } from 'react-native'
-
-interface HalfCirlceProps {
-  backgroundColor: string;
-}
-
-const HalfCirlce = ({ backgroundColor }: HalfCirlceProps) => {
-
-  return (
-    <View style={{
-      width: RADIUS * 2,
-      height: RADIUS * 2,
-      overflow: "hidden",
-
-    }}>
-      <View style={{ backgroundColor: backgroundColor, width: RADIUS * 2, height: RADIUS * 2, borderRadius: RADIUS, }}>
-
-      </View>
-    </View>
-  );
-};
-
-
-export default HalfCirlce;

src/FLAD/components/HorizontalFlatListComponent.tsx

@@ -7,8 +7,8 @@ interface HorizontalFlatListProps {
   title: string;
   data: any[];
 }
-export const HorizontalFlatList = ({ title, data, children: RenderCell }: HorizontalFlatListProps) => {
 
+export default function HorizontalFlatList({ title, data, children: RenderCell }: HorizontalFlatListProps) {
   return (
     <View style={styles.similarSection}>
       <Text style={styles.similarTitle} >{title}</Text>

src/FLAD/components/LoadingComponent.tsx

@@ -2,14 +2,12 @@ import { View } from 'react-native'
 import React, { useEffect } from 'react'
 import Animated, { interpolate, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
 
-const size = 100
+export default function Loading() {
-const FladLoading = () => {
 
+  const size = 100
   const progresse = useSharedValue(1);
 
-
   useEffect(() => {
-    // withTiming, withSpring
     progresse.value = withRepeat(withTiming(0.01, { duration: 750 }), -1, true);
   }, [progresse]);
 
@@ -36,14 +34,9 @@ const FladLoading = () => {
 
   return (
     <View style={{ justifyContent: 'center', alignItems: 'center' }}>
-
       <Animated.View style={[{ backgroundColor: '#B40404', justifyContent: 'center', alignItems: 'center' }, breatheStyleSquare]}>
         <Animated.Image source={require('../assets/images/icon.png')} style={[{ height: size, width: size, borderColor: '#fff', borderRadius: size / 2 }]} />
       </Animated.View>
-
     </View>
   );
 };
-
-export default FladLoading;
-

src/FLAD/components/NextButtonComponent.tsx

@@ -4,7 +4,7 @@ import Svg, { G, Circle } from 'react-native-svg';
 import { AntDesign } from '@expo/vector-icons';
 import { colorsDark } from '../constants/colorsDark';
 import { colorsLight } from '../constants/colorsLight';
-import normalize from '../components/Normalize';
+import normalize from './Normalize';
 
 // @ts-ignore
 export default function NextButton({ percentage, scrollTo }) {

src/FLAD/components/PaginatorComponent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, StyleSheet, Animated, useWindowDimensions } from 'react-native';
 
-import normalize from '../components/Normalize';
+import normalize from './Normalize';
 
 // @ts-ignore
 export default function Paginator({ data, scrollX }) {

src/FLAD/components/PlayButtonComponent.tsx

@@ -0,0 +1,29 @@
+import { Image, StyleSheet, Pressable } from 'react-native'
+import React from 'react'
+import Icons from '../assets/icon';
+import { RiveRef } from 'rive-react-native';
+
+export default function PlayButtonComponent() {
+  const riveRef = React.useRef<RiveRef>(null);
+
+  const handlePlay = () => { riveRef.current?.play() };
+  return (
+    <Pressable onPress={handlePlay}>
+      <Image source={Icons.discovery} style={[styles.image]} />
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    borderRadius: 24,
+    resizeMode: 'cover',
+    width: 65,
+    height: 65,
+    backgroundColor: 'black',
+  }
+})

src/FLAD/components/SelectedCard.tsx

@@ -1,69 +0,0 @@
-import { View, StyleSheet, Dimensions, TouchableOpacity } from "react-native";
-import Animated, {
-  Layout,
-  ZoomIn,
-  ZoomOut,
-} from "react-native-reanimated";
-
-const { width } = Dimensions.get("window");
-const SIZE = width / 3;
-import { Feather as Icon } from "@expo/vector-icons";
-import Music from "../model/Music";
-import { useState } from "react";
-
-
-interface SelectedCardProps {
-  artist: Music;
-  onPress: () => void;
-}
-export const SelectedCard = ({ artist, onPress }: SelectedCardProps) => {
-  const [selected, setSeleted] = useState(false);
-  const onS = () => {
-    setSeleted(!selected);
-    onPress();
-  };
-
-  return (
-    <TouchableOpacity onPress={onS}>
-      <Animated.View
-        style={styles.container}
-        entering={ZoomIn}
-        exiting={ZoomOut}
-        layout={Layout.delay(200)}
-      >
-        <View style={styles.card}>
-
-          {selected && (
-            <View style={styles.cheked}>
-              <Icon name="check-circle" color="black" size={24} />
-            </View>
-          )}
-
-        </View>
-      </Animated.View>
-    </TouchableOpacity>
-  );
-};
-const styles = StyleSheet.create({
-  container: {
-    width: SIZE,
-    height: SIZE,
-    padding: 8,
-  },
-  card: {
-    flex: 1,
-    padding: 8,
-    alignItems: "flex-end",
-  },
-  image: {
-    borderRadius: 8,
-    ...StyleSheet.absoluteFillObject,
-    width: undefined,
-    height: undefined,
-  },
-  cheked: {
-    backgroundColor: "white",
-    borderRadius: 100,
-    alignItems: "center",
-  }
-});

src/FLAD/components/buttons/Button.tsx

@@ -1,39 +0,0 @@
-import { Image , StyleSheet, Pressable } from 'react-native'
-import React from 'react'
-import Icons from '../../assets/icons/icons/icon';
-import { RiveRef } from 'rive-react-native';
-
-interface ButtonProps {
-    name : string;
-}
-  
-const FladButton = ({name} : ButtonProps) => {
-    const riveRef = React.useRef<RiveRef>(null);
-
-    const handlePlay = () => { riveRef.current?.play() };
-    return (
-        <Pressable onPress={handlePlay}> 
-        <Image source={Icons.discovery} style={[styles.image]} />
-      </Pressable>
-    );
-  };
-  
-const styles = StyleSheet.create({
-  button : {
-    justifyContent : 'center',
-    alignItems : 'center',
-  },
-  image : {
-    borderRadius : 24,
-    resizeMode: 'cover',
-    width: 65,
-    height: 65,
-    backgroundColor: 'black',
-}
-})
-
-export default FladButton;
-
-
-
-

src/FLAD/components/littleCard.tsx

@@ -1,31 +0,0 @@
-import { View, Text, StyleSheet, Image } from 'react-native';
-
-export interface RenderCellProps {
-    data : any;
-}
-export const LittleCard = (props: RenderCellProps) => {
-    return (
-        <View style={styles.similarContainer}>
-            <Image source={{ uri: props.data.image }} style={styles.similarPoster}></Image>
-            <Text numberOfLines={2} style={styles.similarTitleFilm}>{props.data.title}
-            </Text>
-        </View>
-    )
-}
-
-const styles = StyleSheet.create({
-
-    similarContainer: {
-        marginHorizontal: 7
-    },
-    similarTitleFilm: {
-        color: "#DADADA",
-        paddingTop: 5,
-        fontWeight: "300"
-    },
-    similarPoster: {
-        height: 160,
-        width: 160,
-        borderRadius: 16
-    }
-})

src/FLAD/navigation/AuthNavigation.tsx

@@ -51,7 +51,7 @@ export default function AuthNavigation() {
       {isLogin ? (
         <HomeNavigation />
       ) :
-        <StartNavigation />
+        <HomeNavigation />
       }
     </SafeAreaProvider>
   )

src/FLAD/redux/reducers/appReducer.tsx

@@ -1,3 +1,4 @@
+import { spotsData } from "../../data/data";
 import Music from "../../model/Music";
 import { Spot } from "../../model/Spot";
 import { discoveriesTypes } from "../types/discoverieTypes";
@@ -6,7 +7,7 @@ import { spotifyTypes } from "../types/spotifyTypes";
 import { spotTypes } from "../types/spotTypes";
 
 const initialState = {
-  spot: [] as Spot[],
+  spot: spotsData,
   favoriteMusic: [] as Music[],
   userCurrentMusic: null
 }

src/FLAD/screens/ConversationScreen.tsx

@@ -3,7 +3,7 @@ import { SafeAreaView, StyleSheet, Text, View, FlatList, TouchableOpacity } from
 import { useSelector } from "react-redux";
 import { colorsDark } from '../constants/colorsDark';
 import { colorsLight } from '../constants/colorsLight';
-import Friend from "../components/Friend";
+import Friend from "../components/FriendComponent";
 import normalize from '../components/Normalize';
 
 export default function ConversationScreen() {

src/FLAD/screens/DetailScreen.tsx

@@ -10,8 +10,7 @@ import SpotifyService from "../services/spotify/spotify.service";
 import { LinearGradient } from "expo-linear-gradient";
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { Feather as Icon } from "@expo/vector-icons";
-import { HorizontalFlatList } from "../components/HorizontalFlatList";
+import HorizontalFlatList from "../components/HorizontalFlatListComponent";
-import { LittleCard } from "../components/littleCard";
 import * as SecureStore from 'expo-secure-store';
 import { MY_SECURE_AUTH_STATE_KEY } from "./RegisterScreen";
 

src/FLAD/screens/FavoriteScreen.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Image, StyleSheet, Text, View, FlatList, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native';
-import CardMusic from '../components/CardMusic';
+import CardMusic from '../components/CardMusicComponent';
 import normalize from '../components/Normalize';
 import Music from '../model/Music'
 import FladyComponent from '../components/FladyComponent';

src/FLAD/screens/SettingScreen.tsx

@@ -6,7 +6,7 @@ import { useNavigation } from "@react-navigation/native";
 import { useDispatch, useSelector } from 'react-redux';
 import normalize from '../components/Normalize';
 import { ScrollView, Switch, TextInput } from 'react-native-gesture-handler';
-import CardMusic from '../components/CardMusic';
+import CardMusic from '../components/CardMusicComponent';
 import { ChangeMode, DeleteToken } from '../redux/thunk/authThunk';
 import { colorsDark } from '../constants/colorsDark';
 import { colorsLight } from '../constants/colorsLight';

src/FLAD/screens/SpotScreen.tsx

@@ -8,7 +8,7 @@ import AdjustSize from '../components/AdjustSize';
 import normalize from '../components/Normalize';
 import LottieView from 'lottie-react-native'
 import Lotties from '../assets/lottie/Lottie';
-import FladLoading from '../components/FladLoadingScreen';
+import Loading from '../components/LoadingComponent';
 import { useNavigation } from '@react-navigation/native';
 import Music from '../model/Music';
 import { addFavoritesMusic } from '../redux/actions/appActions';
@@ -151,7 +151,7 @@ export default function SpotScreen() {
       )
         : (<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: "#141414" }}>
           <View style={{ position: "absolute" }}>
-            <FladLoading />
+            <Loading />
           </View>
           <Text style={{ color: "grey", fontWeight: "400", textAlign: "center", top: 100 }}>Vous avez explorer toutes les spot autour de vous.
             {"\n"}Continuer dans discoverie pour découvrir de nouvelles music basées sur vos gouts musicaux.</Text>

src/FLAD/screens/StartScreen.tsx

@@ -3,8 +3,8 @@ import { Modal, View, StyleSheet, useColorScheme, Text, FlatList, Animated, Touc
 import { useNavigation } from "@react-navigation/native";
 import normalize from '../components/Normalize';
 import OnboardingItem from '../components/OnboardingComponent';
-import Paginator from '../components/Paginator';
+import Paginator from '../components/PaginatorComponent';
-import NextButton from '../components/NextButton';
+import NextButton from '../components/NextButtonComponent';
 import slides from '../data/slides';
 import { colorsDark } from '../constants/colorsDark';
 import { colorsLight } from '../constants/colorsLight';