pl-fe: add some feedback on deleted post, remove unused feature

Signed-off-by: mkljczk <git@mkljczk.pl>

packages/pl-fe/src/actions/statuses.ts

@@ -171,13 +171,7 @@ const unmuteStatus = (statusId: string) =>
   };
 
 const toggleMuteStatus = (status: Pick<Status, 'id' | 'muted'>) =>
-  (dispatch: AppDispatch) => {
+  status.muted ? unmuteStatus(status.id) : muteStatus(status.id);
-    if (status.muted) {
-      dispatch(unmuteStatus(status.id));
-    } else {
-      dispatch(muteStatus(status.id));
-    }
-  };
 
 // let TRANSLATIONS_QUEUE: Set<string> = new Set();
 // let TRANSLATIONS_TIMEOUT: NodeJS.Timeout | null = null;

packages/pl-fe/src/components/account.tsx

@@ -85,7 +85,6 @@ interface IAccount {
   /** Override other actions for specificity like mute/unmute. */
   actionType?: 'muting' | 'blocking' | 'follow_request' | 'biting';
   avatarSize?: number;
-  hidden?: boolean;
   hideActions?: boolean;
   id?: string;
   onActionClick?: (account: AccountSchema) => void;
@@ -115,7 +114,6 @@ const Account = ({
   actionTitle,
   actionAlignment = 'center',
   avatarSize = 42,
-  hidden = false,
   hideActions = false,
   onActionClick,
   showAccountHoverCard = true,
@@ -181,15 +179,6 @@ const Account = ({
     return null;
   }
 
-  if (hidden) {
-    return (
-      <>
-        {account.display_name}
-        {account.username}
-      </>
-    );
-  }
-
   if (withDate) timestamp = account.created_at;
 
   const LinkEl: any = withLinkToProfile ? Link : 'div';

packages/pl-fe/src/components/status.tsx

@@ -29,6 +29,7 @@ import StatusLanguagePicker from './status-language-picker';
 import StatusReactionsBar from './status-reactions-bar';
 import StatusReplyMentions from './status-reply-mentions';
 import StatusInfo from './statuses/status-info';
+import Tombstone from './tombstone';
 
 const messages = defineMessages({
   reblogged_by: { id: 'status.reblogged_by', defaultMessage: '{name} reposted' },
@@ -40,7 +41,6 @@ interface IStatus {
   status: SelectedStatus;
   onClick?: () => void;
   muted?: boolean;
-  hidden?: boolean;
   unread?: boolean;
   onMoveUp?: (statusId: string, featured?: boolean) => void;
   onMoveDown?: (statusId: string, featured?: boolean) => void;
@@ -65,7 +65,6 @@ const Status: React.FC<IStatus> = (props) => {
     onMoveUp,
     onMoveDown,
     muted,
-    hidden,
     featured,
     unread,
     hideActionBar,
@@ -95,7 +94,7 @@ const Status: React.FC<IStatus> = (props) => {
 
   // Track height changes we know about to compensate scrolling.
   useEffect(() => {
-    didShowCard.current = Boolean(!muted && !hidden && status?.card);
+    didShowCard.current = Boolean(!muted && status?.card);
   }, []);
 
   const handleClick = (e?: React.MouseEvent) => {
@@ -299,16 +298,13 @@ const Status: React.FC<IStatus> = (props) => {
 
   if (!status) return null;
 
-  if (hidden) {
+  if (status.deleted) return (
-    return (
+    <Tombstone
-      <div ref={node}>
+      id={status.id}
-        <>
+      onMoveUp={onMoveUp}
-          {actualStatus.account.display_name || actualStatus.account.username}
+      onMoveDown={onMoveDown}
-          {actualStatus.content}
+    />
-        </>
+  );
-      </div>
-    );
-  }
 
   if (filtered && status.showFiltered !== false) {
     const minHandlers = muted ? undefined : {

packages/pl-fe/src/features/notifications/components/notification.tsx

@@ -181,7 +181,6 @@ const buildMessage = (
 const avatarSize = 48;
 
 interface INotification {
-  hidden?: boolean;
   notification: NotificationGroup;
   onMoveUp?: (notificationId: string) => void;
   onMoveDown?: (notificationId: string) => void;
@@ -196,7 +195,7 @@ const getNotificationStatus = (n: Pick<NotificationGroup, 'type'> & ({ status: S
 };
 
 const Notification: React.FC<INotification> = (props) => {
-  const { hidden = false, onMoveUp, onMoveDown } = props;
+  const { onMoveUp, onMoveDown } = props;
 
   const dispatch = useAppDispatch();
 
@@ -330,7 +329,6 @@ const Notification: React.FC<INotification> = (props) => {
         return account && typeof account === 'object' ? (
           <AccountContainer
             id={account.id}
-            hidden={hidden}
             avatarSize={avatarSize}
             actionType='follow_request'
             withRelationship
@@ -340,7 +338,6 @@ const Notification: React.FC<INotification> = (props) => {
         return account && typeof account === 'object' ? (
           <AccountContainer
             id={account.id}
-            hidden={hidden}
             avatarSize={avatarSize}
             actionType='biting'
             withRelationship
@@ -350,7 +347,6 @@ const Notification: React.FC<INotification> = (props) => {
         return account && typeof account === 'object' && notification.target && typeof notification.target === 'object' ? (
           <AccountContainer
             id={notification.target_id}
-            hidden={hidden}
             avatarSize={avatarSize}
             withRelationship
           />
@@ -368,7 +364,6 @@ const Notification: React.FC<INotification> = (props) => {
         return status && typeof status === 'object' ? (
           <StatusContainer
             id={status.id}
-            hidden={hidden}
             onMoveDown={handleMoveDown}
             onMoveUp={handleMoveUp}
             avatarSize={avatarSize}

packages/pl-fe/src/features/status/components/thread-status.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 
+import Tombstone from 'pl-fe/components/tombstone';
 import StatusContainer from 'pl-fe/containers/status-container';
 import PlaceholderStatus from 'pl-fe/features/placeholder/components/placeholder-status';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
@@ -20,6 +21,20 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
   const replyToId = useAppSelector(state => state.contexts.inReplyTos[id]);
   const replyCount = useAppSelector(state => (state.contexts.replies[id] || []).length);
   const isLoaded = useAppSelector(state => Boolean(state.statuses[id]));
+  const isDeleted = useAppSelector(state => Boolean(state.statuses[id]?.deleted));
+
+  if (isDeleted) {
+    return (
+      <div className='py-4 pb-8'>
+        <Tombstone
+          key={id}
+          id={id}
+          onMoveUp={props.onMoveUp}
+          onMoveDown={props.onMoveDown}
+        />
+      </div>
+    );
+  }
 
   const renderConnector = (): JSX.Element | null => {
     const isConnectedTop = replyToId && replyToId !== focusedStatusId;

packages/pl-fe/src/normalizers/status.ts

@@ -115,6 +115,7 @@ const normalizeStatus = (status: BaseStatus & {
     group_id: status.group?.id || null,
     expectsCard: false,
     showFiltered: null as null | boolean,
+    deleted: false,
     ...status,
     quote_id: status.quote?.id || status.quote_id || null,
     account: normalizeAccount(status.account),

packages/pl-fe/src/reducers/statuses.ts

@@ -40,6 +40,7 @@ import {
   STATUS_UNFILTER,
   STATUS_UNMUTE_SUCCESS,
   type StatusesAction,
+  STATUS_DELETE_SUCCESS,
 } from '../actions/statuses';
 import { TIMELINE_DELETE, type TimelineAction } from '../actions/timelines';
 
@@ -281,6 +282,13 @@ const statuses = (state = initialState, action: EmojiReactsAction | EventsAction
           status.event.join_state = action.previousState;
         }
       });
+    case STATUS_DELETE_SUCCESS:
+      return create(state, (draft) => {
+        const status = draft[action.statusId];
+        if (status) {
+          status.deleted = true;
+        }
+      });
     default:
       return state;
   }