keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2024-11-17 06:19:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Revert fix to homepage and clean up code for messages page

Browse source
This commit is contained in:
Keannu Bernasol 2023-09-30 18:40:46 +08:00
parent 97291a85cd
commit 63f863fa1e
3 changed files with 99 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

226
src/routes/ConversationPage/ConversationPage.tsx
View file

@ -1,179 +1,105 @@
import * as React from "react";
import styles from "../../styles";
import {
View,
Text,
TextInput,
ScrollView,
StyleSheet
} from "react-native";
import { View, Text, TextInput, ScrollView, StyleSheet } from "react-native";
import { colors } from "../../styles";
import { useState } from "react";
const convStyles = StyleSheet.create({
scrollViewContainer: {
backgroundColor: colors.secondary_1,
padding: 15,
},
messageContainer: {
backgroundColor: '#00000038',
margin: 5,
padding: 10,
borderRadius: 20,
},
badge: {
height: 10,
width: 10,
borderRadius: 10,
}
})
const convStyles = StyleSheet.create({});
type ConversationType = {
username: string;
message: string;
userId: number;
type: string;
id: number;
user: string;
message_content: string;
study_group: string;
color: string;
}
};
export default function ConversationPage() {
const [conversation, setConversation] = useState<ConversationType[]>([{
username: "You",
message: "Hello World naa ko diri canteen gutom sh*t.",
userId: Math.floor(Math.random() * 1000),
type: "o",
color: Math.floor(Math.random() * 16777215).toString(16)
}, {
username: "User 2",
message: "Hahahah shor oy.",
userId: Math.floor(Math.random() * 1000),
type: "i",
color: Math.floor(Math.random() * 16777215).toString(16)
}, {
username: "User 3",
message: "AHAHAHHA BOBO!",
userId: Math.floor(Math.random() * 1000),
type: "i",
color: Math.floor(Math.random() * 16777215).toString(16)
},
{
username: "Vale",
message: "tanga valir! bobo!",
userId: Math.floor(Math.random() * 1000),
type: "i",
color: Math.floor(Math.random() * 16777215).toString(16)
},
{
username: "You",
message: "Hoyy bobo!!!",
userId: Math.floor(Math.random() * 1000),
type: "o",
color: Math.floor(Math.random() * 16777215).toString(16)
}, {
username: "Valir",
message: "Gago! 1v1 nalng?",
userId: Math.floor(Math.random() * 1000),
type: "o",
color: Math.floor(Math.random() * 16777215).toString(16)
}, {
username: "User 2",
message: "Hello World",
userId: Math.floor(Math.random() * 1000),
type: "i",
color: Math.floor(Math.random() * 16777215).toString(16)
}, {
username: "User 3",
message: "Hello World",
userId: Math.floor(Math.random() * 1000),
type: "i",
color: Math.floor(Math.random() * 16777215).toString(16)
},
{
username: "User 1",
message: "Hello World",
userId: Math.floor(Math.random() * 1000),
type: "o",
color: Math.floor(Math.random() * 16777215).toString(16)
},
{
username: "User 1",
message: "Hello World",
userId: Math.floor(Math.random() * 1000),
type: "o",
color: Math.floor(Math.random() * 16777215).toString(16)
},
{
username: "User 1",
message: "Hello World",
userId: Math.floor(Math.random() * 1000),
type: "o",
color: Math.floor(Math.random() * 16777215).toString(16)
},
{
username: "User 1",
message: "Hello World",
userId: Math.floor(Math.random() * 1000),
type: "o",
color: Math.floor(Math.random() * 16777215).toString(16)
}
const [conversation, setConversation] = useState<ConversationType[]>([
{
user: "You",
message_content: "Hello World naa ko diri canteen gutom sh*t.",
id: Math.floor(Math.random() * 1000),
color: Math.floor(Math.random() * 16777215).toString(16),
study_group: "Heh group",
},
{
user: "User 2",
message_content: "Hahahah shor oy.",
id: Math.floor(Math.random() * 1000),
color: Math.floor(Math.random() * 16777215).toString(16),
study_group: "Heh group",
},
]);
return (
<ScrollView style={convStyles.scrollViewContainer}>
<View style={{
display: "flex", backgroundColor: colors.secondary_2,
borderRadius: 20,
}}>
<ScrollView style={styles.messageScrollViewContainer}>
<View
style={{
display: "flex",
backgroundColor: colors.secondary_2,
borderRadius: 20,
}}
>
<View style={{ padding: 15 }}>
<View style={{flexDirection: "row"}}>
<View style={{ flexDirection: "row" }}>
<Text style={{ ...styles.text_white_medium }}>Group#57605</Text>
</View>
<Text>3 students
<View style={{ ...convStyles.badge, backgroundColor: 'blue' }}></View>
<View style={{ ...convStyles.badge, backgroundColor: `green` }}></View>
<View style={{ ...convStyles.badge, backgroundColor: `red` }}></View>
<Text>
3 students
<View style={{ ...styles.badge, backgroundColor: "blue" }}></View>
<View style={{ ...styles.badge, backgroundColor: `green` }}></View>
<View style={{ ...styles.badge, backgroundColor: `red` }}></View>
</Text>
</View>
<View>
{
conversation.map((item: ConversationType) => (
<View key={item.userId} style={{
...convStyles.messageContainer,
alignItems: item.type == 'o' ? "flex-end" : 'flex-start'
}}>
{conversation.map((item: ConversationType, index: number) => {
const color = `rgba(${Math.floor(
Math.random() * 256
)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(
Math.random() * 256
)}, 0.7)`;
return (
<View
key={item.id}
style={{
...styles.message_contentContainer,
alignItems: index % 2 == 0 ? "flex-end" : "flex-start",
}}
>
<View style={styles.flex_row}>
{index % 2 == 0 ? (
<View
style={{
...styles.badge,
...{ paddingRight: 2, backgroundColor: color },
}}
/>
) : (
<View
style={{
...styles.badge,
...{ paddingLeft: 2, backgroundColor: color },
}}
/>
)}
<Text style={styles.text_white_small}>{item.user}</Text>
</View>
<Text style={styles.text_white_small}>
{
item.type == 'i' ? <View style={{
...convStyles.badge,
backgroundColor: `#${item.color}`,
marginRight: 2
}}></View> : null
}
{item.username}
{
item.type == 'o' ? <View style={{
...convStyles.badge,
backgroundColor: `#${item.color}`,
marginLeft: 2
}}></View> : null
}
</Text>
<Text style={styles.text_white_small}>
{item.message}
{item.message_content}
</Text>
</View>
))
}
);
})}
</View>
</View>
<TextInput
style={styles.chatbox}
placeholder="type here...."
placeholderTextColor="white"
autoCapitalize="none"
/>
style={styles.chatbox}
placeholder="type here...."
placeholderTextColor="white"
autoCapitalize="none"
/>
</ScrollView>
);
}

10
src/routes/Home/Home.tsx
View file

@ -121,17 +121,13 @@ export default function Home() {
return data;
},
onSuccess: (data: StudentStatusReturnType) => {
if (data[1].active !== undefined) {
setStudying(data[1].active);
}
if (data[1].subject !== undefined) {
setSubject(data[1].subject);
}
if (data[1].active == true) {
setButtonLabel("Stop Studying");
} else if (data[1].active == false) {
setButtonLabel("Start Studying");
}
setSubject(data[1].subject);
setStudying(data[1].active);
setStudentStatus(data[1]);
},
onError: (error: Error) => {
@ -264,6 +260,7 @@ export default function Home() {
useState<StudentStatusListType>([]);
// Student Status List Global
const StudentStatusListGlobalQuery = useQuery({
enabled: !studying,
queryKey: ["user_status_list_global"],
queryFn: async () => {
const data = await GetStudentStatusList();
@ -322,6 +319,7 @@ export default function Home() {
>([]);
// Study Group Global List
const StudyGroupGlobalQuery = useQuery({
enabled: !studying,
queryKey: ["study_group_list_global"],
queryFn: async () => {
const data = await GetStudyGroupList();

20
src/styles.tsx
View file

@ -212,6 +212,24 @@ const styles = StyleSheet.create({
backgroundColor: colors.primary_2,
borderRadius: 20,
borderColor: colors.primary_3,
}
},
messageScrollViewContainer: {
backgroundColor: colors.secondary_1,
padding: 15,
},
message_contentContainer: {
backgroundColor: "#00000038",
margin: 5,
padding: 10,
borderRadius: 20,
},
badge: {
height: 16,
width: 16,
justifyContent: "center",
borderRadius: 10,
marginLeft: 4,
marginRight: 4,
},
});
export default styles;