Feed content UI and truncation

frontend/apps/site/pages/api/content-image/[entityType]/[entityId]/[versionId]/media.png.tsx

@@ -5,6 +5,7 @@ import {
   HMBlockNode,
   HMGroup,
   HMPublication,
+  clipContentBlocks,
   createHmId,
   getCIDFromIPFSUrl,
   toHMInlineContent,
@@ -268,50 +269,14 @@ function GroupCard({
   )
 }
 
-// type HMBlockNode = {
-//   block: HMBlock
-//   children?: Array<HMBlockNode>
-// }
-
-// HMBlockNodes are recursive values. we want the output to have the same shape, but limit the total number of blocks
-// the first blocks will be included up until the totalBlock value is reached
-function clipContent(
-  content: HMBlockNode[] | undefined,
-  totalBlocks: number,
-): HMBlockNode[] | null {
-  if (!content) return null
-  const output: HMBlockNode[] = []
-  let blocksRemaining: number = totalBlocks
-  function walk(currentNode: HMBlockNode, outputNode: HMBlockNode[]): void {
-    if (blocksRemaining <= 0) {
-      return
-    }
-    let newNode: HMBlockNode = {
-      block: currentNode.block,
-      children: currentNode.children ? [] : undefined,
-    }
-    outputNode.push(newNode)
-    blocksRemaining--
-    if (currentNode.children && newNode.children) {
-      for (let child of currentNode.children) {
-        walk(child, newNode.children)
-      }
-    }
-  }
-  for (let root of content) {
-    walk(root, output)
-  }
-  return output
-}
-
 function PublicationCard({
   publication,
   editors,
 }: {
   publication: HMPublication
   editors: {account: HMAccount | null}[]
 }) {
-  const clippedContent = clipContent(
+  const clippedContent = clipContentBlocks(
     publication.document?.children,
     8, // render a maximum of 8 blocks in the OG image
   )

frontend/packages/app/models/accounts.ts

@@ -84,6 +84,7 @@ export function useSetTrusted(
       return undefined
     },
     onSuccess: (result, input, ctx) => {
+      invalidate([queryKeys.FEED, true])
       invalidate([queryKeys.GET_ACCOUNT, input.accountId])
       invalidate([queryKeys.GET_ALL_ACCOUNTS])
       invalidate([queryKeys.GET_PUBLICATION_LIST, 'trusted'])
@@ -118,6 +119,7 @@ export function useSetProfile(
     },
     ...opts, // careful to put this above onSuccess so that it overrides opts.onSuccess
     onSuccess: (accountId, ...rest) => {
+      invalidate([queryKeys.FEED])
       invalidate([queryKeys.GET_ACCOUNT, accountId])
       invalidate([queryKeys.GET_ALL_ACCOUNTS])
       opts?.onSuccess?.(accountId, ...rest)

frontend/packages/app/models/changes.ts

@@ -95,17 +95,63 @@ export function useChange(changeId?: string) {
     enabled: !!changeId,
   })
 }
+export type IPLDRef = {
+  '/': string
+}
+export type IPLDBytes = {
+  '/': {
+    bytes: string
+  }
+}
+export type IPLDNode = IPLDRef | IPLDBytes
+
+export type ChangeBlob<EntitySchema> = {
+  '@type': 'Change'
+  // action: 'Update', // seems to appear on group changes but not account changes
+  delegation: IPLDRef
+  deps: IPLDRef[]
+  entity: string // entity id like hm://d/123
+  hlcTime: number
+  patch: Partial<EntitySchema>
+  sig: IPLDBytes
+  signer: IPLDRef
+}
+
+export type ProfileSchema = {
+  alias: string
+  bio: string
+  avatar: IPLDRef
+}
+export enum GroupRole {
+  Owner = 1,
+  Editor = 2,
+}
+export type GroupSchema = {
+  title: string
+  description: string
+  members: Record<
+    string, // accountId
+    GroupRole
+  >
+  content: Record<
+    string, // pathName
+    string // hm://d/123?v=123
+  >
+}
 
-export function useChangeData(changeId?: string) {
+// todo, add KeyDelegationData CommentData and any other JSON blobs
+export type ChangeData = ChangeBlob<ProfileSchema> | ChangeBlob<GroupSchema> // todo: add DocumentSchema
+export type BlobData = ChangeData
+
+export function useBlobData(cid?: string) {
   return useQuery({
     queryFn: async () => {
-      const res = await fetch(
-        `http://localhost:${HTTP_PORT}/debug/cid/${changeId}`,
-      )
+      const res = await fetch(`http://localhost:${HTTP_PORT}/debug/cid/${cid}`)
       const data = await res.json()
-      return data
+      console.log('blob data', data)
+      return data as BlobData
     },
-    queryKey: [queryKeys.CHANGE_DATA, changeId],
-    enabled: !!changeId,
+    queryKey: [queryKeys.BLOB_DATA, cid],
+    enabled: !!cid,
   })
 }

frontend/packages/app/models/comments.ts

@@ -335,6 +335,7 @@ export function useCommentEditor(opts: {onDiscard?: () => void} = {}) {
       targetDocId &&
         invalidate([queryKeys.PUBLICATION_COMMENTS, targetDocId.eid])
       invalidate(['trpc.comments.getCommentDrafts'])
+      invalidate([queryKeys.FEED])
       if (route.key !== 'comment-draft')
         throw new Error('not in comment-draft route')
       replace({

frontend/packages/app/models/documents.ts

@@ -18,6 +18,7 @@ import {
   GRPCClient,
   GroupVariant,
   HMBlock,
+  HMPublication,
   ListPublicationsResponse,
   Publication,
   fromHMBlock,
@@ -164,7 +165,7 @@ export function usePublication({
   id,
   version,
   ...options
-}: UseQueryOptions<Publication> & {
+}: UseQueryOptions<HMPublication> & {
   id?: string
   version?: string
 }) {
@@ -179,19 +180,23 @@ export function queryPublication(
   grpcClient: GRPCClient,
   documentId?: string,
   versionId?: string,
-): UseQueryOptions<Publication> | FetchQueryOptions<Publication> {
+): UseQueryOptions<HMPublication> | FetchQueryOptions<HMPublication> {
   return {
     queryKey: [queryKeys.GET_PUBLICATION, documentId, versionId],
     enabled: !!documentId,
     // retry: false, // to test error handling faster
     // default is 5. the backend waits ~1s for discovery, so we retry for a little while in case document is on its way.
     retry: 10,
     // about 15 seconds total right now
-    queryFn: () =>
-      grpcClient.publications.getPublication({
+    queryFn: async () => {
+      const pub = await grpcClient.publications.getPublication({
         documentId,
         version: versionId,
-      }),
+      })
+      const hmPub = hmPublication(pub)
+      if (!hmPub) throw new Error('Failed to produce HMPublication')
+      return hmPub
+    },
   }
 }
 
@@ -337,6 +342,7 @@ export function usePublishDraft(
       const documentId = result.pub.document?.id
       const {groupVariant} = result
       opts?.onSuccess?.(result, variables, context)
+      invalidate([queryKeys.FEED])
       invalidate([queryKeys.GET_PUBLICATION_LIST])
       invalidate([queryKeys.PUBLICATION_CITATIONS])
       invalidate([queryKeys.GET_DRAFT_LIST])

frontend/packages/app/models/groups.ts

@@ -140,6 +140,7 @@ export function useCreateGroup(
     },
     onSuccess: (result, input, context) => {
       opts?.onSuccess?.(result, input, context)
+      invalidate([queryKeys.FEED])
       invalidate([queryKeys.GET_GROUPS])
     },
   })
@@ -162,6 +163,7 @@ export function useUpdateGroup(
     },
     onSuccess: (result, input, context) => {
       opts?.onSuccess?.(result, input, context)
+      invalidate([queryKeys.FEED])
       invalidate([queryKeys.GET_GROUPS])
       invalidate([queryKeys.GET_GROUP, input.id])
       invalidate([queryKeys.GET_GROUPS_FOR_ACCOUNT])
@@ -188,6 +190,7 @@ export function usePublishGroupToSite(
     },
     onSuccess: (result, input, context) => {
       opts?.onSuccess?.(result, input, context)
+      invalidate([queryKeys.FEED])
       invalidate([queryKeys.GET_GROUPS])
       invalidate([queryKeys.GET_GROUP, input.groupId])
     },
@@ -230,6 +233,7 @@ export function usePublishDocToGroup(
     },
     onSuccess: (result, input, context) => {
       opts?.onSuccess?.(result, input, context)
+      invalidate([queryKeys.FEED])
       invalidate([queryKeys.GET_GROUP_CONTENT, input.groupId])
       invalidate([queryKeys.ENTITY_TIMELINE, input.groupId])
       invalidate([queryKeys.GET_GROUPS_FOR_DOCUMENT, input.docId])
@@ -259,6 +263,7 @@ export function useRemoveDocFromGroup(
     },
     onSuccess: (result, input, context) => {
       opts?.onSuccess?.(result, input, context)
+      invalidate([queryKeys.FEED])
       invalidate([queryKeys.GET_GROUP_CONTENT, input.groupId])
       invalidate([queryKeys.ENTITY_TIMELINE, input.groupId])
       invalidate([queryKeys.GET_GROUPS_FOR_DOCUMENT])
@@ -298,6 +303,7 @@ export function useRenameGroupDoc(
     onSuccess: (result, input, context) => {
       const docId = unpackDocId(result)
       opts?.onSuccess?.(result, input, context)
+      invalidate([queryKeys.FEED])
       invalidate([queryKeys.GET_GROUP_CONTENT, input.groupId])
       invalidate([queryKeys.GET_GROUPS_FOR_DOCUMENT, docId?.docId])
     },
@@ -570,6 +576,7 @@ export function useAddGroupMember(
     },
     onSuccess: (result, input, context) => {
       opts?.onSuccess?.(result, input, context)
+      invalidate([queryKeys.FEED])
       invalidate([queryKeys.GET_GROUP_MEMBERS, input.groupId])
     },
   })
@@ -597,6 +604,7 @@ export function useRemoveGroupMember(
     },
     onSuccess: (result, input, context) => {
       opts?.onSuccess?.(result, input, context)
+      invalidate([queryKeys.FEED])
       invalidate([queryKeys.GET_GROUP_MEMBERS, input.groupId])
     },
   })

frontend/packages/app/models/query-keys.ts

@@ -56,10 +56,12 @@ export const queryKeys = {
 
   // changes
   CHANGE: 'CHANGE', //, changeId: string
-  CHANGE_DATA: 'CHANGE_DATA', //, changeId: string
   ALL_ENTITY_CHANGES: 'ALL_ENTITY_CHANGES', //, entityId: string
   DOCUMENT_TEXT_CONTENT: 'DOCUMENT_TEXT_CONTENT',
 
+  // cid
+  BLOB_DATA: 'BLOB_DATA', //, cid: string
+
   LIGHTNING_ACCOUNT_CHECK: 'LIGHTNING_ACCOUNT_CHECK', //, accountId: string
 } as const