Skip to content
This repository has been archived by the owner on Sep 26, 2024. It is now read-only.

Commit

Permalink
fix/remove search bar from hero section
Browse files Browse the repository at this point in the history
  • Loading branch information
@furqan-abid
furqan-abid committed Apr 14, 2024
1 parent e84c5a9 commit b7f9580
Show file tree
Hide file tree
Showing 6 changed files with 122 additions and 224 deletions.
151 changes: 15 additions & 136 deletions src/components/Hero.tsx
View file
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;
50 changes: 37 additions & 13 deletions src/components/HotRepoCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
rel="noreferrer"
target="_blank"
href={`${String(
`${bugReportLink} repo not found [${repoName}]&body=Please take a look why this ${repoName} not founded`
`${bugReportLink} repo not found [${repoName}]&body=Please take a look why this ${repoName} not founded`,
)}`}
>
Report a bug
Expand All @@ -40,7 +40,10 @@ const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
if (isLoading) {
return (
<div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
<Skeleton enableAnimation count={5} />
<Skeleton
enableAnimation
count={5}
/>
</div>
);
}
Expand All @@ -52,9 +55,15 @@ const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
<div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
<div className="flex justify-between w-full">
<div className="flex space-x-1 items-center">
<img alt="Hot Repo Icon" className="h-4 w-4 rounded-md overflow-hidden" src={getAvatarLink(owner)} />

<span className="text-sm font-medium text-lightSlate11">{owner}</span>
<img
alt="Hot Repo Icon"
className="h-4 w-4 rounded-md overflow-hidden"
src={getAvatarLink(owner)}
/>

<span className="text-sm font-medium text-lightSlate11">
{owner}
</span>
</div>
</div>

Expand All @@ -68,25 +77,40 @@ const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
{name}
</a>

<p className="text-gray-500 font-medium text-xs w-5/6">{description}</p>
<p className="text-gray-500 font-medium text-xs w-5/6">
{description}
</p>
</div>

<div className="flex items-center justify-between absolute bottom-3 inset-x-0 px-4">
<div className="flex space-x-3 text-xs">
<div className="flex text-sm space-x-1 justify-center items-center">
<VscIssues className="fill-lightSlate10" size={16} />

<span className="text-lightSlate11">{humanizeNumber(issues)}</span>
<VscIssues
className="fill-lightSlate10"
size={16}
/>

<span className="text-lightSlate11">
{humanizeNumber(issues)}
</span>
</div>

<div className="flex text-sm space-x-1 justify-center items-center">
<AiOutlineStar className="fill-lightSlate10" size={16} />

<span className="text-lightSlate11">{humanizeNumber(stars)}</span>
<AiOutlineStar
className="fill-lightSlate10"
size={16}
/>

<span className="text-lightSlate11">
{humanizeNumber(stars)}
</span>
</div>

<div className="flex text-sm space-x-1 justify-center items-center">
<BiGitPullRequest className="fill-lightSlate10" size={16} />
<BiGitPullRequest
className="fill-lightSlate10"
size={16}
/>

