example and test for useWhoReactedToPublication

examples/web/src/App.tsx

@@ -27,7 +27,12 @@ import {
   UseRecommendedProfiles,
   UseWhoActedOnPublication,
 } from './profiles';
-import { PublicationsPage, UsePublication, UsePublications } from './publications';
+import {
+  PublicationsPage,
+  UsePublication,
+  UsePublications,
+  UseWhoReactedToPublication,
+} from './publications';
 import { localStorage } from './storage';
 
 const { publicClient, webSocketPublicClient } = configureChains(
@@ -70,6 +75,10 @@ export function App() {
                     <Route index element={<PublicationsPage />} />
                     <Route path="usePublication" element={<UsePublication />} />
                     <Route path="usePublications" element={<UsePublications />} />
+                    <Route
+                      path="useWhoReactedToPublication"
+                      element={<UseWhoReactedToPublication />}
+                    />
                   </Route>
 
                   <Route path="/profiles">

examples/web/src/publications/PublicationsPage.tsx

@@ -11,6 +11,11 @@ const publicationHooks = [
     description: `Fetch a list of publications.`,
     path: '/publications/usePublications',
   },
+  {
+    label: 'useWhoReactedToPublication',
+    description: `Fetch a list of profiles who reacted to a publication.`,
+    path: '/publications/useWhoReactedToPublication',
+  },
 ];
 
 export function PublicationsPage() {

examples/web/src/publications/UseWhoReactedToPublication.tsx

@@ -0,0 +1,48 @@
+import { publicationId, useWhoReactedToPublication } from '@lens-protocol/react';
+
+import { ErrorMessage } from '../components/error/ErrorMessage';
+import { Loading } from '../components/loading/Loading';
+import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
+import { ProfileCard } from '../profiles/components/ProfileCard';
+
+export function UseWhoReactedToPublication() {
+  const {
+    data: reactions,
+    error,
+    loading,
+    hasMore,
+    observeRef,
+  } = useInfiniteScroll(
+    useWhoReactedToPublication({
+      for: publicationId('0x04-0x0b'),
+    }),
+  );
+
+  if (loading) return <Loading />;
+
+  if (error) return <ErrorMessage error={error} />;
+
+  return (
+    <div>
+      <h1>
+        <code>useWhoReactedToPublication</code>
+      </h1>
+      <div>
+        {reactions.map((p) => (
+          <div key={p.profile.id}>
+            <ProfileCard profile={p.profile} />
+            <div>
+              {p.reactions.map((r) => (
+                <div key={r.reactionAt}>
+                  {r.reaction} at {r.reactionAt}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+
+        {hasMore && <p ref={observeRef}>Loading more...</p>}
+      </div>
+    </div>
+  );
+}

examples/web/src/publications/index.ts

@@ -1,3 +1,4 @@
 export * from './PublicationsPage';
 export * from './UsePublication';
 export * from './UsePublications';
+export * from './UseWhoReactedToPublication';

packages/api-bindings/src/lens/__helpers__/fragments.ts

@@ -11,8 +11,11 @@ import {
   Profile,
   ProfileActionHistory,
   ProfileActionHistoryType,
+  ProfileReactionResult,
   ProfileStats,
+  ProfileWhoReactedResult,
   PublicationOperations,
+  PublicationReactionType,
   PublicationStats,
   TextOnlyMetadataV3,
   TriStateValue,
@@ -252,3 +255,25 @@ export function mockProfileActionHistoryFragment(
     ...overrides,
   };
 }
+
+export function mockProfileReactionResultFragment(
+  overrides: Partial<ProfileReactionResult> = {},
+): ProfileReactionResult {
+  return {
+    reaction: PublicationReactionType.Upvote,
+    reactionAt: faker.date.past().toISOString(),
+
+    ...overrides,
+  };
+}
+
+export function mockProfileWhoReactedResultFragment(
+  overrides: Partial<ProfileWhoReactedResult> = {},
+): ProfileWhoReactedResult {
+  return {
+    profile: mockProfileFragment(),
+    reactions: [mockProfileReactionResultFragment()],
+
+    ...overrides,
+  };
+}

packages/api-bindings/src/lens/__helpers__/queries/profile.ts

@@ -12,12 +12,16 @@ import {
   ProfileActionHistoryVariables,
   ProfileRecommendationsDocument,
   ProfileRecommendationsVariables,
+  ProfileWhoReactedResult,
   ProfilesDocument,
   ProfilesVariables,
   SearchProfilesDocument,
   SearchProfilesVariables,
+  SupportedFiatType,
   WhoActedOnPublicationDocument,
   WhoActedOnPublicationVariables,
+  WhoReactedPublicationDocument,
+  WhoReactedPublicationVariables,
 } from '../../graphql/generated';
 import { mockPaginatedResultInfo } from '../fragments';
 import { mockAnyPaginatedResponse } from './mockAnyPaginatedResponse';
@@ -165,3 +169,35 @@ export function mockProfileActionHistoryResponse({
     },
   };
 }
+
+export function mockWhoReactedToPublicationResponse({
+  variables,
+  items,
+  info = mockPaginatedResultInfo(),
+}: {
+  variables: WhoReactedPublicationVariables;
+  items: ProfileWhoReactedResult[];
+  info?: PaginatedResultInfo;
+}) {
+  return {
+    request: {
+      query: WhoReactedPublicationDocument,
+      variables: {
+        fxRateFor: SupportedFiatType.Usd,
+        imageMediumSize: {},
+        imageSmallSize: {},
+        profileCoverSize: {},
+        profilePictureSize: {},
+        ...variables,
+      },
+    },
+    result: {
+      data: {
+        result: {
+          items,
+          pageInfo: info,
+        },
+      },
+    },
+  };
+}

packages/react/src/publication/__tests__/useWhoReactedToPublication.spec.ts

@@ -0,0 +1,43 @@
+import {
+  mockProfileWhoReactedResultFragment,
+  mockWhoReactedToPublicationResponse,
+} from '@lens-protocol/api-bindings/mocks';
+import { mockPublicationId } from '@lens-protocol/domain/mocks';
+import { waitFor } from '@testing-library/react';
+
+import { setupHookTestScenario } from '../../__helpers__/setupHookTestScenario';
+import {
+  UseWhoReactedToPublicationArgs,
+  useWhoReactedToPublication,
+} from '../useWhoReactedToPublication';
+
+describe(`Given the ${useWhoReactedToPublication.name} hook`, () => {
+  const publicationId = mockPublicationId();
+  const profileReactions = [mockProfileWhoReactedResultFragment()];
+  const expectations = profileReactions.map(({ profile, reactions }) => ({
+    profileId: profile.id,
+    reactions,
+  }));
+
+  describe('when the query returns data successfully', () => {
+    it('should settle with the profiles', async () => {
+      const args: UseWhoReactedToPublicationArgs = {
+        for: publicationId,
+      };
+
+      const { renderHook } = setupHookTestScenario([
+        mockWhoReactedToPublicationResponse({
+          variables: {
+            ...args,
+          },
+          items: profileReactions,
+        }),
+      ]);
+
+      const { result } = renderHook(() => useWhoReactedToPublication(args));
+
+      await waitFor(() => expect(result.current.loading).toBeFalsy());
+      expect(result.current.data).toMatchObject(expectations);
+    });
+  });
+});

packages/react/src/publication/index.ts

@@ -3,6 +3,7 @@
  */
 export * from './usePublication';
 export * from './usePublications';
+export * from './useWhoReactedToPublication';
 
 /**
  * Fragments

packages/react/src/publication/useWhoReactedToPublication.ts

@@ -1,11 +1,10 @@
 import {
-  LimitType,
   ProfileWhoReactedResult,
   WhoReactedPublicationRequest,
   useWhoReactedPublication as useWhoReactedPublicationHook,
 } from '@lens-protocol/api-bindings';
 
-import { useLensApolloClient, useMediaTransformFromConfig } from '../helpers/arguments';
+import { useLensApolloClient } from '../helpers/arguments';
 import { PaginatedArgs, PaginatedReadResult, usePaginatedReadResult } from '../helpers/reads';
 
 /**
@@ -27,19 +26,13 @@ export type UseWhoReactedToPublicationArgs = PaginatedArgs<WhoReactedPublication
  * });
  * ```
  */
-export function useWhoReactedToPublication({
-  for: forId,
-  where,
-  limit = LimitType.Ten,
-}: UseWhoReactedToPublicationArgs): PaginatedReadResult<ProfileWhoReactedResult[]> {
+export function useWhoReactedToPublication(
+  args: UseWhoReactedToPublicationArgs,
+): PaginatedReadResult<ProfileWhoReactedResult[]> {
   return usePaginatedReadResult(
     useWhoReactedPublicationHook(
       useLensApolloClient({
-        variables: useMediaTransformFromConfig({
-          for: forId,
-          where,
-          limit,
-        }),
+        variables: args,
       }),
     ),
   );