feat: updated /explore page (open-sauced#4053)

components/Workspaces/WorkspaceCard.tsx

@@ -0,0 +1,63 @@
+import Image from "next/image";
+import Link from "next/link";
+import Card from "components/atoms/Card/card";
+import { Spinner } from "components/atoms/SpinLoader/spin-loader";
+import CardRepoList, { RepoList } from "components/molecules/CardRepoList/card-repo-list";
+import useFetchWorkspace from "lib/hooks/api/useFetchWorkspace";
+import { useGetWorkspaceRepositories } from "lib/hooks/api/useGetWorkspaceRepositories";
+import { useWorkspaceMembers } from "lib/hooks/api/useWorkspaceMembers";
+import { getAvatarById, getAvatarByUsername } from "lib/utils/github";
+
+export default function WorkspaceCard({ workspaceId }: { workspaceId: string }) {
+  const { data: workspace, isLoading, isError } = useFetchWorkspace({ workspaceId });
+  const { data: members, isLoading: isMembersLoading, isError: isMembersError } = useWorkspaceMembers({ workspaceId });
+  const workspaceOwner = members.find((member) => member.role === "owner");
+
+  const {
+    data: workspaceRepositoriesData,
+    isLoading: isWorkspaceRepositoriesLoading,
+    error: isWorkspaceRepositoriesError,
+  } = useGetWorkspaceRepositories({ workspaceId });
+
+  const workspaceRepositories =
+    workspaceRepositoriesData?.data?.map((data) => {
+      const owner = data.repo.full_name.split("/").at(0) ?? "";
+      return { repoOwner: owner, repoName: data.repo.name, repoIcon: getAvatarByUsername(owner) };
+    }) ?? ([] as RepoList[]);
+
+  return (
+    <Link href={`/workspaces/${workspaceId}`}>
+      <Card className="flex flex-col gap-4 justify-between py-[1.25rem] w-full">
+        {!(isLoading || isMembersLoading || isWorkspaceRepositoriesLoading) ? (
+          <>
+            <div className="self-start flex flex-col gap-4">
+              <div className="flex gap-2 items-center">
+                <Image
+                  src={getAvatarById((workspaceOwner?.user_id ?? 0).toString())}
+                  alt={`workspace_owner_${workspaceOwner?.user_id}`}
+                  width={20}
+                  height={20}
+                  className="rounded-md"
+                />
+                <p className="text-slate-500 text-sm">{workspaceOwner?.member.name}</p>
+              </div>
+
+              <section className="flex flex-col gap-2">
+                <h1>{workspace?.name}</h1>
+                <p className="text-sm text-slate-500">
+                  {(workspace?.description.length ?? 0) > 0 ? workspace?.description : "No description given."}
+                </p>
+              </section>
+            </div>
+
+            <CardRepoList repoList={workspaceRepositories} limit={3} />
+          </>
+        ) : (
+          <div className="flex items-center justify-center w-full h-36">
+            <Spinner />
+          </div>
+        )}
+      </Card>
+    </Link>
+  );
+}

components/Workspaces/WorkspaceLayout.tsx

@@ -68,7 +68,8 @@ export const WorkspaceLayout = ({ workspaceId, banner, children, footer }: Works
             )}
           </ClientOnly>
         </div>
-        <main id="main" className="flex flex-col w-full min-w-screen items-center">
+
+        <main id="main" className="flex flex-col w-screen items-center">
           <ClientOnly>{banner}</ClientOnly>
           <div className={clsx("w-full min-h-[100px] pb-20", banner && "md:mt-9")}>{children}</div>
         </main>

components/molecules/RecommendedRepoCard/recommended-repo-card.tsx

