UI Change partial on Comments.js

Sidm9 · Apr 12, 2020 · d12ab46 · d12ab46
1 parent f69036c
commit d12ab46
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 64 deletions.
diff --git a/Frontend/Components/Card.js b/Frontend/Components/Card.js
@@ -176,15 +176,13 @@ export default function Card(props, { navigation }) {
     return toggleStateShare;
   }
   //All THE PROPS OF THIS COMPONENT WILL COME FROM POST.JS
-
-
-  // THIS IS THE FIRST 5 COMMENTS  
+  // THIS IS THE FIRST 5 COMMENTS
   const Temp = commentData;
-  function First_5_comments_handler({ usernames, comment  }) {
+  function First_5_comments_handler({ usernames, comment , navigation} ) {
     return (
       <View style={{ flex: 1, width: '100%' }}>
         <View style={{ marginVertical: '1%' }}>
-        <View style = {{ flex :1 , flexDirection : "row" , marginLeft : '2%', alignItems :"center"}}>
+        <View style = {{ flex :1 , flexDirection : 'row' , marginLeft : '2%', alignItems :'center'}}>
         <Image style = {styles.username_pic} source={require('../assets/images/tyler.jpg')}/>
           <Text style={styles.commentUsername}>{usernames}</Text>
           </View>
@@ -226,7 +224,7 @@ export default function Card(props, { navigation }) {
             </TouchableOpacity>
             <TouchableOpacity
               style={styles.commentButton}
-              onPress={props.commentClick}>
+              onPress={() => navigation.navigate('Comment')}>
               <Image source={require('../assets/icons/commentDark.png')} />
               <Text style={styles.countNumber}> {toggleStateComment} </Text>
             </TouchableOpacity>

diff --git a/Frontend/Components/commentCard.js b/Frontend/Components/commentCard.js
@@ -1,108 +1,94 @@
+/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
 import {View, Text, StyleSheet, Image} from 'react-native';
 
 const styles = StyleSheet.create({
   imageContainer: {
     flex: 0.15,
+    // marginTop : '1%',
+    marginRight: '1%',
     alignSelf: 'baseline',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: 50,
     width: '100%',
     height: null,
   },
   username: {
-    flex: 0.5,
-    padding: 5,
-    fontSize: 20,
+    flex: 1,
+    fontSize: 23,
+   // borderWidth: 1,
     height: null,
     fontFamily: 'Montserrat-Medium',
   },
   comment: {
     flex: 1,
-    padding: 5,
     width: '100%',
     height: null,
     flexWrap: 'wrap',
     fontFamily: 'Montserrat-Medium',
-    // borderWidth :1,
+    //borderWidth: 1,
   },
   username_container: {
-    // borderWidth: 1,
+    borderWidth: 0,
     flex: 1,
     overflow: 'hidden',
     height: '100%',
     flexShrink: 1,
   },
-  username_comment: {
-    flex: 1,
-    width: '100%',
-    height: null,
-    justifyContent: 'center',
-    // borderWidth: 8,
-    alignItems: 'stretch',
-    // backgroundColor: 'white',
-    alignSelf: 'stretch',
-    flexDirection: 'row',
-  },
   text: {
     margin: 5,
     fontFamily: 'Montserrat-Medium',
   },
   comment_bottom_bar: {
-    flex: 0.6,
-    margin: 5,
+    flex: 1,
+    margin: '1%',
     borderTopWidth: 1,
-    // borderWidth: 5,
     flexDirection: 'row',
-    alignSelf: 'flex-start',
+    width: null,
     alignItems: 'center',
-    justifyContent: 'space-around',
+    justifyContent: 'flex-start',
   },
   rightSection: {
-    // borderWidth: 1,
+    borderWidth: 1,
+    marginLeft: '0.5%',
     flex: 1,
     height: null,
     width: null,
     justifyContent: 'center',
   },
   commentCardContainer: {
-    flex: 0.25,
-    margin: 2,
-    borderRadius: 8,
+    flex: 1,
+    backgroundColor: 'steelblue',
+    margin: '2%',
+    padding: '2%',
+    borderRadius: 12,
     height: null,
     width: '100%',
-    borderWidth: 1,
     flexDirection: 'row',
     justifyContent: 'center',
     alignSelf: 'center',
   },
 });
 
-export default function CommentCard() {
+export default function CommentCard(props) {
   return (
     <>
       <View style={styles.commentCardContainer}>
         <View style={styles.imageContainer}>
           <Image
-            source={require('../assets/images/C++.png')}
-            width="100%"
-            height="100%"
+            source={require('../assets/images/tyler.jpg')}
+            style={{width: 35, borderRadius: 50, height: 35}}
           />
         </View>
         <View style={styles.rightSection}>
-          <View style={styles.username_comment}>
-            <View style={styles.username_container}>
-              <Text style={styles.username}>Email ID</Text>
-              <Text style={styles.comment}>This is the need to te</Text>
-            </View>
+          <View style={styles.username_container}>
+            <Text style={styles.username}>{props.username}</Text>
+            <Text style={styles.comment}>{props.comment}</Text>
           </View>
           <View style={styles.comment_bottom_bar}>
-            <Text style={styles.text}>Like!</Text>
-            <Text style={styles.text}>21 H</Text>
-            <Text style={styles.text}>39 Likes</Text>
+            <Text style={styles.text}>{props.likes} Likes</Text>
             <Text style={styles.text}>Reply</Text>
-            <Text style={styles.text}>View Replies</Text>
+            <Text style={styles.text}>{props.timestamp} </Text>
           </View>
         </View>
       </View>

diff --git a/Frontend/Database/DbComment.js b/Frontend/Database/DbComment.js
@@ -1,28 +1,39 @@
+/* eslint-disable prettier/prettier */
 export const commentData = [
   {
     id: '1',
     usernames: 'John Doe',
     comment: 'his string must be passed from Database and then this would ',
+    time : '4H',
+    likes : '123',
   },
   {
     id: '2',
     usernames: 'John Doe',
     comment: 'Chis string must be passed from Database and then this wouldya',
+    time: '5H',
+    likes : '123',
   },
   {
     id: '3',
     usernames: 'John Doe',
     comment: 'This string must be passed from Database and then this would🤣',
+    time : '4H',
+    likes : '123',
   },
   {
     id: '4',
     usernames: 'John Doe',
     comment: 'bshis string must be pass😒😒ed from Database and then this would nahi ',
+    time : '4H',
+    likes : '123',
   },
   {
     id: '5',
     usernames: 'John Doe',
     comment: 'string must be passed from Database and then this .',
+    time : '4H',
+    likes : '123',
   },
 ];
 

diff --git a/Frontend/Database/PostData.js b/Frontend/Database/PostData.js
@@ -10,16 +10,22 @@ export const array = [
       'This string must be passed from Database and then this would flex: 1, flexDirection :"row" , justifyContent :"flex-start",flex: 1, flexDirection :"row" , justifyContent :"flex-start",flex: 1, flexDirection :"row" , justifyContent :"flex-start",',
     time: '14:08 15th April 2020',
     time_to_read: '5 Minute',
+    like: '122',
+    comment: '350',
   },
   {
     id: '2',
-    image: 'https://images.unsplash.com/photo-1586606445486-833e11c0d459?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
+    image:
+      'https://images.unsplash.com/photo-1586606445486-833e11c0d459?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
     person_name: 'Siddharth Mishra',
-    title: '111 This is just a title nothing else it should be ... ed when becomes to ',
+    title:
+      '111 This is just a title nothing else it should be ... ed when becomes to ',
     recent_chat:
       'tring must be passed from Database and then this would flex: 1, flex',
     time: '18:30 12th April 2020',
     time_to_read: '1 Minute',
+    like: '122',
+    comment: '350',
   },
   {
     id: '3',
@@ -31,6 +37,8 @@ export const array = [
       'This string must be passed from Database and then this would ',
     time: '14:08 15th April 2020',
     time_to_read: '5 Minute',
+    like: '122',
+    comment: '350',
   },
   {
     id: '4',
@@ -43,6 +51,8 @@ export const array = [
       'This string must be passed from Database and then this would ',
     time: '14:08 15th April 2020',
     time_to_read: '5 Minute',
+    like: '122',
+    comment: '350',
   },
   {
     id: '5',
@@ -53,5 +63,7 @@ export const array = [
     recent_chat: 'Okay It work  ',
     time: '14:08 15th April 2020',
     time_to_read: '5 Minute',
+    like: '122',
+    comment: '350',
   },
 ];
diff --git a/Frontend/Screens/Comment.js b/Frontend/Screens/Comment.js
@@ -1,7 +1,9 @@
-import React, {Fragment} from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable prettier/prettier */
+import React from 'react';
+import { View, Text, StyleSheet, FlatList, Image } from 'react-native';
 import CommentCard from '../Components/commentCard';
-import {ScrollView} from 'react-native-gesture-handler';
+import { commentData } from '../Database/DbComment';
 const styles = StyleSheet.create({
   container: {
     // borderWidth: 2,
@@ -14,20 +16,36 @@ const styles = StyleSheet.create({
   },
 });
 
-export default function Comment(props) {
+
+
+const Temp = commentData;
+// function First_5_comments_handler({ usernames, comment , navigation} ) {
+//   return (
+//     <View style={{ flex: 1, width: '100%' }}>
+//       <View style={{ marginVertical: '1%' }}>
+//       <View style = {{ flex :1 , flexDirection : 'row' , marginLeft : '2%', alignItems :'center'}}>
+//       <Image style = {styles.username_pic} source={require('../assets/images/tyler.jpg')}/>
+//         <Text style={styles.commentUsername}>{usernames}</Text>
+//         </View>
+//         <Text numberOfLines={1} style={styles.commentText}>{comment}</Text>
+//       </View>
+//     </View>
+//   );
+// }
+export default function Comment() {
   return (
     <>
       <View style={styles.container}>
-        <ScrollView>
-          <CommentCard />
-          <CommentCard />
-          <CommentCard />
-          <CommentCard />
-          <CommentCard />
-          <CommentCard />
-          <CommentCard />
-          <CommentCard />
-        </ScrollView>
+        <FlatList
+          data={Temp}
+          renderItem={({ item }) => (
+            <CommentCard
+            username={item.usernames}
+            comment={item.comment}
+            likes = {item.likes}
+            reply = {item.reply}
+            timestamp = {item.time}/>
+           )} />
       </View>
     </>
   );

diff --git a/Frontend/Screens/Login.js b/Frontend/Screens/Login.js
@@ -1,3 +1,4 @@
+/* eslint-disable react-native/no-inline-styles */
 /* eslint-disable prettier/prettier */
 import React, { useState } from 'react';
 import {
@@ -108,7 +109,7 @@ export default function login({ route, navigation }, props) {
                 <Oauth text={'Github'} image={Github} />
                 <Oauth text={'Facebook'} image={Facebook} />
               </View>
-              <TouchableOpacity onPress={() => navigation.navigate('Register')}>
+              <TouchableOpacity onPress={() => navigation.navigate('Comment')}>
                 <Text style={styles.footer}>Don't Have An Account? </Text>
               </TouchableOpacity>
             </View>