fix: Menu drop to generate token on console.

src/App.tsx

@@ -1,6 +1,6 @@
 import Footer from "./components/Footer";
 import PrimaryNav from "./components/PrimaryNav";
-import PostsWrap from "./components/PostsWrap";
+import RepoWrap from "./components/RepoWrap";
 import { initiatePostHog } from "./lib/analytics";
 import { BrowserRouter } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
@@ -23,7 +23,6 @@ console.log(
   "color:green;font-weight:bold",
 );
 
-
 const App = (): JSX.Element => {
   initiatePostHog();
 
@@ -44,7 +43,7 @@ const App = (): JSX.Element => {
             <Hero />
           </GradBackground>
 
-          <PostsWrap />
+          <RepoWrap />
 
           <Footer />
         </div>

src/components/GridDisplay.tsx

@@ -1,5 +1,5 @@
 import { User } from "@supabase/supabase-js";
-import PostGrid from "./PostGrid";
+import RepoGrid from "./RepoGrid";
 
 export declare interface GridDisplayProps {
   activeLink: string | null;
@@ -13,7 +13,7 @@ const GridDisplay = ({ activeLink, limit, handleLoadingMore, fetchedData, user }
   <div>
     <div className="container grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-screen-xl mx-auto auto-rows-fr">
       {fetchedData.map((item, i) => (
-        <PostGrid
+        <RepoGrid
           key={`${item.full_name}_${i}`}
           data={item}
           user={user}

src/components/ListRepositories.tsx

@@ -1,6 +1,6 @@
 import { BsFillCalendar2Fill } from "react-icons/bs";
 import camelCaseToTitleCase from "../lib/camelCaseToTitleCase";
-import PostList from "./PostList";
+import RepoList from "./RepoList";
 
 export declare interface ListRepositoriesProps {
   activeLink: string | null;
@@ -9,41 +9,42 @@ export declare interface ListRepositoriesProps {
   fetchedData: DbRepo[];
 }
 
-const ListRepositories = ({ activeLink, limit, handleLoadingMore, fetchedData }: ListRepositoriesProps): JSX.Element => (
+const ListRepositories = ({
+  activeLink,
+  limit,
+  handleLoadingMore,
+  fetchedData,
+}: ListRepositoriesProps): JSX.Element => (
   <div className="mx-auto max-w-7xl px-4 mt-10">
     <div className="flex flex-col gap-y-5">
       <div className="flex items-center gap-x-2.5">
         <BsFillCalendar2Fill className="w-8 h-8 text-white" />
 
-        {activeLink &&
+        {activeLink && (
           <h1 className="text-2xl text-white font-semibold">
             {`${camelCaseToTitleCase(activeLink)} Repositories`}
-          </h1>}
+          </h1>
+        )}
       </div>
 
-      {
-        fetchedData.map((item, i) => (
-          <PostList
-            key={`${item.full_name}_${i}`}
-            data={item}
-          />
-        ))
-      }
+      {fetchedData.map((item, i) => (
+        <RepoList
+          key={`${item.full_name}_${i}`}
+          data={item}
+        />
+      ))}
     </div>
 
-    {
-      fetchedData.length > 0 &&
-        activeLink !== "myVotes" &&
-        limit <= 100 &&
-          <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>
-    }
+    {fetchedData.length > 0 && activeLink !== "myVotes" && limit <= 100 && (
+      <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

@@ -6,6 +6,7 @@ import { getAvatarLink } from "../lib/github";
 import useSupabaseAuth from "../hooks/useSupabaseAuth";
 import { version } from "../../package.json";
 import openSaucedLogo from "../assets/openSauced.svg";
+import { supabase } from "../lib/supabase";
 
 import RepoSubmission from "./RepoSubmission";
 
@@ -30,7 +31,7 @@ const StarTheRepo = (): JSX.Element => (
 
 const PrimaryNav = (): JSX.Element => {
   const { signIn, signOut, user } = useSupabaseAuth();
-
+  const currentUser = supabase.auth.session();
   const [isFormOpen, setIsFormOpen] = useState(false);
 
   const handleFormOpen = (state: boolean) => setIsFormOpen(state);
@@ -131,6 +132,19 @@ const PrimaryNav = (): JSX.Element => {
                   )}
                 </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`}
+                      onClick={() => console.log("Token: ", currentUser?.access_token)}
+                    >
+                      Print auth JWT
+                    </button>
+                  )}
+                </Menu.Item>
+
                 <Menu.Item>
                   {({ active }) => (
                     <a

src/components/PostGrid.tsx → src/components/RepoGrid.tsx

@@ -6,12 +6,12 @@ import { getRepoLink } from "../lib/github";
 import useSupabaseAuth from "../hooks/useSupabaseAuth";
 import Avatar from "./Avatar";
 
-export declare interface PostGridProps {
+export declare interface RepoGridProps {
   data: DbRepo;
   user?: User;
 }
 
-const PostGrid = ({ data, user }: PostGridProps): JSX.Element => {
+const RepoGrid = ({ data, user }: RepoGridProps): JSX.Element => {
   const { user_metadata: { sub: user_id } } = user!;
   const {
     id: repo_id,
@@ -77,4 +77,4 @@ const PostGrid = ({ data, user }: PostGridProps): JSX.Element => {
   );
 };
 
-export default PostGrid;
+export default RepoGrid;

src/components/PostList.tsx → src/components/RepoList.tsx

@@ -7,11 +7,11 @@ import useVotedRepos from "../hooks/useVotedRepos";
 import { RiCheckboxCircleFill } from "react-icons/ri";
 import cx from "classnames";
 
-export declare interface PostListProps {
+export declare interface RepoListProps {
   data: DbRepo;
 }
 
-const PostList = ({ data }: PostListProps): JSX.Element => {
+const RepoList = ({ data }: RepoListProps): JSX.Element => {
   const { votedReposIds, checkVoted, voteHandler } = useVotedRepos();
   const [isVoted, setIsVoted] = useState(false);
 
@@ -103,11 +103,13 @@ const PostList = ({ data }: PostListProps): JSX.Element => {
           "md:w-[60px] md:py-0 md:flex-col",
           isVoted ? "hover:border-osGrey hover:bg-gray-100" : "hover:border-osOrange",
         )}
-        onClick={async () => voteHandler(votes, repo_id).then(newVotes => typeof newVotes === "number" && setVotes(newVotes))}
+        onClick={async () =>
+          voteHandler(votes, repo_id).then(newVotes => typeof newVotes === "number" && setVotes(newVotes))}
       >
         {isVoted
           ? (
-            <RiCheckboxCircleFill className="text-osOrange group-hover:text-osGrey transition-all duration-300 w-[15px] h-[15px]" />)
+            <RiCheckboxCircleFill className="text-osOrange group-hover:text-osGrey transition-all duration-300 w-[15px] h-[15px]" />
+          )
           : (
             <FaArrowAltCircleUp className="text-gray-500 group-hover:text-osOrange transition-all duration-300 w-[13px] h-[13px]" />
           )}
@@ -126,4 +128,4 @@ const PostList = ({ data }: PostListProps): JSX.Element => {
   );
 };
 
-export default PostList;
+export default RepoList;

src/components/PostsWrap.tsx → src/components/RepoWrap.tsx

@@ -7,7 +7,7 @@ import HotRepositories from "./HotRepositories";
 import ListRepositories from "./ListRepositories";
 import SecondaryNav from "./SecondaryNav";
 
-export declare interface PostWrapProps {
+export declare interface RepoWrapProps {
   textToSearch?: string;
 }
 
@@ -26,7 +26,7 @@ const parseLimitValue = (limit: string | null): number => {
   return value;
 };
 
-const PostsWrap = ({ textToSearch }: PostWrapProps): JSX.Element => {
+const RepoWrap = ({ textToSearch }: RepoWrapProps): JSX.Element => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [fetchedData, setFetchedData] = useState<DbRepo[]>([]);
   const { user } = useSupabaseAuth();
@@ -46,8 +46,7 @@ const PostsWrap = ({ textToSearch }: PostWrapProps): JSX.Element => {
   }, [limit]);
 
   useEffect(() => {
-    fetchData()
-      .catch(console.error);
+    fetchData().catch(console.error);
   }, [activeLink, limit, textToSearch]);
 
   return (
@@ -69,4 +68,4 @@ const PostsWrap = ({ textToSearch }: PostWrapProps): JSX.Element => {
   );
 };
 
-export default PostsWrap;
+export default RepoWrap;