Revert fix to homepage and clean up code for messages page

src/routes/ConversationPage/ConversationPage.tsx

@@ -1,171 +1,97 @@
 import * as React from "react";
 import styles from "../../styles";
-import {
+import { View, Text, TextInput, ScrollView, StyleSheet } from "react-native";
-  View,
-  Text,
-  TextInput,
-  ScrollView,
-  StyleSheet
-} from "react-native";
 import { colors } from "../../styles";
 import { useState } from "react";
 
-const convStyles = StyleSheet.create({
+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,
-  }
-})
 
 type ConversationType = {
-  username: string;
+  id: number;
-  message: string;
+  user: string;
-  userId: number;
+  message_content: string;
-  type: string;
+  study_group: string;
   color: string;
-}
+};
-
 
 export default function ConversationPage() {
-  const [conversation, setConversation] = useState<ConversationType[]>([{
+  const [conversation, setConversation] = useState<ConversationType[]>([
-    username: "You",
+    {
-    message: "Hello World naa ko diri canteen gutom sh*t.",
+      user: "You",
-    userId: Math.floor(Math.random() * 1000),
+      message_content: "Hello World naa ko diri canteen gutom sh*t.",
-    type: "o",
+      id: Math.floor(Math.random() * 1000),
-    color: Math.floor(Math.random() * 16777215).toString(16)
+      color: Math.floor(Math.random() * 16777215).toString(16),
-  }, {
+      study_group: "Heh group",
-    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",
+      user: "User 2",
-    message: "tanga valir! bobo!",
+      message_content: "Hahahah shor oy.",
-    userId: Math.floor(Math.random() * 1000),
+      id: Math.floor(Math.random() * 1000),
-    type: "i",
+      color: Math.floor(Math.random() * 16777215).toString(16),
-    color: Math.floor(Math.random() * 16777215).toString(16)
+      study_group: "Heh group",
     },
-  {
-    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)
-  }
   ]);
 
   return (
-    <ScrollView style={convStyles.scrollViewContainer}>
+    <ScrollView style={styles.messageScrollViewContainer}>
-      <View style={{
+      <View
-        display: "flex", backgroundColor: colors.secondary_2,
+        style={{
+          display: "flex",
+          backgroundColor: colors.secondary_2,
           borderRadius: 20,
-      }}>
+        }}
+      >
         <View style={{ padding: 15 }}>
           <View style={{ flexDirection: "row" }}>
             <Text style={{ ...styles.text_white_medium }}>Group#57605</Text>
           </View>
-          <Text>3 students
+          <Text>
-            <View style={{ ...convStyles.badge, backgroundColor: 'blue' }}></View>
+            3 students
-            <View style={{ ...convStyles.badge, backgroundColor: `green` }}></View>
+            <View style={{ ...styles.badge, backgroundColor: "blue" }}></View>
-            <View style={{ ...convStyles.badge, backgroundColor: `red` }}></View>
+            <View style={{ ...styles.badge, backgroundColor: `green` }}></View>
+            <View style={{ ...styles.badge, backgroundColor: `red` }}></View>
           </Text>
         </View>
         <View>
-          {
+          {conversation.map((item: ConversationType, index: number) => {
-            conversation.map((item: ConversationType) => (
+            const color = `rgba(${Math.floor(
-              <View key={item.userId} style={{
+              Math.random() * 256
-                ...convStyles.messageContainer,
+            )}, ${Math.floor(Math.random() * 256)}, ${Math.floor(
-                alignItems: item.type == 'o' ? "flex-end" : 'flex-start'
+              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.message_content}
-                    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}
                 </Text>
               </View>
-            ))
+            );
-          }
+          })}
         </View>
       </View>
       <TextInput

src/routes/Home/Home.tsx

@@ -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();

src/styles.tsx

@@ -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;