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

Commit 82f67da

Browse files
furqan-abidfurqan-abid
authored
fix: searching broke the page and make it blank (#524)
1 parent 5b0a81e commit 82f67da

File tree

4 files changed

+73
-209
lines changed

4 files changed

+73
-209
lines changed

‎src/components/Hero.tsx‎

Lines changed: 15 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,18 @@
1-
import { MutableRefObject, useRef, useState } from "react";
2-
import { useDebounce, useDidUpdate, useKeys } from "rooks";
3-
4-
import { fetchRecommendations } from "../lib/supabase";
5-
import searchNormal from "../assets/searchNormal.svg";
6-
import cmdKIcon from "../assets/cmdK.svg";
7-
import SearchedRepoCard from "./SearchedRepoCard";
8-
import { Combobox } from "@headlessui/react";
9-
10-
const Hero = () => {
11-
const containerRef = useRef<Document>(document);
12-
const searchBoxRef = useRef<HTMLInputElement>(null);
13-
const comboButtonRef = useRef<HTMLButtonElement>(null);
14-
const [searchTerm, setSearchTerm] = useState("");
15-
const setValueDebounced = useDebounce(setSearchTerm, 500);
16-
const [fetchedData, setFetchedData] = useState<DbRepo[]>([]);
17-
const [comboBoxSelection, setComboBoxSelection] = useState("");
18-
const [hasFocus, setFocus] = useState(false);
19-
20-
const handleCmdK = async (e: KeyboardEvent) => {
21-
comboButtonRef.current?.click();
22-
if (!hasFocus) {
23-
searchBoxRef.current?.focus();
24-
setFocus(true);
25-
const results = await fetchRecommendations(3, searchTerm);
26-
27-
setFetchedData(results);
28-
} else {
29-
searchBoxRef.current?.blur();
30-
setFocus(false);
31-
}
32-
33-
// prevent browser from handling CMD/CTRL + K
34-
e.preventDefault();
35-
};
36-
37-
const useKey = (superKey: string, key: string, target: MutableRefObject<Document>) => {
38-
useKeys([superKey, key], handleCmdK, { target });
39-
};
40-
41-
useKey("ControlLeft", "KeyK", containerRef);
42-
43-
useKey("ControlRight", "KeyK", containerRef);
44-
45-
useKey("MetaRight", "KeyK", containerRef);
46-
47-
useKey("MetaLeft", "KeyK", containerRef);
48-
49-
useDidUpdate(async () => {
50-
const results = await fetchRecommendations(3, searchTerm);
51-
52-
setFetchedData(results);
53-
}, [searchTerm]);
54-
55-
return (
56-
<div className="flex flex-col py-24 items-center mx-2.5">
57-
<div>
58-
<h1 className="font-Lexend text-4xl md:text-5xl text-center text-lightSlate leading-tight tracking-tight">
59-
{`Find `}
60-
61-
<span className="bg-gradient-to-r from-gradFirst via-gradMiddle to-gradLast bg-clip-text text-transparent">
62-
Open-Source Repositories
63-
</span>
64-
65-
<br />
66-
to contribute today
67-
</h1>
68-
</div>
69-
70-
<Combobox
71-
as="div"
72-
value={comboBoxSelection}
73-
onChange={setComboBoxSelection}
74-
>
75-
<div className="mt-11 px-4 py-2.5 bg-white shadow-2xl rounded-2xl md:min-w-[26.375rem] flex justify-between">
76-
<div className="flex items-center gap-x-2.5">
77-
<img
78-
alt="search icon"
79-
src={searchNormal}
80-
/>
81-
82-
<Combobox.Button ref={comboButtonRef}>
83-
<Combobox.Input
84-
ref={searchBoxRef}
85-
className="w-full outline-none text-base text-lightSlate"
86-
displayValue={() => searchTerm}
87-
placeholder="Search repositories"
88-
type="text"
89-
value={searchTerm}
90-
onChange={e => setValueDebounced(e.target.value)}
91-
onFocus={() => setFocus(true)}
92-
onBlur={() =>
93-
setTimeout(() => {
94-
setFocus(false);
95-
}, 200)}
96-
onKeyUp={(event: React.KeyboardEvent) => {
97-
if (event.key === "Enter") {
98-
window.open(comboBoxSelection, "_blank", "noreferrer");
99-
}
100-
}}
101-
/>
102-
</Combobox.Button>
103-
</div>
104-
105-
<img
106-
alt="command k"
107-
className="pt-1.5"
108-
src={cmdKIcon}
109-
/>
110-
</div>
111-
112-
<div className="mt-2.5">
113-
<Combobox.Options className="flex w-full justify-center">
114-
{fetchedData.length > 0 && (
115-
<div className="flex md:min-w-96 pb-2 absolute z-50 max-w-96 flex-col bg-white rounded-2.5 shadow-2xl">
116-
<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">
117-
<p className="text-gray-500 text-sm font-semibold">Repository</p>
118-
</div>
119-
120-
{fetchedData.map(data => (
121-
<Combobox.Option
122-
key={data.full_name}
123-
as="a"
124-
className={({ active }) => (active ? "bg-gray-50" : "")}
125-
value={`https://app.opensauced.pizza/s/${data.full_name}`}
126-
>
127-
<SearchedRepoCard data={data} />
128-
</Combobox.Option>
129-
))}
130-
</div>
131-
)}
132-
</Combobox.Options>
133-
</div>
134-
</Combobox>
1+
const Hero = () => (
2+
<div className="flex flex-col py-24 items-center mx-2.5">
3+
<div>
4+
<h1 className="font-Lexend text-4xl md:text-5xl text-center text-lightSlate leading-tight tracking-tight">
5+
{`Find `}
6+
7+
<span className="bg-gradient-to-r from-gradFirst via-gradMiddle to-gradLast bg-clip-text text-transparent">
8+
Open-Source Repositories
9+
</span>
10+
11+
<br />
12+
to contribute today
13+
</h1>
13514
</div>
136-
);
137-
};
15+
</div>
16+
);
13817

13918
export default Hero;

‎src/components/HotRepoCard.tsx‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
2727
rel="noreferrer"
2828
target="_blank"
2929
href={`${String(
30-
`${bugReportLink} repo not found [${repoName}]&body=Please take a look why this ${repoName} not founded`
30+
`${bugReportLink} repo not found [${repoName}]&body=Please take a look why this ${repoName} not founded`,
3131
)}`}
3232
>
3333
Report a bug
@@ -40,7 +40,10 @@ const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
4040
if (isLoading) {
4141
return (
4242
<div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
43-
<Skeleton enableAnimation count={5} />
43+
<Skeleton
44+
enableAnimation
45+
count={5}
46+
/>
4447
</div>
4548
);
4649
}
@@ -52,9 +55,15 @@ const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
5255
<div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
5356
<div className="flex justify-between w-full">
5457
<div className="flex space-x-1 items-center">
55-
<img alt="Hot Repo Icon" className="h-4 w-4 rounded-md overflow-hidden" src={getAvatarLink(owner)} />
56-
57-
<span className="text-sm font-medium text-lightSlate11">{owner}</span>
58+
<img
59+
alt="Hot Repo Icon"
60+
className="h-4 w-4 rounded-md overflow-hidden"
61+
src={getAvatarLink(owner)}
62+
/>
63+
64+
<span className="text-sm font-medium text-lightSlate11">
65+
{owner}
66+
</span>
5867
</div>
5968
</div>
6069

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

71-
<p className="text-gray-500 font-medium text-xs w-5/6">{description}</p>
80+
<p className="text-gray-500 font-medium text-xs w-5/6">
81+
{description}
82+
</p>
7283
</div>
7384

7485
<div className="flex items-center justify-between absolute bottom-3 inset-x-0 px-4">
7586
<div className="flex space-x-3 text-xs">
7687
<div className="flex text-sm space-x-1 justify-center items-center">
77-
<VscIssues className="fill-lightSlate10" size={16} />
78-
79-
<span className="text-lightSlate11">{humanizeNumber(issues)}</span>
88+
<VscIssues
89+
className="fill-lightSlate10"
90+
size={16}
91+
/>
92+
93+
<span className="text-lightSlate11">
94+
{humanizeNumber(issues)}
95+
</span>
8096
</div>
8197

8298
<div className="flex text-sm space-x-1 justify-center items-center">
83-
<AiOutlineStar className="fill-lightSlate10" size={16} />
84-
85-
<span className="text-lightSlate11">{humanizeNumber(stars)}</span>
99+
<AiOutlineStar
100+
className="fill-lightSlate10"
101+
size={16}
102+
/>
103+
104+
<span className="text-lightSlate11">
105+
{humanizeNumber(stars)}
106+
</span>
86107
</div>
87108

88109
<div className="flex text-sm space-x-1 justify-center items-center">
89-
<BiGitPullRequest className="fill-lightSlate10" size={16} />
110+
<BiGitPullRequest
111+
className="fill-lightSlate10"
112+
size={16}
113+
/>
90114

91115
<span className="text-lightSlate11">0</span>
92116
</div>

‎src/components/PrimaryNav.tsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,11 @@ const PrimaryNav = (): JSX.Element => {
2626
useEffect(() => {
2727
const fetchAuthSession = async () => {
2828
if (currentUser?.access_token) {
29-
await fetch(`${import.meta.env.VITE_API_URL}/auth/session`, {
30-
headers: { accept: "application/json", Authorization: `Bearer ${currentUser.access_token}` },
31-
}).catch((err) => console.log("error: ", err));
29+
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));
3230
}
3331
};
3432

35-
fetchAuthSession().catch((err) => console.log(err));
33+
fetchAuthSession().catch(err => console.log(err));
3634
}, [userAndTokens]);
3735

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

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

