diff --git a/src/hooks/UseMutationWithReset.tsx b/src/hooks/UseMutationWithReset.tsx new file mode 100644 index 00000000..9116df68 --- /dev/null +++ b/src/hooks/UseMutationWithReset.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; + +export const useMutationResultWithReset = ( + data: T | undefined +): [T | undefined, () => void] => { + const current = React.useRef(data); + const latest = React.useRef(data); + const [, setState] = React.useState(0); + const clearCurrentData = () => { + current.current = undefined; + setState(state => state + 1); + }; + + if (data !== latest.current) { + current.current = data; + latest.current = data; + } + + return [current.current, clearCurrentData]; +}; diff --git a/src/views/chat/ChatBubble.tsx b/src/views/chat/ChatBubble.tsx index f08e077c..e43091d1 100644 --- a/src/views/chat/ChatBubble.tsx +++ b/src/views/chat/ChatBubble.tsx @@ -5,6 +5,7 @@ import { Circle } from 'react-feather'; import ScaleLoader from 'react-spinners/ScaleLoader'; import { useAccountState } from 'src/context/AccountContext'; import { useSendMessageMutation } from 'src/graphql/mutations/__generated__/sendMessage.generated'; +import { useMutationResultWithReset } from 'src/hooks/UseMutationWithReset'; import { chatBubbleColor, chatSentBubbleColor, @@ -34,9 +35,10 @@ const SendButton = ({ amount }: SendButtonProps) => { const dispatch = useChatDispatch(); const { account } = useAccountState(); - const [sendMessage, { loading, data }] = useSendMessageMutation({ + const [sendMessage, { loading, data: _data }] = useSendMessageMutation({ onError: error => toast.error(getErrorContent(error)), }); + const [data, resetMutationResult] = useMutationResultWithReset(_data); React.useEffect(() => { if (!loading && data && data.sendMessage >= 0) { @@ -54,8 +56,9 @@ const SendButton = ({ amount }: SendButtonProps) => { userId: account.id, sender, }); + resetMutationResult(); } - }, [loading, data, amount, dispatch, sender, account]); + }, [loading, data, amount, dispatch, sender, account, resetMutationResult]); return ( toast.error(getErrorContent(error)), }); + const [data, resetMutationResult] = useMutationResultWithReset(_data); const [formattedMessage, contentType, tokens, canSend] = handleMessage( message @@ -51,6 +53,7 @@ export const ChatInput = ({ userId: account.id, sender: customSender || sender, }); + resetMutationResult(); } }, [ loading, @@ -62,6 +65,7 @@ export const ChatInput = ({ tokens, account, dispatch, + resetMutationResult, ]); return (