Real-Dev-Squad · shreya-mishra · Oct 24, 2023 · Oct 9, 2023 · Oct 9, 2023 · Oct 9, 2023
diff --git a/App.tsx b/App.tsx
@@ -10,7 +10,9 @@ import rootSaga from './src/sagas/rootSaga';
 
 const sagaMiddleware = createSagaMiddleware();
 const middleware = [sagaMiddleware];
-export const store = compose(applyMiddleware(...middleware))(createStore)(reducers);
+export const store = compose(applyMiddleware(...middleware))(createStore)(
+  reducers,
+);
 sagaMiddleware.run(rootSaga);
 
 const App = () => {

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@react-native-masked-view/masked-view": "^0.2.6",
     "@react-navigation/bottom-tabs": "^6.0.9",
     "@react-navigation/drawer": "^6.1.8",
+    "@react-navigation/material-top-tabs": "^6.6.4",
     "@react-navigation/native": "^6.0.8",
     "@react-navigation/native-stack": "^6.9.12",
     "@react-navigation/stack": "^6.2.0",
@@ -29,6 +30,7 @@
     "react-native-app-auth": "^6.4.2",
     "react-native-asset": "^2.1.1",
     "react-native-camera-kit": "^13.0.0",
+    "react-native-collapsible-tab-view": "^6.2.1",
     "react-native-date-picker": "^4.2.13",
     "react-native-datepicker": "^1.7.2",
     "react-native-device-info": "^10.8.0",
@@ -38,11 +40,13 @@
     "react-native-gesture-handler": "^1.10.3",
     "react-native-image-picker": "^4.7.1",
     "react-native-keychain": "^8.1.2",
+    "react-native-pager-view": "^6.2.1",
     "react-native-paper": "^4.12.3",
     "react-native-radio-buttons-group": "^2.2.11",
     "react-native-reanimated": "^2.2.4",
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^3.9.0",
+    "react-native-tab-view": "^3.5.2",
     "react-native-toast-message": "^2.1.5",
     "react-native-webview": "^13.3.1",
     "react-native-walkthrough-tooltip": "^1.5.0",

diff --git a/src/components/DisplayContribution.tsx b/src/components/DisplayContribution.tsx
@@ -0,0 +1,175 @@
+import { View, Text, TouchableOpacity, Linking } from 'react-native';
+import React from 'react';
+import {
+  calculateISODateFormat,
+  calculateTimeDifference,
+  convertTimestampToReadableDate,
+  parseISODate,
+} from '../screens/AuthScreen/Util';
+import { profileScreenStyles } from '../screens/ProfileScreen/styles';
+
+const DisplayContribution = ({ tasks }) => {
+  return (
+    <View style={{ padding: 5 }}>
+      {tasks.length !== 0 ? (
+        tasks.map((item, index) => (
+          <View style={profileScreenStyles.DropDownElement} key={index}>
+            <TouchableOpacity
+              style={profileScreenStyles.DropDownbackground}
+              onPress={
+                item.task.featureUrl
+                  ? () => Linking.openURL(item.task.featureUrl)
+                  : null
+              }
+            >
+              {item.task.id ? (
+                <React.Fragment>
+                  <Text
+                    style={{
+                      color: 'blue',
+                      fontSize: 18,
+                      fontWeight: 'bold',
+                    }}
+                  >
+                    {item.task.title}
+                  </Text>
+                  <>
+                    {item.task.purpose ? (
+                      <Text
+                        style={{
+                          paddingLeft: 15,
+                          paddingRight: 15,
+                          paddingTop: 10,
+                          paddingBottom: 10,
+                          color: 'grey',
+                          fontSize: 15,
+                        }}
+                      >
+                        {item.task.purpose}
+                      </Text>
+                    ) : (
+                      <View style={{ padding: 10 }} />
+                    )}
+                  </>
+                  <>
+                    {item.task.featureUrl ? (
+                      <Text
+                        style={{
+                          color: 'black',
+                          fontSize: 15,
+                          borderBottomColor: 'grey',
+                          // borderBottomWidth: 1,
+                          paddingLeft: 15,
+                          paddingRight: 15,
+                          paddingBottom: 10,
+                        }}
+                      >
+                        Estimated completion:{' '}
+                        <Text style={{ fontWeight: 'bold' }}>
+                          {calculateTimeDifference(
+                            convertTimestampToReadableDate(item.task.startedOn),
+                            convertTimestampToReadableDate(item.task.endsOn),
+                          )}
+                        </Text>
+                      </Text>
+                    ) : (
+                      <Text
+                        style={{
+                          color: 'black',
+                          fontSize: 15,
+                          paddingLeft: 15,
+                          paddingRight: 15,
+                          paddingBottom: 10,
+                        }}
+                      >
+                        Estimated completion:{' '}
+                        <Text style={{ fontWeight: 'bold' }}>
+                          {calculateTimeDifference(
+                            convertTimestampToReadableDate(item.task.startedOn),
+                            convertTimestampToReadableDate(item.task.endsOn),
+                          )}
+                        </Text>
+                      </Text>
+                    )}
+                  </>
+                  <>
+                    {item.task.featureUrl ? (
+                      <Text
+                        style={{
+                          color: 'grey',
+                          fontSize: 13,
+                          textAlign: 'center',
+                        }}
+                      >
+                        Checkout this feature in action
+                      </Text>
+                    ) : null}
+                  </>
+                </React.Fragment>
+              ) : (
+                <React.Fragment>
+                  {item.prList.length > 0 && (
+                    <React.Fragment>
+                      <Text
+                        style={{
+                          color: 'blue',
+                          fontSize: 20,
+                          fontWeight: 'bold',
+                        }}
+                      >
+                        PR Title: {item.prList[0].title}
+                      </Text>
+                      <Text
+                        style={{
+                          color: 'black',
+                          fontSize: 15,
+                          paddingLeft: 15,
+                          paddingRight: 15,
+                          paddingBottom: 10,
+                          paddingTop: 10,
+                        }}
+                      >
+                        Completed in:{' '}
+                        <Text style={{ fontWeight: 'bold' }}>
+                          {calculateTimeDifference(
+                            parseISODate(item.prList[0].createdAt),
+                            parseISODate(item.prList[0].updatedAt),
+                          )}
+                        </Text>
+                      </Text>
+                      <Text
+                        style={{
+                          color: 'black',
+                          borderBottomColor: 'grey',
+                          // borderBottomWidth: 1,
+                          fontSize: 15,
+                          paddingLeft: 15,
+                          paddingRight: 15,
+                          paddingBottom: 10,
+                        }}
+                      >
+                        Feature live on:{' '}
+                        {calculateISODateFormat(item.prList[0].updatedAt)}
+                      </Text>
+                      <>
+                        {item.prList[0].url ? (
+                          <Text style={{ color: 'grey', textAlign: 'center' }}>
+                            Checkout this feature in action
+                          </Text>
+                        ) : null}
+                      </>
+                    </React.Fragment>
+                  )}
+                </React.Fragment>
+              )}
+            </TouchableOpacity>
+          </View>
+        ))
+      ) : (
+        <Text>No Tasks Yet!</Text>
+      )}
+    </View>
+  );
+};
+
+export default DisplayContribution;
diff --git a/src/components/UserContibution/DisplayContribution.tsx b/src/components/UserContibution/DisplayContribution.tsx
@@ -14,7 +14,7 @@ import {
 
 const DisplayContribution = ({ tasks }) => {
   const [clicked, setClicked] = useState(false);
-  
+
   return (
     <View style={{ padding: 5 }}>
       <TouchableOpacity

diff --git a/src/constants/appConstant/url.ts b/src/constants/appConstant/url.ts
@@ -7,7 +7,8 @@ export const urls = {
   GET_USERS_DATA: 'https://api.realdevsquad.com/users/self',
   GET_USER_DATA: 'https://api.realdevsquad.com/users?id=',
   GET_CONTRIBUTIONS: 'https://api.realdevsquad.com/contributions/',
-  GET_ACTIVE_TASKS: `https://api.realdevsquad.com/tasks?dev=true&status=IN_PROGRESS&assignee=`,
+  GET_ACTIVE_TASKS:
+    'https://api.realdevsquad.com/tasks?dev=true&status=IN_PROGRESS&assignee=',
   GITHUB: 'https://github.com/',
   TWITTER: 'https://twitter.com',
   LINKEDIN: 'https://www.linkedin.com/in/',

diff --git a/src/navigations/TabNavigation/TabNavigation.tsx b/src/navigations/TabNavigation/TabNavigation.tsx
@@ -6,11 +6,11 @@ import Colors from '../../constants/colors/Colors';
 import Fonts from '../../constants/fonts/TabFont';
 import Images from '../../constants/images/Image';
 import Strings from '../../i18n/en';
-import ProfileScreen from '../../screens/ProfileScreen/ProfileScreen';
 import { TabViewStyle } from './style';
 import GoalsScreenStack from '../../screens/GoalScreen/GoalScreen';
 import HomeScreenV2 from '../../screens/HomeScreen/HomeScreenV2';
 import { useSelector } from 'react-redux';
+import ProfileScreen2 from '../../screens/ProfileScreen/ProfileScreen2';
 
 const tab = createBottomTabNavigator();
 
@@ -91,7 +91,7 @@ const TabNavigation = () => {
 
         <tab.Screen
           name={Strings.Tab_Profile}
-          component={ProfileScreen}
+          component={ProfileScreen2}
           options={{
             headerShown: false,
             tabBarLabel: ({ focused }) => {

diff --git a/src/screens/AuthScreen/Util.ts b/src/screens/AuthScreen/Util.ts
@@ -171,6 +171,11 @@ export const formatTimeToUnix = (date) => {
   const unixTimestampInSeconds = newDate.getTime();
   return unixTimestampInSeconds;
 };
+
+export const convertTimestampToReadableDate = (timestamp) => {
+  return new Date(timestamp * 1000);
+};
+
 export const calculateTimeDifference = (startDate, endDate) => {
   const timeDifference = endDate - startDate;
   const secondsInMillisecond = 1000;
@@ -198,6 +203,34 @@ export const calculateTimeDifference = (startDate, endDate) => {
   }
 };
 
-export const convertTimestampToReadableDate = (timestamp) => {
-  return new Date(timestamp * 1000);
+export const calculateISODateFormat = (isoDateString) => {
+  const date = new Date(isoDateString);
+  const formatDate = (d) => {
+    const months = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ];
+
+    const day = d.getDate();
+    const monthIndex = d.getMonth();
+    const year = d.getFullYear();
+
+    return `${day} ${months[monthIndex]}, ${year}`;
+  };
+  const formattedDate = formatDate(date);
+  return formattedDate;
+};
+
+export const parseISODate = (isoDateString) => {
+  return new Date(isoDateString);
 };
diff --git a/src/screens/ProfileScreen/ProfileScreen.tsx b/src/screens/ProfileScreen/ProfileScreen.tsx
@@ -9,6 +9,8 @@ import {
   StyleSheet,
   SafeAreaView,
   ScrollView,
+  Button,
+  TouchableOpacity,
 } from 'react-native';
 import { ScreenViewContainer } from '../../styles/GlobalStyle';
 import { profileScreenStyles } from './styles';
@@ -23,6 +25,7 @@ import NoteworthyContributionsDropdown from './User Data/UserContributions/NoteW
 import ActiveTaskDropDown from './User Data/UserContributions/ActiveTask';
 import UserData from './User Data/UserData';
 import { useSelector, useDispatch } from 'react-redux';
+import { AuthViewStyle } from '../AuthScreen/styles';
 import AllContributionsDropdown from './User Data/UserContributions/AllContributions';
 
 const ProfileScreen = () => {
@@ -53,10 +56,16 @@ const ProfileScreen = () => {
   };
 
   const handleLogout = () => {
-    // please remove the token
+    setLoggedInUserData(null);
   };
   return (
     <ScrollView contentContainerStyle={ScreenViewContainer.container}>
+      <Pressable
+        style={profileScreenStyles.logoutButton}
+        onPress={handleLogout}
+      >
+        <Text style={profileScreenStyles.logoutText}>{Strings.LOGOUT}</Text>
+      </Pressable>
       <UploadImageModalView
         closeModal={closeModal}
         modalVisible={modalVisible}
@@ -84,7 +93,7 @@ const ProfileScreen = () => {
               : dispatch({ type: 'PROD' });
           }}
         />
-        <ScrollView style={styles.container}>
+        <ScrollView style={AuthViewStyle.container}>
           <NoteworthyContributionsDropdown />
           <ActiveTaskDropDown />
           <AllContributionsDropdown />
@@ -103,14 +112,5 @@ const ProfileScreen = () => {
     </ScrollView>
   );
 };
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 10,
-    paddingBottom: 30,
-  },
-  container2: {
-    borderWidth: 2,
-  },
-});
 
 export default withHeader(ProfileScreen);