5153
{userAndTokens && (
52-
<Menu as="div" className="flex z-50 text-left relative">
54+
<Menu
55+
as="div"
56+
className="flex z-50 text-left relative"
57+
>
5358
<div className="flex items-center">
5459
<StarTheRepo userAndTokens={userAndTokens} />
5560

@@ -90,18 +95,21 @@ const PrimaryNav = (): JSX.Element => {
9095
</div>
9196

9297
<div className="flex-col shrink">
93-
<p className="text-osGrey text-xs font-semibold">{userAndTokens.user.user_metadata.full_name}</p>
98+
<p className="text-osGrey text-xs font-semibold">
99+
{userAndTokens.user.user_metadata.full_name}
100+
</p>
94101

95-
<p className="text-gray-500 text-xs font-normal">{userAndTokens.user.user_metadata.user_name}</p>
102+
<p className="text-gray-500 text-xs font-normal">
103+
{userAndTokens.user.user_metadata.user_name}
104+
</p>
96105
</div>
97106
</div>
98107
</Menu.Item>
99108

100109
<Menu.Item>
101110
{({ active }) => (
102111
<button
103-
className={`${
104-
active ? "bg-gray-100 text-gray-700" : "text-gray-900"
112+
className={`${active ? "bg-gray-100 text-gray-700" : "text-gray-900"
105113
} group flex w-full items-center rounded-md px-5 py-1.5 text-sm`}
106114
>
107115
{`v${version}`}
@@ -112,8 +120,7 @@ const PrimaryNav = (): JSX.Element => {
112120
<Menu.Item>
113121
{({ active }) => (
114122
<button
115-
className={`${
116-
active ? "bg-gray-100 text-gray-700" : "text-gray-900"
123+
className={`${active ? "bg-gray-100 text-gray-700" : "text-gray-900"
117124
} group flex w-full items-center rounded-md px-5 py-1.5 text-sm`}
118125
onClick={async () => {
119126
if (!currentUser?.access_token) {
@@ -134,8 +141,7 @@ const PrimaryNav = (): JSX.Element => {
134141
href={bugReportLink}
135142
rel="noreferrer"
136143
target="_blank"
137-
className={`${
138-
active ? "bg-gray-100 text-gray-700" : "text-gray-900"
144+
className={`${active ? "bg-gray-100 text-gray-700" : "text-gray-900"
139145
} group flex w-full items-center rounded-md px-5 py-1.5 text-sm`}
140146
>
141147
Report a bug
@@ -146,8 +152,7 @@ const PrimaryNav = (): JSX.Element => {
146152
<Menu.Item>
147153
{({ active }) => (
148154
<button
149-
className={`${
150-
active ? "bg-gray-100 text-gray-700" : "text-gray-900"
155+
className={`${active ? "bg-gray-100 text-gray-700" : "text-gray-900"
151156
} group flex w-full items-center rounded-md px-5 py-1.5 text-sm`}
152157
onClick={async () => signOut()}
153158
>

‎src/lib/supabase.ts‎

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -48,47 +48,3 @@ export async function updateVotesByRepo (votes: number, repo_id: number, user_id
4848

4949
return votes + modifier;
5050
}
51-
52-
export async function fetchRecommendations (
53-
limit = 25,
54-
textToSearchParam = "",
55-
) {
56-
const orderBy = "stars";
57-
const orderByOptions: {
58-
ascending?: boolean,
59-
nullsFirst?: boolean,
60-
foreignTable?: string
61-
} | undefined = { ascending: false };
62-
const selectStatement = `
63-
id,
64-
user_id,
65-
full_name,
66-
name,
67-
description,
68-
stars,
69-
issues,
70-
starsRelation:users_to_repos_stars(starsCount:count),
71-
`;
72-
73-
const supabaseComposition = supabase
74-
.from("repos")
75-
.select(selectStatement)
76-
.filter("starsRelation.deleted_at", "is", null);
77-
78-
const searchColumn = textToSearchParam === "" ? "" : "full_name";
79-
const textToSearch = textToSearchParam === "" ? "" : textToSearchParam;
80-
81-
const { data: recommendations, error } = await supabaseComposition
82-
.limit(limit)
83-
.like(searchColumn, `%${textToSearch}%`)
84-
.order("last_merged_at", {
85-
ascending: false,
86-
foreignTable: "contributions",
87-
})
88-
.order(orderBy, orderByOptions)
89-
.order("updated_at", { ascending: false });
90-
91-
error && console.error(error);
92-
93-
return recommendations as DbRepo[];
94-
}

0 commit comments

Comments
 (0)