From 6ca7878e5b6efe46ce2169dda7ee3b0bb8f215f4 Mon Sep 17 00:00:00 2001
From: alguilhot <alban.guilhot@etu.uca.fr>
Date: Sun, 16 Oct 2022 20:01:37 +0200
Subject: [PATCH] ADD: ajout conversationComponent et style Preview

---
 .../src/components/ConversationComponent.tsx  | 42 +++++++++++++++++++
 .../style/ConverstationComponent.style.js     | 15 +++++++
 2 files changed, 57 insertions(+)
 create mode 100644 bob_party/src/components/ConversationComponent.tsx
 create mode 100644 bob_party/src/components/style/ConverstationComponent.style.js

diff --git a/bob_party/src/components/ConversationComponent.tsx b/bob_party/src/components/ConversationComponent.tsx
new file mode 100644
index 0000000..254276c
--- /dev/null
+++ b/bob_party/src/components/ConversationComponent.tsx
@@ -0,0 +1,42 @@
+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/ConverstationComponent.style"
+import { SkinComponent } from "./Skin"
+
+export const ConversationComponent :
+/* Parameters : 
+    * skin : Skin to be displayed
+    * state : Indicates from wich screen the component has been called
+*/ 
+FC<{conv: Conversation, state: String}> = 
+({conv, state}) => 
+{
+    /* The display of this component depends of the screen from where it has been called:
+        * From the TopBar (icon) : Small image in a circle
+        * From the shop (shop) : Image + Name + Price, Pressable => Buy the skin
+        * From the profile (profile) : Name + Image, Pressable => Change the skin
+    */
+    switch (state) {
+        case 'Preview':
+            return(
+                <View style={{flexDirection: 'row', height: 70, borderBottomWidth: 2,borderBottomColor: '#2D2C33', paddingLeft: '5%',}}>
+                    <View style={{alignSelf: 'center'}}>
+                        <SkinComponent skin={conv.getTabUser()[1].getCurrentSkin()} state='icon'/>
+                    </View>
+                    <View style={{marginLeft: '5%', justifyContent: 'space-evenly'}}>
+                        <Text style={styles.textNom}>{conv.getTabUser()[1].getUsername()}</Text>
+                        <Text style={styles.textMess}>{conv.getLastMessage()}</Text>
+                    </View>
+                </View>
+            )
+        default:
+            break;
+    }
+}
\ No newline at end of file
diff --git a/bob_party/src/components/style/ConverstationComponent.style.js b/bob_party/src/components/style/ConverstationComponent.style.js
new file mode 100644
index 0000000..cafb0b3
--- /dev/null
+++ b/bob_party/src/components/style/ConverstationComponent.style.js
@@ -0,0 +1,15 @@
+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',
+    }
+});
\ No newline at end of file