This repository has been archived by the owner on Sep 26, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 149
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: searching broke the page and make it blank (#524)
- Loading branch information
1 parent
5b0a81e
commit 82f67da
Showing
4 changed files
with
73 additions
and
209 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,139 +1,18 @@ | ||
| import { MutableRefObject, useRef, useState } from "react"; | ||
| import { useDebounce, useDidUpdate, useKeys } from "rooks"; | ||
|
|
||
| import { fetchRecommendations } from "../lib/supabase"; | ||
| import searchNormal from "../assets/searchNormal.svg"; | ||
| import cmdKIcon from "../assets/cmdK.svg"; | ||
| import SearchedRepoCard from "./SearchedRepoCard"; | ||
| import { Combobox } from "@headlessui/react"; | ||
|
|
||
| const Hero = () => { | ||
| const containerRef = useRef<Document>(document); | ||
| const searchBoxRef = useRef<HTMLInputElement>(null); | ||
| const comboButtonRef = useRef<HTMLButtonElement>(null); | ||
| const [searchTerm, setSearchTerm] = useState(""); | ||
| const setValueDebounced = useDebounce(setSearchTerm, 500); | ||
| const [fetchedData, setFetchedData] = useState<DbRepo[]>([]); | ||
| const [comboBoxSelection, setComboBoxSelection] = useState(""); | ||
| const [hasFocus, setFocus] = useState(false); | ||
|
|
||
| const handleCmdK = async (e: KeyboardEvent) => { | ||
| comboButtonRef.current?.click(); | ||
| if (!hasFocus) { | ||
| searchBoxRef.current?.focus(); | ||
| setFocus(true); | ||
| const results = await fetchRecommendations(3, searchTerm); | ||
|
|
||
| setFetchedData(results); | ||
| } else { | ||
| searchBoxRef.current?.blur(); | ||
| setFocus(false); | ||
| } | ||
|
|
||
| // prevent browser from handling CMD/CTRL + K | ||
| e.preventDefault(); | ||
| }; | ||
|
|
||
| const useKey = (superKey: string, key: string, target: MutableRefObject<Document>) => { | ||
| useKeys([superKey, key], handleCmdK, { target }); | ||
| }; | ||
|
|
||
| useKey("ControlLeft", "KeyK", containerRef); | ||
|
|
||
| useKey("ControlRight", "KeyK", containerRef); | ||
|
|
||
| useKey("MetaRight", "KeyK", containerRef); | ||
|
|
||
| useKey("MetaLeft", "KeyK", containerRef); | ||
|
|
||
| useDidUpdate(async () => { | ||
| const results = await fetchRecommendations(3, searchTerm); | ||
|
|
||
| setFetchedData(results); | ||
| }, [searchTerm]); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col py-24 items-center mx-2.5"> | ||
| <div> | ||
| <h1 className="font-Lexend text-4xl md:text-5xl text-center text-lightSlate leading-tight tracking-tight"> | ||
| {`Find `} | ||
|
|
||
| <span className="bg-gradient-to-r from-gradFirst via-gradMiddle to-gradLast bg-clip-text text-transparent"> | ||
| Open-Source Repositories | ||
| </span> | ||
|
|
||
| <br /> | ||
| to contribute today | ||
| </h1> | ||
| </div> | ||
|
|
||
| <Combobox | ||
| as="div" | ||
| value={comboBoxSelection} | ||
| onChange={setComboBoxSelection} | ||
| > | ||
| <div className="mt-11 px-4 py-2.5 bg-white shadow-2xl rounded-2xl md:min-w-[26.375rem] flex justify-between"> | ||
| <div className="flex items-center gap-x-2.5"> | ||
| <img | ||
| alt="search icon" | ||
| src={searchNormal} | ||
| /> | ||
|
|
||
| <Combobox.Button ref={comboButtonRef}> | ||
| <Combobox.Input | ||
| ref={searchBoxRef} | ||
| className="w-full outline-none text-base text-lightSlate" | ||
| displayValue={() => searchTerm} | ||
| placeholder="Search repositories" | ||
| type="text" | ||
| value={searchTerm} | ||
| onChange={e => setValueDebounced(e.target.value)} | ||
| onFocus={() => setFocus(true)} | ||
| onBlur={() => | ||
| setTimeout(() => { | ||
| setFocus(false); | ||
| }, 200)} | ||
| onKeyUp={(event: React.KeyboardEvent) => { | ||
| if (event.key === "Enter") { | ||
| window.open(comboBoxSelection, "_blank", "noreferrer"); | ||
| } | ||
| }} | ||
| /> | ||
| </Combobox.Button> | ||
| </div> | ||
|
|
||
| <img | ||
| alt="command k" | ||
| className="pt-1.5" | ||
| src={cmdKIcon} | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="mt-2.5"> | ||
| <Combobox.Options className="flex w-full justify-center"> | ||
| {fetchedData.length > 0 && ( | ||
| <div className="flex md:min-w-96 pb-2 absolute z-50 max-w-96 flex-col bg-white rounded-2.5 shadow-2xl"> | ||
| <div className="bg-gray-100 py-2.5 px-10 md:px-3.5 border-b-gray-100 border-b-0.5 rounded-2.5 rounded-b-none w-full"> | ||
| <p className="text-gray-500 text-sm font-semibold">Repository</p> | ||
| </div> | ||
|
|
||
| {fetchedData.map(data => ( | ||
| <Combobox.Option | ||
| key={data.full_name} | ||
| as="a" | ||
| className={({ active }) => (active ? "bg-gray-50" : "")} | ||
| value={`https://app.opensauced.pizza/s/${data.full_name}`} | ||
| > | ||
| <SearchedRepoCard data={data} /> | ||
| </Combobox.Option> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </Combobox.Options> | ||
| </div> | ||
| </Combobox> | ||
| const Hero = () => ( | ||
| <div className="flex flex-col py-24 items-center mx-2.5"> | ||
| <div> | ||
| <h1 className="font-Lexend text-4xl md:text-5xl text-center text-lightSlate leading-tight tracking-tight"> | ||
| {`Find `} | ||
|
|
||
| <span className="bg-gradient-to-r from-gradFirst via-gradMiddle to-gradLast bg-clip-text text-transparent"> | ||
| Open-Source Repositories | ||
| </span> | ||
|
|
||
| <br /> | ||
| to contribute today | ||
| </h1> | ||
| </div> | ||
| ); | ||
| }; | ||
| </div> | ||
| ); | ||
|
|
||
| export default Hero; |
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