fix: aggregate templates by organization id

coder · jaaydenh · Jul 19, 2024 · Jul 1, 2024 · Jul 2, 2024 · Jul 3, 2024
commit a282baceb3ed88fc711a1d5d76014d3a3a3cf15f
diff --git a/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx
@@ -57,12 +57,6 @@ export interface TemplatesPageViewProps {
   error?: unknown;
 }
 
-const sortOrgs = (templatesByOrg: TemplatesByOrg) => {
-  return templatesByOrg
-    ? Object.keys(templatesByOrg).sort((a, b) => a.localeCompare(b))
-    : undefined;
-};
-
 export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
   templatesByOrg,
   examples,
@@ -72,7 +66,6 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
   const navigate = useNavigate();
   const [urlParams] = useSearchParams();
   const isEmpty = templatesByOrg && templatesByOrg["all"].length === 0;
-  const orgs = templatesByOrg ? sortOrgs(templatesByOrg) : undefined;
   const activeOrg = urlParams.get("org") ?? "all";
   const visibleTemplates = templatesByOrg
     ? templatesByOrg[activeOrg]
@@ -110,19 +103,17 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
             css={{ width: 208, flexShrink: 0, position: "sticky", top: 48 }}
           >
             <span css={styles.filterCaption}>ORGANIZATION</span>
-            {orgs.map((org) => (
+            {Object.entries(templatesByOrg).map((org) => (
               <Link
-                key={org}
-                to={`?org=${org}`}
+                key={org[0]}
+                to={`?org=${org[0]}`}
                 css={[
                   styles.tagLink,
-                  org === activeOrg && styles.tagLinkActive,
+                  org[0] === activeOrg && styles.tagLinkActive,
                 ]}
               >
-                {org === "all"
-                  ? org
-                  : templatesByOrg[org][0].organization_display_name}
-                ({templatesByOrg[org].length})
+                {org[0] === "all" ? "all" : org[1][0].organization_display_name}{" "}
+                ({org[1].length})
               </Link>
             ))}
           </Stack>

diff --git a/site/src/utils/templateAggregators.ts b/site/src/utils/templateAggregators.ts
@@ -25,18 +25,20 @@ export const getTemplatesByTag = (
 };
 
 export const getTemplatesByOrg = (templates: Template[]): TemplatesByOrg => {
-  const orgs: TemplatesByOrg = {
-    all: templates,
-  };
+  const orgs: TemplatesByOrg = {};
 
   for (const template of templates) {
-    const org = template.organization_name;
+    const org = template.organization_id;
     if (orgs[org]) {
       orgs[org].push(template);
     } else {
       orgs[org] = [template];
     }
   }
 
-  return orgs;
+  const sortedOrgs = Object.fromEntries(
+    Object.entries(orgs).sort(([, a], [, b]) => a[0].organization_name.localeCompare(b[0].organization_name))
+  );
+
+  return { all: templates, ...sortedOrgs };
 };