Merge pull request #5 from Giveth/add-new-donors-count

add new donors count

src/components/views/home/Home.index.tsx

@@ -4,6 +4,8 @@ import ProjectsCount from './ProjectsCount';
 import DonorsCount from './DonorsCount';
 import TotalDonations from './TotalDonations';
 import DonationsCount from './DonationsCount';
+import NewDonorsCount from './NewDonorsCount';
+import NewDonorsDonationTotalUsd from './NewDonorsDonationTotalUsd';
 
 const HomeIndex = () => {
 	return (
@@ -16,6 +18,10 @@ const HomeIndex = () => {
 			<DonationsCount />
 			<hr />
 			<TotalDonations />
+			<hr />
+			<NewDonorsCount />
+			<hr />
+			<NewDonorsDonationTotalUsd />
 		</ContainerStyled>
 	);
 };

src/components/views/home/NewDonorsCount.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import {
+	H2,
+	H4,
+	H6,
+	IconHelpFilled16,
+	neutralColors,
+	Subline,
+} from '@giveth/ui-design-system';
+import styled from 'styled-components';
+import { Col, Row } from '../../styled-components/grid';
+import { StyledDatePicker } from '../../styled-components/datePicker';
+import Spinner from '../../Spinner';
+import {
+	firstOfNextMonth,
+	thousandsSeparator,
+	firstOfThisMonth,
+} from '../../../lib/helpers';
+import { IconWithTooltip } from '../../IconWithTooltip';
+import { FlexCenter } from '../../styled-components/flex';
+import useNewDonorsCount from '../../../hooks/useNewDonorsCount';
+
+const DonorsCount = () => {
+	const [fromDate, setFromDate] = useState(firstOfThisMonth());
+	const [toDate, setToDate] = useState(firstOfNextMonth());
+	const { newDonorsCount, loading } = useNewDonorsCount(fromDate, toDate);
+
+	return (
+		<RowStyled>
+			<Col md={4}>
+				<FlexCenter gap='10px'>
+					<H4>New Donors Count </H4>
+					<IconWithTooltip
+						icon={<IconHelpFilled16 />}
+						direction={'top'}
+					>
+						<TooltipBody>
+							The number of new donors that have arrived to the
+							platform between two dates (users who have made
+							their first donations)
+						</TooltipBody>
+					</IconWithTooltip>
+				</FlexCenter>
+			</Col>
+			<Col md={4}>
+				<div>
+					From:
+					<StyledDatePicker
+						selected={fromDate}
+						dateFormat='yyyy-MM'
+						onChange={(e: Date) => setFromDate(e)}
+						showPopperArrow={false}
+						showMonthYearPicker
+						placeholderText='Select a date'
+					/>
+				</div>
+				<br />
+				<div>
+					To:
+					<StyledDatePicker
+						selected={toDate}
+						dateFormat='yyyy-MM'
+						onChange={(e: Date) => setToDate(e)}
+						showPopperArrow={false}
+						showMonthYearPicker
+						placeholderText='Select a date'
+					/>
+				</div>
+			</Col>
+			<Col md={1} />
+			<Col md={2}>
+				<H6>Total:</H6>
+				{loading ? (
+					<Spinner />
+				) : (
+					<H2>{thousandsSeparator(newDonorsCount)}</H2>
+				)}
+			</Col>
+		</RowStyled>
+	);
+};
+
+const TooltipBody = styled(Subline)`
+	color: ${neutralColors.gray[100]};
+	width: 270px;
+`;
+
+const RowStyled = styled(Row)`
+	margin-top: 40px;
+	align-items: center;
+	margin-bottom: 40px;
+`;
+
+export default DonorsCount;

src/components/views/home/NewDonorsDonationTotalUsd.tsx

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import {
+	H2,
+	H4,
+	H6,
+	IconHelpFilled16,
+	neutralColors,
+	Subline,
+} from '@giveth/ui-design-system';
+import styled from 'styled-components';
+import { Col, Row } from '../../styled-components/grid';
+import { StyledDatePicker } from '../../styled-components/datePicker';
+import Spinner from '../../Spinner';
+import {
+	firstOfNextMonth,
+	thousandsSeparator,
+	firstOfThisMonth,
+} from '../../../lib/helpers';
+import { IconWithTooltip } from '../../IconWithTooltip';
+import { FlexCenter } from '../../styled-components/flex';
+import useNewDonorsDonationTotalUsd from '../../../hooks/useNewDonorsDonationTotalUsd';
+
+const NewDonorsDonationTotalUsd = () => {
+	const [fromDate, setFromDate] = useState(firstOfThisMonth());
+	const [toDate, setToDate] = useState(firstOfNextMonth());
+	const { newDonorsDonationTotalUsd, loading } = useNewDonorsDonationTotalUsd(
+		fromDate,
+		toDate,
+	);
+
+	return (
+		<RowStyled>
+			<Col md={4}>
+				<FlexCenter gap='10px'>
+					<H4>New Donors Donation Total USD </H4>
+					<IconWithTooltip
+						icon={<IconHelpFilled16 />}
+						direction={'top'}
+					>
+						<TooltipBody>
+							The volume of donations made in USD from new donors
+							between two dates (the total USD value of the first
+							donations made by users)
+						</TooltipBody>
+					</IconWithTooltip>
+				</FlexCenter>
+			</Col>
+			<Col md={4}>
+				<div>
+					From:
+					<StyledDatePicker
+						selected={fromDate}
+						dateFormat='yyyy-MM'
+						onChange={(e: Date) => setFromDate(e)}
+						showPopperArrow={false}
+						showMonthYearPicker
+						placeholderText='Select a date'
+					/>
+				</div>
+				<br />
+				<div>
+					To:
+					<StyledDatePicker
+						selected={toDate}
+						dateFormat='yyyy-MM'
+						onChange={(e: Date) => setToDate(e)}
+						showPopperArrow={false}
+						showMonthYearPicker
+						placeholderText='Select a date'
+					/>
+				</div>
+			</Col>
+			<Col md={1} />
+			<Col md={2}>
+				<H6>Total (USD):</H6>
+				{loading ? (
+					<Spinner />
+				) : (
+					<H2>
+						{thousandsSeparator(
+							newDonorsDonationTotalUsd?.toFixed(),
+						)}
+					</H2>
+				)}
+			</Col>
+		</RowStyled>
+	);
+};
+
+const TooltipBody = styled(Subline)`
+	color: ${neutralColors.gray[100]};
+	width: 270px;
+`;
+
+const RowStyled = styled(Row)`
+	margin-top: 40px;
+	align-items: center;
+	margin-bottom: 40px;
+`;
+
+export default NewDonorsDonationTotalUsd;

src/gql/gqlDonors.ts

@@ -17,3 +17,31 @@ export const fetchDonorsCount = `
     }
   }
 `;
+
+export const fetchNewDonorsCount = `
+  query (
+    $fromDate: String!
+    $toDate: String!
+  ) {
+    newDonorsCountPerDate(
+      fromDate: $fromDate
+      toDate: $toDate
+    ) {
+      total
+    }
+  }
+`;
+
+export const fetchNewDonorsDonationTotalUsd = `
+  query (
+    $fromDate: String!
+    $toDate: String!
+  ) {
+    newDonorsDonationTotalUsdPerDate(
+      fromDate: $fromDate
+      toDate: $toDate
+    ) {
+      total
+    }
+  }
+`;

src/hooks/useNewDonorsCount.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { backendGQLRequest } from '../lib/requests';
+import { IFetchNewDonorsCount } from '../types/gql';
+import { formatDateToISO, showToastError } from '../lib/helpers';
+import { fetchNewDonorsCount } from '../gql/gqlDonors';
+
+const useNewDonorsCount = (fromDate: Date, toDate: Date) => {
+	const [newDonorsCount, setNewDonorsCount] = useState<number>();
+	const [loading, setLoading] = useState<boolean>(true);
+
+	useEffect(() => {
+		!loading && setLoading(true);
+		const variables = {
+			fromDate: formatDateToISO(fromDate),
+			toDate: formatDateToISO(toDate),
+		};
+		backendGQLRequest(fetchNewDonorsCount, variables)
+			.then((res: IFetchNewDonorsCount) => {
+				setNewDonorsCount(res.data.newDonorsCountPerDate.total);
+			})
+			.catch(showToastError)
+			.finally(() => setLoading(false));
+	}, [fromDate, toDate]);
+
+	return { newDonorsCount, loading };
+};
+
+export default useNewDonorsCount;

src/hooks/useNewDonorsDonationTotalUsd.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { backendGQLRequest } from '../lib/requests';
+import { IFetchNewDonorsDonationTotalUsd } from '../types/gql';
+import { formatDateToISO, showToastError } from '../lib/helpers';
+import { fetchNewDonorsDonationTotalUsd } from '../gql/gqlDonors';
+
+const useNewDonorsDonationTotalUsd = (fromDate: Date, toDate: Date) => {
+	const [newDonorsDonationTotalUsd, setNewDonorsDonationTotalUsd] =
+		useState<number>();
+	const [loading, setLoading] = useState<boolean>(true);
+
+	useEffect(() => {
+		!loading && setLoading(true);
+		const variables = {
+			fromDate: formatDateToISO(fromDate),
+			toDate: formatDateToISO(toDate),
+		};
+		backendGQLRequest(fetchNewDonorsDonationTotalUsd, variables)
+			.then((res: IFetchNewDonorsDonationTotalUsd) => {
+				setNewDonorsDonationTotalUsd(
+					res.data.newDonorsDonationTotalUsdPerDate.total,
+				);
+			})
+			.catch(showToastError)
+			.finally(() => setLoading(false));
+	}, [fromDate, toDate]);
+
+	return { newDonorsDonationTotalUsd, loading };
+};
+
+export default useNewDonorsDonationTotalUsd;

src/lib/helpers.ts

@@ -14,6 +14,11 @@ export const firstOfGiveth = () => {
 	return new Date('2016/01/01');
 };
 
+export const firstOfThisMonth = () => {
+	const now = new Date();
+	return new Date(now.getFullYear(), now.getMonth(), 1);
+};
+
 export const firstOfNextMonth = () => {
 	const now = new Date();
 	return new Date(now.getFullYear(), now.getMonth() + 1, 1);

src/types/gql.ts

@@ -21,6 +21,22 @@ export interface IFetchDonorsCount {
 	};
 }
 
+export interface IFetchNewDonorsCount {
+	data: {
+		newDonorsCountPerDate: {
+			total: number;
+		};
+	};
+}
+
+export interface IFetchNewDonorsDonationTotalUsd {
+	data: {
+		newDonorsDonationTotalUsdPerDate: {
+			total: number;
+		};
+	};
+}
+
 export interface IFetchDonationsCount {
 	data: {
 		totalDonationsNumberPerDate: IResFormat;