@ -1,12 +1,17 @@
|
|||||||
export default class Artist {
|
export default class Artist {
|
||||||
private id: string;
|
private id: string;
|
||||||
private name: string;
|
private name: string;
|
||||||
private url: string; // Image.source
|
private _url: string; // Image.source
|
||||||
|
|
||||||
constructor(id: string, name: string, url: string) {
|
constructor(id: string, name: string, url: string) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.name = name;
|
this.name = name;
|
||||||
this.url = url;
|
this._url = url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get url(): string {
|
||||||
|
return this.url;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet, Text, View, Image } from 'react-native';
|
||||||
|
import { color } from 'react-native-reanimated';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
|
||||||
|
import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
|
||||||
|
import normalize from './Normalize';
|
||||||
|
|
||||||
|
type FriendProps = {
|
||||||
|
image: string;
|
||||||
|
name: string;
|
||||||
|
lastMessage: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Friend(friend: FriendProps) {
|
||||||
|
// @ts-ignore
|
||||||
|
const isDark = useSelector(state => state.userReducer.dark);
|
||||||
|
|
||||||
|
const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
|
||||||
|
|
||||||
|
const source = typeof friend.image === 'string' ? { uri: friend.image } : friend.image;
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingVertical: 9,
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
marginLeft: 15,
|
||||||
|
marginRight: 12,
|
||||||
|
width: 55,
|
||||||
|
height: 55,
|
||||||
|
borderRadius: 180
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
fontWeight: "500",
|
||||||
|
color: style.Text,
|
||||||
|
fontSize: normalize(16)
|
||||||
|
},
|
||||||
|
lastMessageContainer: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
maxWidth: '90%'
|
||||||
|
},
|
||||||
|
lastMessage: {
|
||||||
|
fontSize: normalize(18),
|
||||||
|
color: '#989898',
|
||||||
|
flexShrink: 1
|
||||||
|
},
|
||||||
|
time: {
|
||||||
|
fontSize: normalize(18),
|
||||||
|
color: '#989898'
|
||||||
|
},
|
||||||
|
profilContainer: {
|
||||||
|
marginTop: 5,
|
||||||
|
flex: 1,
|
||||||
|
marginLeft: 5,
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
width: normalize(13),
|
||||||
|
height: normalize(13),
|
||||||
|
marginRight: 42
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Image style={styles.image} source={source} />
|
||||||
|
<View style={styles.profilContainer}>
|
||||||
|
<Text style={styles.name} numberOfLines={1}>{friend.name}</Text>
|
||||||
|
<View style={styles.lastMessageContainer}>
|
||||||
|
<Text style={styles.lastMessage} numberOfLines={1}>{friend.lastMessage}</Text>
|
||||||
|
<Text style={styles.time}> · 1sem</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Image style={styles.button} source={require('../assets/icons/icons/buttonProfil.png')} />
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export default function Messaging() {
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { createStackNavigator } from '@react-navigation/stack';
|
||||||
|
import Conversation from '../screens/Conversation'
|
||||||
|
import Chat from '../screens/Chat';
|
||||||
|
|
||||||
|
export default function MessagingNavigation() {
|
||||||
|
const Stack = createStackNavigator();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack.Navigator initialRouteName="Conversation" screenOptions={{ gestureEnabled: true, headerShown: false, cardOverlayEnabled: true, cardStyle: { backgroundColor: "transparent" } }}>
|
||||||
|
<Stack.Screen
|
||||||
|
name="Conversation"
|
||||||
|
component={Conversation}
|
||||||
|
/>
|
||||||
|
<Stack.Screen
|
||||||
|
name="Chat"
|
||||||
|
component={Chat}
|
||||||
|
options = {{
|
||||||
|
headerShown: true
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Stack.Navigator>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,15 +1,15 @@
|
|||||||
import Music from "../../Model/Music";
|
import Music from "../../Model/Music";
|
||||||
import { favoritesTypes } from "../types/favoritesTypes";
|
import { favoritesTypes } from "../types/favoritesTypes";
|
||||||
|
|
||||||
export const getFavoritesMusic = (favoritesMusic: Music[]) => {
|
export const getFavoritesMusic = (music: Music[]) => {
|
||||||
return {
|
return {
|
||||||
type: favoritesTypes.GET_FAVORITE_MUSICS,
|
type: favoritesTypes.GET_FAVORITE_MUSICS,
|
||||||
playload: favoritesMusic,
|
payload: music,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
export const addFavoritesMusic = (favoritesMusic: Music) => {
|
export const addFavoritesMusic = (music: Music) => {
|
||||||
return {
|
return {
|
||||||
type: favoritesTypes.ADD_FAVORITE_MUSICS,
|
type: favoritesTypes.ADD_FAVORITE_MUSICS,
|
||||||
playload: favoritesMusic,
|
payload: music,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { useNavigation } from "@react-navigation/native";
|
||||||
|
import React, { useEffect } from "react";
|
||||||
|
import { GiftedChat } from "react-native-gifted-chat";
|
||||||
|
|
||||||
|
export default function Chat() {
|
||||||
|
|
||||||
|
const navigation = useNavigation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
navigation.getParent()?.setOptions({
|
||||||
|
tabBarStyle: {
|
||||||
|
display: "none"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return () => navigation.getParent()?.setOptions({
|
||||||
|
tabBarStyle: undefined
|
||||||
|
});
|
||||||
|
}, [navigation]);
|
||||||
|
return (
|
||||||
|
<GiftedChat />
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
import { useNavigation } from "@react-navigation/native";
|
||||||
|
import { SafeAreaView, StyleSheet, Text, View, FlatList, TouchableOpacity } from "react-native";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
|
||||||
|
import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
|
||||||
|
import Friend from "../components/Friend";
|
||||||
|
import normalize from '../components/Normalize';
|
||||||
|
|
||||||
|
export default function ConversationList() {
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
const isDark = useSelector(state => state.userReducer.dark);
|
||||||
|
|
||||||
|
const navigation = useNavigation();
|
||||||
|
|
||||||
|
const friends = [
|
||||||
|
{ id: 1, name: "Lucas", lastMessage: "J'en ai marre de provot", source: require('../assets/images/jul.png') },
|
||||||
|
{ id: 2, name: "Louison", lastMessage: "Tu vien piscine ?", source: require('../assets/images/jul.png') },
|
||||||
|
{ id: 3, name: "Dave", lastMessage: "Ok c noté !", source: require('../assets/images/pnl.png') },
|
||||||
|
{ id: 4, name: "Valentin", lastMessage: "Haha react native c incroyable !!!", source: require('../assets/images/jul.png') },
|
||||||
|
];
|
||||||
|
|
||||||
|
const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
mainSafeArea: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: style.body,
|
||||||
|
},
|
||||||
|
titleContainer: {
|
||||||
|
marginTop: 30,
|
||||||
|
marginLeft: 20,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontSize: normalize(28),
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: style.Text,
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
marginTop: 10,
|
||||||
|
fontSize: normalize(20),
|
||||||
|
color: '#787878',
|
||||||
|
marginBottom: 20
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.mainSafeArea}>
|
||||||
|
<View style={styles.titleContainer}>
|
||||||
|
<Text style={styles.title}>Messages</Text>
|
||||||
|
<Text style={styles.description}>Retrouvez ici tous vos amis!</Text>
|
||||||
|
</View>
|
||||||
|
<FlatList
|
||||||
|
style={{ marginTop: 10 }}
|
||||||
|
data={friends}
|
||||||
|
keyExtractor={(item) => item.id.toString()}
|
||||||
|
renderItem={({ item }) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
// @ts-ignore
|
||||||
|
onPress={() => navigation.navigate('Chat')}>
|
||||||
|
<Friend image={item.source} name={item.name} lastMessage={item.lastMessage} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SafeAreaView>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in new issue