react: enable useLinkHandle and useUnlinkHandle hooks

lens-protocol · Oct 26, 2023 · 0400d5f · 0400d5f
1 parent 55a07ad
commit 0400d5f
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 12 deletions.
diff --git a/.changeset/smooth-ties-roll.md b/.changeset/smooth-ties-roll.md
@@ -0,0 +1,8 @@
+---
+"@lens-protocol/api-bindings": minor
+"@lens-protocol/domain": minor
+"@lens-protocol/react": minor
+"@lens-protocol/react-web": minor
+---
+
+Added useLinkHandle and useUnlinkHandle hooks
diff --git a/examples/web/src/profiles/ProfilesPage.tsx b/examples/web/src/profiles/ProfilesPage.tsx
@@ -72,10 +72,8 @@ const profileHooks = [
     path: '/profiles/useUpdateFollowPolicy',
   },
   {
-    label: 'useOwnedHandles',
-    // label: 'useOwnedHandles & useLinkHandle & useUnlinkHandle',
-    // description: `Link and unlink handle from a profile.`,
-    description: `Fetch all handles owned by a wallet.`,
+    label: 'useOwnedHandles & useLinkHandle & useUnlinkHandle',
+    description: `Link and unlink handle from a profile.`,
     path: '/profiles/useOwnedHandles',
   },
 ];

diff --git a/examples/web/src/profiles/UseOwnedHandles.tsx b/examples/web/src/profiles/UseOwnedHandles.tsx
@@ -74,7 +74,6 @@ function UseOwnedProfiles({ address }: { address: EvmAddress }) {
   );
 }
 
-// eslint-disable-next-line
 function UseOwnedHandlesInner({ address }: { address: EvmAddress }) {
   const {
     data: handleResult,
@@ -118,7 +117,7 @@ function Content({ address, profile }: ContentProps) {
       </p>
       <div style={{ display: 'flex' }}>
         <UseOwnedProfiles address={address} />
-        {/* <UseOwnedHandlesInner address={address} /> */}
+        <UseOwnedHandlesInner address={address} />
       </div>
     </div>
   );
@@ -128,8 +127,7 @@ export function UseOwnedHandles() {
   return (
     <div>
       <h1>
-        {/* <code>useOwnedHandles & useLinkHandle & useUnlinkHandle</code> */}
-        <code>useOwnedHandles</code>
+        <code>useOwnedHandles & useLinkHandle & useUnlinkHandle</code>
       </h1>
 
       <WhenLoggedIn>

diff --git a/packages/api-bindings/src/apollo/cache/transactions.ts b/packages/api-bindings/src/apollo/cache/transactions.ts
@@ -6,7 +6,12 @@ import {
   TransactionErrorReason,
   TransactionKind,
 } from '@lens-protocol/domain/entities';
-import { FollowRequest, UnfollowRequest } from '@lens-protocol/domain/use-cases/profile';
+import {
+  FollowRequest,
+  LinkHandleRequest,
+  UnfollowRequest,
+  UnlinkHandleRequest,
+} from '@lens-protocol/domain/use-cases/profile';
 import { OpenActionRequest, AllOpenActionType } from '@lens-protocol/domain/use-cases/publications';
 import { AnyTransactionRequest } from '@lens-protocol/domain/use-cases/transactions';
 import { DateUtils } from '@lens-protocol/shared-kernel';
@@ -174,3 +179,33 @@ export function countPendingUnfollowFor(profileId: ProfileId) {
     0,
   );
 }
+
+function isPendingLinkHandleTransaction(
+  transaction: TransactionState<AnyTransactionRequest>,
+): transaction is TransactionState<LinkHandleRequest> {
+  return (
+    transaction.request.kind === TransactionKind.LINK_HANDLE &&
+    transaction.status === TxStatus.PENDING
+  );
+}
+
+export function getPendingLinkHandleTx() {
+  return recentTransactionsVar().find((transaction) => {
+    return isPendingLinkHandleTransaction(transaction);
+  }) as TransactionState<LinkHandleRequest> | undefined;
+}
+
+function isPendingUnlinkHandleTransaction(
+  transaction: TransactionState<AnyTransactionRequest>,
+): transaction is TransactionState<UnlinkHandleRequest> {
+  return (
+    transaction.request.kind === TransactionKind.UNLINK_HANDLE &&
+    transaction.status === TxStatus.PENDING
+  );
+}
+
+export function getPendingUnlinkHandleTx() {
+  return recentTransactionsVar().find((transaction) => {
+    return isPendingUnlinkHandleTransaction(transaction);
+  }) as TransactionState<UnlinkHandleRequest> | undefined;
+}
diff --git a/packages/api-bindings/src/apollo/cache/type-policies/createProfileTypePolicy.ts b/packages/api-bindings/src/apollo/cache/type-policies/createProfileTypePolicy.ts
@@ -1,7 +1,20 @@
 import { StrictTypedTypePolicies } from '../../../lens';
+import { getPendingLinkHandleTx, getPendingUnlinkHandleTx } from '../transactions';
 
 export function createProfileTypePolicy(): StrictTypedTypePolicies['Profile'] {
   return {
-    fields: {},
+    fields: {
+      handle: {
+        read(existing: string | undefined): string | undefined {
+          const pendingLinkHandleTx = getPendingLinkHandleTx();
+          const pendingUnLinkHandleTx = getPendingUnlinkHandleTx();
+
+          if (pendingLinkHandleTx) return pendingLinkHandleTx.request.handle;
+          if (pendingUnLinkHandleTx) return undefined;
+
+          return existing;
+        },
+      },
+    },
   };
 }
diff --git a/packages/react/src/transactions/useLinkHandle.ts b/packages/react/src/transactions/useLinkHandle.ts
@@ -35,7 +35,6 @@ export type LinkHandleArgs = {
  *
  * @category Profiles
  * @group Hooks
- * @experimental This hook is experimental and may change in future releases.
  */
 export function useLinkHandle(): UseDeferredTask<
   AsyncTransactionResult<void>,

diff --git a/packages/react/src/transactions/useUnlinkHandle.ts b/packages/react/src/transactions/useUnlinkHandle.ts
@@ -35,7 +35,6 @@ export type UnlinkHandleArgs = {
  *
  * @category Profiles
  * @group Hooks
- * @experimental This hook is experimental and may change in future releases.
  */
 export function useUnlinkHandle(): UseDeferredTask<
   AsyncTransactionResult<void>,