fix: un mirror

apps/web/src/components/Publication/Actions/Share/Mirror.tsx

@@ -51,10 +51,8 @@ const Mirror: FC<MirrorProps> = ({ 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<MirrorProps> = ({ 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<MirrorProps> = ({ isLoading, publication, setIsLoading }) => {
     }
 
     setIsLoading(false);
-    setHasMirrored(true);
     setShares(shares + 1);
     updateCache();
     toast.success('Post has been mirrored!');
@@ -272,7 +261,7 @@ const Mirror: FC<MirrorProps> = ({ isLoading, publication, setIsLoading }) => {
     >
       <div className="flex items-center space-x-2">
         <ArrowsRightLeftIcon className="h-4 w-4" />
-        <div>{hasMirrored ? 'Mirrored' : 'Mirror'}</div>
+        <div>{hasMirrored ? 'Mirror again' : 'Mirror'}</div>
       </div>
     </Menu.Item>
   );

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<MirrorProps> = ({
+  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 (
+    <Menu.Item
+      as="div"
+      className={({ active }) =>
+        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}
+    >
+      <div className="flex items-center space-x-2">
+        <ArrowsRightLeftIcon className="h-4 w-4" />
+        <div>Undo mirror</div>
+      </div>
+    </Menu.Item>
+  );
+};
+
+export default UndoMirror;

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<PublicationMenuProps> = ({ publication, showCount }) => {
             <Spinner
               className="mr-0.5"
               size="xs"
-              variant={hasShared ? 'success' : 'primary'}
+              variant={hasShared ? 'danger' : 'primary'}
             />
           ) : (
             <Tooltip
@@ -76,10 +77,18 @@ const ShareMenu: FC<PublicationMenuProps> = ({ publication, showCount }) => {
           >
             <Mirror
               isLoading={isLoading}
-              publication={publication}
+              publication={targetPublication}
               setIsLoading={setIsLoading}
             />
-            <Quote publication={publication} />
+            {targetPublication.operations.hasMirrored &&
+              targetPublication.id !== publication.id && (
+                <UndoMirror
+                  isLoading={isLoading}
+                  publication={publication}
+                  setIsLoading={setIsLoading}
+                />
+              )}
+            <Quote publication={targetPublication} />
           </Menu.Items>
         </MenuTransition>
       </Menu>

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' }