diff --git a/src/components/UserContibution/DisplayContribution.tsx b/src/components/UserContibution/DisplayContribution.tsx
new file mode 100644
index 00000000..80783943
--- /dev/null
+++ b/src/components/UserContibution/DisplayContribution.tsx
@@ -0,0 +1,153 @@
+import {
+ View,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ Linking,
+ Image,
+} from 'react-native';
+import React, { useState } from 'react';
+import {
+ calculateTimeDifference,
+ convertTimestampToReadableDate,
+} from '../../screens/AuthScreen/Util';
+
+const DisplayContribution = ({ tasks }) => {
+ const [clicked, setClicked] = useState(false);
+
+ return (
+
+ setClicked(!clicked)}
+ style={styles.DropDownButton}
+ >
+ Active Tasks
+ {clicked ? (
+
+ ) : (
+
+ )}
+
+ {clicked
+ ? tasks.map((item, index) => (
+
+ Linking.openURL(item.github.issue.html_url)
+ : null
+ }
+ >
+ {item.title}
+ <>
+ {item.purpose ? (
+ {item?.purpose}
+ ) : null}
+
+ <>
+ {item.github ? (
+
+ Estimated completion:{' '}
+ {calculateTimeDifference(
+ convertTimestampToReadableDate(item.startedOn),
+ convertTimestampToReadableDate(item.endsOn),
+ )}
+
+ ) : (
+
+ Estimated completion:{' '}
+ {calculateTimeDifference(
+ convertTimestampToReadableDate(item.startedOn),
+ convertTimestampToReadableDate(item.endsOn),
+ )}
+
+ )}
+
+ <>
+ {item.github ? (
+
+ Checkout this feature in action
+
+ ) : null}
+
+
+
+ ))
+ : null}
+
+ );
+};
+
+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,
+ flex: 1,
+ color: 'black',
+ },
+ DropDownElement: {
+ color: 'black',
+ width: '100%',
+ alignSelf: 'center',
+ height: 'auto',
+ },
+ DropDownbackground: {
+ padding: 10,
+ marginTop: 5,
+ alignSelf: 'center',
+ width: '90%',
+ backgroundColor: '#fff',
+ borderRadius: 5,
+ },
+ ImageDimensions: {
+ height: 100,
+ width: 100,
+ },
+ EstimatedTimeChoice1: {
+ color: 'black',
+ fontSize: 15,
+ fontWeight: 'bold',
+ borderBottomColor: 'grey',
+ borderBottomWidth: 1,
+ marginTop: 5,
+ },
+ EstimatedTimeChoice2: {
+ color: 'black',
+ fontWeight: 'bold',
+ fontSize: 13,
+ marginTop: 5,
+ },
+ CheckoutLive: {
+ color: 'grey',
+ textAlign: 'center',
+ },
+ ItemTaskTitle: {
+ color: 'blue',
+ fontSize: 18,
+ },
+ ItemTaskPurpose: {
+ color: 'black',
+ marginTop: 5,
+ },
+});
+
+export default DisplayContribution;
diff --git a/src/constants/appConstant/url.ts b/src/constants/appConstant/url.ts
index 58ac6a99..a3fd1025 100644
--- a/src/constants/appConstant/url.ts
+++ b/src/constants/appConstant/url.ts
@@ -7,6 +7,7 @@ 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=`,
GITHUB: 'https://github.com/',
TWITTER: 'https://twitter.com',
LINKEDIN: 'https://www.linkedin.com/in/',
diff --git a/src/screens/AuthScreen/Util.ts b/src/screens/AuthScreen/Util.ts
index 9947382e..aabba6a2 100644
--- a/src/screens/AuthScreen/Util.ts
+++ b/src/screens/AuthScreen/Util.ts
@@ -40,6 +40,19 @@ export const fetchContribution = async (userName: string): Promise => {
}
};
+export const fetchActiveTasks = async (userName: string): Promise => {
+ try {
+ const response = await axios.get(urls.GET_ACTIVE_TASKS + userName, {
+ headers: {
+ Cookie: '',
+ },
+ });
+ return response.data;
+ } catch (error) {
+ return null;
+ }
+};
+
export const updateStatus = async (status: string) => {
const res = await axios.patch(
urls.GET_USERS_DATA,
@@ -158,3 +171,33 @@ export const formatTimeToUnix = (date) => {
const unixTimestampInSeconds = newDate.getTime();
return unixTimestampInSeconds;
};
+export const calculateTimeDifference = (startDate, endDate) => {
+ const timeDifference = endDate - startDate;
+ const secondsInMillisecond = 1000;
+ const minutesInMillisecond = 60 * secondsInMillisecond;
+ const hoursInMillisecond = 60 * minutesInMillisecond;
+ const daysInMillisecond = 24 * hoursInMillisecond;
+ const weeksInMillisecond = 7 * daysInMillisecond;
+ const monthsInMillisecond = 30.44 * daysInMillisecond; // Average month length
+ const yearsInMillisecond = 365 * daysInMillisecond;
+
+ if (timeDifference < minutesInMillisecond) {
+ return `${Math.floor(timeDifference / secondsInMillisecond)} seconds`;
+ } else if (timeDifference < hoursInMillisecond) {
+ return `${Math.floor(timeDifference / minutesInMillisecond)} minutes`;
+ } else if (timeDifference < daysInMillisecond) {
+ return `${Math.floor(timeDifference / hoursInMillisecond)} hours`;
+ } else if (timeDifference < weeksInMillisecond) {
+ return `${Math.floor(timeDifference / daysInMillisecond)} days`;
+ } else if (timeDifference < monthsInMillisecond) {
+ return `${Math.floor(timeDifference / weeksInMillisecond)} weeks`;
+ } else if (timeDifference < yearsInMillisecond) {
+ return `${Math.floor(timeDifference / monthsInMillisecond)} months`;
+ } else {
+ return `${Math.floor(timeDifference / yearsInMillisecond)} years`;
+ }
+};
+
+export const convertTimestampToReadableDate = (timestamp) => {
+ return new Date(timestamp * 1000);
+};
diff --git a/src/screens/ProfileScreen/User Data/UserContributions/ActiveTask.tsx b/src/screens/ProfileScreen/User Data/UserContributions/ActiveTask.tsx
index 96e968e6..98dfe8a0 100644
--- a/src/screens/ProfileScreen/User Data/UserContributions/ActiveTask.tsx
+++ b/src/screens/ProfileScreen/User Data/UserContributions/ActiveTask.tsx
@@ -1,61 +1,25 @@
-import React, { useState } from 'react';
-import { View, StyleSheet, Text, TouchableOpacity, Image } from 'react-native';
+import React, { useCallback, useContext, useState } from 'react';
+import { AuthContext } from '../../../../context/AuthContext';
+import { useFocusEffect } from '@react-navigation/native';
+import { fetchActiveTasks } from '../../../AuthScreen/Util';
+import DisplayContribution from '../../../../components/UserContibution/DisplayContribution';
const ActiveTaskDropDown = () => {
- const [clicked, setClicked] = useState(false);
- return (
-
- setClicked(!clicked)}
- style={styles.DropDownButton}
- >
- Active tasks
- {clicked ? (
-
- ) : (
-
- )}
-
-
+ const [activeTasks, setActiveTasks] = useState([]);
+ const { loggedInUserData } = useContext(AuthContext);
+
+ useFocusEffect(
+ useCallback(() => {
+ (async () => {
+ const userName = loggedInUserData?.username;
+ const contributionResponse = await fetchActiveTasks(userName);
+ setActiveTasks(contributionResponse.tasks);
+ })();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []),
);
-};
-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,
- flex: 1,
- color: 'black',
- },
- DropDownElement: {
- color: 'black',
- width: '100%',
- alignSelf: 'center',
- height: 50,
- borderBottomWidth: 0.5,
- },
- ImageDimensions: {
- height: 100,
- width: 100,
- },
-});
+ return ;
+};
export default ActiveTaskDropDown;
diff --git a/src/screens/ProfileScreen/User Data/UserContributions/NoteWorthyContributions.tsx b/src/screens/ProfileScreen/User Data/UserContributions/NoteWorthyContributions.tsx
index 628994e2..c376db6a 100644
--- a/src/screens/ProfileScreen/User Data/UserContributions/NoteWorthyContributions.tsx
+++ b/src/screens/ProfileScreen/User Data/UserContributions/NoteWorthyContributions.tsx
@@ -7,7 +7,11 @@ import {
Linking,
Image,
} from 'react-native';
-import { fetchContribution } from '../../../AuthScreen/Util';
+import {
+ calculateTimeDifference,
+ convertTimestampToReadableDate,
+ fetchContribution,
+} from '../../../AuthScreen/Util';
import { useFocusEffect } from '@react-navigation/native';
import { AuthContext } from '../../../../context/AuthContext';
@@ -27,36 +31,6 @@ const NoteworthyContributionsDropdown = () => {
}, []),
);
- const convertTimestampToReadableDate = (timestamp) => {
- return new Date(timestamp * 1000);
- };
- const calculateTimeDifference = (startDate, endDate) => {
- const timeDifference = endDate - startDate;
- const secondsInMillisecond = 1000;
- const minutesInMillisecond = 60 * secondsInMillisecond;
- const hoursInMillisecond = 60 * minutesInMillisecond;
- const daysInMillisecond = 24 * hoursInMillisecond;
- const weeksInMillisecond = 7 * daysInMillisecond;
- const monthsInMillisecond = 30.44 * daysInMillisecond; // Average month length
- const yearsInMillisecond = 365 * daysInMillisecond;
-
- if (timeDifference < minutesInMillisecond) {
- return `${Math.floor(timeDifference / secondsInMillisecond)} seconds`;
- } else if (timeDifference < hoursInMillisecond) {
- return `${Math.floor(timeDifference / minutesInMillisecond)} minutes`;
- } else if (timeDifference < daysInMillisecond) {
- return `${Math.floor(timeDifference / hoursInMillisecond)} hours`;
- } else if (timeDifference < weeksInMillisecond) {
- return `${Math.floor(timeDifference / daysInMillisecond)} days`;
- } else if (timeDifference < monthsInMillisecond) {
- return `${Math.floor(timeDifference / weeksInMillisecond)} weeks`;
- } else if (timeDifference < yearsInMillisecond) {
- return `${Math.floor(timeDifference / monthsInMillisecond)} months`;
- } else {
- return `${Math.floor(timeDifference / yearsInMillisecond)} years`;
- }
- };
-
return (