Update components to support applying filters to cryptocurrencies

src/cryptometrics/components/dropdown/FilterDropdown.js

@@ -13,11 +13,7 @@ export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
 
   useEffect(() => {
     if (selectedFilter) {
-      setRadioValue(
-        filterOptions[selectedFilter].options[
-          Object.keys(filterOptions[selectedFilter].options)[0]
-        ].name
-      );
+      setRadioValue(Object.keys(filterOptions[selectedFilter].options)[0]);
     }
   }, [filterOptions, selectedFilter]);
 
@@ -35,7 +31,7 @@ export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
 
   const onFilterAdd = () => {
     addFilter({
-      subject: filterOptions[selectedFilter].name,
+      subject: selectedFilter,
       condition: radioValue,
       value: inputValue,
     });
@@ -49,18 +45,22 @@ export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
           "dark:bg-dark-600 w-56 h-max max-h-72 rounded-xl mt-2 transition-all duration-100 p-1 overflow-y-scroll shadow-lg shadow-dark-600"
         )}
       >
-        {Object.keys(filterOptions).map((key) => {
-          return (
-            <FilterDropdownItem
-              key={"primary_option_" + key}
-              selected={selectedFilter === key}
-              id={key}
-              onClick={onSelectedFilterChange}
-            >
-              {filterOptions[key].name}
-            </FilterDropdownItem>
-          );
-        })}
+        {Object.keys(filterOptions).length > 0 ? (
+          Object.keys(filterOptions).map((key) => {
+            return (
+              <FilterDropdownItem
+                key={"primary_option_" + key}
+                selected={selectedFilter === key}
+                id={key}
+                onClick={onSelectedFilterChange}
+              >
+                {filterOptions[key].name}
+              </FilterDropdownItem>
+            );
+          })
+        ) : (
+          <FilterDropdownItem disabled>No options available</FilterDropdownItem>
+        )}
       </div>
       <CSSTransition
         in={selectedFilter}
@@ -79,6 +79,9 @@ export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
               inputValue={inputValue}
               onInputChange={onInputChange}
               onFilterAdd={onFilterAdd}
