Updated Profile Page

src/screens/Profile/ProfilePage.js

@@ -1,4 +1,4 @@
-import { StyleSheet, Text, View, ScrollView, FlatList } from 'react-native'
+import { StyleSheet, Text, View, ScrollView, FlatList, TouchableWithoutFeedback, Touchable } from 'react-native'
 import React, { useState } from 'react'
 import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics';
 import colors from '../../constants/colors';
@@ -9,8 +9,10 @@ import EditButton from '../../components/atoms/Buttons/EditButton';
 import ProfileImageCard from '../../components/molecules/Cards/ProfileImageCard';
 import { ToggleButton } from 'react-native-paper';
 import HorizontalNewsCardVariant from '../../components/molecules/Cards/HorizontalNewsCardVariant';
+import PersonCard from '../../components/molecules/Cards/PersonCard';
+import { FlatGrid } from 'react-native-super-grid';
 
-const profileTabs = ['Recently Read', 'Others'];
+const profileTabs = ["Bookmarks", "Followers", "Following"];
 
 const ProfilePage = props => {
 
@@ -20,6 +22,14 @@ const ProfilePage = props => {
     profileTabs[0].toLowerCase(),
   );
 
+  // const [cardData, setCardData] = useState({
+  //   bookmarks: [{}],
+  //   followers: [{}],
+  //   following: [{}],
+  // })
+  const [bookmarks, setBookmarks] = useState([{}, {}])
+  const [following, setFollowing] = useState([{}, {}, {}])
+  const [followers, setFollowers] = useState([{}, {}, {}])
   const styles = StyleSheet.create({
     profileContainer: {
       backgroundColor: colors().dominant,
@@ -59,26 +69,98 @@ const ProfilePage = props => {
     selectedPillText: {
       fontFamily: fonts.type.semibold,
       fontSize: moderateScale(12),
-      color: colors().recessive,
-      borderBottomWidth: verticalScale(4),
-      borderBottomColor: colors().primaryColor,
+      color: colors().primaryColor,
       borderRadius: 0,
     },
     pillText: {
       fontFamily: fonts.type.semibold,
       fontSize: moderateScale(12),
-      color: colors().grayShade_100,
+      color: colors().grayShade_300,
     },
     underlinePill: {
       width: 'auto',
+      minHeight: 64,
+      marginVertical: verticalScale(16),
     },
     profileCardContainer: {
       paddingHorizontal: horizontalScale(16),
-      paddingBottom: verticalScale(16)
+      paddingBottom: verticalScale(16),
+      justifyContent: 'center',
+      alignItems: 'center',
+      minHeight: '100%',
+      backgroundColor: colors().dominant
+
     },
   });
+  const CardContent = ({ category }) => {
+    switch (category) {
+      case "bookmarks":
+        return <FlatList
+          scrollEnabled={false}
+          contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center' }}
+          showsVerticalScrollIndicator={false}
+          ItemSeparatorComponent={() => (
+            <View style={{ height: verticalScale(8) }}></View>
+          )}
+          // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
+          ListHeaderComponent={() => (
+            <View style={{ height: verticalScale(16) }}></View>
+          )}
+          data={bookmarks}
+          renderItem={item => <HorizontalNewsCardVariant onPress={true} />}
+
+
+        />
+      case "followers":
+        return <FlatList
+          scrollEnabled={false}
+          contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', paddingVertical: verticalScale(8), columnGap: moderateScale(8) }}
+          showsVerticalScrollIndicator={false}
+          ItemSeparatorComponent={() => (
+            <View style={{ height: verticalScale(16) }}></View>
+          )}
+          // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
+          // ListHeaderComponent={() => (
+          //   <View style={{ height: verticalScale(16) }}></View>
+          // )}
+          data={followers}
+          renderItem={item => <PersonCard
+            onButtonPress={() => { }}
+            personName={"Semina"}
+
+            followerCount={123}
+            buttonText={"Remove"}
+          />}
+          keyExtractor={item => item.index}
 
+        />
+      case "following":
+        return <FlatList
+        scrollEnabled={false}
+        contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', paddingVertical: verticalScale(8), columnGap: moderateScale(8) }}
+        showsVerticalScrollIndicator={false}
+        ItemSeparatorComponent={() => (
+          <View style={{ height: verticalScale(16) }}></View>
+        )}
+        // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
+        // ListHeaderComponent={() => (
+        //   <View style={{ height: verticalScale(16) }}></View>
+        // )}
+        data={following}
+        renderItem={item => <PersonCard
+          onButtonPress={() => { }}
+          personName={"Semina"}
 
+          followerCount={123}
+          buttonText={"Follow"}
+        />}
+        keyExtractor={item => item.index}
+
+      />
+      default:
+        break;
+    }
+  }
   return (
     <View style={styles.profileContainer}>
       <ScrollView showsVerticalScrollIndicator={false}>
@@ -113,27 +195,10 @@ const ProfilePage = props => {
             fontFamily: fonts.type.regular,
             fontSize: moderateScale(12),
             color: colors().recessive,
-            textAlign:'center'
+            textAlign: 'center'
           }}>
-          The reason behind their disappointment is that iPhone users have
-          been..
+          semina@test.com
         </Text>
-        <View style={styles.metricsCountContainer}>
-          <View style={styles.metricsCard}>
-            <Text style={styles.metricsCount}>158</Text>
-            <Text style={styles.metricsTitle}>Bookmarks</Text>
-          </View>
-          <View style={styles.verticalLine}></View>
-          <View style={styles.metricsCard}>
-            <Text style={styles.metricsCount}>158</Text>
-            <Text style={styles.metricsTitle}>Followers</Text>
-          </View>
-          <View style={styles.verticalLine}></View>
-          <View style={styles.metricsCard}>
-            <Text style={styles.metricsCount}>158</Text>
-            <Text style={styles.metricsTitle}>Following</Text>
-          </View>
-        </View>
         <View style={styles.underlinePillContainer}>
           {/* <ScrollView horizontal showsHorizontalScrollIndicator={false}> */}
           <ToggleButton.Group onValueChange={value => setCategoryValue(value)}>
@@ -142,18 +207,26 @@ const ProfilePage = props => {
               return (
                 <ToggleButton
                   icon={() => (
-                    <Text
-                      style={[
-                        valueId === categoryValue
-                          ? styles.selectedPillText
-                          : styles.pillText,
-                        {
-                          paddingHorizontal: horizontalScale(11),
-                          fontSize: moderateScale(16),
-                        },
-                      ]}>
-                      {tab}
-                    </Text>
+                    <View style={{ alignItems: 'center', }}>
+                      <Text style={{
+                        fontFamily: fonts.type.semibold,
+                        fontSize: moderateScale(16),
+                        color: colors().recessive
+                      }}>0</Text>
+                      <Text
+                        style={[
+                          valueId === categoryValue
+                            ? styles.selectedPillText
+                            : styles.pillText,
+                          {
+
+
+                            fontSize: moderateScale(16),
+                          },
+                        ]}>
+                        {tab}
+                      </Text>
+                    </View>
                   )}
                   style={[styles.underlinePill]}
                   value={valueId}
@@ -163,9 +236,10 @@ const ProfilePage = props => {
           </ToggleButton.Group>
         </View>
         <View style={styles.profileCardContainer}>
-          <FlatList
+          <CardContent category={categoryValue} />
+          {/* <FlatList
             scrollEnabled={false}
-            contentContainerStyle={{flexDirection: 'row', flexWrap: 'wrap'}}
+            contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap' }}
             showsVerticalScrollIndicator={false}
             ItemSeparatorComponent={() => (
               <View style={{ height: verticalScale(8) }}></View>
@@ -177,7 +251,7 @@ const ProfilePage = props => {
             data={[{}, {}, {}]}
             renderItem={item => <HorizontalNewsCardVariant onPress={true} />}
             keyExtractor={item => item.index}
-          />
+          /> */}
         </View>
       </ScrollView>
     </View>