Allow to filter Donation data by verified project donations

Author: RamRamez

src/components/views/home/DonationsCount.tsx

@@ -26,10 +26,12 @@ const DonationsCount = () => {
 	const [fromDate, setFromDate] = useState(firstOfGiveth());
 	const [toDate, setToDate] = useState(firstOfNextMonth());
 	const [fromOptimism, setFromOptimism] = useState(false);
+	const [onlyVerified, setOnlyVerified] = useState(false);
 	const { donationsCount, loading } = useDonationsCount(
 		fromDate,
 		toDate,
 		fromOptimism,
+		onlyVerified,
 	);
 
 	const { total, totalPerMonthAndYear } = donationsCount || {};
@@ -64,6 +66,12 @@ const DonationsCount = () => {
 					onChange={setFromOptimism}
 					label='From Optimism only'
 				/>
+				<br />
+				<CheckBox
+					checked={onlyVerified}
+					onChange={setOnlyVerified}
+					label='To verified projects only'
+				/>
 			</Col>
 			<Col md={1} />
 			<Col md={2}>

src/components/views/home/TotalDonations.tsx

@@ -28,21 +28,21 @@ const TotalDonations = () => {
 	const [fromDate, setFromDate] = useState(firstOfGiveth());
 	const [toDate, setToDate] = useState(firstOfNextMonth());
 	const [fromOptimism, setFromOptimism] = useState(false);
+	const [onlyVerified, setOnlyVerified] = useState(false);
 	const { totalDonations, loading: loadingTotal } = useTotalDonations(
 		fromDate,
 		toDate,
 		fromOptimism,
+		onlyVerified,
 	);
 	const { categoryDonations, loading: loadingCategories } =
-		useCategoryDonations(fromDate, toDate, fromOptimism);
+		useCategoryDonations(fromDate, toDate, fromOptimism, onlyVerified);
 
 	const totalCategoryDonations = categoryDonations?.reduce(
 		(i, j) => i + j.totalUsd,
 		0,
 	);
 
-	console.log('totalCategoryDonations', fromDate);
-
 	const norCategoryDonations = categoryDonations?.map(i => {
 		return {
 			...i,
@@ -84,6 +84,12 @@ const TotalDonations = () => {
 					onChange={setFromOptimism}
 					label='From Optimism only'
 				/>
+				<br />
+				<CheckBox
+					checked={onlyVerified}
+					onChange={setOnlyVerified}
+					label='To verified projects only'
+				/>
 			</Col>
 			<Col md={1} />
 			<Col md={2}>

src/gql/gqlDonations.ts

@@ -3,11 +3,13 @@ export const fetchTotalDonationsUSD = `
     $fromDate: String
     $toDate: String
     $fromOptimismOnly: Boolean
+    $onlyVerified: Boolean
   ) {
     donationsTotalUsdPerDate (
       fromDate: $fromDate
       toDate: $toDate
       fromOptimismOnly: $fromOptimismOnly
+      onlyVerified: $onlyVerified
     ) {
       total
       totalPerMonthAndYear {
@@ -23,11 +25,13 @@ export const fetchTotalDonationsPerCategory = `
     $fromDate: String
     $toDate: String
     $fromOptimismOnly: Boolean
+    $onlyVerified: Boolean
   ) {
     totalDonationsPerCategory (
       fromDate: $fromDate
       toDate: $toDate
       fromOptimismOnly: $fromOptimismOnly
+      onlyVerified: $onlyVerified
     ) {
       id
       title
@@ -42,11 +46,13 @@ export const fetchDonationsCount = `
     $fromDate: String
     $toDate: String
     $fromOptimismOnly: Boolean
+    $onlyVerified: Boolean
   ) {
     totalDonationsNumberPerDate (
       fromDate: $fromDate
       toDate: $toDate
       fromOptimismOnly: $fromOptimismOnly
+      onlyVerified: $onlyVerified
     ) {
       total
       totalPerMonthAndYear {

src/hooks/useCategoryDonations.ts

@@ -11,6 +11,7 @@ const useCategoryDonations = (
 	fromDate: Date,
 	toDate: Date,
 	fromOptimism?: boolean,
+	onlyVerified?: boolean,
 ) => {
 	const [categoryDonations, setCategoryDonations] =
 		useState<ITotalDonationsPerCategory[]>();
@@ -22,6 +23,7 @@ const useCategoryDonations = (
 			fromDate: formatDateToISO(fromDate),
 			toDate: formatDateToISO(toDate),
 			fromOptimismOnly: fromOptimism || false,
+			onlyVerified,
 		};
 		backendGQLRequest(fetchTotalDonationsPerCategory, variables)
 			.then((res: IFetchTotalDonationsPerCategory) => {
@@ -30,7 +32,7 @@ const useCategoryDonations = (
 			})
 			.catch(showToastError)
 			.finally(() => setLoading(false));
-	}, [fromDate, toDate, fromOptimism]);
+	}, [fromDate, toDate, fromOptimism, onlyVerified]);
 
 	return { categoryDonations, loading };
 };

src/hooks/useDonationsCount.ts

@@ -8,6 +8,7 @@ const useDonationsCount = (
 	fromDate: Date,
 	toDate: Date,
 	fromOptimism?: boolean,
+	onlyVerified?: boolean,
 ) => {
 	const [donationsCount, setDonationsCount] = useState<IResFormat>();
 	const [loading, setLoading] = useState<boolean>(true);
@@ -18,14 +19,15 @@ const useDonationsCount = (
 			fromDate: formatDateToISO(fromDate),
 			toDate: formatDateToISO(toDate),
 			fromOptimismOnly: fromOptimism || false,
+			onlyVerified,
 		};
 		backendGQLRequest(fetchDonationsCount, variables)
 			.then((res: IFetchDonationsCount) => {
 				setDonationsCount(res.data.totalDonationsNumberPerDate);
 			})
 			.catch(showToastError)
 			.finally(() => setLoading(false));
-	}, [fromDate, toDate, fromOptimism]);
+	}, [fromDate, toDate, fromOptimism, onlyVerified]);
 
 	return { donationsCount, loading };
 };

src/hooks/useTotalDonations.ts

@@ -8,6 +8,7 @@ const useTotalDonations = (
 	fromDate: Date,
 	toDate: Date,
 	fromOptimism?: boolean,
+	onlyVerified?: boolean,
 ) => {
 	const [totalDonations, setTotalDonations] = useState<IResFormat>();
 	const [loading, setLoading] = useState<boolean>(true);
@@ -18,6 +19,7 @@ const useTotalDonations = (
 			fromDate: formatDateToISO(fromDate),
 			toDate: formatDateToISO(toDate),
 			fromOptimismOnly: fromOptimism || false,
+			onlyVerified,
 		};
 		backendGQLRequest(fetchTotalDonationsUSD, variables)
 			.then((res: IFetchTotalDonationsUSD) => {
@@ -26,7 +28,7 @@ const useTotalDonations = (
 			})
 			.catch(showToastError)
 			.finally(() => setLoading(false));
-	}, [fromDate, toDate, fromOptimism]);
+	}, [fromDate, toDate, fromOptimism, onlyVerified]);
 
 	return { totalDonations, loading };
 };