From 559730f5a921b0e97ed1fed91a3c0f0de0a9cb3a Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Tue, 8 Mar 2022 17:43:18 -0500
Subject: [PATCH] Add initial filters ui to home page
---
src/cryptometrics/pages/index.js | 44 +++++++++++++++++++++++++++++++-
1 file changed, 43 insertions(+), 1 deletion(-)
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index 1d0d41e..e7911cf 100644
--- a/src/cryptometrics/pages/index.js
+++ b/src/cryptometrics/pages/index.js
@@ -10,10 +10,20 @@ import numeral from "numeral";
import Wrapper from "../components/content/Wrapper";
import Sidebar from "../components/sidebar/Sidebar";
import { Tabs, Tab } from "../components/tabs/Tab";
-import { CollectionIcon, TableIcon } from "@heroicons/react/outline";
+import {
+ CollectionIcon,
+ PlusIcon,
+ TableIcon,
+ XIcon,
+} from "@heroicons/react/outline";
import { useState } from "react";
+import useFilters from "../hooks/useFilters";
+import { Filter, FilterButton, Filters } from "../components/filters/Filter";
+import { FilterDropdown } from "../components/dropdown/FilterDropdown";
export default function Home() {
+ const [filters, addFilter, removeFilter] = useFilters([]);
+ const [dropdownOpen, setDropdownOpen] = useState(false);
const [searchText, setSearchText] = useState("");
const listOfCoins = useCryptoList("usd", 21, false);
const filteredCoins = listOfCoins.data
@@ -63,6 +73,38 @@ export default function Home() {
{/* Search Field */}
<SearchInput onChange={(e) => setSearchText(e?.target.value)} />
</div>
+ <div className="mb-2">
+ <Filters>
+ {filters.map((filter, idx) => {
+ return (
+ <Filter
+ key={"filter_" + idx}
+ subject={filter.subject}
+ condition={filter.condition}
+ value={filter.value}
+ buttonIcon={<XIcon className="w-5 h-5" />}
+ onButtonClick={() => removeFilter(filter)}
+ />
+ );
+ })}
+ <div className="relative">
+ <FilterButton
+ icon={<PlusIcon className="w-6 h-6" />}
+ onClick={() =>
+ setDropdownOpen(!dropdownOpen) && addFilter({})
+ }
+ />
+
+ {dropdownOpen && (
+ <FilterDropdown
+ open={dropdownOpen}
+ setOpen={setDropdownOpen}
+ addFilter={addFilter}
+ />
+ )}
+ </div>
+ </Filters>
+ </div>
{/* Main Content */}
<Tabs>
--
GitLab