feat: add display query param for toggling repo contributors list view (

#3907)
open-sauced · Aug 9, 2024 · d97c8f5 · d97c8f5
1 parent 70e3bc0
commit d97c8f5
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/pages/s/[org]/[repo]/contributors.tsx b/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}