Merge branch 'Persistance' of https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY into Persistance
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
Lucie Bedouret
2 years ago
commit
3c2af01aa3
@ -1,8 +0,0 @@
|
||||
const { io } = require("socket.io-client");
|
||||
|
||||
|
||||
|
||||
export default socket = io("http://localhost:3000");
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
const { io } = require("socket.io-client");
|
||||
|
||||
|
||||
export const socket = io("http://localhost:3000");
|
||||
@ -1,44 +0,0 @@
|
||||
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, navigation: any}> =
|
||||
({conv, state, navigation}) =>
|
||||
{
|
||||
/* 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.getLastMessage().getMessageSender().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>
|
||||
)
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
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/MessageComponent.style.js"
|
||||
import { SkinComponent } from "./Skin"
|
||||
import { MANAGER_USER } from "../../appManagers"
|
||||
import { User } from "../core/User/user"
|
||||
import { Message } from "../core/message"
|
||||
|
||||
export const MessageComponent :
|
||||
/* Parameters :
|
||||
* skin : Skin to be displayed
|
||||
*/
|
||||
FC<{mess: Message}> =
|
||||
({mess}) =>
|
||||
{
|
||||
let messStyle;
|
||||
const user1 = MANAGER_USER.getCurrentUser();
|
||||
if (mess.getMessageSender() === user1){
|
||||
return(
|
||||
|
||||
<View style={styles.mainRightView}>
|
||||
<View style={styles.rightView}>
|
||||
<View>
|
||||
<SkinComponent skin={mess.getMessageSender().getCurrentSkin()} state='icon'/>
|
||||
</View>
|
||||
<View style={styles.rightTextView}>
|
||||
<Text style={styles.text}>{mess.getMessageContent()}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
else{
|
||||
return(
|
||||
<View style={styles.mainLeftView}>
|
||||
<Text style={styles.senderUsername}>{mess.getMessageSender().getUsername()}</Text>
|
||||
<View style={styles.leftView}>
|
||||
<View>
|
||||
<SkinComponent skin={mess.getMessageSender().getCurrentSkin()} state='icon'/>
|
||||
</View>
|
||||
<View style={styles.leftTextView}>
|
||||
<Text style={styles.text}>{mess.getMessageContent()}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
export default StyleSheet.create({
|
||||
leftView: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'flex-start',
|
||||
|
||||
},
|
||||
text: {
|
||||
fontSize: 20,
|
||||
lineHeight: 24,
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
|
||||
},
|
||||
leftTextView: {
|
||||
backgroundColor: '#888898',
|
||||
padding: 15,
|
||||
marginLeft: 5,
|
||||
borderRadius: 15,
|
||||
borderBottomLeftRadius: 0,
|
||||
},
|
||||
rightTextView: {
|
||||
backgroundColor: '#0086FE',
|
||||
padding: 15,
|
||||
marginRight: 5,
|
||||
borderRadius: 15,
|
||||
borderBottomRightRadius: 0,
|
||||
},
|
||||
mainRightView: {
|
||||
flexDirection: 'row-reverse',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'flex-start',
|
||||
margin: 10,
|
||||
},
|
||||
rightView: {
|
||||
maxWidth: '75%',
|
||||
flexDirection: 'row-reverse',
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
senderUsername: {
|
||||
marginLeft: 55,
|
||||
marginBottom: 5,
|
||||
fontSize: 20,
|
||||
fontWeight: "800",
|
||||
lineHeight: 24,
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
mainLeftView: {
|
||||
margin: 10,
|
||||
maxWidth: '75%',
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,53 @@
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import {KeyboardAvoidingView, Platform, TextInput, View} from 'react-native'
|
||||
import React, { useCallback } from 'react';
|
||||
import stylesScreen from './style/screens.style';
|
||||
import { TopBar } from '../components/TopBar';
|
||||
import { BotBar } from '../components/BotBar';
|
||||
import { FlatList } from 'react-native-gesture-handler';
|
||||
import { MANAGER_CONVERSATION, MANAGER_USER } from '../../appManagers';
|
||||
import { MessageComponent } from '../components/MessageComponent';
|
||||
|
||||
function Conversation(props: { navigation: any; }) {
|
||||
const { navigation } = props
|
||||
|
||||
const chosenConversation = MANAGER_CONVERSATION.getCurrentTabConv()[0].getTabMessage();
|
||||
|
||||
|
||||
|
||||
const renderMessage = ({ item }) => {
|
||||
return (
|
||||
<MessageComponent mess={item}></MessageComponent>
|
||||
);
|
||||
};
|
||||
return(
|
||||
<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : "height"} style={stylesScreen.container}>
|
||||
<View style={stylesScreen.bodyStart}>
|
||||
<FlatList
|
||||
data={chosenConversation.reverse()}
|
||||
renderItem={renderMessage}
|
||||
keyExtractor={item => item.getMessageId().toString()}
|
||||
style={{flexDirection:'column-reverse'}}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
style={{height: '7%',
|
||||
width: '90%',
|
||||
borderRadius: '15%',
|
||||
backgroundColor: 'white',
|
||||
padding: 10,
|
||||
marginBottom: '7%',
|
||||
alignSelf: 'center',
|
||||
marginTop: '3%',
|
||||
}}
|
||||
placeholder='Votre message...'
|
||||
onChangeText={(val) => console.log("camarche")}
|
||||
returnKeyType="send"
|
||||
onSubmitEditing={() => console.log("oh oui")}
|
||||
/>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
export default Conversation
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue