🌺 Lens and Hey v3: v41 (#lens-v3)

Summary: Migrated to Lens v3, updating types and cache operations. Highlights: • Replaced `operations` field with `LoggedInPostOperations` in cache updates. • Removed `getLennyURL` and related error handling for avatar images. • Updated `getCollectModuleData` to use new `SimpleCollectActionSettings` type. Read more: https://pierre.co/hey/hey/lens-v3
heyxyz · Dec 7, 2024 · c44d649 · c44d649
1 parent 3e5c998
commit c44d649
Show file tree

Hide file tree

Showing 34 changed files with 107 additions and 380 deletions.
diff --git a/apps/api/src/routes/avatar.ts b/apps/api/src/routes/avatar.ts
diff --git a/apps/api/tests/avatar.spec.ts b/apps/api/tests/avatar.spec.ts
diff --git a/apps/web/src/components/Account/Details.tsx b/apps/web/src/components/Account/Details.tsx
@@ -18,7 +18,6 @@ import getAccount from "@hey/helpers/getAccount";
 import getAccountAttribute from "@hey/helpers/getAccountAttribute";
 import getAvatar from "@hey/helpers/getAvatar";
 import getFavicon from "@hey/helpers/getFavicon";
-import getLennyURL from "@hey/helpers/getLennyURL";
 import getMentions from "@hey/helpers/getMentions";
 import type { Account } from "@hey/indexer";
 import { Button, Drawer, H3, Image, LightBox, Tooltip } from "@hey/ui";
@@ -73,9 +72,6 @@ const Details: FC<DetailsProps> = ({ isSuspended = false, account }) => {
           className="size-32 cursor-pointer rounded-full bg-gray-200 ring-8 ring-gray-50 sm:size-52 dark:bg-gray-700 dark:ring-black"
           height={128}
           onClick={() => setExpandedImage(getAvatar(account, EXPANDED_AVATAR))}
-          onError={({ currentTarget }) => {
-            currentTarget.src = getLennyURL(account.address);
-          }}
           src={getAvatar(account)}
           width={128}
         />

diff --git a/apps/web/src/components/Composer/NewPost.tsx b/apps/web/src/components/Composer/NewPost.tsx
@@ -1,5 +1,4 @@
 import getAvatar from "@hey/helpers/getAvatar";
-import getLennyURL from "@hey/helpers/getLennyURL";
 import { Card, Image } from "@hey/ui";
 import { useRouter } from "next/router";
 import type { FC } from "react";
@@ -60,9 +59,6 @@ const NewPost: FC<NewPostProps> = ({ tags }) => {
           alt={currentAccount?.address}
           className="size-11 cursor-pointer rounded-full border bg-gray-200 dark:border-gray-700"
           height={44}
-          onError={({ currentTarget }) => {
-            currentTarget.src = getLennyURL(currentAccount?.address);
-          }}
           src={getAvatar(currentAccount)}
           width={44}
         />

diff --git a/apps/web/src/components/Composer/NewPublication.tsx b/apps/web/src/components/Composer/NewPublication.tsx
@@ -9,7 +9,7 @@ import { Errors } from "@hey/data/errors";
 import collectModuleParams from "@hey/helpers/collectModuleParams";
 import getAccount from "@hey/helpers/getAccount";
 import getMentions from "@hey/helpers/getMentions";
-import type { Post, PostResponse } from "@hey/indexer";
+import type { Post } from "@hey/indexer";
 import type { IGif } from "@hey/types/giphy";
 import type { NewAttachment } from "@hey/types/misc";
 import { Button, Card, H6 } from "@hey/ui";
@@ -153,18 +153,9 @@ const NewPublication: FC<NewPublicationProps> = ({ className, post }) => {
     errorToast(error);
   };
 
-  const onCompleted = (post?: PostResponse) => {
-    if (post?.__typename !== "PostResponse") {
-      return onError();
-    }
-
-    // Reset states
-    reset();
-  };
-
   const { createPost } = useCreatePost({
     commentOn: post,
-    onCompleted,
+    onCompleted: () => reset(),
     onError,
     quoteOf: quotedPost as Post
   });

diff --git a/apps/web/src/components/Notification/Account.tsx b/apps/web/src/components/Notification/Account.tsx
@@ -3,12 +3,11 @@ import Verified from "@components/Shared/Account/Icons/Verified";
 import AccountPreview from "@components/Shared/AccountPreview";
 import getAccount from "@hey/helpers/getAccount";
 import getAvatar from "@hey/helpers/getAvatar";
-import getLennyURL from "@hey/helpers/getLennyURL";
 import stopEventPropagation from "@hey/helpers/stopEventPropagation";
 import type { Account } from "@hey/indexer";
 import { Image } from "@hey/ui";
 import Link from "next/link";
-import type { FC, SyntheticEvent } from "react";
+import type { FC } from "react";
 
 interface NotificationProfileProps {
   account: Account;
@@ -17,11 +16,6 @@ interface NotificationProfileProps {
 export const NotificationAccountAvatar: FC<NotificationProfileProps> = ({
   account
 }) => {
-  const handleImageError = (event: SyntheticEvent<HTMLImageElement>) => {
-    const target = event.currentTarget;
-    target.src = getLennyURL(account.address);
-  };
-
   return (
     <AccountPreview
       handle={account.username?.localName}
@@ -36,7 +30,6 @@ export const NotificationAccountAvatar: FC<NotificationProfileProps> = ({
           alt={account.address}
           className="size-7 rounded-full border bg-gray-200 sm:size-8 dark:border-gray-700"
           height={32}
-          onError={handleImageError}
           src={getAvatar(account)}
           width={32}
         />

diff --git a/apps/web/src/components/Post/Actions/Like.tsx b/apps/web/src/components/Post/Actions/Like.tsx
@@ -5,6 +5,7 @@ import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";
 import { Errors } from "@hey/data/errors";
 import nFormatter from "@hey/helpers/nFormatter";
 import {
+  type LoggedInPostOperations,
   type Post,
   PostReactionType,
   useAddReactionMutation,
@@ -34,16 +35,8 @@ const Like: FC<LikeProps> = ({ post, showCount }) => {
 
   const updateCache = (cache: ApolloCache<any>) => {
     cache.modify({
-      fields: {
-        operations: (existingValue) => {
-          return {
-            ...existingValue,
-            // TODO: This is a hack to make the cache update
-            'hasReacted({"request":{"type":"UPVOTE"}})': !hasReacted
-          };
-        }
-      },
-      id: cache.identify(post)
+      fields: { hasReacted: () => !hasReacted },
+      id: cache.identify(post.operations as LoggedInPostOperations)
     });
     cache.modify({
       fields: {

diff --git a/apps/web/src/components/Post/Actions/Menu/Bookmark.tsx b/apps/web/src/components/Post/Actions/Menu/Bookmark.tsx
@@ -5,6 +5,7 @@ import { BookmarkIcon as BookmarkIconOutline } from "@heroicons/react/24/outline
 import { BookmarkIcon as BookmarkIconSolid } from "@heroicons/react/24/solid";
 import stopEventPropagation from "@hey/helpers/stopEventPropagation";
 import {
+  type LoggedInPostOperations,
   type Post,
   useBookmarkPostMutation,
   useUndoBookmarkPostMutation
@@ -30,12 +31,8 @@ const Bookmark: FC<BookmarkProps> = ({ post }) => {
 
   const updateCache = (cache: ApolloCache<any>) => {
     cache.modify({
-      fields: {
-        operations: (existingValue) => {
-          return { ...existingValue, hasBookmarked: !hasBookmarked };
-        }
-      },
-      id: cache.identify(post)
+      fields: { hasBookmarked: () => !hasBookmarked },
+      id: cache.identify(post.operations as LoggedInPostOperations)
     });
     cache.modify({
       fields: {

diff --git a/apps/web/src/components/Post/Actions/Menu/NotInterested.tsx b/apps/web/src/components/Post/Actions/Menu/NotInterested.tsx
@@ -3,7 +3,7 @@ import { MenuItem } from "@headlessui/react";
 import errorToast from "@helpers/errorToast";
 import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/outline";
 import stopEventPropagation from "@hey/helpers/stopEventPropagation";
-import type { Post } from "@hey/indexer";
+import type { LoggedInPostOperations, Post } from "@hey/indexer";
 import cn from "@hey/ui/cn";
 import type { FC } from "react";
 import { toast } from "react-hot-toast";
@@ -21,12 +21,8 @@ const NotInterested: FC<NotInterestedProps> = ({ post }) => {
 
   const updateCache = (cache: ApolloCache<any>, notInterested: boolean) => {
     cache.modify({
-      fields: {
-        operations: (existingValue) => {
-          return { ...existingValue, isNotInterested: notInterested };
-        }
-      },
-      id: cache.identify(post)
+      fields: { isNotInterested: () => !notInterested },
+      id: cache.identify(post.operations as LoggedInPostOperations)
     });
   };
 

diff --git a/apps/web/src/components/Post/Actions/Share/Repost.tsx b/apps/web/src/components/Post/Actions/Share/Repost.tsx
@@ -5,7 +5,12 @@ import { ArrowsRightLeftIcon } from "@heroicons/react/24/outline";
 import { Errors } from "@hey/data/errors";
 import selfFundedTransactionData from "@hey/helpers/selfFundedTransactionData";
 import sponsoredTransactionData from "@hey/helpers/sponsoredTransactionData";
-import { type Post, TriStateValue, useRepostMutation } from "@hey/indexer";
+import {
+  type LoggedInPostOperations,
+  type Post,
+  TriStateValue,
+  useRepostMutation
+} from "@hey/indexer";
 import { OptmisticPostType } from "@hey/types/enums";
 import type { OptimisticTransaction } from "@hey/types/misc";
 import cn from "@hey/ui/cn";
@@ -52,14 +57,14 @@ const Repost: FC<RepostProps> = ({ isLoading, post, setIsLoading }) => {
   const updateCache = () => {
     cache.modify({
       fields: {
-        operations: (existingValue) => {
-          return { ...existingValue, hasMirrored: true };
+        hasReposted: (existingValue) => {
+          return { ...existingValue, optimistic: true };
         }
       },
-      id: cache.identify(post)
+      id: cache.identify(post.operations as LoggedInPostOperations)
     });
     cache.modify({
-      fields: { mirrors: () => shares + 1 },
+      fields: { reposts: () => shares + 1 },
       id: cache.identify(post.stats)
     });
   };
@@ -69,7 +74,7 @@ const Repost: FC<RepostProps> = ({ isLoading, post, setIsLoading }) => {
     increment();
     updateCache();
     addTransaction(generateOptimisticRepost({ txHash: hash }));
-    toast.success("Post has been mirrored!");
+    toast.success("Post has been reposted!");
   };
 
   const onError = (error: any) => {

diff --git a/apps/web/src/components/Post/Actions/Share/UndoRepost.tsx b/apps/web/src/components/Post/Actions/Share/UndoRepost.tsx
@@ -27,9 +27,7 @@ const UndoRepost: FC<UndoRepostProps> = ({ isLoading, post, setIsLoading }) => {
       fields: { reposts: () => targetPost.stats.reposts - 1 },
       id: cache.identify(targetPost.stats)
     });
-    cache.evict({
-      id: `${post?.__typename}:${post?.id}`
-    });
+    cache.evict({ id: cache.identify(post) });
   };
 
   const onError = (error?: any) => {

diff --git a/apps/web/src/components/Post/OpenAction/CollectModule/CollectAction.tsx b/apps/web/src/components/Post/OpenAction/CollectModule/CollectAction.tsx
@@ -8,7 +8,7 @@ import getCurrentSession from "@helpers/getCurrentSession";
 import { Errors } from "@hey/data/errors";
 import getCollectModuleData from "@hey/helpers/getCollectModuleData";
 import getPostActionActOnKey from "@hey/helpers/getPostActionActOnKey";
-import type { AnyPost, PostAction } from "@hey/indexer";
+import type { Post, PostAction } from "@hey/indexer";
 import { OptmisticPostType } from "@hey/types/enums";
 import type { OptimisticTransaction } from "@hey/types/misc";
 import { Button, WarningMessage } from "@hey/ui";
@@ -29,7 +29,7 @@ interface CollectActionProps {
   noBalanceErrorMessages?: ReactNode;
   onCollectSuccess?: () => void;
   postAction: PostAction;
-  post: AnyPost;
+  post: Post;
 }
 
 const CollectAction: FC<CollectActionProps> = ({

diff --git a/apps/web/src/components/Post/OpenAction/CollectModule/Splits.tsx b/apps/web/src/components/Post/OpenAction/CollectModule/Splits.tsx
@@ -8,7 +8,11 @@ import formatAddress from "@hey/helpers/formatAddress";
 import getAccount from "@hey/helpers/getAccount";
 import getAvatar from "@hey/helpers/getAvatar";
 import getStampFyiURL from "@hey/helpers/getStampFyiURL";
-import { useAccountsQuery, type Account } from "@hey/indexer";
+import {
+  type Account,
+  type RecipientDataOutput,
+  useAccountsQuery
+} from "@hey/indexer";
 import { Image } from "@hey/ui";
 import Link from "next/link";
 import type { FC } from "react";
@@ -77,8 +81,10 @@ const Splits: FC<SplitsProps> = ({ recipients }) => {
                     src={account ? getAvatar(account) : getStampFyiURL(address)}
                   />
                   {account ? (
-                    <Link href={getAccount(account).link}>
-                      <Slug slug={getAccount(account).slugWithPrefix} />
+                    <Link href={getAccount(account as Account).link}>
+                      <Slug
+                        slug={getAccount(account as Account).slugWithPrefix}
+                      />
                     </Link>
                   ) : (
                     <Link

diff --git a/apps/web/src/components/Post/PostAvatar.tsx b/apps/web/src/components/Post/PostAvatar.tsx
@@ -1,6 +1,5 @@
 import getAccount from "@hey/helpers/getAccount";
 import getAvatar from "@hey/helpers/getAvatar";
-import getLennyURL from "@hey/helpers/getLennyURL";
 import { isRepost } from "@hey/helpers/postHelpers";
 import stopEventPropagation from "@hey/helpers/stopEventPropagation";
 import type { AnyPost, TimelineItem } from "@hey/indexer";
@@ -42,9 +41,6 @@ const PostAvatar: FC<PostAvatarProps> = ({
         height={quoted ? 25 : 44}
         loading="lazy"
         onClick={() => push(getAccount(account).link)}
-        onError={({ currentTarget }) => {
-          currentTarget.src = getLennyURL(account.address);
-        }}
         src={getAvatar(account)}
         width={quoted ? 25 : 44}
       />

diff --git a/apps/web/src/components/Shared/Account/Follow.tsx b/apps/web/src/components/Shared/Account/Follow.tsx
@@ -3,7 +3,11 @@ import errorToast from "@helpers/errorToast";
 import { Errors } from "@hey/data/errors";
 import selfFundedTransactionData from "@hey/helpers/selfFundedTransactionData";
 import sponsoredTransactionData from "@hey/helpers/sponsoredTransactionData";
-import { type Account, useFollowMutation } from "@hey/indexer";
+import {
+  type Account,
+  type LoggedInAccountOperations,
+  useFollowMutation
+} from "@hey/indexer";
 import { OptmisticPostType } from "@hey/types/enums";
 import type { OptimisticTransaction } from "@hey/types/misc";
 import { Button } from "@hey/ui";
@@ -54,7 +58,7 @@ const Follow: FC<FollowProps> = ({
   const updateCache = () => {
     cache.modify({
       fields: { isFollowedByMe: () => true },
-      id: cache.identify(account.operations)
+      id: cache.identify(account.operations as LoggedInAccountOperations)
     });
   };