From b5b8a35accd167e87b8399fc6f61106519ac699e Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Mon, 14 Mar 2022 23:17:30 -0400
Subject: [PATCH] Disable crypto from list if already selected
---
src/cryptometrics/components/charts/CompareChart.js | 2 ++
src/cryptometrics/components/dropdown/Dropdown.js | 13 ++++++++-----
2 files changed, 10 insertions(+), 5 deletions(-)
diff --git a/src/cryptometrics/components/charts/CompareChart.js b/src/cryptometrics/components/charts/CompareChart.js
index 26c4ab2..2acd66a 100644
--- a/src/cryptometrics/components/charts/CompareChart.js
+++ b/src/cryptometrics/components/charts/CompareChart.js
@@ -131,12 +131,14 @@ function CompareChart() {
list={listOfCoins.isLoading ? [] : listOfCoins.data}
value={firstCrypto}
setValue={setFirstCrypto}
+ disabled={[secondCrypto]}
/>
<ChevronDoubleRightIcon className="w-5 h-5 dark:text-gray-300" />
<Dropdown
list={listOfCoins.isLoading ? [] : listOfCoins.data}
value={secondCrypto}
setValue={setSecondCrypto}
+ disabled={[firstCrypto]}
/>
</div>
</div>
diff --git a/src/cryptometrics/components/dropdown/Dropdown.js b/src/cryptometrics/components/dropdown/Dropdown.js
index 746bae4..024740e 100644
--- a/src/cryptometrics/components/dropdown/Dropdown.js
+++ b/src/cryptometrics/components/dropdown/Dropdown.js
@@ -11,7 +11,7 @@ function getCoin(list, id) {
return null;
}
-function Dropdown({ list, value, setValue }) {
+function Dropdown({ list, value, setValue, disabled }) {
const [open, setOpen] = useState(false);
useEffect(() => {
@@ -28,7 +28,7 @@ function Dropdown({ list, value, setValue }) {
onClick={() => setOpen(!open)}
>
<div className="flex flex-row items-center space-x-2">
- <p>{getCoin(list, value).name}</p>
+ <p>{getCoin(list, value)?.name}</p>
<ChevronDownIcon className="h-5 w-5" />
</div>
</button>
@@ -41,6 +41,7 @@ function Dropdown({ list, value, setValue }) {
onClick={() => setValue(coin.id)}
key={index}
selected={coin.id === value}
+ disabled={disabled.includes(coin.id)}
>
{coin.name}
</DropdownItem>
@@ -53,14 +54,16 @@ function Dropdown({ list, value, setValue }) {
);
}
-function DropdownItem({ children, onClick, selected }) {
+function DropdownItem({ children, onClick, selected, disabled }) {
return (
<div
className={classNames("py-2 px-4 rounded-xl mx-2", {
+ "opacity-75 dark:text-gray-500": disabled,
"bg-white dark:text-black": selected,
- "hover:bg-dark-600 dark:text-white": !selected,
+ "hover:bg-dark-600 dark:text-white cursor-pointer":
+ !disabled && !selected,
})}
- onClick={!selected && onClick}
+ onClick={selected || disabled ? undefined : onClick}
>
{children}
</div>
--
GitLab