feat: working hotlist with some cleanup

.eslintrc.cjs

@@ -216,7 +216,7 @@ module.exports = {
     "no-trailing-spaces": "error",
     "no-whitespace-before-property": "error",
     "object-curly-newline": [
-      "error",
+      "warn",
       {
         multiline: true,
       },

src/App.tsx

@@ -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
@@ -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 />

src/components/Hero.tsx

@@ -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
@@ -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");
@@ -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">
@@ -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"

src/components/HotRepoCard.tsx

@@ -5,9 +5,7 @@
 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:";
 
@@ -17,7 +15,6 @@
 
 const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
   const { repo, isLoading, isError } = useRepo(repoName);
-  const { data: contributions } = useContributions(repoName);
 
   if (isError) {
     return (
@@ -30,7 +27,7 @@
             rel="noreferrer"
             target="_blank"
             href={`${String(
               `${bugReportLink} repo not found [${repoName}]&body=Please take a look why this  ${repoName} not founded`
             )}`}
           >
             Report a bug
@@ -43,7 +40,7 @@
   if (isLoading) {
     return (
       <div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
         <Skeleton enableAnimation count={5} />
       </div>
     );
   }
@@ -55,9 +52,9 @@
     <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>
         </div>
       </div>
 
@@ -71,31 +68,31 @@
           {name}
         </a>
 
         <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>
           </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>
           </div>
 
           <div className="flex text-sm space-x-1 justify-center items-center">
             <BiGitPullRequest className="fill-lightSlate10" size={16} />
 
             <span className="text-lightSlate11">0</span>
           </div>
         </div>
 
-        <StackedAvatar contributors={contributions} />
+        {/* <StackedAvatar contributors={contributions} /> */}
       </div>
     </div>
   );

src/components/ListRepositories.tsx

@@ -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">
@@ -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" />
@@ -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>
   );
 };

src/components/PrimaryNav.tsx

@@ -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";
@@ -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 (
@@ -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} />
 
@@ -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"
@@ -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}`}
@@ -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) {
@@ -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
@@ -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()}
                     >
@@ -204,11 +176,6 @@ const PrimaryNav = (): JSX.Element => {
           </div>
         )}
       </div>
-
-      <RepoSubmission
-        handleFormOpen={handleFormOpen}
-        isFormOpen={isFormOpen}
-      />
     </header>
   );
 };