Merge branch 'search-feat' into 'develop'

Add search functionality See merge request !3

Merge branch 'search-feat' into 'develop'
f19e2d17 · Saif Fadhel · 97822ff2 · 5295a969 · f19e2d17 · f19e2d17
Commit f19e2d17 authored 3 years ago by Saif Fadhel
--- a/src/cryptometrics/components/inputs/SearchInput.js
+++ b/src/cryptometrics/components/inputs/SearchInput.js
 import React from "react";
 import { SearchIcon } from "@heroicons/react/outline";

-function SearchInput() {
+function SearchInput({ onChange }) {
  return (
    <div className="relative">
      <input
        className="w-52 h-12 text-base font-semibold outline-none dark:text-white px-3 pr-10 rounded-2xl bg-dark-700"
        placeholder="Search"
        type="text"
+        onChange={onChange}
      ></input>
      <button className="absolute top-0 right-3 bottom-0 w-6">
        <SearchIcon className="w-6 h-6 dark:text-white" />

--- a/src/cryptometrics/pages/index.js
+++ b/src/cryptometrics/pages/index.js
@@ -11,34 +11,40 @@ 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 { useState } from "react";

 export default function Home() {
+  const [searchText, setSearchText] = useState("");
  const listOfCoins = useCryptoList("usd", 21, false);
-  const filteredCoins = listOfCoins.data?.map((coin) => {
-    return (
-      <CryptoChartCard
-        key={coin.symbol}
-        currencyId={coin.id}
-        currencyName={coin.name}
-        symbol={coin.symbol.toUpperCase()}
-        icon={coin.image}
-        info={"$" + numeral(coin.current_price).format("0,0.[0000000]")}
-        detail={
-          numeral(coin.price_change_percentage_24h).format("+0.0[00]") + "%"
-        }
-        detailColor={
-          coin.price_change_percentage_24h > 0
-            ? "text-green-500"
-            : "text-red-500"
-        }
-        options={cryptoChartOptions(
-          coin.price_change_percentage_24h > 0 ? ["#3DBAA2"] : ["#FF7A68"],
-          true
-        )}
-        type="area"
-      />
-    );
-  });
+  const filteredCoins = listOfCoins.data
+    ?.filter((coin) => {
+      return coin.name.toLowerCase().includes(searchText.toLowerCase());
+    })
+    .map((coin) => {
+      return (
+        <CryptoChartCard
+          key={coin.symbol}
+          currencyId={coin.id}
+          currencyName={coin.name}
+          symbol={coin.symbol.toUpperCase()}
+          icon={coin.image}
+          info={"$" + numeral(coin.current_price).format("0,0.[0000000]")}
+          detail={
+            numeral(coin.price_change_percentage_24h).format("+0.0[00]") + "%"
+          }
+          detailColor={
+            coin.price_change_percentage_24h > 0
+              ? "text-green-500"
+              : "text-red-500"
+          }
+          options={cryptoChartOptions(
+            coin.price_change_percentage_24h > 0 ? ["#3DBAA2"] : ["#FF7A68"],
+            true
+          )}
+          type="area"
+        />
+      );
+    });
  return (
    <div>
      <Head>
@@ -55,7 +61,7 @@ export default function Home() {
              {/* Main Project Title */}
              <BoldGradientHeading>Home</BoldGradientHeading>
              {/* Search Field */}
-              <SearchInput />
+              <SearchInput onChange={(e) => setSearchText(e?.target.value)} />
            </div>

            {/* Main Content */}