Sort group content in app

seed-hypermedia · Nov 28, 2023 · 2c711f7 · 2c711f7
1 parent fcc48d8
commit 2c711f7
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 32 deletions.
diff --git a/frontend/packages/app/models/groups.ts b/frontend/packages/app/models/groups.ts
@@ -3,18 +3,22 @@ import {
   ListDocumentGroupsResponse,
   ListGroupsResponse,
   Role,
+  UnpackedHypermediaId,
+  createHmId,
   unpackDocId,
   unpackHmId,
 } from '@mintter/shared'
 import {
   UseMutationOptions,
   UseQueryOptions,
   useMutation,
+  useQueries,
   useQuery,
 } from '@tanstack/react-query'
 import {useMemo} from 'react'
 import {useGRPCClient, useQueryInvalidator} from '../app-context'
 import {useMyAccount} from './accounts'
+import {queryPublication} from './documents'
 import {queryKeys} from './query-keys'
 
 export function useGroups(opts?: UseQueryOptions<ListGroupsResponse>) {
@@ -262,6 +266,55 @@ export function useGroupContent(
   })
 }
 
+export function useFullGroupContent(
+  groupId?: string | undefined,
+  version?: string,
+) {
+  const groupContent = useGroupContent(groupId, version)
+  const grpcClient = useGRPCClient()
+  const contentEntries: (readonly [string, UnpackedHypermediaId])[] = []
+  Object.entries(groupContent.data?.content || {}).forEach(
+    ([pathName, fullContentId]) => {
+      const id = unpackHmId(fullContentId)
+      if (id) {
+        contentEntries.push([pathName, id])
+      }
+    },
+  )
+  const contentQueries = useQueries({
+    queries: contentEntries.map(([contentKey, contentId]) => {
+      const docId = createHmId('d', contentId.eid)
+      return queryPublication(
+        grpcClient,
+        docId,
+        contentId.version || undefined,
+        false,
+      )
+    }),
+  })
+  return {
+    ...groupContent,
+    data: {
+      items: contentEntries
+        .map(([contentKey, contentId], i) => {
+          const pub = contentQueries.find((pubQuery) => {
+            return (
+              pubQuery.data?.document?.id === contentId.qid &&
+              pubQuery.data?.version === contentId.version
+            )
+          })
+          return {key: contentKey, pub: pub?.data, id: contentId}
+        })
+        .sort((a, b) => {
+          const timeA = a.pub?.document?.updateTime?.seconds || 0n
+          const timeB = b.pub?.document?.updateTime?.seconds || 0n
+          return Number(timeB - timeA)
+        }),
+      content: groupContent.data?.content,
+    },
+  }
+}
+
 export function useInvertedGroupContent(
   groupId?: string | undefined,
   version?: string,

diff --git a/frontend/packages/app/pages/group.tsx b/frontend/packages/app/pages/group.tsx
@@ -6,6 +6,7 @@ import {
   Document,
   Group,
   Profile,
+  Publication,
   PublicationContent,
   Role,
   formattedDate,
@@ -74,6 +75,7 @@ import {useAllChanges} from '../models/changes'
 import {useDraftList, usePublication} from '../models/documents'
 import {
   useAddGroupMember,
+  useFullGroupContent,
   useGroup,
   useGroupContent,
   useGroupMembers,
@@ -95,7 +97,7 @@ export default function GroupPage() {
   const group = useGroup(groupId, version, {
     // refetchInterval: 5_000,
   })
-  const groupContent = useGroupContent(groupId, version)
+  const groupContent = useFullGroupContent(groupId, version)
   const latestGroupContent = useGroupContent(groupId)
   // const groupMembers = useGroupMembers(groupId, version)
   const groupMembers = useGroupMembers(groupId)
@@ -387,34 +389,31 @@ export default function GroupPage() {
                   </XStack>
                 )}
                 <YStack paddingVertical="$4" gap="$4">
-                  {Object.entries(groupContent.data?.content || {}).map(
-                    ([pathName, hmUrl]) => {
-                      const docId = unpackDocId(hmUrl)
-                      if (!docId) return null
-                      if (pathName === '/') return null
+                  {//Object.entries(groupContent.data?.content || {})
+                  groupContent.data?.items.map(({key, pub, id}) => {
+                    if (key === '/') return null
 
-                      const latestEntry =
-                        latestGroupContent.data?.content?.[pathName]
-                      const latestDocId = latestEntry
-                        ? unpackDocId(latestEntry)
-                        : null
+                    const latestEntry = latestGroupContent.data?.content?.[key]
+                    const latestDocId = latestEntry
+                      ? unpackDocId(latestEntry)
+                      : null
 
-                      return (
-                        <GroupContentItem
-                          key={pathName}
-                          docId={docId?.docId}
-                          groupId={groupId}
-                          version={docId?.version || undefined}
-                          latestVersion={latestDocId?.version || undefined}
-                          hasDraft={drafts.data?.documents.find(
-                            (d) => d.id == docId.docId,
-                          )}
-                          userRole={myMemberRole}
-                          pathName={pathName}
-                        />
-                      )
-                    },
-                  )}
+                    return (
+                      <GroupContentItem
+                        key={key}
+                        docId={id.qid}
+                        groupId={groupId}
+                        version={id?.version || undefined}
+                        latestVersion={latestDocId?.version || undefined}
+                        hasDraft={drafts.data?.documents.find(
+                          (d) => d.id == id.qid,
+                        )}
+                        pub={pub}
+                        userRole={myMemberRole}
+                        pathName={key}
+                      />
+                    )
+                  })}
                 </YStack>
               </Container>
             </MainWrapper>
@@ -500,6 +499,7 @@ function GroupContentItem({
   groupId,
   pathName,
   userRole,
+  pub,
 }: {
   docId: string
   version?: string
@@ -508,11 +508,11 @@ function GroupContentItem({
   groupId: string
   pathName: string
   userRole: Role
+  pub: Publication | undefined
 }) {
   const removeDoc = useRemoveDocFromGroup()
-  const pub = usePublication({id: docId, version})
   const renameDialog = useAppDialog(RenamePubDialog)
-  if (!pub.data) return null
+  if (!pub) return null
   const memberMenuItems = [
     {
       label: 'Remove from Group',
@@ -529,7 +529,7 @@ function GroupContentItem({
         renameDialog.open({
           pathName,
           groupId,
-          docTitle: pub.data.document?.title || '',
+          docTitle: pub.document?.title || '',
         })
       },
       key: 'rename',
@@ -538,14 +538,14 @@ function GroupContentItem({
   return (
     <>
       <PublicationListItem
-        publication={pub.data}
+        publication={pub}
         hasDraft={hasDraft}
         pathName={pathName}
         onPathNamePress={() => {
           renameDialog.open({
             pathName,
             groupId,
-            docTitle: pub.data.document?.title || '',
+            docTitle: pub.document?.title || '',
           })
         }}
         pubContext={{key: 'group', groupId, pathName}}

diff --git a/frontend/packages/shared/src/utils/entity-id-url.ts b/frontend/packages/shared/src/utils/entity-id-url.ts
@@ -106,6 +106,7 @@ export type UnpackedHypermediaId = {
   id: string
   type: keyof typeof HYPERMEDIA_ENTITY_TYPES
   eid: string
+  qid: string
   groupPathName: string | null
   version: string | null
   blockRef: string | null
@@ -120,8 +121,10 @@ export function unpackHmId(hypermediaId: string): UnpackedHypermediaId | null {
     const eid = parsed?.path[1]
     const version = parsed?.query.v
     if (!type) return null
+    const qid = createHmId(type, eid)
     return {
       id: hypermediaId,
+      qid,
       type,
       eid,
       groupPathName: parsed?.path[2] || null,
@@ -137,8 +140,10 @@ export function unpackHmId(hypermediaId: string): UnpackedHypermediaId | null {
     const version = parsed?.query.v
     let hostname = parsed?.path[0]
     if (!type) return null
+    const qid = createHmId(type, eid)
     return {
       id: hypermediaId,
+      qid,
       type,
       eid,
       groupPathName: parsed?.path[3] || null,