feat: use async hooks and beta api for hot repos (#296)

closes #276

closes #272

closes #270

.env

@@ -1,3 +1,4 @@
 VITE_SUPABASE_URL=https://lkkownkrbkmblczeoyqb.supabase.co
 VITE_SUPABASE_API_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJvbGUiOiJhbm9uIiwiaWF0IjoxNjQyNDU2MTc0LCJleHAiOjE5NTgwMzIxNzR9.c6nlkT05GnNacQ6OYuGcjBsILmGsSDwEEtN2zZVXFgY
-VITE_POSTHOG_ID=phc_DFcN3mLP4ocKAUBKr5xyMbAnPwcl93q41ZmhoLG7GCv
+VITE_POSTHOG_ID=phc_DFcN3mLP4ocKAUBKr5xyMbAnPwcl93q41ZmhoLG7GCv
+VITE_API_URL=https://beta.api.opensauced.pizza/v1

.eslintrc.cjs

@@ -454,6 +454,7 @@ module.exports = {
       },
     ],
     "@typescript-eslint/promise-function-async": "error",
+    "@typescript-eslint/no-non-null-assertion": "off",
   },
   settings: {
     react: {

package.json

@@ -53,8 +53,10 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.3.0",
     "react-icons": "^4.4.0",
+    "react-loading-skeleton": "^3.1.0",
     "react-router-dom": "^6.3.0",
     "rooks": "^6.1.0",
+    "swr": "^1.3.0",
     "tailwindcss": "^3.1.7",
     "tailwindcss-radix": "^2.4.0"
   },

src/App.tsx

@@ -1,22 +1,28 @@
-import { useState } from "react";
 import Footer from "./components/Footer";
 import PrimaryNav from "./components/PrimaryNav";
 import PostsWrap from "./components/PostsWrap";
 import { initiatePostHog } from "./lib/analytics";
 import { BrowserRouter } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
+import { SWRConfig } from "swr";
 import RepoSubmission from "./components/RepoSubmission";
 import GradBackground from "./components/GradBackground";
 import useSupabaseAuth from "./hooks/useSupabaseAuth";
 import Hero from "./components/Hero";
+import apiFetcher from "./hooks/useSWR";
 
 const App = (): JSX.Element => {
-  initiatePostHog();
   const { user } = useSupabaseAuth();
-  const [textToSearch] = useState("");
+
+  initiatePostHog();
 
   return (
-    <>
+    <SWRConfig
+      value={{
+        revalidateOnFocus: false,
+        fetcher: apiFetcher,
+      }}
+    >
       <Toaster position="top-right" />
 
       <BrowserRouter>
@@ -29,12 +35,12 @@ const App = (): JSX.Element => {
             <Hero />
           </GradBackground>
 
-          <PostsWrap textToSearch={textToSearch} />
+          <PostsWrap />
 
           <Footer />
         </div>
       </BrowserRouter>
-    </>
+    </SWRConfig>
   );
 };
 

src/components/GridDisplay.tsx

@@ -5,7 +5,7 @@ export declare interface GridDisplayProps {
   activeLink: string | null;
   limit: number;
   handleLoadingMore: () => void;
-  fetchedData: DbRecomendation[];
+  fetchedData: DbRepo[];
   user?: User;
 }
 

src/components/Hero.tsx

@@ -14,7 +14,7 @@ const Hero = () => {
   const searchBoxRef = useRef<HTMLInputElement>(null);
   const [searchTerm, setSearchTerm] = useState("");
   const setValueDebounced = useDebounce(setSearchTerm, 500);
-  const [fetchedData, setFetchedData] = useState<DbRecomendation[]>([]);
+  const [fetchedData, setFetchedData] = useState<DbRepo[]>([]);
   const [hasFocus, setFocus] = useState(false);
 
   const handleCmdK = async (e: KeyboardEvent) => {

src/components/HotRepoCard.tsx

@@ -0,0 +1,139 @@
+import { useEffect, useState } from "react";
+import { RiCheckboxCircleFill } from "react-icons/ri";
+import { FaArrowAltCircleUp } from "react-icons/fa";
+import { AiOutlineStar } from "react-icons/ai";
+import { BiGitPullRequest } from "react-icons/bi";
+import { VscIssues } from "react-icons/vsc";
+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 useVotedRepos from "../hooks/useVotedRepos";
+
+export declare interface HotRepoCardProps {
+  repoName: string;
+}
+
+const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
+  const { votedReposIds, checkVoted, voteHandler } = useVotedRepos();
+  const { repo, isLoading, isError } = useRepo(repoName);
+  const [isVoted, setIsVoted] = useState(false);
+
+  useEffect(() => {
+    repo && setIsVoted(checkVoted(repo.id));
+  }, [votedReposIds, repo]);
+
+  if (isError) {
+    return (
+      <div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
+        {`${repoName} failed to load`}
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
+        <Skeleton
+          enableAnimation
+          count={5}
+        />
+      </div>
+    );
+  }
+
+  const { id, full_name, name, description, issues, stars, contributions } = repo!;
+  const repo_id = parseInt(`${id}`);
+  const owner = full_name.replace(`/${String(name)}`, "").trim();
+
+  return (
+    <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>
+
+        <button
+          className={`px-2 py-0.5 border rounded-lg flex justify-center items-center space-x-1 text-xs transition-all duration-200 ${
+            isVoted ? "bg-lightOrange01" : "bg-lightSlate01"
+          } ${isVoted ? "text-saucyRed border-saucyRed " : "text-lightSlate11 border-lightSlate06 "}`}
+          onClick={async () => voteHandler(0, repo_id)}
+        >
+          <span>
+            {isVoted ? "voted" : "upvote"}
+          </span>
+
+          {isVoted
+            ? (
+              <RiCheckboxCircleFill className="" />)
+            : (
+              <FaArrowAltCircleUp className="fill-lightSlate09" />
+            )}
+        </button>
+      </div>
+
+      <div className="flex flex-col pb-10">
+        <a
+          className="text-xl font-semibold"
+          href={`https://app.opensauced.pizza/repos/${full_name}`}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {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} />
+      </div>
+    </div>
+  );
+};
+
+export default HotRepoCard;