From 31d91209145c56479f429a59363071c10a535188 Mon Sep 17 00:00:00 2001 From: WaDadidou Date: Mon, 18 Nov 2024 12:59:45 -0500 Subject: [PATCH 1/8] fix(feed): Add loader when Gno react, add toasts error --- .../socialFeed/NewsFeed/NewsFeed.tsx | 5 + .../SocialActions/DislikeButton.tsx | 6 +- .../socialFeed/SocialActions/LikeButton.tsx | 6 +- .../SocialCard/SocialCardFooter.tsx | 10 +- packages/hooks/feed/useSocialReactions.ts | 96 +++++++++++++------ .../Mini/Feed/components/PostActions.tsx | 8 +- 6 files changed, 85 insertions(+), 46 deletions(-) diff --git a/packages/components/socialFeed/NewsFeed/NewsFeed.tsx b/packages/components/socialFeed/NewsFeed/NewsFeed.tsx index d37a4d73e3..bd57595d13 100644 --- a/packages/components/socialFeed/NewsFeed/NewsFeed.tsx +++ b/packages/components/socialFeed/NewsFeed/NewsFeed.tsx @@ -171,6 +171,11 @@ export const NewsFeed: React.FC = ({ ); }, [mobileMode]); + console.log( + "==============", + posts.find((p) => p.id === "testori-caecb9c3-1a35-429b-be30-54c0578c8ec4"), + ); + const RenderItem = useCallback( (post: Post) => { // NOTE: if you edit this, make sure that this is not too CPU expensive diff --git a/packages/components/socialFeed/SocialActions/DislikeButton.tsx b/packages/components/socialFeed/SocialActions/DislikeButton.tsx index ab2fced798..54b4390cae 100644 --- a/packages/components/socialFeed/SocialActions/DislikeButton.tsx +++ b/packages/components/socialFeed/SocialActions/DislikeButton.tsx @@ -17,16 +17,16 @@ export const DislikeButton: FC<{ post: Post; setPost: Dispatch>; }> = ({ post, setPost }) => { - const { handleReaction, isPostMutationLoading } = useSocialReactions({ + const { handleReact, isReactLoading } = useSocialReactions({ post, setPost, }); - if (isPostMutationLoading) + if (isReactLoading) return ; return ( handleReaction(DISLIKE_EMOJI)} + onPress={() => handleReact(DISLIKE_EMOJI)} style={{ flexDirection: "row", alignItems: "center", diff --git a/packages/components/socialFeed/SocialActions/LikeButton.tsx b/packages/components/socialFeed/SocialActions/LikeButton.tsx index f8c425b867..c52c717354 100644 --- a/packages/components/socialFeed/SocialActions/LikeButton.tsx +++ b/packages/components/socialFeed/SocialActions/LikeButton.tsx @@ -17,16 +17,16 @@ export const LikeButton: FC<{ post: Post; setPost: Dispatch>; }> = ({ post, setPost }) => { - const { handleReaction, isPostMutationLoading } = useSocialReactions({ + const { handleReact, isReactLoading } = useSocialReactions({ post, setPost, }); - if (isPostMutationLoading) + if (isReactLoading) return ; return ( handleReaction(LIKE_EMOJI)} + onPress={() => handleReact(LIKE_EMOJI)} style={{ flexDirection: "row", alignItems: "center", diff --git a/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx b/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx index 804b5d6a2a..e9a987b9f6 100644 --- a/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx +++ b/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx @@ -34,7 +34,7 @@ export const SocialCardFooter: FC<{ }) => { const wallet = useSelectedWallet(); const postNetwork = getNetwork(post.networkId); - const { handleReaction, isPostMutationLoading } = useSocialReactions({ + const { handleReact, isReactLoading } = useSocialReactions({ post, setPost, }); @@ -44,8 +44,8 @@ export const SocialCardFooter: FC<{ @@ -58,8 +58,8 @@ export const SocialCardFooter: FC<{ }} > {isPostConsultation && handleReply && ( <> diff --git a/packages/hooks/feed/useSocialReactions.ts b/packages/hooks/feed/useSocialReactions.ts index 3dc42f3c6b..204cb41e32 100644 --- a/packages/hooks/feed/useSocialReactions.ts +++ b/packages/hooks/feed/useSocialReactions.ts @@ -1,11 +1,12 @@ import { GnoJSONRPCProvider } from "@gnolang/gno-js-client"; -import { Dispatch, SetStateAction } from "react"; +import { Dispatch, SetStateAction, useEffect, useState } from "react"; import { useFeedPosting } from "./useFeedPosting"; import useSelectedWallet from "../useSelectedWallet"; import { Post } from "@/api/feed/v1/feed"; import { signingSocialFeedClient } from "@/client-creators/socialFeedClient"; +import { useFeedbacks } from "@/context/FeedbacksProvider"; import { useWalletControl } from "@/context/WalletControlProvider"; import { useTeritoriSocialFeedReactPostMutation } from "@/contracts-clients/teritori-social-feed/TeritoriSocialFeed.react-query"; import { @@ -31,6 +32,7 @@ export const useSocialReactions = ({ setPost: Dispatch>; }) => { const selectedWallet = useSelectedWallet(); + const { setToast } = useFeedbacks(); const userId = selectedWallet?.userId; const { showNotEnoughFundsModal, showConnectWalletModal } = useWalletControl(); @@ -40,18 +42,32 @@ export const useSocialReactions = ({ userId, postCategory, ); - const { mutate: postMutate, isLoading: isPostMutationLoading } = + const { mutate: postMutate, isLoading: isReactLoading } = useTeritoriSocialFeedReactPostMutation({ onSuccess(_data, variables) { const reactions = getUpdatedReactions( post.reactions, variables.msg.icon, ); - setPost({ ...post, reactions }); }, + onError(err) { + console.error(err); + setToast({ + mode: "normal", + type: "error", + title: "Failed to react on Cosmos network", + message: err.message, + }); + }, }); - const cosmosReaction = async (emoji: string, walletAddress: string) => { + const [isLoading, setLoading] = useState(false); + + useEffect(() => { + setLoading(isReactLoading); + }, [isReactLoading]); + + const reactOnCosmos = async (emoji: string, walletAddress: string) => { const client = await signingSocialFeedClient({ networkId: post.networkId, walletAddress, @@ -61,12 +77,13 @@ export const useSocialReactions = ({ client, msg: { icon: emoji, - identifier: post.localIdentifier, + identifier: "post.localIdentifier", up: true, }, }); }; - const gnoReaction = async (emoji: string, rpcEndpoint: string) => { + + const reactOnGno = async (emoji: string, rpcEndpoint: string) => { const gnoNetwork = mustGetGnoNetwork(post.networkId); const vmCall = { caller: selectedWallet?.address || "", @@ -75,31 +92,48 @@ export const useSocialReactions = ({ func: "ReactPost", args: [TERITORI_FEED_ID, post.id.split("-")[1], emoji, "true"], }; - const txHash = await adenaDoContract( - post.networkId, - [{ type: AdenaDoContractMessageType.CALL, value: vmCall }], - { - gasWanted: 2_000_000, - }, - ); - const provider = new GnoJSONRPCProvider(rpcEndpoint); - // Wait for tx done - await provider.waitForTransaction(txHash); - const reactions = [...post.reactions]; - const currentReactionIdx = reactions.findIndex((r) => r.icon === emoji); - if (currentReactionIdx > -1) { - reactions[currentReactionIdx].count++; - } else { - reactions.push({ - icon: emoji, - count: 1, - ownState: true, - }); + try { + setLoading(true); + const txHash = await adenaDoContract( + post.networkId, + [{ type: AdenaDoContractMessageType.CALL, value: vmCall }], + { + gasWanted: 2_000_000, + }, + ); + const provider = new GnoJSONRPCProvider(rpcEndpoint); + // Wait for tx done + await provider.waitForTransaction(txHash); + const reactions = [...post.reactions]; + const currentReactionIdx = reactions.findIndex((r) => r.icon === emoji); + + if (currentReactionIdx > -1) { + reactions[currentReactionIdx].count++; + } else { + reactions.push({ + icon: emoji, + count: 1, + ownState: true, + }); + } + setPost({ ...post, reactions }); + } catch (err) { + console.error(err); + if (err instanceof Error) { + setToast({ + mode: "normal", + type: "error", + title: "Failed to react on Gno network", + message: err.message, + }); + } + } finally { + setLoading(false); } - setPost({ ...post, reactions }); }; - const handleReaction = async (emoji: string) => { + + const handleReact = async (emoji: string) => { const action = emoji === LIKE_EMOJI ? "Like" @@ -126,11 +160,11 @@ export const useSocialReactions = ({ } const network = getNetwork(post.networkId); if (network?.kind === NetworkKind.Gno) { - gnoReaction(emoji, network?.endpoint || ""); + reactOnGno(emoji, network?.endpoint || ""); } else { - cosmosReaction(emoji, selectedWallet.address); + reactOnCosmos(emoji, selectedWallet.address); } }; - return { handleReaction, isPostMutationLoading }; + return { handleReact, isReactLoading: isLoading }; }; diff --git a/packages/screens/Mini/Feed/components/PostActions.tsx b/packages/screens/Mini/Feed/components/PostActions.tsx index b14ef1f5b8..046184bb08 100644 --- a/packages/screens/Mini/Feed/components/PostActions.tsx +++ b/packages/screens/Mini/Feed/components/PostActions.tsx @@ -20,7 +20,7 @@ type CardFooterProps = { export function PostActions({ post, setPost }: CardFooterProps) { const wallet = useSelectedWallet(); - const { handleReaction, isPostMutationLoading } = useSocialReactions({ + const { handleReact, isReactLoading } = useSocialReactions({ post, setPost, }); @@ -28,7 +28,7 @@ export function PostActions({ post, setPost }: CardFooterProps) { const handleEmojiReactions = async (emoji: string) => { setLoading(true); - await handleReaction(emoji); + await handleReact(emoji); setLoading(false); }; @@ -53,10 +53,10 @@ export function PostActions({ post, setPost }: CardFooterProps) { > - {loading || isPostMutationLoading ? ( + {loading || isReactLoading ? ( ) : ( Date: Mon, 18 Nov 2024 13:04:33 -0500 Subject: [PATCH 2/8] chore(feed): Rename react hook --- .../components/socialFeed/SocialActions/DislikeButton.tsx | 4 ++-- packages/components/socialFeed/SocialActions/LikeButton.tsx | 4 ++-- .../components/socialFeed/SocialCard/SocialCardFooter.tsx | 4 ++-- .../hooks/feed/{useSocialReactions.ts => useReactToPost.ts} | 2 +- packages/screens/Mini/Feed/components/PostActions.tsx | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) rename packages/hooks/feed/{useSocialReactions.ts => useReactToPost.ts} (99%) diff --git a/packages/components/socialFeed/SocialActions/DislikeButton.tsx b/packages/components/socialFeed/SocialActions/DislikeButton.tsx index 54b4390cae..16155e6983 100644 --- a/packages/components/socialFeed/SocialActions/DislikeButton.tsx +++ b/packages/components/socialFeed/SocialActions/DislikeButton.tsx @@ -4,7 +4,7 @@ import { ActivityIndicator } from "react-native-paper"; import thumbDownSVG from "../../../../assets/icons/thumb-down.svg"; import { Post } from "../../../api/feed/v1/feed"; -import { useSocialReactions } from "../../../hooks/feed/useSocialReactions"; +import { useReactToPost } from "../../../hooks/feed/useReactToPost"; import { DISLIKE_EMOJI } from "../../../utils/social-feed"; import { neutral22, secondaryColor } from "../../../utils/style/colors"; import { fontSemibold13 } from "../../../utils/style/fonts"; @@ -17,7 +17,7 @@ export const DislikeButton: FC<{ post: Post; setPost: Dispatch>; }> = ({ post, setPost }) => { - const { handleReact, isReactLoading } = useSocialReactions({ + const { handleReact, isReactLoading } = useReactToPost({ post, setPost, }); diff --git a/packages/components/socialFeed/SocialActions/LikeButton.tsx b/packages/components/socialFeed/SocialActions/LikeButton.tsx index c52c717354..ceaedc909b 100644 --- a/packages/components/socialFeed/SocialActions/LikeButton.tsx +++ b/packages/components/socialFeed/SocialActions/LikeButton.tsx @@ -4,7 +4,7 @@ import { ActivityIndicator } from "react-native-paper"; import thumbUpSVG from "../../../../assets/icons/thumb-up.svg"; import { Post } from "../../../api/feed/v1/feed"; -import { useSocialReactions } from "../../../hooks/feed/useSocialReactions"; +import { useReactToPost } from "../../../hooks/feed/useReactToPost"; import { LIKE_EMOJI } from "../../../utils/social-feed"; import { neutral22, secondaryColor } from "../../../utils/style/colors"; import { fontSemibold13 } from "../../../utils/style/fonts"; @@ -17,7 +17,7 @@ export const LikeButton: FC<{ post: Post; setPost: Dispatch>; }> = ({ post, setPost }) => { - const { handleReact, isReactLoading } = useSocialReactions({ + const { handleReact, isReactLoading } = useReactToPost({ post, setPost, }); diff --git a/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx b/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx index e9a987b9f6..97424400fb 100644 --- a/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx +++ b/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx @@ -12,7 +12,7 @@ import { ShareButton } from "../SocialActions/ShareButton"; import { TipButton } from "../SocialActions/TipButton"; import { Post } from "@/api/feed/v1/feed"; -import { useSocialReactions } from "@/hooks/feed/useSocialReactions"; +import { useReactToPost } from "@/hooks/feed/useReactToPost"; import useSelectedWallet from "@/hooks/useSelectedWallet"; import { NetworkKind, getNetwork } from "@/networks"; @@ -34,7 +34,7 @@ export const SocialCardFooter: FC<{ }) => { const wallet = useSelectedWallet(); const postNetwork = getNetwork(post.networkId); - const { handleReact, isReactLoading } = useSocialReactions({ + const { handleReact, isReactLoading } = useReactToPost({ post, setPost, }); diff --git a/packages/hooks/feed/useSocialReactions.ts b/packages/hooks/feed/useReactToPost.ts similarity index 99% rename from packages/hooks/feed/useSocialReactions.ts rename to packages/hooks/feed/useReactToPost.ts index 204cb41e32..8c2e428cdf 100644 --- a/packages/hooks/feed/useSocialReactions.ts +++ b/packages/hooks/feed/useReactToPost.ts @@ -24,7 +24,7 @@ import { } from "@/utils/social-feed"; import { PostCategory } from "@/utils/types/feed"; -export const useSocialReactions = ({ +export const useReactToPost = ({ post, setPost, }: { diff --git a/packages/screens/Mini/Feed/components/PostActions.tsx b/packages/screens/Mini/Feed/components/PostActions.tsx index 046184bb08..8771470be9 100644 --- a/packages/screens/Mini/Feed/components/PostActions.tsx +++ b/packages/screens/Mini/Feed/components/PostActions.tsx @@ -10,7 +10,7 @@ import { Spinner } from "@/components/Spinner"; import { EmojiSelector } from "@/components/socialFeed/EmojiSelector"; import { TipButton } from "@/components/socialFeed/SocialActions/TipButton"; import { SpacerRow } from "@/components/spacer"; -import { useSocialReactions } from "@/hooks/feed/useSocialReactions"; +import { useReactToPost } from "@/hooks/feed/useReactToPost"; import { layout } from "@/utils/style/layout"; type CardFooterProps = { @@ -20,7 +20,7 @@ type CardFooterProps = { export function PostActions({ post, setPost }: CardFooterProps) { const wallet = useSelectedWallet(); - const { handleReact, isReactLoading } = useSocialReactions({ + const { handleReact, isReactLoading } = useReactToPost({ post, setPost, }); From 6fccbea5407eef20c6bcbba9996fa92bfc3431de Mon Sep 17 00:00:00 2001 From: WaDadidou Date: Mon, 18 Nov 2024 13:11:23 -0500 Subject: [PATCH 3/8] chore(feed): Rollback renaming hook --- .../components/socialFeed/SocialActions/DislikeButton.tsx | 4 ++-- packages/components/socialFeed/SocialActions/LikeButton.tsx | 4 ++-- .../components/socialFeed/SocialCard/SocialCardFooter.tsx | 4 ++-- .../hooks/feed/{useReactToPost.ts => useSocialReactions.ts} | 2 +- packages/screens/Mini/Feed/components/PostActions.tsx | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) rename packages/hooks/feed/{useReactToPost.ts => useSocialReactions.ts} (99%) diff --git a/packages/components/socialFeed/SocialActions/DislikeButton.tsx b/packages/components/socialFeed/SocialActions/DislikeButton.tsx index 16155e6983..54b4390cae 100644 --- a/packages/components/socialFeed/SocialActions/DislikeButton.tsx +++ b/packages/components/socialFeed/SocialActions/DislikeButton.tsx @@ -4,7 +4,7 @@ import { ActivityIndicator } from "react-native-paper"; import thumbDownSVG from "../../../../assets/icons/thumb-down.svg"; import { Post } from "../../../api/feed/v1/feed"; -import { useReactToPost } from "../../../hooks/feed/useReactToPost"; +import { useSocialReactions } from "../../../hooks/feed/useSocialReactions"; import { DISLIKE_EMOJI } from "../../../utils/social-feed"; import { neutral22, secondaryColor } from "../../../utils/style/colors"; import { fontSemibold13 } from "../../../utils/style/fonts"; @@ -17,7 +17,7 @@ export const DislikeButton: FC<{ post: Post; setPost: Dispatch>; }> = ({ post, setPost }) => { - const { handleReact, isReactLoading } = useReactToPost({ + const { handleReact, isReactLoading } = useSocialReactions({ post, setPost, }); diff --git a/packages/components/socialFeed/SocialActions/LikeButton.tsx b/packages/components/socialFeed/SocialActions/LikeButton.tsx index ceaedc909b..c52c717354 100644 --- a/packages/components/socialFeed/SocialActions/LikeButton.tsx +++ b/packages/components/socialFeed/SocialActions/LikeButton.tsx @@ -4,7 +4,7 @@ import { ActivityIndicator } from "react-native-paper"; import thumbUpSVG from "../../../../assets/icons/thumb-up.svg"; import { Post } from "../../../api/feed/v1/feed"; -import { useReactToPost } from "../../../hooks/feed/useReactToPost"; +import { useSocialReactions } from "../../../hooks/feed/useSocialReactions"; import { LIKE_EMOJI } from "../../../utils/social-feed"; import { neutral22, secondaryColor } from "../../../utils/style/colors"; import { fontSemibold13 } from "../../../utils/style/fonts"; @@ -17,7 +17,7 @@ export const LikeButton: FC<{ post: Post; setPost: Dispatch>; }> = ({ post, setPost }) => { - const { handleReact, isReactLoading } = useReactToPost({ + const { handleReact, isReactLoading } = useSocialReactions({ post, setPost, }); diff --git a/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx b/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx index 97424400fb..e9a987b9f6 100644 --- a/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx +++ b/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx @@ -12,7 +12,7 @@ import { ShareButton } from "../SocialActions/ShareButton"; import { TipButton } from "../SocialActions/TipButton"; import { Post } from "@/api/feed/v1/feed"; -import { useReactToPost } from "@/hooks/feed/useReactToPost"; +import { useSocialReactions } from "@/hooks/feed/useSocialReactions"; import useSelectedWallet from "@/hooks/useSelectedWallet"; import { NetworkKind, getNetwork } from "@/networks"; @@ -34,7 +34,7 @@ export const SocialCardFooter: FC<{ }) => { const wallet = useSelectedWallet(); const postNetwork = getNetwork(post.networkId); - const { handleReact, isReactLoading } = useReactToPost({ + const { handleReact, isReactLoading } = useSocialReactions({ post, setPost, }); diff --git a/packages/hooks/feed/useReactToPost.ts b/packages/hooks/feed/useSocialReactions.ts similarity index 99% rename from packages/hooks/feed/useReactToPost.ts rename to packages/hooks/feed/useSocialReactions.ts index 8c2e428cdf..204cb41e32 100644 --- a/packages/hooks/feed/useReactToPost.ts +++ b/packages/hooks/feed/useSocialReactions.ts @@ -24,7 +24,7 @@ import { } from "@/utils/social-feed"; import { PostCategory } from "@/utils/types/feed"; -export const useReactToPost = ({ +export const useSocialReactions = ({ post, setPost, }: { diff --git a/packages/screens/Mini/Feed/components/PostActions.tsx b/packages/screens/Mini/Feed/components/PostActions.tsx index 8771470be9..046184bb08 100644 --- a/packages/screens/Mini/Feed/components/PostActions.tsx +++ b/packages/screens/Mini/Feed/components/PostActions.tsx @@ -10,7 +10,7 @@ import { Spinner } from "@/components/Spinner"; import { EmojiSelector } from "@/components/socialFeed/EmojiSelector"; import { TipButton } from "@/components/socialFeed/SocialActions/TipButton"; import { SpacerRow } from "@/components/spacer"; -import { useReactToPost } from "@/hooks/feed/useReactToPost"; +import { useSocialReactions } from "@/hooks/feed/useSocialReactions"; import { layout } from "@/utils/style/layout"; type CardFooterProps = { @@ -20,7 +20,7 @@ type CardFooterProps = { export function PostActions({ post, setPost }: CardFooterProps) { const wallet = useSelectedWallet(); - const { handleReact, isReactLoading } = useReactToPost({ + const { handleReact, isReactLoading } = useSocialReactions({ post, setPost, }); From 3b40061bd52d1c0b3d57c967fffdd4b4dc581725 Mon Sep 17 00:00:00 2001 From: WaDadidou Date: Mon, 18 Nov 2024 13:11:54 -0500 Subject: [PATCH 4/8] chore(feed): remvoe console.log --- packages/components/socialFeed/NewsFeed/NewsFeed.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/components/socialFeed/NewsFeed/NewsFeed.tsx b/packages/components/socialFeed/NewsFeed/NewsFeed.tsx index bd57595d13..d37a4d73e3 100644 --- a/packages/components/socialFeed/NewsFeed/NewsFeed.tsx +++ b/packages/components/socialFeed/NewsFeed/NewsFeed.tsx @@ -171,11 +171,6 @@ export const NewsFeed: React.FC = ({ ); }, [mobileMode]); - console.log( - "==============", - posts.find((p) => p.id === "testori-caecb9c3-1a35-429b-be30-54c0578c8ec4"), - ); - const RenderItem = useCallback( (post: Post) => { // NOTE: if you edit this, make sure that this is not too CPU expensive From d9b30c8e9ab5f051c20dc27c71bef2be4ec4cc7f Mon Sep 17 00:00:00 2001 From: WaDadidou Date: Tue, 19 Nov 2024 14:43:18 -0500 Subject: [PATCH 5/8] chore(feed): Revert a refacto out of scope --- .../components/socialFeed/SocialActions/DislikeButton.tsx | 4 ++-- packages/components/socialFeed/SocialActions/LikeButton.tsx | 4 ++-- .../components/socialFeed/SocialCard/SocialCardFooter.tsx | 6 +++--- packages/hooks/feed/useSocialReactions.ts | 4 ++-- packages/screens/Mini/Feed/components/PostActions.tsx | 6 +++--- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/components/socialFeed/SocialActions/DislikeButton.tsx b/packages/components/socialFeed/SocialActions/DislikeButton.tsx index 54b4390cae..9891dac87a 100644 --- a/packages/components/socialFeed/SocialActions/DislikeButton.tsx +++ b/packages/components/socialFeed/SocialActions/DislikeButton.tsx @@ -17,7 +17,7 @@ export const DislikeButton: FC<{ post: Post; setPost: Dispatch>; }> = ({ post, setPost }) => { - const { handleReact, isReactLoading } = useSocialReactions({ + const { handleReaction, isReactLoading } = useSocialReactions({ post, setPost, }); @@ -26,7 +26,7 @@ export const DislikeButton: FC<{ return ; return ( handleReact(DISLIKE_EMOJI)} + onPress={() => handleReaction(DISLIKE_EMOJI)} style={{ flexDirection: "row", alignItems: "center", diff --git a/packages/components/socialFeed/SocialActions/LikeButton.tsx b/packages/components/socialFeed/SocialActions/LikeButton.tsx index c52c717354..af65dcc53b 100644 --- a/packages/components/socialFeed/SocialActions/LikeButton.tsx +++ b/packages/components/socialFeed/SocialActions/LikeButton.tsx @@ -17,7 +17,7 @@ export const LikeButton: FC<{ post: Post; setPost: Dispatch>; }> = ({ post, setPost }) => { - const { handleReact, isReactLoading } = useSocialReactions({ + const { handleReaction, isReactLoading } = useSocialReactions({ post, setPost, }); @@ -26,7 +26,7 @@ export const LikeButton: FC<{ return ; return ( handleReact(LIKE_EMOJI)} + onPress={() => handleReaction(LIKE_EMOJI)} style={{ flexDirection: "row", alignItems: "center", diff --git a/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx b/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx index e9a987b9f6..1e1894d044 100644 --- a/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx +++ b/packages/components/socialFeed/SocialCard/SocialCardFooter.tsx @@ -34,7 +34,7 @@ export const SocialCardFooter: FC<{ }) => { const wallet = useSelectedWallet(); const postNetwork = getNetwork(post.networkId); - const { handleReact, isReactLoading } = useSocialReactions({ + const { handleReaction, isReactLoading } = useSocialReactions({ post, setPost, }); @@ -44,7 +44,7 @@ export const SocialCardFooter: FC<{ @@ -58,7 +58,7 @@ export const SocialCardFooter: FC<{ }} > {isPostConsultation && handleReply && ( diff --git a/packages/hooks/feed/useSocialReactions.ts b/packages/hooks/feed/useSocialReactions.ts index 204cb41e32..c18510fb72 100644 --- a/packages/hooks/feed/useSocialReactions.ts +++ b/packages/hooks/feed/useSocialReactions.ts @@ -133,7 +133,7 @@ export const useSocialReactions = ({ } }; - const handleReact = async (emoji: string) => { + const handleReaction = async (emoji: string) => { const action = emoji === LIKE_EMOJI ? "Like" @@ -166,5 +166,5 @@ export const useSocialReactions = ({ } }; - return { handleReact, isReactLoading: isLoading }; + return { handleReaction, isReactLoading: isLoading }; }; diff --git a/packages/screens/Mini/Feed/components/PostActions.tsx b/packages/screens/Mini/Feed/components/PostActions.tsx index 046184bb08..df3f7f03ef 100644 --- a/packages/screens/Mini/Feed/components/PostActions.tsx +++ b/packages/screens/Mini/Feed/components/PostActions.tsx @@ -20,7 +20,7 @@ type CardFooterProps = { export function PostActions({ post, setPost }: CardFooterProps) { const wallet = useSelectedWallet(); - const { handleReact, isReactLoading } = useSocialReactions({ + const { handleReaction, isReactLoading } = useSocialReactions({ post, setPost, }); @@ -28,7 +28,7 @@ export function PostActions({ post, setPost }: CardFooterProps) { const handleEmojiReactions = async (emoji: string) => { setLoading(true); - await handleReact(emoji); + await handleReaction(emoji); setLoading(false); }; @@ -53,7 +53,7 @@ export function PostActions({ post, setPost }: CardFooterProps) { > {loading || isReactLoading ? ( From 62b79260344a01cda9c6be3b16c562e6eb600f17 Mon Sep 17 00:00:00 2001 From: WaDadidou Date: Tue, 19 Nov 2024 14:45:36 -0500 Subject: [PATCH 6/8] chore(feed): Revert a refacto out of scope --- .../components/socialFeed/SocialActions/DislikeButton.tsx | 4 ++-- .../components/socialFeed/SocialActions/LikeButton.tsx | 4 ++-- .../components/socialFeed/SocialCard/SocialCardFooter.tsx | 6 +++--- packages/hooks/feed/useSocialReactions.ts | 8 ++++---- packages/screens/Mini/Feed/components/PostActions.tsx | 4 ++-- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/components/socialFeed/SocialActions/DislikeButton.tsx b/packages/components/socialFeed/SocialActions/DislikeButton.tsx index 9891dac87a..ab2fced798 100644 --- a/packages/components/socialFeed/SocialActions/DislikeButton.tsx +++ b/packages/components/socialFeed/SocialActions/DislikeButton.tsx @@ -17,12 +17,12 @@ export const DislikeButton: FC<{ post: Post; setPost: Dispatch>; }> = ({ post, setPost }) => { - const { handleReaction, isReactLoading } = useSocialReactions({ + const { handleReaction, isPostMutationLoading } = useSocialReactions({ post, setPost, }); - if (isReactLoading) + if (isPostMutationLoading) return ; return ( >; }> = ({ post, setPost }) => { - const { handleReaction, isReactLoading } = useSocialReactions({ + const { handleReaction, isPostMutationLoading } = useSocialReactions({ post, setPost, }); - if (isReactLoading) + if (isPostMutationLoading) return ; return ( { const wallet = useSelectedWallet(); const postNetwork = getNetwork(post.networkId); - const { handleReaction, isReactLoading } = useSocialReactions({ + const { handleReaction, isPostMutationLoading } = useSocialReactions({ post, setPost, }); @@ -45,7 +45,7 @@ export const SocialCardFooter: FC<{ nbShown={nbReactionsShown(cardWidth)} reactions={post.reactions} onPressReaction={handleReaction} - isLoading={isReactLoading} + isLoading={isPostMutationLoading} /> @@ -59,7 +59,7 @@ export const SocialCardFooter: FC<{ > {isPostConsultation && handleReply && ( <> diff --git a/packages/hooks/feed/useSocialReactions.ts b/packages/hooks/feed/useSocialReactions.ts index c18510fb72..78a4d1ea73 100644 --- a/packages/hooks/feed/useSocialReactions.ts +++ b/packages/hooks/feed/useSocialReactions.ts @@ -42,7 +42,7 @@ export const useSocialReactions = ({ userId, postCategory, ); - const { mutate: postMutate, isLoading: isReactLoading } = + const { mutate: postMutate, isLoading: isPostMutationLoading } = useTeritoriSocialFeedReactPostMutation({ onSuccess(_data, variables) { const reactions = getUpdatedReactions( @@ -64,8 +64,8 @@ export const useSocialReactions = ({ const [isLoading, setLoading] = useState(false); useEffect(() => { - setLoading(isReactLoading); - }, [isReactLoading]); + setLoading(isPostMutationLoading); + }, [isPostMutationLoading]); const reactOnCosmos = async (emoji: string, walletAddress: string) => { const client = await signingSocialFeedClient({ @@ -166,5 +166,5 @@ export const useSocialReactions = ({ } }; - return { handleReaction, isReactLoading: isLoading }; + return { handleReaction, isPostMutationLoading: isLoading }; }; diff --git a/packages/screens/Mini/Feed/components/PostActions.tsx b/packages/screens/Mini/Feed/components/PostActions.tsx index df3f7f03ef..b14ef1f5b8 100644 --- a/packages/screens/Mini/Feed/components/PostActions.tsx +++ b/packages/screens/Mini/Feed/components/PostActions.tsx @@ -20,7 +20,7 @@ type CardFooterProps = { export function PostActions({ post, setPost }: CardFooterProps) { const wallet = useSelectedWallet(); - const { handleReaction, isReactLoading } = useSocialReactions({ + const { handleReaction, isPostMutationLoading } = useSocialReactions({ post, setPost, }); @@ -56,7 +56,7 @@ export function PostActions({ post, setPost }: CardFooterProps) { onPressReaction={handleReaction} /> - {loading || isReactLoading ? ( + {loading || isPostMutationLoading ? ( ) : ( Date: Wed, 20 Nov 2024 14:15:51 -0500 Subject: [PATCH 7/8] chore(feed): remove out of scope code, FIX BIG MISTAKE in postMutate identifier --- packages/hooks/feed/useSocialReactions.ts | 73 ++++++++--------------- 1 file changed, 25 insertions(+), 48 deletions(-) diff --git a/packages/hooks/feed/useSocialReactions.ts b/packages/hooks/feed/useSocialReactions.ts index 78a4d1ea73..9d40df5b38 100644 --- a/packages/hooks/feed/useSocialReactions.ts +++ b/packages/hooks/feed/useSocialReactions.ts @@ -6,7 +6,6 @@ import useSelectedWallet from "../useSelectedWallet"; import { Post } from "@/api/feed/v1/feed"; import { signingSocialFeedClient } from "@/client-creators/socialFeedClient"; -import { useFeedbacks } from "@/context/FeedbacksProvider"; import { useWalletControl } from "@/context/WalletControlProvider"; import { useTeritoriSocialFeedReactPostMutation } from "@/contracts-clients/teritori-social-feed/TeritoriSocialFeed.react-query"; import { @@ -32,7 +31,6 @@ export const useSocialReactions = ({ setPost: Dispatch>; }) => { const selectedWallet = useSelectedWallet(); - const { setToast } = useFeedbacks(); const userId = selectedWallet?.userId; const { showNotEnoughFundsModal, showConnectWalletModal } = useWalletControl(); @@ -51,15 +49,6 @@ export const useSocialReactions = ({ ); setPost({ ...post, reactions }); }, - onError(err) { - console.error(err); - setToast({ - mode: "normal", - type: "error", - title: "Failed to react on Cosmos network", - message: err.message, - }); - }, }); const [isLoading, setLoading] = useState(false); @@ -77,7 +66,7 @@ export const useSocialReactions = ({ client, msg: { icon: emoji, - identifier: "post.localIdentifier", + identifier: post.localIdentifier, up: true, }, }); @@ -93,44 +82,32 @@ export const useSocialReactions = ({ args: [TERITORI_FEED_ID, post.id.split("-")[1], emoji, "true"], }; - try { - setLoading(true); - const txHash = await adenaDoContract( - post.networkId, - [{ type: AdenaDoContractMessageType.CALL, value: vmCall }], - { - gasWanted: 2_000_000, - }, - ); - const provider = new GnoJSONRPCProvider(rpcEndpoint); - // Wait for tx done - await provider.waitForTransaction(txHash); - const reactions = [...post.reactions]; - const currentReactionIdx = reactions.findIndex((r) => r.icon === emoji); + setLoading(true); + const txHash = await adenaDoContract( + post.networkId, + [{ type: AdenaDoContractMessageType.CALL, value: vmCall }], + { + gasWanted: 2_000_000, + }, + ); + const provider = new GnoJSONRPCProvider(rpcEndpoint); + // Wait for tx done + await provider.waitForTransaction(txHash); + const reactions = [...post.reactions]; + const currentReactionIdx = reactions.findIndex((r) => r.icon === emoji); - if (currentReactionIdx > -1) { - reactions[currentReactionIdx].count++; - } else { - reactions.push({ - icon: emoji, - count: 1, - ownState: true, - }); - } - setPost({ ...post, reactions }); - } catch (err) { - console.error(err); - if (err instanceof Error) { - setToast({ - mode: "normal", - type: "error", - title: "Failed to react on Gno network", - message: err.message, - }); - } - } finally { - setLoading(false); + if (currentReactionIdx > -1) { + reactions[currentReactionIdx].count++; + } else { + reactions.push({ + icon: emoji, + count: 1, + ownState: true, + }); } + setPost({ ...post, reactions }); + + setLoading(false); }; const handleReaction = async (emoji: string) => { From 269f23fa12b9016eb304b9c97d64bb8a322807ff Mon Sep 17 00:00:00 2001 From: WaDadidou Date: Thu, 21 Nov 2024 11:43:31 -0500 Subject: [PATCH 8/8] fix(feed): Add try catch when react to post on gno --- packages/hooks/feed/useSocialReactions.ts | 52 ++++++++++++----------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/packages/hooks/feed/useSocialReactions.ts b/packages/hooks/feed/useSocialReactions.ts index 9d40df5b38..11e2642899 100644 --- a/packages/hooks/feed/useSocialReactions.ts +++ b/packages/hooks/feed/useSocialReactions.ts @@ -82,32 +82,36 @@ export const useSocialReactions = ({ args: [TERITORI_FEED_ID, post.id.split("-")[1], emoji, "true"], }; - setLoading(true); - const txHash = await adenaDoContract( - post.networkId, - [{ type: AdenaDoContractMessageType.CALL, value: vmCall }], - { - gasWanted: 2_000_000, - }, - ); - const provider = new GnoJSONRPCProvider(rpcEndpoint); - // Wait for tx done - await provider.waitForTransaction(txHash); - const reactions = [...post.reactions]; - const currentReactionIdx = reactions.findIndex((r) => r.icon === emoji); + try { + setLoading(true); + const txHash = await adenaDoContract( + post.networkId, + [{ type: AdenaDoContractMessageType.CALL, value: vmCall }], + { + gasWanted: 2_000_000, + }, + ); + const provider = new GnoJSONRPCProvider(rpcEndpoint); + // Wait for tx done + await provider.waitForTransaction(txHash); + const reactions = [...post.reactions]; + const currentReactionIdx = reactions.findIndex((r) => r.icon === emoji); - if (currentReactionIdx > -1) { - reactions[currentReactionIdx].count++; - } else { - reactions.push({ - icon: emoji, - count: 1, - ownState: true, - }); + if (currentReactionIdx > -1) { + reactions[currentReactionIdx].count++; + } else { + reactions.push({ + icon: emoji, + count: 1, + ownState: true, + }); + } + setPost({ ...post, reactions }); + } catch (err) { + console.error(err); + } finally { + setLoading(false); } - setPost({ ...post, reactions }); - - setLoading(false); }; const handleReaction = async (emoji: string) => {