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

Commit

Permalink
feat: working hotlist with needed cleanup (#521)
Browse files Browse the repository at this point in the history 
* working hotlist with needed cleanup

* removes the hot repo cards

* update test

* npm run format

* removes unused statusCode function

* removes unused recent repo list

* fix DbRepo type
  • Loading branch information
@bdougie
bdougie authored Apr 13, 2024
1 parent c95ae1e commit 69ba683
Show file tree
Hide file tree
Showing 14 changed files with 85 additions and 317 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ module.exports = {
"no-trailing-spaces": "error",
"no-whitespace-before-property": "error",
"object-curly-newline": [
"error",
"warn",
{
multiline: true,
},
Expand Down
26 changes: 2 additions & 24 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,14 @@ import Footer from "./components/Footer";
import PrimaryNav from "./components/PrimaryNav";
import RepoListWrap from "./components/RepoListWrap";
import { initiatePostHog } from "./lib/analytics";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { BrowserRouter } from "react-router-dom";
import { Toaster } from "react-hot-toast";
import { SWRConfig } from "swr";
import GradBackground from "./components/GradBackground";
import Hero from "./components/Hero";
import apiFetcher from "./hooks/useSWR";

import getAppVersion from "./lib/appVersion";
import RecentRepoListWrap from "./components/RecentRepoListWrap";
import SecondaryNav from "./components/SecondaryNav";
import HotRepositories from "./components/HotRepositories";

console.log(
`%c
Expand Down Expand Up @@ -47,26 +44,7 @@ const App = (): JSX.Element => {
</GradBackground>

<div className="bg-darkestGrey">
<SecondaryNav />

<HotRepositories />

<Routes>
<Route
element={<RecentRepoListWrap />}
path="/"
/>

<Route
element={<RecentRepoListWrap />}
path="recent"
/>

<Route
element={<RepoListWrap />}
path="*"
/>
</Routes>
<RepoListWrap />
</div>

<Footer />
Expand Down
26 changes: 19 additions & 7 deletions src/components/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,18 +57,27 @@ const Hero = () => {
<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}>
<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} />
<img
alt="search icon"
src={searchNormal}
/>

<Combobox.Button ref={comboButtonRef}>
<Combobox.Input
Expand All @@ -78,13 +87,12 @@ const Hero = () => {
placeholder="Search repositories"
type="text"
value={searchTerm}
onChange={(e) => setValueDebounced(e.target.value)}
onChange={e => setValueDebounced(e.target.value)}
onFocus={() => setFocus(true)}
onBlur={() =>
setTimeout(() => {
setFocus(false);
}, 200)
}
}, 200)}
onKeyUp={(event: React.KeyboardEvent) => {
if (event.key === "Enter") {
window.open(comboBoxSelection, "_blank", "noreferrer");
Expand All @@ -94,7 +102,11 @@ const Hero = () => {
</Combobox.Button>
</div>

<img alt="command k" className="pt-1.5" src={cmdKIcon} />
<img
alt="command k"
className="pt-1.5"
src={cmdKIcon}
/>
</div>

<div className="mt-2.5">
Expand All @@ -105,7 +117,7 @@ const Hero = () => {
<p className="text-gray-500 text-sm font-semibold">Repository</p>
</div>

{fetchedData.map((data) => (
{fetchedData.map(data => (
<Combobox.Option
key={data.full_name}
as="a"
Expand Down
5 changes: 1 addition & 4 deletions src/components/HotRepoCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import Skeleton from "react-loading-skeleton";
import { getAvatarLink } from "../lib/github";
import humanizeNumber from "../lib/humanizeNumber";

import StackedAvatar from "./StackedAvatar";
import useRepo from "../hooks/useRepo";
import useContributions from "../hooks/useContributions";

const bugReportLink = "https://github.com/open-sauced/hot/issues/new?assignees=&title=fix:";

Expand All @@ -17,7 +15,6 @@ export declare interface HotRepoCardProps {

const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
const { repo, isLoading, isError } = useRepo(repoName);
const { data: contributions } = useContributions(repoName);

if (isError) {
return (
Expand Down Expand Up @@ -95,7 +92,7 @@ const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
</div>
</div>

<StackedAvatar contributors={contributions} />
{/* <StackedAvatar contributors={contributions} /> */}
</div>
</div>
);
Expand Down
25 changes: 3 additions & 22 deletions src/components/ListRepositories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,11 @@ import Skeleton from "react-loading-skeleton";

export declare interface ListRepositoriesProps {
activeLink: string | null;
handleLoadingMore: () => void;
fetchedData: DbRepo[];
title: string;
hasNextPage: boolean;
}

const ListRepositories = ({
activeLink,
handleLoadingMore,
fetchedData,
title,
hasNextPage,
}: ListRepositoriesProps): JSX.Element => {
const ListRepositories = ({ activeLink, fetchedData, title }: ListRepositoriesProps): JSX.Element => {
if (!fetchedData.length) {
return (
<div className="mx-auto max-w-7xl px-4 mt-10">
Expand All @@ -32,7 +24,7 @@ const ListRepositories = ({
}

return (
<div className="mx-auto max-w-7xl px-4 pb-1 mt-10">
<div className="mx-auto max-w-7xl px-4 pb-1 pt-10">
<div className="flex flex-col gap-y-5 mb-12">
<div className="flex items-center gap-x-2.5">
<BsFillCalendar2Fill className="w-8 h-8 text-white" />
Expand All @@ -41,20 +33,9 @@ const ListRepositories = ({
</div>

{fetchedData.map((item, i) => (
<RepoList key={`${item.full_name}_${i}`} data={item} />
<RepoList key={`${item.repo_name}_${i}`} data={item} />
))}
</div>

{fetchedData.length > 0 && hasNextPage && (
<div className="flex justify-center">
<button
className="bg-white text-gray-700 mt-4 mb-4 text-base border-gray-400 border font-normal py-1 px-4 rounded"
onClick={() => handleLoadingMore()}
>
Load More
</button>
</div>
)}
</div>
);
};
Expand Down
65 changes: 16 additions & 49 deletions src/components/PrimaryNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import openSaucedLogo from "../assets/openSauced.svg";
import { supabase } from "../lib/supabase";
import { ToastTrigger } from "../lib/reactHotToast";

import RepoSubmission from "./RepoSubmission";

import { useState, useEffect } from "react";
import AdminStatsBar from "./AdminStatusBar";
import { useKey } from "rooks";
Expand All @@ -21,22 +19,20 @@ const bugReportLink =
const PrimaryNav = (): JSX.Element => {
const { signIn, signOut, userAndTokens } = useSupabaseAuth();
const currentUser = supabase.auth.session();
const [isFormOpen, setIsFormOpen] = useState(false);
const [openAdminBar, setOpenAdminBar] = useState(false);

useKey("`", () => setOpenAdminBar(!openAdminBar));

const handleFormOpen = (state: boolean) => setIsFormOpen(state);

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 @@ -46,22 +42,14 @@ 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 All @@ -79,13 +67,9 @@ const PrimaryNav = (): JSX.Element => {
/>
</div>
</div>

</Menu.Button>


</div>


<Transition
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
Expand All @@ -106,21 +90,18 @@ 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"
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`}
>
{`v${version}`}
Expand All @@ -131,19 +112,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`}
onClick={() => handleFormOpen(true)}
>
Submit a repository
</button>
)}
</Menu.Item>

<Menu.Item>
{({ active }) => (
<button
className={`${active ? "bg-gray-100 text-gray-700" : "text-gray-900"
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`}
onClick={async () => {
if (!currentUser?.access_token) {
Expand All @@ -164,7 +134,8 @@ const PrimaryNav = (): JSX.Element => {
href={bugReportLink}
rel="noreferrer"
target="_blank"
className={`${active ? "bg-gray-100 text-gray-700" : "text-gray-900"
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`}
>
Report a bug
Expand All @@ -175,7 +146,8 @@ const PrimaryNav = (): JSX.Element => {
<Menu.Item>
{({ active }) => (
<button
className={`${active ? "bg-gray-100 text-gray-700" : "text-gray-900"
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`}
onClick={async () => signOut()}
>
Expand Down Expand Up @@ -204,11 +176,6 @@ const PrimaryNav = (): JSX.Element => {
</div>
)}
</div>

<RepoSubmission
handleFormOpen={handleFormOpen}
isFormOpen={isFormOpen}
/>
</header>
);
};
Expand Down
Loading

0 comments on commit 69ba683

Please sign in to comment.