Merge pull request #17 from Giveth/revert-12-9-add-dropdown-menu

Revert "add dropdown menu" because backend did not deploy on production
Giveth · Jul 11, 2024 · f034dfa · f034dfa
2 parents a548441 + 5e14a47
commit f034dfa
Show file tree

Hide file tree

Showing 14 changed files with 61 additions and 248 deletions.
diff --git a/src/components/NetworkSelect.tsx b/src/components/NetworkSelect.tsx
diff --git a/src/components/views/home/DonationsCount.tsx b/src/components/views/home/DonationsCount.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
 	H2,
 	H4,
@@ -21,30 +21,21 @@ import useDonationsCount from '../../../hooks/useDonationsCount';
 import DonationsChart from './charts/DonationsChart';
 import CheckBox from '../../CheckBox';
 import DatePicker from '../../DatePicker';
-import NetworkSelect from '../../NetworkSelect';
 
 const DonationsCount = () => {
 	const [fromDate, setFromDate] = useState(firstOfGiveth());
 	const [toDate, setToDate] = useState(firstOfNextMonth());
-	const [selectedNetworkId, setSelectedNetworkId] = useState<number>();
+	const [fromOptimism, setFromOptimism] = useState(false);
 	const [onlyVerified, setOnlyVerified] = useState(false);
 	const { donationsCount, loading } = useDonationsCount(
 		fromDate,
 		toDate,
-		selectedNetworkId,
+		fromOptimism,
 		onlyVerified,
 	);
 
 	const { total, totalPerMonthAndYear } = donationsCount || {};
 
-	const handleNetworkChange = (
-		event: React.ChangeEvent<HTMLSelectElement>,
-	) => {
-		const value =
-			event.target.value === '' ? undefined : Number(event.target.value);
-		setSelectedNetworkId(value);
-	};
-
 	return (
 		<RowStyled>
 			<Col md={4}>
@@ -70,12 +61,12 @@ const DonationsCount = () => {
 					To: <DatePicker date={toDate} setDate={setToDate} />
 				</div>
 				<br />
-				<NetworkSelect
-					selectedNetwork={selectedNetworkId}
-					onNetworkChange={handleNetworkChange}
+				<CheckBox
+					checked={fromOptimism}
+					onChange={setFromOptimism}
+					label='From Optimism only'
 				/>
 				<br />
-				<br />
 				<CheckBox
 					checked={onlyVerified}
 					onChange={setOnlyVerified}

diff --git a/src/components/views/home/DonorsCount.tsx b/src/components/views/home/DonorsCount.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
 	H2,
 	H4,
@@ -19,27 +19,19 @@ import {
 import { IconWithTooltip } from '../../IconWithTooltip';
 import { FlexCenter } from '../../styled-components/flex';
 import DonorsChart from './charts/DonorsChart';
+import CheckBox from '../../CheckBox';
 import DatePicker from '../../DatePicker';
-import NetworkSelect from '../../NetworkSelect';
 
 const DonorsCount = () => {
 	const [fromDate, setFromDate] = useState(firstOfGiveth());
 	const [toDate, setToDate] = useState(firstOfNextMonth());
-	const [selectedNetworkId, setSelectedNetworkId] = useState<number>();
+	const [fromOptimism, setFromOptimism] = useState(false);
 	const { donorsCount, loading } = useDonorsCount(
 		fromDate,
 		toDate,
-		selectedNetworkId,
+		fromOptimism,
 	);
 
-	const handleNetworkChange = (
-		event: React.ChangeEvent<HTMLSelectElement>,
-	) => {
-		const value =
-			event.target.value === '' ? undefined : Number(event.target.value);
-		setSelectedNetworkId(value);
-	};
-
 	const { total, totalPerMonthAndYear } = donorsCount || {};
 
 	return (
@@ -67,9 +59,10 @@ const DonorsCount = () => {
 					To: <DatePicker date={toDate} setDate={setToDate} />
 				</div>
 				<br />
-				<NetworkSelect
-					selectedNetwork={selectedNetworkId}
-					onNetworkChange={handleNetworkChange}
+				<CheckBox
+					checked={fromOptimism}
+					onChange={setFromOptimism}
+					label='From Optimism only'
 				/>
 			</Col>
 			<Col md={1} />

diff --git a/src/components/views/home/ProjectsCount.tsx b/src/components/views/home/ProjectsCount.tsx
@@ -7,7 +7,7 @@ import {
 	Subline,
 } from '@giveth/ui-design-system';
 import styled from 'styled-components';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Col, Row } from '../../styled-components/grid';
 import useProjectsCount from '../../../hooks/useProjectsCount';
 import Spinner from '../../Spinner';
@@ -21,33 +21,24 @@ import { Flex, FlexCenter } from '../../styled-components/flex';
 import ProjectsChart from './charts/ProjectsChart';
 import CheckBox from '../../CheckBox';
 import DatePicker from '../../DatePicker';
-import NetworkSelect from '../../NetworkSelect';
 
 const ProjectsCount = () => {
 	const [fromDate, setFromDate] = useState(firstOfGiveth());
 	const [toDate, setToDate] = useState(firstOfNextMonth());
-	const [selectedNetworkId, setSelectedNetworkId] = useState<number>();
+	const [includesOptimism, setIncludesOptimism] = useState(false);
 	const [onlyVerified, setOnlyVerified] = useState(false);
 	const [onlyListed, setOnlyListed] = useState(false);
 
 	const { projectsCount, loading } = useProjectsCount(
 		fromDate,
 		toDate,
-		selectedNetworkId,
+		includesOptimism,
 		onlyVerified,
 		onlyListed,
 	);
 
 	const { total, totalPerMonthAndYear } = projectsCount || {};
 
-	const handleNetworkChange = (
-		event: React.ChangeEvent<HTMLSelectElement>,
-	) => {
-		const value =
-			event.target.value === '' ? undefined : Number(event.target.value);
-		setSelectedNetworkId(value);
-	};
-
 	return (
 		<RowStyled>
 			<Col md={4}>
@@ -74,16 +65,19 @@ const ProjectsCount = () => {
 				</div>
 				<br />
 				<Flex alignItems='center' gap='10px'>
-					<NetworkSelect
-						selectedNetwork={selectedNetworkId}
-						onNetworkChange={handleNetworkChange}
+					<CheckBox
+						checked={includesOptimism}
+						onChange={setIncludesOptimism}
+						label='Includes Optimism receiving address'
 					/>
 					<IconWithTooltip
 						icon={<IconHelpFilled16 />}
 						direction={'top'}
 					>
 						<TooltipBody>
-							Filter projects by the selected network.
+							When this option is selected, projects that don't
+							have an Optimism receiving address are omitted from
+							the query.
 						</TooltipBody>
 					</IconWithTooltip>
 				</Flex>

diff --git a/src/components/views/home/TotalDonations.tsx b/src/components/views/home/TotalDonations.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
 	H2,
 	H4,
@@ -23,21 +23,20 @@ import { FlexCenter } from '../../styled-components/flex';
 import TotalDonationsChart from './charts/TotalDonationsChart';
 import CheckBox from '../../CheckBox';
 import DatePicker from '../../DatePicker';
-import NetworkSelect from '../../NetworkSelect';
 
 const TotalDonations = () => {
 	const [fromDate, setFromDate] = useState(firstOfGiveth());
 	const [toDate, setToDate] = useState(firstOfNextMonth());
-	const [selectedNetworkId, setSelectedNetworkId] = useState<number>();
+	const [fromOptimism, setFromOptimism] = useState(false);
 	const [onlyVerified, setOnlyVerified] = useState(false);
 	const { totalDonations, loading: loadingTotal } = useTotalDonations(
 		fromDate,
 		toDate,
-		selectedNetworkId,
+		fromOptimism,
 		onlyVerified,
 	);
 	const { categoryDonations, loading: loadingCategories } =
-		useCategoryDonations(fromDate, toDate, selectedNetworkId, onlyVerified);
+		useCategoryDonations(fromDate, toDate, fromOptimism, onlyVerified);
 
 	const totalCategoryDonations = categoryDonations?.reduce(
 		(i, j) => i + j.totalUsd,
@@ -55,14 +54,6 @@ const TotalDonations = () => {
 
 	const { total, totalPerMonthAndYear } = totalDonations || {};
 
-	const handleNetworkChange = (
-		event: React.ChangeEvent<HTMLSelectElement>,
-	) => {
-		const value =
-			event.target.value === '' ? undefined : Number(event.target.value);
-		setSelectedNetworkId(value);
-	};
-
 	return (
 		<RowStyled>
 			<Col md={4}>
@@ -88,12 +79,12 @@ const TotalDonations = () => {
 					To: <DatePicker date={toDate} setDate={setToDate} />
 				</div>
 				<br />
-				<NetworkSelect
-					selectedNetwork={selectedNetworkId}
-					onNetworkChange={handleNetworkChange}
+				<CheckBox
+					checked={fromOptimism}
+					onChange={setFromOptimism}
+					label='From Optimism only'
 				/>
 				<br />
-				<br />
 				<CheckBox
 					checked={onlyVerified}
 					onChange={setOnlyVerified}