ADD: New conversation preview Component

bob_party/src/components/ConversationPreviewComponent.tsx

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from "react"
+import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
+import React from "react"
+import { Skin } from "../core/skin"
+import { Conversation } from "../core/conversation"
+
+/*
+    Importing the correct stylesheet
+*/
+import styles from "./style/ConverstationPreviewComponent.style"
+import { SkinComponent } from "./Skin"
+import { MANAGER_USER } from "../../appManagers"
+import { User } from "../core/User/user"
+
+export const ConversationPreviewComponent :
+/* Parameters : 
+    * skin : Skin to be displayed
+*/ 
+FC<{conv: Conversation, navigation: any}> = 
+({conv, navigation}) => 
+{ 
+    const user1 = MANAGER_USER.getCurrentUser();
+    let tmp;
+
+    if (conv.getTabUser()[0] === user1) tmp = conv.getTabUser()[1];
+    else tmp = conv.getTabUser()[0];
+
+    const user2 = tmp;
+
+    
+
+    return(
+        <Pressable onPress={() => navigation.navigate(Conversation)}>
+            <View style={styles.conv}>
+                <View>
+                    <SkinComponent skin={user2.getCurrentSkin()} state='icon' nav={navigation}/>
+                </View>
+                <View style={{marginLeft: '5%', justifyContent: 'space-evenly'}}>
+                    <Text style={styles.textNom}>{conv.getLastMessage().getMessageSender().getUsername()}</Text>
+                    <Text style={styles.textMess}>{conv.getLastMessage().getMessageContent()}</Text>
+                </View>
+            </View>
+        </Pressable>
+    )
+}

bob_party/src/components/style/ConverstationPreviewComponent.style.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+
+export default StyleSheet.create({
+    textNom: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        letterSpacing: 0.25,
+        color: 'white',
+    },
+    textMess: {
+        fontSize: 15,
+        letterSpacing: 0.25,
+        color: '#D9D9D9',
+    },
+    conv: {
+        flexDirection: 'row',
+        height: 70,
+        borderBottomWidth: 2,
+        borderBottomColor: '#2D2C33',
+        paddingLeft: '5%',
+        alignItems: "center",
+    }
+});

bob_party/src/screens/Chat.tsx

@@ -5,7 +5,7 @@ import stylesScreen from './style/screens.style';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
 import { FlatList } from 'react-native-gesture-handler';
-import { ConversationComponent } from '../components/ConversationComponent';
+import { ConversationPreviewComponent } from '../components/ConversationPreviewComponent';
 import { useConversationStore } from '../context/conversationContext';
 
 function Chat(props: { navigation: any; }) {
@@ -20,7 +20,7 @@ function Chat(props: { navigation: any; }) {
 
         <FlatList 
           data={useConversationStore().tabConv}
-          renderItem={({item}) => <ConversationComponent conv={item} state='Preview' navigation={navigation}/>} 
+          renderItem={({item}) => <ConversationPreviewComponent conv={item} navigation={navigation}/>} 
         />
       </View>
       <BotBar