<span className="text-lightSlate11">0</span>
</div>
Expand Down
21 changes: 16 additions & 5 deletions src/components/ListRepositories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,15 @@ const ListRepositories = ({ activeLink, fetchedData, title }: ListRepositoriesPr
return (
<div className="mx-auto max-w-7xl px-4 mt-10">
<div className="flex flex-col gap-y-5 overflow-hidden mb-12">
{Array.from(Array(25).keys()).map((item) => (
<div key={item} className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
<Skeleton enableAnimation count={4} />
{Array.from(Array(25).keys()).map(item => (
<div
key={item}
className="p-4 border rounded-2xl bg-white w-full space-y-1 relative"
>
<Skeleton
enableAnimation
count={4}
/>
</div>
))}
</div>
Expand All @@ -29,11 +35,16 @@ const ListRepositories = ({ activeLink, fetchedData, title }: ListRepositoriesPr
<div className="flex items-center gap-x-2.5">
<BsFillCalendar2Fill className="w-8 h-8 text-white" />

{activeLink && <h1 className="text-2xl text-white font-semibold">{title}</h1>}
{activeLink && <h1 className="text-2xl text-white font-semibold">
{title}
</h1>}

Check failure on line 40 in src/components/ListRepositories.tsx

View workflow job for this annotation

GitHub Actions / Code standards 

Expected closing tag to match indentation of opening
</div>

{fetchedData.map((item, i) => (
<RepoList key={`${item.repo_name}_${i}`} data={item} />
<RepoList
key={`${item.repo_name}_${i}`}
data={item}
/>
))}
</div>
</div>
Expand Down
45 changes: 25 additions & 20 deletions src/components/PrimaryNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,11 @@ const PrimaryNav = (): JSX.Element => {
useEffect(() => {
const fetchAuthSession = async () => {
if (currentUser?.access_token) {
await fetch(`${import.meta.env.VITE_API_URL}/auth/session`, {
headers: { accept: "application/json", Authorization: `Bearer ${currentUser.access_token}` },
}).catch((err) => console.log("error: ", err));
await fetch(`${import.meta.env.VITE_API_URL}/auth/session`, { headers: { accept: "application/json", Authorization: `Bearer ${currentUser.access_token}` } }).catch(err => console.log("error: ", err));
}
};

fetchAuthSession().catch((err) => console.log(err));
fetchAuthSession().catch(err => console.log(err));
}, [userAndTokens]);

return (
Expand All @@ -42,14 +40,21 @@ const PrimaryNav = (): JSX.Element => {
<div className="flex font-OpenSans py-6 px-10 justify-between max-w-screen-2xl mx-auto">
<div className="flex items-center text-osGrey">
<a href="/">
<img alt="Open Sauced Logo" className="inline-block w-6 h-6 mr-1" src={openSaucedLogo} />
<img
alt="Open Sauced Logo"
className="inline-block w-6 h-6 mr-1"
src={openSaucedLogo}
/>

<span className="text-lg leading-snug font-black tracking-tighter">OpenSauced</span>
</a>
</div>

{userAndTokens && (
<Menu as="div" className="flex z-50 text-left relative">
<Menu
as="div"
className="flex z-50 text-left relative"
>
<div className="flex items-center">
<StarTheRepo userAndTokens={userAndTokens} />

Expand Down Expand Up @@ -90,19 +95,22 @@ const PrimaryNav = (): JSX.Element => {
</div>

<div className="flex-col shrink">
<p className="text-osGrey text-xs font-semibold">{userAndTokens.user.user_metadata.full_name}</p>
<p className="text-osGrey text-xs font-semibold">
{userAndTokens.user.user_metadata.full_name}
</p>

<p className="text-gray-500 text-xs font-normal">{userAndTokens.user.user_metadata.user_name}</p>
<p className="text-gray-500 text-xs font-normal">
{userAndTokens.user.user_metadata.user_name}
</p>
</div>
</div>
</Menu.Item>

<Menu.Item>
{({ active }) => (
<button
className={`${
active ? "bg-gray-100 text-gray-700" : "text-gray-900"
} group flex w-full items-center rounded-md px-5 py-1.5 text-sm`}
className={`${active ? "bg-gray-100 text-gray-700" : "text-gray-900"
} group flex w-full items-center rounded-md px-5 py-1.5 text-sm`}

Check failure on line 113 in src/components/PrimaryNav.tsx

View workflow job for this annotation

GitHub Actions / Code standards 

Expected indentation of 22 spaces but found 24

Check failure on line 113 in src/components/PrimaryNav.tsx

View workflow job for this annotation

GitHub Actions / Code standards 

Expected indentation of 22 spaces but found 24
>
{`v${version}`}
</button>
Expand All @@ -112,9 +120,8 @@ const PrimaryNav = (): JSX.Element => {
<Menu.Item>
{({ active }) => (
<button
className={`${
active ? "bg-gray-100 text-gray-700" : "text-gray-900"
} group flex w-full items-center rounded-md px-5 py-1.5 text-sm`}
className={`${active ? "bg-gray-100 text-gray-700" : "text-gray-900"
} group flex w-full items-center rounded-md px-5 py-1.5 text-sm`}

Check failure on line 124 in src/components/PrimaryNav.tsx

View workflow job for this annotation

GitHub Actions / Code standards 

Expected indentation of 22 spaces but found 24

Check failure on line 124 in src/components/PrimaryNav.tsx

View workflow job for this annotation

GitHub Actions / Code standards 

Expected indentation of 22 spaces but found 24
onClick={async () => {
if (!currentUser?.access_token) {
return;
Expand All @@ -134,9 +141,8 @@ const PrimaryNav = (): JSX.Element => {
href={bugReportLink}
rel="noreferrer"
target="_blank"
className={`${
active ? "bg-gray-100 text-gray-700" : "text-gray-900"
} group flex w-full items-center rounded-md px-5 py-1.5 text-sm`}
className={`${active ? "bg-gray-100 text-gray-700" : "text-gray-900"
} group flex w-full items-center rounded-md px-5 py-1.5 text-sm`}

Check failure on line 145 in src/components/PrimaryNav.tsx

View workflow job for this annotation

GitHub Actions / Code standards 

Expected indentation of 22 spaces but found 24

Check failure on line 145 in src/components/PrimaryNav.tsx

View workflow job for this annotation

GitHub Actions / Code standards 

Expected indentation of 22 spaces but found 24
>
Report a bug
</a>
Expand All @@ -146,9 +152,8 @@ const PrimaryNav = (): JSX.Element => {
<Menu.Item>
{({ active }) => (
<button
className={`${
active ? "bg-gray-100 text-gray-700" : "text-gray-900"
} group flex w-full items-center rounded-md px-5 py-1.5 text-sm`}
className={`${active ? "bg-gray-100 text-gray-700" : "text-gray-900"
} group flex w-full items-center rounded-md px-5 py-1.5 text-sm`}

Check failure on line 156 in src/components/PrimaryNav.tsx

View workflow job for this annotation

GitHub Actions / Code standards 

Expected indentation of 22 spaces but found 24

Check failure on line 156 in src/components/PrimaryNav.tsx

View workflow job for this annotation

GitHub Actions / Code standards 

Expected indentation of 22 spaces but found 24
onClick={async () => signOut()}
>
Logout
Expand Down
Loading

0 comments on commit b7f9580

Please sign in to comment.