@@ -24,12 +24,16 @@ const RecommendedRepoCard = ({ fullName, className }: RecommendedRepoCardProps):
 
   return (
     <div className={clsx("relative w-full flex flex-col gap-2 p-4  bg-white border rounded-2xl ", className)}>
+      {(isError || pullError) && (
+        <p>
+          Error: {fullName} r: {isError} pr: {pullError}
+        </p>
+      )}
       {isLoading && (
         <div className="flex items-center justify-center w-full h-36">
           <Spinner />
         </div>
       )}
-      {isError && <>An error occured loading ...</>}
       {data && (
         <>
           <div className="flex justify-between w-full">

components/organisms/SearchDialog/search-dialog.tsx

@@ -183,7 +183,7 @@ const SearchDialog = () => {
   );
 };
 
-const SearchDialogTrigger = () => {
+const SearchDialogTrigger = ({ hideSmallIcon, className }: { hideSmallIcon?: boolean; className?: string }) => {
   const setOpenSearch = store((state) => state.setOpenSearch);
   const isMac = useIsMacOS();
 
@@ -203,7 +203,7 @@ const SearchDialogTrigger = () => {
       <div
         className={`hidden sm:flex justify-between p-1 pl-3 h-fit ${
           isMac ? "w-56" : "w-64"
-        } ml-auto bg-white border rounded-lg ring-light-slate-6 relative overflow-hidden`}
+        } ${className} ml-auto bg-white border rounded-lg ring-light-slate-6 relative overflow-hidden`}
         onClick={() => setOpenSearch(true)}
       >
         <div className="flex items-center">
@@ -214,9 +214,11 @@ const SearchDialogTrigger = () => {
           {isMac ? "⌘K" : <span className="text-xs px-1 py-2">CTRL+K</span>}
         </Text>
       </div>
-      <div className="flex sm:hidden p-1" onClick={() => setOpenSearch(true)}>
-        <FaSearch className="text-light-slate-9 cursor-pointer" fontSize={16} />
-      </div>
+      {!hideSmallIcon && (
+        <div className="flex sm:hidden p-1" onClick={() => setOpenSearch(true)}>
+          <FaSearch className="text-light-slate-9 cursor-pointer" fontSize={16} />
+        </div>
+      )}
     </>
   );
 };

components/organisms/TopNav/top-nav.tsx

@@ -6,7 +6,6 @@ import HeaderLogo from "components/molecules/HeaderLogo/header-logo";
 
 import useSession from "lib/hooks/useSession";
 import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
-import { useFetchUser } from "lib/hooks/useFetchUser";
 import OnboardingButton from "components/molecules/OnboardingButton/onboarding-button";
 import Tooltip from "components/atoms/Tooltip/tooltip";
 import { useMediaQuery } from "lib/hooks/useMediaQuery";
@@ -43,8 +42,6 @@ const TopNav = () => {
 
 const Nav = ({ className }: { className?: string }) => {
   const { user } = useSupabaseAuth();
-  const { data: gitHubUser } = useFetchUser(user?.user_metadata.user_name);
-  const userInterest = gitHubUser?.interests?.split(",")[0] || "javascript";
   const router = useRouter();
 
   const explorePageUrlPattern = /^(\/explore\/topic).*\/(dashboard|reports|contributors|activity).*/g;
@@ -66,10 +63,10 @@ const Nav = ({ className }: { className?: string }) => {
         ) : null}
         <li className="hidden lg:inline">
           <Link
+            href="/explore"
             className={`tracking-tight font-medium text-slate-700 text-sm hover:text-orange-500 transition-all ${getActiveStyle(
               explorePageUrlPattern.test(router.asPath)
             )}`}
-            href={`/explore/topic/${userInterest}`}
           >
             Explore
           </Link>

e2e/explore-page.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
 
 test("Loads explore dashboard page", async ({ page }) => {
-  await page.goto("/explore/topic/javascript");
-  await expect(page.getByRole("button", { name: "Connect with GitHub", exact: true })).toBeVisible();
+  await page.goto("/explore");
+  await expect(page.getByRole("button", { name: "Connect with GitHub" }).first()).toBeVisible();
 });

lib/hooks/api/useFetchWorkspace.ts

@@ -0,0 +1,16 @@
+import useSWR, { Fetcher } from "swr";
+import { publicApiFetcher } from "lib/utils/public-api-fetcher";
+
+export default function useFetchWorkspace({ workspaceId }: { workspaceId: string }) {
+  const { data, error, isLoading, mutate } = useSWR<Workspace, Error>(
+    `workspaces/${workspaceId}`,
+    publicApiFetcher as Fetcher<Workspace, Error>
+  );
+
+  return {
+    data,
+    isError: error,
+    isLoading,
+    mutate,
+  };
+}

lib/hooks/useFetchTrendingRepositories.ts

@@ -0,0 +1,25 @@
+import useSWR, { Fetcher } from "swr";
+import { publicApiFetcher } from "lib/utils/public-api-fetcher";
+
+export interface HistogramTopRepo {
+  repo_name: string;
+  bucket: string;
+  star_count: number;
+}
+
+export default function useFetchTrendingRepositories() {
+  const { data, error } = useSWR<HistogramTopRepo[], Error>(
+    `histogram/top/stars`,
+    publicApiFetcher as Fetcher<HistogramTopRepo[], Error>
+  );
+
+  return {
+    data: data
+      ? data.filter(
+          (repo) => !repo.repo_name.toLowerCase().includes("-auto") || !repo.repo_name.toLowerCase().includes("crack")
+        )
+      : [],
+    isLoading: !error && !data,
+    isError: !!error,
+  };
+}

middleware.ts

@@ -128,7 +128,7 @@ export async function middleware(req: NextRequest) {
   }
   redirectUrl.searchParams.set("redirectedFrom", req.nextUrl.pathname);
 
-  redirectUrl.pathname = "/explore/topic/typescript";
+  redirectUrl.pathname = "/explore";
   if (!req.nextUrl.searchParams.has("redirectedFrom")) {
     return NextResponse.redirect(redirectUrl);
   }

next-types.d.ts

@@ -339,6 +339,7 @@ interface DbUser {
   readonly location: string;
   readonly display_local_time: boolean;
   readonly name: string;
+  readonly user_name?: string;
   readonly interests?: string;
   readonly receive_collaboration: boolean;
   readonly display_email: boolean;