+              inputLeftSymbol={filterOptions[selectedFilter]?.symbol_left}
+              inputRightSymbol={filterOptions[selectedFilter]?.symbol_right}
+              inputType={filterOptions[selectedFilter]?.input_type}
             />
           </span>
         ) : (
@@ -98,6 +101,9 @@ export function SecondaryFilterDropdown({
   inputValue,
   onInputChange,
   onFilterAdd,
+  inputLeftSymbol,
+  inputRightSymbol,
+  inputType,
 }) {
   return (
     <div
@@ -115,6 +121,10 @@ export function SecondaryFilterDropdown({
         onRadioChange={onRadioChange}
         inputValue={inputValue}
         onInputChange={onInputChange}
+        inputLeftSymbol={inputLeftSymbol}
+        inputRightSymbol={inputRightSymbol}
+        inputType={inputType}
+        onSubmit={onFilterAdd}
       />
       <div className="flex flex-row space-x-2 mb-2">
         <Button
@@ -126,6 +136,7 @@ export function SecondaryFilterDropdown({
         <Button
           className="bg-indigo-600 text-white font-semibold w-full"
           onClick={onFilterAdd}
+          type="submit"
         >
           Filter
         </Button>
@@ -135,17 +146,24 @@ export function SecondaryFilterDropdown({
 }
 
 // selected: boolean
-function FilterDropdownItem({ children, selected, onClick, id }) {
+function FilterDropdownItem({
+  children,
+  selected,
+  onClick,
+  id,
+  disabled = false,
+}) {
   return (
     <div
       className={classNames(
-        "py-3 px-4 rounded-xl dark:text-neutral-100 hover:bg-dark-800 border-1 transition-all duration-100 cursor-pointer",
+        "py-3 px-4 rounded-xl dark:text-neutral-100 border-1 transition-all duration-100 cursor-pointer",
         {
           "border-transparent": !selected,
           "bg-dark-800  border-indigo-600 font-semibold": selected,
+          "hover:bg-dark-800": !disabled,
         }
       )}
-      onClick={() => onClick(id)}
+      onClick={disabled || !onClick ? undefined : () => onClick(id)}
     >
       <div className="flex flex-row items-center">
         {children}

src/cryptometrics/components/radio/RadioForm.js

@@ -3,31 +3,38 @@ import React from "react";
 import Input from "../inputs/Input";
 
 export function RadioInputForm({
+  inputLeftSymbol,
+  inputRightSymbol,
+  inputType,
   options,
   radioValue,
   onRadioChange,
   inputValue,
   onInputChange,
+  onSubmit,
 }) {
   return (
-    <div>
+    <form onSubmit={onSubmit}>
       <div className="flex flex-col py-2 space-y-2">
         {Object.keys(options).map((key) => {
           return (
-            <div key={"radio_option_" + options[key].id}>
+            <div key={"radio_option_" + key}>
               <Radio
                 selected={radioValue}
-                radioValue={options[key].name}
-                id={options[key].id}
+                radioValue={key}
+                radioLabel={options[key].name}
+                id={key}
                 onChange={onRadioChange}
               />
               <div className="my-1">
-                {options[key].name === radioValue && (
+                {key === radioValue && (
                   <Input
-                    type="text"
                     placeholder="Enter a value here..."
                     initialValue={inputValue}
                     onChange={onInputChange}
+                    symbolLeft={inputLeftSymbol}
+                    symbolRight={inputRightSymbol}
+                    type={inputType}
                   />
                 )}
               </div>
@@ -35,11 +42,11 @@ export function RadioInputForm({
           );
         })}
       </div>
-    </div>
+    </form>
   );
 }
 
-export function Radio({ selected, radioValue, onChange }) {
+export function Radio({ selected, radioValue, radioLabel, onChange }) {
   return (
     <label className="inline-flex items-center w-full">
       <input
@@ -55,7 +62,7 @@ export function Radio({ selected, radioValue, onChange }) {
           "dark:text-indigo-500": selected === radioValue,
         })}
       >
-        {radioValue}
+        {radioLabel}
       </span>
     </label>
   );

src/cryptometrics/pages/index.js

@@ -32,10 +32,23 @@ export default function Home() {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
   const listOfCoins = useCryptoList("usd", 21, false);
-  const filteredCoins = listOfCoins.data?.filter((coin) => {
+
+  // Filter coins based on search
+  let filteredCoins = listOfCoins.data?.filter((coin) => {
     return coin.name.toLowerCase().includes(searchText.toLowerCase());
   });
 
+  // Apply filters
+  for (let i = 0; i < filters.length; i++) {
+    const { subject, condition, value } = filters[i];
+    filteredCoins = filteredCoins.filter((coin) => {
+      return filterOptions[subject]?.options[condition]?.function(
+        coin[subject],
+        value
+      );
+    });
+  }
+
   return (
     <div>
       <Head>
@@ -60,9 +73,14 @@ export default function Home() {
                   return (
                     <Filter
                       key={"filter_" + idx}
-                      subject={filter.subject}
-                      condition={filter.condition}
+                      subject={filterOptions[filter.subject]?.name}
+                      condition={
+                        filterOptions[filter.subject]?.options[filter.condition]
+                          ?.name
+                      }
                       value={filter.value}
+                      symbolLeft={filterOptions[filter.subject]?.symbol_left}
+                      symbolRight={filterOptions[filter.subject]?.symbol_right}
                       buttonIcon={<XIcon className="w-5 h-5" />}
                       onButtonClick={() => removeFilter(filter)}
                     />
@@ -80,7 +98,17 @@ export default function Home() {
                     <FilterDropdown
                       setOpen={setDropdownOpen}
                       addFilter={addFilter}
-                      filterOptions={filterOptions}
+                      filterOptions={Object.keys(filterOptions)
+                        .filter(
+                          (option) =>
+                            filters.filter(
+                              (filter) => filter.subject === option
+                            ).length === 0
+                        )
+                        .reduce((obj, key) => {
+                          obj[key] = filterOptions[key];
+                          return obj;
+                        }, {})}
                     />
                   )}
                 </div>