From 5e8f927c94547b806f69ed54bc8d0378509a29df Mon Sep 17 00:00:00 2001
From: Lovel George <36924734+lovelgeorge99@users.noreply.github.com>
Date: Tue, 6 Aug 2024 21:29:24 -0400
Subject: [PATCH] added recurring donation sum in project card og QF active
 round

---
 src/apollo/gql/gqlProjects.ts               | 29 ++++++++++
 src/components/project-card/ProjectCard.tsx | 64 +++++++++++++++++++--
 2 files changed, 89 insertions(+), 4 deletions(-)

diff --git a/src/apollo/gql/gqlProjects.ts b/src/apollo/gql/gqlProjects.ts
index 8ed2663822..654858c959 100644
--- a/src/apollo/gql/gqlProjects.ts
+++ b/src/apollo/gql/gqlProjects.ts
@@ -754,3 +754,32 @@ export const FETCH_RECURRING_DONATIONS_BY_PROJECTID = gql`
 		}
 	}
 `;
+export const FETCH_RECURRING_DONATIONS_BY_DATE = gql`
+	query ($projectId: Int!, $startDate: String, $endDate: String) {
+		recurringDonationsByDate(
+			projectId: $projectId
+			startDate: $startDate
+			endDate: $endDate
+		) {
+			recurringDonations {
+				id
+				txHash
+				networkId
+				flowRate
+				currency
+				anonymous
+				isArchived
+				status
+				totalUsdStreamed
+				donor {
+					id
+					walletAddress
+					firstName
+					email
+				}
+				createdAt
+			}
+			totalCount
+		}
+	}
+`;
diff --git a/src/components/project-card/ProjectCard.tsx b/src/components/project-card/ProjectCard.tsx
index f5951669bf..d273ae674e 100644
--- a/src/components/project-card/ProjectCard.tsx
+++ b/src/components/project-card/ProjectCard.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import {
 	P,
@@ -21,7 +21,7 @@ import { useRouter } from 'next/router';
 import { Shadow } from '@/components/styled-components/Shadow';
 import ProjectCardBadges from './ProjectCardBadgeButtons';
 import ProjectCardOrgBadge from './ProjectCardOrgBadge';
-import { IProject } from '@/apollo/types/types';
+import { IAdminUser, IProject } from '@/apollo/types/types';
 import { timeFromNow } from '@/lib/helpers';
 import ProjectCardImage from './ProjectCardImage';
 import { slugToProjectDonate, slugToProjectView } from '@/lib/routeCreators';
@@ -33,6 +33,8 @@ import { formatDonation } from '@/helpers/number';
 import { RoundNotStartedModal } from './RoundNotStartedModal';
 import { TooltipContent } from '@/components/modals/HarvestAll.sc';
 import { IconWithTooltip } from '@/components/IconWithToolTip';
+import { FETCH_RECURRING_DONATIONS_BY_DATE } from '@/apollo/gql/gqlProjects';
+import { client } from '@/apollo/apolloClient';
 
 const cardRadius = '12px';
 const imgHeight = '226px';
@@ -43,10 +45,24 @@ interface IProjectCard {
 	className?: string;
 	order?: number;
 }
-
+interface IRecurringDonation {
+	id: string;
+	txHash: string;
+	networkId: number;
+	currency: string;
+	anonymous: boolean;
+	status: string;
+	amountStreamed: number;
+	totalUsdStreamed: number;
+	flowRate: string;
+	donor: IAdminUser;
+	createdAt: string;
+	finished: boolean;
+}
 const ProjectCard = (props: IProjectCard) => {
 	const { project, className } = props;
 	const {
+		id,
 		title,
 		descriptionSummary,
 		image,
@@ -61,6 +77,7 @@ const ProjectCard = (props: IProjectCard) => {
 		qfRounds,
 		estimatedMatching,
 	} = project;
+	const [recurringDonationSumInQF, setRecurringDonationSumInQF] = useState(0);
 	const [isHover, setIsHover] = useState(false);
 	const [showHintModal, setShowHintModal] = useState(false);
 	const [destination, setDestination] = useState('');
@@ -96,6 +113,44 @@ const ProjectCard = (props: IProjectCard) => {
 		}
 	};
 
+	const fetchProjectRecurringDonationsByDate = async () => {
+		const startDate = activeStartedRound?.beginDate;
+		const endDate = activeStartedRound?.endDate;
+		if (startDate && endDate) {
+			const { data: projectRecurringDonations } = await client.query({
+				query: FETCH_RECURRING_DONATIONS_BY_DATE,
+				variables: {
+					projectId: parseInt(id),
+					startDate,
+					endDate,
+				},
+			});
+			const { recurringDonationsByDate } = projectRecurringDonations;
+			return recurringDonationsByDate;
+		}
+	};
+	useEffect(() => {
+		const calculateTotalAmountStreamed = async () => {
+			if (activeStartedRound?.isActive) {
+				const donations = await fetchProjectRecurringDonationsByDate();
+				let totalAmountStreamed;
+				if (donations.totalCount != 0) {
+					console.log(id, donations.recurringDonations);
+					totalAmountStreamed = donations.recurringDonations.reduce(
+						(sum: number, donation: IRecurringDonation) => {
+							return sum + donation.totalUsdStreamed;
+						},
+						0,
+					);
+					setRecurringDonationSumInQF(totalAmountStreamed);
+				}
+				console.log(id, totalAmountStreamed);
+			}
+		};
+
+		calculateTotalAmountStreamed();
+	}, [props]);
+
 	return (
 		// </Link>
 		<Wrapper
@@ -170,7 +225,8 @@ const ProjectCard = (props: IProjectCard) => {
 							<PriceText>
 								{formatDonation(
 									(activeStartedRound
-										? sumDonationValueUsdForActiveQfRound
+										? sumDonationValueUsdForActiveQfRound! +
+											recurringDonationSumInQF
 										: totalDonations) || 0,
 									'$',
 									locale,