optimize public collection loading: (#2444)

- remove query for /collections endpoint just to get the org name
- add orgName to single /collection endpoint, where it is already
available on the backend

backend/btrixcloud/colls.py

@@ -377,6 +377,8 @@ class CollectionOps:
         """Get PublicCollOut by id"""
         result = await self.get_collection_raw(coll_id)
 
+        result["orgName"] = org.name
+
         allowed_access = [CollAccessType.PUBLIC]
         if allow_unlisted:
             allowed_access.append(CollAccessType.UNLISTED)
@@ -496,6 +498,8 @@ class CollectionOps:
                         org, self.storage_ops
                     )
 
+            res["orgName"] = org.name
+
             if public_colls_out:
                 collections.append(PublicCollOut.from_dict(res))
             else:

backend/btrixcloud/models.py

@@ -1525,6 +1525,7 @@ class PublicCollOut(BaseMongoModel):
     name: str
     slug: str
     oid: UUID
+    orgName: str
     description: Optional[str] = None
     caption: Optional[str] = None
     created: Optional[datetime] = None

frontend/src/pages/collections/collection.ts

@@ -1,5 +1,5 @@
 import { localized, msg } from "@lit/localize";
-import { Task, TaskStatus } from "@lit/task";
+import { Task } from "@lit/task";
 import { html, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -10,7 +10,6 @@ import { metadataColumn } from "@/layouts/collections/metadataColumn";
 import { page } from "@/layouts/page";
 import { RouteNamespace } from "@/routes";
 import type { PublicCollection } from "@/types/collection";
-import type { PublicOrgCollections } from "@/types/org";
 import { formatRwpTimestamp } from "@/utils/replay";
 
 enum Tab {
@@ -48,15 +47,6 @@ export class Collection extends BtrixElement {
     },
   };
 
-  private readonly orgCollections = new Task(this, {
-    task: async ([orgSlug]) => {
-      if (!orgSlug) throw new Error("orgSlug required");
-      const org = await this.fetchCollections({ orgSlug });
-      return org;
-    },
-    args: () => [this.orgSlug] as const,
-  });
-
   private readonly collection = new Task(this, {
     task: async ([orgSlug, collectionSlug]) => {
       if (!orgSlug || !collectionSlug)
@@ -89,19 +79,13 @@ export class Collection extends BtrixElement {
   }
 
   private readonly renderComplete = (collection: PublicCollection) => {
-    const org = this.orgCollections.value?.org;
     const header: Parameters<typeof page>[0] = {
-      breadcrumbs:
+      breadcrumbs: [
-        this.orgCollections.status > TaskStatus.PENDING
+        {
-          ? org
+          href: `/${RouteNamespace.PublicOrgs}/${this.orgSlug}`,
-            ? [
+          content: collection.orgName,
-                {
+        },
-                  href: `/${RouteNamespace.PublicOrgs}/${this.orgSlug}`,
+      ],
-                  content: org.name,
-                },
-              ]
-            : undefined
-          : [],
       title: collection.name || "",
       actions: html`
         <btrix-share-collection
@@ -239,23 +223,6 @@ export class Collection extends BtrixElement {
     return html`<div class="rounded-lg border p-6">${metadata}</div>`;
   }
 
-  private async fetchCollections({
-    orgSlug,
-  }: {
-    orgSlug: string;
-  }): Promise<PublicOrgCollections> {
-    const resp = await fetch(`/api/public/orgs/${orgSlug}/collections`, {
-      headers: { "Content-Type": "application/json" },
-    });
-
-    switch (resp.status) {
-      case 200:
-        return (await resp.json()) as PublicOrgCollections;
-      default:
-        throw resp.status;
-    }
-  }
-
   private async fetchCollection({
     orgSlug,
     collectionSlug,

frontend/src/types/collection.ts

@@ -20,6 +20,7 @@ export const publicCollectionSchema = z.object({
   id: z.string(),
   slug: z.string(),
   oid: z.string(),
+  orgName: z.string(),
   name: z.string(),
   created: z.string().datetime(),
   modified: z.string().datetime(),