Merge pull request #4256 from omnivore-app/feature/highlights-count

feature/highlights count

packages/api/src/generated/graphql.ts

@@ -3146,6 +3146,7 @@ export type SearchItem = {
   folder: Scalars['String'];
   format?: Maybe<Scalars['String']>;
   highlights?: Maybe<Array<Highlight>>;
+  highlightsCount?: Maybe<Scalars['Int']>;
   id: Scalars['ID'];
   image?: Maybe<Scalars['String']>;
   isArchived: Scalars['Boolean'];
@@ -7481,6 +7482,7 @@ export type SearchItemResolvers<ContextType = ResolverContext, ParentType extend
   folder?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   format?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   highlights?: Resolver<Maybe<Array<ResolversTypes['Highlight']>>, ParentType, ContextType>;
+  highlightsCount?: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
   id?: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
   image?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   isArchived?: Resolver<ResolversTypes['Boolean'], ParentType, ContextType>;

packages/api/src/generated/schema.graphql

@@ -2415,6 +2415,7 @@ type SearchItem {
   folder: String!
   format: String
   highlights: [Highlight!]
+  highlightsCount: Int
   id: ID!
   image: String
   isArchived: Boolean!

packages/api/src/resolvers/function_resolvers.ts

@@ -585,6 +585,7 @@ export const functionResolvers = {
     },
     isArchived: (item: LibraryItem) => !!item.archivedAt,
     pageType: (item: LibraryItem) => item.itemType,
+    highlightsCount: (item: LibraryItem) => item.highlightAnnotations?.length,
     ...readingProgressHandlers,
   },
   Subscription: {

packages/api/src/schema.ts

@@ -1680,6 +1680,7 @@ const schema = gql`
     format: String
     score: Float
     seenAt: Date
+    highlightsCount: Int
   }
 
   type SearchItemEdge {

packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx

@@ -177,11 +177,7 @@ type LibraryItemMetadataProps = {
 export function LibraryItemMetadata(
   props: LibraryItemMetadataProps
 ): JSX.Element {
-  const highlightCount = useMemo(() => {
-    return (
-      props.item.highlights?.filter((h) => h.type == 'HIGHLIGHT').length ?? 0
-    )
-  }, [props.item.highlights])
+  const highlightCount = props.item.highlightsCount ?? 0
 
   return (
     <HStack css={{ gap: '5px', alignItems: 'center' }}>

packages/web/lib/networking/library_items/gql.tsx

@@ -1,6 +1,6 @@
 import { gql } from 'graphql-request'
-import { highlightFragment } from '../fragments/highlightFragment'
 import { articleFragment } from '../fragments/articleFragment'
+import { highlightFragment } from '../fragments/highlightFragment'
 import { labelFragment } from '../fragments/labelFragment'
 
 export const recommendationFragment = gql`
@@ -69,9 +69,7 @@ export const GQL_SEARCH_QUERY = gql`
             readAt
             savedAt
             wordsCount
-            highlights {
-              ...HighlightFields
-            }
+            highlightsCount
           }
         }
         pageInfo {
@@ -87,7 +85,6 @@ export const GQL_SEARCH_QUERY = gql`
       }
     }
   }
-  ${highlightFragment}
 `
 
 export const GQL_SET_LINK_ARCHIVED = gql`

packages/web/lib/networking/library_items/useLibraryItems.tsx

@@ -998,6 +998,7 @@ export type LibraryItemNode = {
   aiSummary?: string
   recommendations?: Recommendation[]
   highlights?: Highlight[]
+  highlightsCount?: number
 }
 
 export type Recommendation = {