diff --git a/apps/web/src/components/Publication/Actions/Share/Mirror.tsx b/apps/web/src/components/Publication/Actions/Share/Mirror.tsx index 6c163d1d47fa..c941af5eb34e 100644 --- a/apps/web/src/components/Publication/Actions/Share/Mirror.tsx +++ b/apps/web/src/components/Publication/Actions/Share/Mirror.tsx @@ -51,10 +51,8 @@ const Mirror: FC = ({ isLoading, publication, setIsLoading }) => { const targetPublication = isMirrorPublication(publication) ? publication?.mirrorOn : publication; + const { hasMirrored } = targetPublication.operations; - const [hasMirrored, setHasMirrored] = useState( - targetPublication.operations.hasMirrored - ); const [shares, setShares] = useState( targetPublication.stats.mirrors + targetPublication.stats.quotes ); @@ -67,15 +65,7 @@ const Mirror: FC = ({ isLoading, publication, setIsLoading }) => { const updateCache = () => { cache.modify({ - fields: { - operations: (existingValue) => { - return { ...existingValue, hasMirrored: !hasMirrored }; - } - }, - id: cache.identify(targetPublication) - }); - cache.modify({ - fields: { mirrors: () => (hasMirrored ? shares - 1 : shares + 1) }, + fields: { mirrors: () => shares + 1 }, id: cache.identify(targetPublication.stats) }); }; @@ -100,7 +90,6 @@ const Mirror: FC = ({ isLoading, publication, setIsLoading }) => { } setIsLoading(false); - setHasMirrored(true); setShares(shares + 1); updateCache(); toast.success('Post has been mirrored!'); @@ -272,7 +261,7 @@ const Mirror: FC = ({ isLoading, publication, setIsLoading }) => { >
-
{hasMirrored ? 'Mirrored' : 'Mirror'}
+
{hasMirrored ? 'Mirror again' : 'Mirror'}
); diff --git a/apps/web/src/components/Publication/Actions/Share/UndoMirror.tsx b/apps/web/src/components/Publication/Actions/Share/UndoMirror.tsx new file mode 100644 index 000000000000..b20cc47cf20c --- /dev/null +++ b/apps/web/src/components/Publication/Actions/Share/UndoMirror.tsx @@ -0,0 +1,81 @@ +import type { AnyPublication } from '@hey/lens'; +import type { FC } from 'react'; + +import { Menu } from '@headlessui/react'; +import { ArrowsRightLeftIcon } from '@heroicons/react/24/outline'; +import { Errors } from '@hey/data/errors'; +import { PUBLICATION } from '@hey/data/tracking'; +import { useHidePublicationMutation } from '@hey/lens'; +import cn from '@hey/ui/cn'; +import errorToast from '@lib/errorToast'; +import { Leafwatch } from '@lib/leafwatch'; +import { toast } from 'react-hot-toast'; +import useProfileStore from 'src/store/persisted/useProfileStore'; + +interface MirrorProps { + isLoading: boolean; + publication: AnyPublication; + setIsLoading: (isLoading: boolean) => void; +} + +const UndoMirror: FC = ({ + isLoading, + publication, + setIsLoading +}) => { + const currentProfile = useProfileStore((state) => state.currentProfile); + + const onError = (error?: any) => { + setIsLoading(false); + errorToast(error); + }; + + const [hidePost] = useHidePublicationMutation({ + onCompleted: () => { + Leafwatch.track(PUBLICATION.UNDO_MIRROR); + toast.success('Undone mirror successfully'); + }, + update: (cache) => { + cache.evict({ + id: `${publication?.__typename}:${publication?.id}` + }); + } + }); + + const undoMirror = async () => { + if (!currentProfile) { + return toast.error(Errors.SignWallet); + } + + try { + setIsLoading(true); + + return await hidePost({ + variables: { request: { for: publication.id } } + }); + } catch (error) { + onError(error); + } + }; + + return ( + + cn( + { 'dropdown-active': active }, + 'm-2 block cursor-pointer rounded-lg px-4 py-1.5 text-sm text-red-500' + ) + } + disabled={isLoading} + onClick={undoMirror} + > +
+ +
Undo mirror
+
+
+ ); +}; + +export default UndoMirror; diff --git a/apps/web/src/components/Publication/Actions/Share/index.tsx b/apps/web/src/components/Publication/Actions/Share/index.tsx index 310e43b839f7..aa35aa709832 100644 --- a/apps/web/src/components/Publication/Actions/Share/index.tsx +++ b/apps/web/src/components/Publication/Actions/Share/index.tsx @@ -15,6 +15,7 @@ import { useState } from 'react'; import Mirror from './Mirror'; import Quote from './Quote'; +import UndoMirror from './UndoMirror'; interface PublicationMenuProps { publication: AnyPublication; @@ -53,7 +54,7 @@ const ShareMenu: FC = ({ publication, showCount }) => { ) : ( = ({ publication, showCount }) => { > - + {targetPublication.operations.hasMirrored && + targetPublication.id !== publication.id && ( + + )} + diff --git a/packages/data/tracking.ts b/packages/data/tracking.ts index 58489e0cfe65..00eca6d4ced1 100644 --- a/packages/data/tracking.ts +++ b/packages/data/tracking.ts @@ -82,6 +82,7 @@ export const PUBLICATION = { TOGGLE_BOOKMARK: 'Toggle publication bookmark', TOGGLE_NOT_INTERESTED: 'Toggle publication not interested', TRANSLATE: 'Translate publication', + UNDO_MIRROR: 'Undo mirror publication', UNLIKE: 'Unlike publication', WIDGET: { POLL: { VOTE: 'Vote on poll' }