@ -1,12 +1,17 @@
|
||||
export default class Artist {
|
||||
private id: string;
|
||||
private name: string;
|
||||
private url: string; // Image.source
|
||||
private _url: string; // Image.source
|
||||
|
||||
constructor(id: string, name: string, url: string) {
|
||||
this.id = id;
|
||||
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 { favoritesTypes } from "../types/favoritesTypes";
|
||||
|
||||
export const getFavoritesMusic = (favoritesMusic: Music[]) => {
|
||||
export const getFavoritesMusic = (music: Music[]) => {
|
||||
return {
|
||||
type: favoritesTypes.GET_FAVORITE_MUSICS,
|
||||
playload: favoritesMusic,
|
||||
payload: music,
|
||||
};
|
||||
}
|
||||
export const addFavoritesMusic = (favoritesMusic: Music) => {
|
||||
export const addFavoritesMusic = (music: Music) => {
|
||||
return {
|
||||
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