Enhancement of profile page in mobile app.

src/screens/ProfileScreen/ProfileScreen.tsx

@@ -1,7 +1,15 @@
 // TODO: we wil remove this once we start using userData and contributionData
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useState, useCallback, useContext } from 'react';
-import { View, Text, Pressable } from 'react-native';
+import {
+  View,
+  Text,
+  Pressable,
+  FlatList,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+} from 'react-native';
 import { ScreenViewContainer } from '../../styles/GlobalStyle';
 import { profileScreenStyles } from './styles';
 import withHeader from '../../helpers/withHeader';
@@ -13,20 +21,18 @@ import { ImagePickerResponse } from 'react-native-image-picker';
 import Strings from '../../i18n/en';
 import { fetchContribution } from '../AuthScreen/Util';
 import { useFocusEffect } from '@react-navigation/native';
-
 import { useSelector } from 'react-redux';
+import AllContributionsDropdown from './User Data/UserContributions/AllContributions';
+import NoteworthyContributionsDropdown from './User Data/UserContributions/NoteWorthyContributions';
+import ActiveTaskDropDown from './User Data/UserContributions/ActiveTask';
+import UserData from './User Data/UserData';
 
 const ProfileScreen = () => {
   const { data: userData } = useSelector((store) => store.user);
   const [response, setResponse] = useState<ImagePickerResponse>({});
   const [modalVisible, setModalVisible] = useState(false);
-  const [contributionData, setContributionData] = useState({
-    allData: [],
-    noteworthy: [],
-  });
+  const [contributionData, setContributionData] = useState([]);
   const { loggedInUserData, setLoggedInUserData } = useContext(AuthContext);
-  console.log('loggedIn', loggedInUserData);
-
   const openModal = useCallback(() => {
     setModalVisible(true);
   }, []);
@@ -52,22 +58,13 @@ const ProfileScreen = () => {
       (async () => {
         const userName = 'ankush';
         const contributionResponse = await fetchContribution(userName);
-        setContributionData(contributionResponse);
+        setContributionData(contributionResponse.noteworthy);
       })();
     }, []),
   );
 
   return (
-    <View style={ScreenViewContainer.container}>
-      <Pressable
-        style={profileScreenStyles.logoutButton}
-        onPress={() => {
-          setLoggedInUserData(null);
-        }}
-      >
-        <Text style={profileScreenStyles.logoutText}>{Strings.LOGOUT}</Text>
-      </Pressable>
-
+    <ScrollView contentContainerStyle={ScreenViewContainer.container}>
       <UploadImageModalView
         closeModal={closeModal}
         modalVisible={modalVisible}
@@ -84,12 +81,35 @@ const ProfileScreen = () => {
           <Avatar uri={loggedInUserData?.profileUrl || ''} size={100} />
         )}
         <Text style={profileScreenStyles.titleText}>
-          {loggedInUserData?.name}
+          {/* {loggedInUserData?.name} */}
+          <UserData userData={userData} />
         </Text>
         <ButtonWidget title={'Update'} onPress={openModal} />
+        <ScrollView style={styles.container}>
+          <NoteworthyContributionsDropdown />
+          <ActiveTaskDropDown />
+          <AllContributionsDropdown />
+          <Pressable
+            style={profileScreenStyles.logoutButton}
+            onPress={() => {
+              setLoggedInUserData(null);
+            }}
+          >
+            <Text style={profileScreenStyles.logoutText}>{Strings.LOGOUT}</Text>
+          </Pressable>
+        </ScrollView>
       </View>
-    </View>
+    </ScrollView>
   );
 };
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 10,
+    paddingBottom: 30,
+  },
+  container2: {
+    borderWidth: 2,
+  },
+});
 
 export default withHeader(ProfileScreen);

src/screens/ProfileScreen/User Data/UserContributions/ActiveTask.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, Text, TouchableOpacity, Image } from 'react-native';
+
+const ActiveTaskDropDown = () => {
+  const [clicked, setClicked] = useState(false);
+  return (
+    <View style={{ padding: 5 }}>
+      <TouchableOpacity
+        onPress={() => setClicked(!clicked)}
+        style={styles.DropDownButton}
+      >
+        <Text style={styles.DropDownTitle}>Active tasks</Text>
+        {clicked ? (
+          <Image
+            style={styles.ImageDimensions}
+            source={require('../../../../../assets/down.png')}
+          />
+        ) : (
+          <Image
+            style={styles.ImageDimensions}
+            source={require('../../../../../assets/right.png')}
+          />
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  DropDownButton: {
+    width: '100%',
+    height: 80,
+    elevation: 5,
+    borderRadius: 10,
+    backgroundColor: 'white',
+    alignSelf: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    paddingLeft: 35,
+  },
+  DropDownTitle: {
+    fontWeight: '600',
+    fontSize: 20,
+    color: 'black',
+  },
+  DropDownElement: {
+    color: 'black',
+    width: '100%',
+    alignSelf: 'center',
+    height: 50,
+    borderBottomWidth: 0.5,
+  },
+  ImageDimensions: {
+    height: 100,
+    width: 100,
+  },
+});
+
+export default ActiveTaskDropDown;