-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1974 from zeitgeistpm/staging
- Loading branch information
Showing
6 changed files
with
274 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import { MarketStatus } from "@zeitgeistpm/indexer"; | ||
| import { useMarketSearch } from "lib/hooks/queries/useMarketSearch"; | ||
| import Link from "next/link"; | ||
| import { useEffect, useRef, useState } from "react"; | ||
| import { Search, X } from "react-feather"; | ||
|
|
||
| const MarketSearch = () => { | ||
| const [searchTerm, setSearchTerm] = useState(""); | ||
| const [showResults, setShowResults] = useState(false); | ||
| const [showSearch, setShowSearch] = useState(false); | ||
| const wrapperRef = useRef<HTMLDivElement>(null); | ||
| const inputRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| const { data: markets } = useMarketSearch(searchTerm); | ||
| useEffect(() => { | ||
| const handleClickOutside = (event) => { | ||
| if (wrapperRef.current && !wrapperRef.current.contains(event.target)) { | ||
| setShowResults(false); | ||
| } | ||
| }; | ||
| document.addEventListener("mousedown", handleClickOutside); | ||
| return () => { | ||
| document.removeEventListener("mousedown", handleClickOutside); | ||
| }; | ||
| }, [wrapperRef]); | ||
|
|
||
| return ( | ||
| <div className="w-full mx-3 md:mx-7" ref={wrapperRef}> | ||
| <Link href={"/search"} className="w-2 lg:hidden"> | ||
| <Search className="text-ztg-blue mr-4" /> | ||
| </Link> | ||
| <div className="hidden lg:flex items-center"> | ||
| <button | ||
| onClick={() => { | ||
| setShowSearch(true); | ||
| setTimeout(() => { | ||
| inputRef.current?.focus(); | ||
| }); | ||
| }} | ||
| > | ||
| <Search className="text-ztg-blue mr-4" /> | ||
| </button> | ||
| {showSearch && ( | ||
| <> | ||
| <input | ||
| ref={inputRef} | ||
| className="rounded-sm bg-sky-900 text-white h-8 px-2 w-full focus:outline-none max-w-[500px] " | ||
| value={searchTerm} | ||
| placeholder="Search markets" | ||
| onChange={(event) => { | ||
| setShowResults(true); | ||
| setSearchTerm(event.target.value); | ||
| }} | ||
| onFocus={() => { | ||
| setShowResults(true); | ||
| }} | ||
| /> | ||
| <button | ||
| className="relative right-6 text-sky-600" | ||
| onClick={() => { | ||
| setSearchTerm(""); | ||
| inputRef.current?.focus(); | ||
| }} | ||
| > | ||
| <X size={16} /> | ||
| </button> | ||
| </> | ||
| )} | ||
| </div> | ||
| {showResults && markets && ( | ||
| <div className="hidden lg:flex flex-col absolute bg-white py-2 rounded-md top-[45px] translate-x-[40px] max-h-[300px] overflow-scroll w-[500px] shadow-2xl"> | ||
| <div className="text-sky-600 mx-4">Results</div> | ||
|
|
||
| {markets.length > 0 ? ( | ||
| markets?.map((market) => ( | ||
| <Link | ||
| href={`/markets/${market.marketId}`} | ||
| className="px-4 py-2 flex justify-between overflow-ellipsis hover:bg-sky-100" | ||
| onClick={() => { | ||
| setShowResults(false); | ||
| }} | ||
| > | ||
| <div className="overflow-ellipsis line-clamp-1 w-85%"> | ||
| {market.question} | ||
| </div> | ||
| <div | ||
| className={`text-xs rounded-md px-2 py-1 w-16 text-center text-white ${ | ||
| market.status === MarketStatus.Active | ||
| ? "bg-sheen-green" | ||
| : "bg-vermilion" | ||
| }`} | ||
| > | ||
| {market.status === MarketStatus.Active | ||
| ? "Active" | ||
| : "Inactive"} | ||
| </div> | ||
| </Link> | ||
| )) | ||
| ) : ( | ||
| <div className="text-center w-full pt-6 pb-4">No results</div> | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MarketSearch; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { useQuery } from "@tanstack/react-query"; | ||
| import { isIndexedSdk } from "@zeitgeistpm/sdk"; | ||
| import Fuse from "fuse.js"; | ||
| import { useDebounce } from "use-debounce"; | ||
| import { useSdkv2 } from "../useSdkv2"; | ||
| import { MarketOrderByInput } from "@zeitgeistpm/indexer"; | ||
|
|
||
| export const marketSearchKey = "market-search"; | ||
|
|
||
| export const useMarketSearch = (searchTerm: string) => { | ||
| const [sdk, id] = useSdkv2(); | ||
|
|
||
| const [debouncedSearchTerm] = useDebounce(searchTerm, 300); | ||
|
|
||
| const enabled = | ||
| isIndexedSdk(sdk) && debouncedSearchTerm && debouncedSearchTerm.length > 1; | ||
|
|
||
| const query = useQuery( | ||
| [id, marketSearchKey, debouncedSearchTerm], | ||
| async () => { | ||
| if (enabled) { | ||
| const search = buildSearch(debouncedSearchTerm); | ||
| const { markets } = await sdk.indexer.markets({ | ||
| where: { | ||
| OR: search, | ||
| }, | ||
| order: MarketOrderByInput.IdDesc, | ||
| limit: 100, | ||
| }); | ||
|
|
||
| const fuse = new Fuse(markets, { | ||
| includeScore: true, | ||
| threshold: 0.9, | ||
| keys: [ | ||
| //matches in the question are consisdered more important than description, slightly favour active markets | ||
| { | ||
| name: "question", | ||
| weight: 3, | ||
| }, | ||
| { | ||
| name: "description", | ||
| weight: 1, | ||
| }, | ||
| { name: "status", weight: 0.2 }, | ||
| ], | ||
| }); | ||
|
|
||
| const result = fuse.search({ | ||
| $or: [ | ||
| { question: debouncedSearchTerm }, | ||
| { description: debouncedSearchTerm }, | ||
| { status: "Active" }, | ||
| ], | ||
| }); | ||
|
|
||
| return result.map((r) => r.item); | ||
| } | ||
| }, | ||
| { | ||
| enabled: Boolean(enabled), | ||
| staleTime: 10_000, | ||
| }, | ||
| ); | ||
|
|
||
| return query; | ||
| }; | ||
|
|
||
| const buildSearch = (searchTerm: string) => { | ||
| const search = searchTerm | ||
| .trim() | ||
| .split(" ") | ||
| .map((word) => [ | ||
| { question_containsInsensitive: word }, | ||
| { description_containsInsensitive: word }, | ||
| ]) | ||
| .flat(); | ||
|
|
||
| return search; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { MarketStatus } from "@zeitgeistpm/indexer"; | ||
| import { useMarketSearch } from "lib/hooks/queries/useMarketSearch"; | ||
| import { NextPage } from "next"; | ||
| import Link from "next/link"; | ||
| import { useState } from "react"; | ||
| import { X } from "react-feather"; | ||
|
|
||
| const SearchPage: NextPage = () => { | ||
| const [searchTerm, setSearchTerm] = useState(""); | ||
|
|
||
| const { data: markets } = useMarketSearch(searchTerm); | ||
| return ( | ||
| <div className="mt-4"> | ||
| <div className="flex items-center px-2"> | ||
| <input | ||
| className="rounded-md h-8 px-2 w-full focus:outline-none max-w-[500px] border border-sky-200" | ||
| value={searchTerm} | ||
| placeholder="Search markets" | ||
| onChange={(event) => { | ||
| setSearchTerm(event.target.value); | ||
| }} | ||
| /> | ||
| <button | ||
| className="relative right-6 text-sky-600" | ||
| onClick={() => { | ||
| setSearchTerm(""); | ||
| }} | ||
| > | ||
| <X size={16} /> | ||
| </button> | ||
| </div> | ||
| {markets && ( | ||
| <div className="flex flex-col py-4"> | ||
| <div className="text-sky-600 px-2">Results</div> | ||
|
|
||
| {markets.length > 0 ? ( | ||
| markets?.map((market) => ( | ||
| <Link | ||
| href={`/markets/${market.marketId}`} | ||
| className="py-2 flex overflow-ellipsis hover:bg-sky-100 px-2 rounded-md" | ||
| > | ||
| <div className="overflow-ellipsis line-clamp-1 mr-4"> | ||
| {market.question} | ||
| </div> | ||
| <div | ||
| className={`ml-auto text-xs rounded-md px-2 py-1 w-16 text-center text-white ${ | ||
| market.status === MarketStatus.Active | ||
| ? "bg-sheen-green" | ||
| : "bg-vermilion" | ||
| }`} | ||
| > | ||
| {market.status === MarketStatus.Active | ||
| ? "Active" | ||
| : "Inactive"} | ||
| </div> | ||
| </Link> | ||
| )) | ||
| ) : ( | ||
| <div className="w-full pt-6 pb-4">No results</div> | ||
| )} | ||
| {} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SearchPage; |