Merge branch 'beta' into nickytonline/og-image-dev-card

CHANGELOG.md

@@ -5,6 +5,13 @@
 
 > All notable changes to this project will be documented in this file
 
+## [2.53.0-beta.1](https://github.com/open-sauced/app/compare/v2.52.0...v2.53.0-beta.1) (2024-08-09)
+
+
+### 🍕 Features
+
+* add display query param for toggling repo contributors list view ([#3907](https://github.com/open-sauced/app/issues/3907)) ([d97c8f5](https://github.com/open-sauced/app/commit/d97c8f5d82218882b74a5d3bfbc3167901afad14))
+
 ## [2.52.0](https://github.com/open-sauced/app/compare/v2.51.0...v2.52.0) (2024-08-09)
 
 

package.json

@@ -2,7 +2,7 @@
   "name": "@open-sauced/app",
   "description": "🍕The dashboard for open source discovery.",
   "keywords": [],
-  "version": "2.52.0",
+  "version": "2.53.0-beta.1",
   "author": "Brian Douglas <[email protected]>",
   "private": true,
   "license": "Apache 2.0",

pages/s/[org]/[repo]/contributors.tsx

@@ -43,7 +43,7 @@ const AddToWorkspaceDrawer = dynamic(() => import("components/Repositories/AddTo
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const { org, repo } = context.params ?? { org: "", repo: "" };
   const range = (context.query.range ? Number(context.query.range) : 30) as Range;
-
+  const display = (context.query.display ?? "grid") as ToggleValue;
   const { data: repoData, error } = await fetchApiData<DbRepo>({
     path: `repos/${org}/${repo}/info`,
   });
@@ -66,24 +66,24 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   context.res.setHeader("Netlify-Vary", "query=range");
   context.res.setHeader("Cache-Tag", `repo-pages,repo-page-${repoData.id}`);
 
-  return { props: { repoData, ogImageUrl } };
+  return { props: { repoData, ogImageUrl, display } };
 }
 
 type Range = 30 | 7 | 90 | 180 | 360;
 
 interface RepoPageProps {
   repoData: DbRepoInfo;
   ogImageUrl: string;
+  display: ToggleValue;
 }
 
-export default function RepoPageContributorsTab({ repoData, ogImageUrl }: RepoPageProps) {
+export default function RepoPageContributorsTab({ repoData, ogImageUrl, display }: RepoPageProps) {
   const avatarUrl = getAvatarByUsername(repoData.full_name.split("/")[0], 96);
   const { toast } = useToast();
   const posthog = usePostHog();
   const { session } = useSession(true);
   const isMobile = useMediaQuery("(max-width: 576px)");
   const [isAddToWorkspaceModalOpen, setIsAddToWorkspaceModalOpen] = useState(false);
-  const [contributorsView, setContributorsView] = useState<ToggleValue>("grid");
   const tabList = [
     { name: "Overview", path: "" },
     { name: "Contributors", path: "contributors" },
@@ -220,11 +220,13 @@ export default function RepoPageContributorsTab({ repoData, ogImageUrl }: RepoPa
               <div className="flex w-full justify-between">
                 <h2 className="text-lg font-semibold">Contributors</h2>
                 <LayoutToggle
-                  value={contributorsView}
-                  onChange={() => setContributorsView((prev) => (prev === "list" ? "grid" : "list"))}
+                  value={display}
+                  onChange={() => {
+                    setQueryParams({ display: display === "list" ? "grid" : "list" });
+                  }}
                 />
               </div>
-              {contributorsView === "grid" && (
+              {display === "grid" && (
                 <ContributorsGrid
                   contributors={contributors}
                   meta={meta}
@@ -235,7 +237,7 @@ export default function RepoPageContributorsTab({ repoData, ogImageUrl }: RepoPa
                   repositoryIds={[repoData.id]}
                 />
               )}
-              {contributorsView === "list" && (
+              {display === "list" && (
                 <ContributorsTable
                   contributors={contributors}
                   meta={meta}