Merge pull request #9 from lemeow125/initial-frontend

added conversation/groupchat page

App.tsx

@@ -22,6 +22,7 @@ import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import { StatusBar } from "expo-status-bar";
 import UserInfoPage from "./src/routes/UserInfoPage/UserInfoPage";
 import SubjectsPage from "./src/routes/SubjectsPage/SubjectsPage";
+import ConversationPage from "./src/routes/ConversationPage/ConversationPage";
 import Loading from "./src/routes/Loading/Loading";
 import StartStudying from "./src/routes/StartStudying/StartStudying";
 import { ToastProvider } from "react-native-toast-notifications";
@@ -69,6 +70,7 @@ export default function App() {
         <Provider store={store}>
           <StatusBar style="light" />
 
+
           <NavigationContainer linking={linking} fallback={<Loading />}>
             <Drawer.Navigator
               initialRouteName="Revalidation"
@@ -85,6 +87,7 @@ export default function App() {
               <Drawer.Screen name="Subjects" component={SubjectsPage} />
               <Drawer.Screen name="Start Studying" component={StartStudying} />
               <Drawer.Screen name="Create Group" component={CreateGroup} />
+              <Drawer.Screen name="Conversation" component={ConversationPage} />
             </Drawer.Navigator>
           </NavigationContainer>
         </Provider>

src/components/DrawerSettings/CustomDrawerContent.tsx

@@ -178,7 +178,14 @@ export default function CustomDrawerContent(props: {}) {
           <SignupIcon size={32} />
           <Text style={styles.text_white_medium}>Register</Text>
         </DrawerButton>
-
+        <DrawerButton
+          onPress={() => {
+            navigation.navigate("Conversation");
+          }}
+        >
+          <SubjectIcon size={32} />
+          <Text style={styles.text_white_medium}>Conversation</Text>
+        </DrawerButton>
         {/*
         Debug buttons for accessing revalidation and activation page
         <DrawerButton

src/routes/ConversationPage/ConversationPage.tsx

@@ -0,0 +1,179 @@
+import * as React from "react";
+import styles from "../../styles";
+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,
+  }
+})
+
+type ConversationType = {
+  username: string;
+  message: string;
+  userId: number;
+  type: 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)
+  }
+  ]);
+
+  return (
+    <ScrollView style={convStyles.scrollViewContainer}>
+      <View 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
+            <View style={{ ...convStyles.badge, backgroundColor: 'blue' }}></View>
+            <View style={{ ...convStyles.badge, backgroundColor: `green` }}></View>
+            <View style={{ ...convStyles.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'
+              }}>
+
+                <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}
+                </Text>
+              </View>
+            ))
+          }
+        </View>
+      </View>
+      <TextInput
+          style={styles.chatbox}
+          placeholder="type here...."
+          placeholderTextColor="white"
+          autoCapitalize="none"
+        />
+    </ScrollView>
+  );
+}

src/styles.tsx

@@ -203,5 +203,15 @@ const styles = StyleSheet.create({
     padding: 0,
     border: 0,
   },
+  chatbox: {
+    paddingHorizontal: 8,
+    height: 50,
+    marginVertical: 10,
+    borderWidth: 1,
+    color: colors.text_default,
+    backgroundColor: colors.primary_2,
+    borderRadius: 20,
+    borderColor: colors.primary_3,
+  }
 });
 export default styles;