10890990780

Committed 16 Sep 2024 07:49PM UTC coverage: 13.685% (-0.02%) from 13.709%

Build # 10890990780

Build Type

Pull #9232

github

Committed by

web-flow

Commit Message

Merge aaa14b6d8 into 81f186948

Pull Request Pull Request #9232: Refactors delete comment

Run Details

3028 of 20564 branches covered (14.72%)

Branch coverage included in aggregate %.

31 of 38 new or added lines in 5 files covered. (81.58%)

1 existing line in 1 file now uncovered.

3956 of 30469 relevant lines covered (12.98%)

3.93 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/commonwealth/client/scripts/views/pages/discussions/CommentTree/CommentTree.tsx

import { ContentType } from '@hicommonwealth/shared';
import { buildUpdateCommentInput } from 'client/scripts/state/api/comments/editComment';
import { useAuthModalStore } from 'client/scripts/state/ui/modals';
import clsx from 'clsx';
import { SessionKeyError } from 'controllers/server/sessions';
import { GetThreadActionTooltipTextResponse } from 'helpers/threads';
import { CommentsFeaturedFilterTypes } from 'models/types';
import type { DeltaStatic } from 'quill';
import React, { useEffect, useRef, useState } from 'react';
import app from 'state';
import {
  useDeleteCommentMutation,
  useEditCommentMutation,
  useFetchCommentsQuery,
  useToggleCommentSpamStatusMutation,
} from 'state/api/comments';
import useUserStore from 'state/ui/user';
import { CreateComment } from 'views/components/Comments/CreateComment';
import {
  deserializeDelta,
  serializeDelta,
} from 'views/components/react_quill_editor/utils';
import { openConfirmation } from 'views/modals/confirmation_modal';
import { notifyError } from '../../../../controllers/app/notifications';
import type { Comment as CommentType } from '../../../../models/Comment';
import Thread from '../../../../models/Thread';
import Permissions from '../../../../utils/Permissions';
import { CommentCard } from '../CommentCard';
import { clearEditingLocalStorage } from '../CommentTree/helpers';
import './CommentTree.scss';
import { jumpHighlightComment } from './helpers';
import usePrepareCommentsList from './usePrepareCommentsList';

type CommentsTreeAttrs = {
  comments: Array<CommentType<any>>;
  thread: Thread;
  setIsGloballyEditing?: (status: boolean) => void;
  includeSpams: boolean;
  isReplying: boolean;
  setIsReplying: (status: boolean) => void;
  parentCommentId: number;
  setParentCommentId: (id: number) => void;
  fromDiscordBot?: boolean;
  canReact?: boolean;
  canReply?: boolean;
  canComment: boolean;
  commentSortType: CommentsFeaturedFilterTypes;
  disabledActionsTooltipText?: GetThreadActionTooltipTextResponse;
};

export const CommentTree = ({
  comments,
  thread,
  setIsGloballyEditing,
  includeSpams,
  fromDiscordBot,
  isReplying,
  setIsReplying,
  parentCommentId,
  setParentCommentId,
  canReact = true,
  canReply = true,
  canComment,
  commentSortType,
  disabledActionsTooltipText,
}: CommentsTreeAttrs) => {
  const urlParams = new URLSearchParams(location.search);
  const focusCommentsParam = urlParams.get('focusComments') === 'true';

  const user = useUserStore();
  const { checkForSessionKeyRevalidationErrors } = useAuthModalStore();

  useEffect(() => {
    let timeout;

    if (focusCommentsParam) {
      timeout = setTimeout(() => {
        const ele = document.getElementsByClassName('CommentsTree')[0];
        ele.scrollIntoView({
          behavior: 'smooth',
          block: 'start',
        });
      }, 100);
    }

    return () => {
      timeout !== undefined && clearTimeout(timeout);
    };
    // we only want to run this on first mount
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const [highlightedComment, setHighlightedComment] = useState(false);

  const communityId = app.activeChainId() || '';

  const { data: allComments = [] } = useFetchCommentsQuery({
    communityId,
    threadId: parseInt(`${thread.id}`),
    apiEnabled: !!communityId,
  });

  const { mutateAsync: deleteComment } = useDeleteCommentMutation({
    communityId,
    threadId: thread.id,
    existingNumberOfComments: thread.numberOfComments,
  });

  const { mutateAsync: editComment } = useEditCommentMutation({
    communityId,
    threadId: thread.id,
  });

  const { mutateAsync: toggleCommentSpamStatus } =
    useToggleCommentSpamStatusMutation({
      communityId,
      threadId: thread.id,
    });

  const isAdmin = Permissions.isSiteAdmin() || Permissions.isCommunityAdmin();

  const [edits, setEdits] = useState<{
    [commentId: number]: {
      isEditing?: boolean;
      editDraft?: string;
      isSavingEdit?: boolean;
      contentDelta?: DeltaStatic;
    };
  }>();

  const isAdminOrMod =
    Permissions.isSiteAdmin() ||
    Permissions.isCommunityAdmin() ||
    Permissions.isCommunityModerator();

  const isLocked = !!(thread instanceof Thread && thread.readOnly);

  useEffect(() => {
    if (comments?.length > 0 && !highlightedComment) {
      setHighlightedComment(true);

      const commentId = window.location.search.startsWith('?comment=')
        ? window.location.search.replace('?comment=', '')
        : null;

      if (commentId) jumpHighlightComment(Number(commentId));
    }
  }, [comments?.length, highlightedComment]);

  const commentsList = usePrepareCommentsList({
    levelZeroComments: comments,
    allComments,
    threadId: thread.id,
    includeSpams,
    commentSortType,
    isLocked,
    // @ts-expect-error <StrictNullChecks/>
    fromDiscordBot,
    isLoggedIn: user.isLoggedIn,
  });

  const scrollToRef = useRef(null);

  const scrollToElement = () => {
    if (scrollToRef.current) {
      // @ts-expect-error <StrictNullChecks/>
      scrollToRef.current.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
    }
  };

  // eslint-disable-next-line @typescript-eslint/no-shadow
  const handleIsReplying = (isReplying: boolean, id?: number) => {
    if (isReplying) {
      // @ts-expect-error <StrictNullChecks/>
      setParentCommentId(id);
      setIsReplying(true);
    } else {
      // @ts-expect-error <StrictNullChecks/>
      setParentCommentId(undefined);
      setIsReplying(false);
    }
  };

  const handleDeleteComment = (comment: CommentType<any>) => {
    openConfirmation({
      title: 'Delete Comment',
      description: <>Delete this comment?</>,
      buttons: [
        {
          label: 'Delete',
          buttonType: 'destructive',
          buttonHeight: 'sm',
          onClick: async () => {
            try {
              await deleteComment({ comment_id: comment.id });
            } catch (err) {
              if (err instanceof SessionKeyError) {
                checkForSessionKeyRevalidationErrors(err);
                return;
              }
              console.error(err.response.data.error || err?.message);
              notifyError('Failed to delete comment');
            }
          },
        },
        {
          label: 'Cancel',
          buttonType: 'primary',
          buttonHeight: 'sm',
        },
      ],
    });
  };

  const handleEditCancel = (
    comment: CommentType<any>,
    hasContentChanged: boolean,
  ) => {
    if (hasContentChanged) {
      openConfirmation({
        title: 'Cancel editing?',
        description: <>Changes will not be saved.</>,
        buttons: [
          {
            label: 'Yes',
            buttonType: 'primary',
            buttonHeight: 'sm',
            onClick: () => {
              setEdits((p) => ({
                ...p,
                [comment.id]: {
                  // @ts-expect-error <StrictNullChecks/>
                  ...(p[comment.id] || {}),
                  isEditing: false,
                  editDraft: '',
                },
              }));
              // @ts-expect-error <StrictNullChecks/>
              setIsGloballyEditing(false);
              clearEditingLocalStorage(comment.id, ContentType.Comment);
            },
          },
          {
            label: 'No',
            buttonType: 'secondary',
            buttonHeight: 'sm',
          },
        ],
      });
    } else {
      setEdits((p) => ({
        ...p,
        [comment.id]: {
          // @ts-expect-error <StrictNullChecks/>
          ...(p[comment.id] || {}),
          isEditing: false,
          editDraft: '',
        },
      }));
      // @ts-expect-error <StrictNullChecks/>
      setIsGloballyEditing(false);
    }
  };

  const handleEditStart = (comment: CommentType<any>) => {
    const editDraft = localStorage.getItem(
      `${app.activeChainId()}-edit-comment-${comment.id}-storedText`,
    );
    if (editDraft) {
      clearEditingLocalStorage(comment.id, ContentType.Comment);
      const body = deserializeDelta(editDraft);

      openConfirmation({
        title: 'Info',
        description: <>Previous changes found. Restore edits?</>,
        buttons: [
          {
            label: 'Restore',
            buttonType: 'primary',
            buttonHeight: 'sm',
            onClick: () => {
              setEdits((p) => ({
                ...p,
                [comment.id]: {
                  ...(p?.[comment.id] || {}),
                  isEditing: true,
                  editDraft: editDraft,
                  contentDelta: body,
                },
              }));
              // @ts-expect-error <StrictNullChecks/>
              setIsGloballyEditing(true);
            },
          },
          {
            label: 'Cancel',
            buttonType: 'secondary',
            buttonHeight: 'sm',
            onClick: () => {
              setEdits((p) => ({
                ...p,
                [comment.id]: {
                  ...(p?.[comment.id] || {}),
                  isEditing: true,
                  editDraft: '',
                  contentDelta: body,
                },
              }));
              // @ts-expect-error <StrictNullChecks/>
              setIsGloballyEditing(true);
            },
          },
        ],
      });
    } else {
      setEdits((p) => ({
        ...p,
        [comment.id]: {
          ...(p?.[comment.id] || {}),
          isEditing: true,
          editDraft: '',
          contentDelta: deserializeDelta(comment.text),
        },
      }));
      // @ts-expect-error <StrictNullChecks/>
      setIsGloballyEditing(true);
    }
  };

  const handleEditConfirm = async (
    comment: CommentType<any>,
    newDelta: DeltaStatic,
  ) => {
    setEdits((p) => ({
      ...p,
      [comment.id]: {
        // @ts-expect-error <StrictNullChecks/>
        ...(p[comment.id] || {}),
        isSavingEdit: true,
      },
    }));

    try {
      const input = await buildUpdateCommentInput({
        commentId: comment.id,
        updatedBody: serializeDelta(newDelta) || comment.text,
        commentMsgId: comment.canvasMsgId,
        communityId,
        profile: {
          userId: user.activeAccount?.profile?.userId || 0,
          address: user.activeAccount?.address || '',
          avatarUrl: user.activeAccount?.profile?.avatarUrl || '',
          name: user.activeAccount?.profile?.name || '',
          lastActive: user.activeAccount?.profile?.lastActive?.toString() || '',
        },
      });
      await editComment(input);
      setEdits((p) => ({
        ...p,
        [comment.id]: {
          // @ts-expect-error <StrictNullChecks/>
          ...(p[comment.id] || {}),
          isEditing: false,
        },
      }));

      // @ts-expect-error <StrictNullChecks/>
      setIsGloballyEditing(false);
      clearEditingLocalStorage(comment.id, ContentType.Comment);
    } catch (err) {
      if (err instanceof SessionKeyError) {
        checkForSessionKeyRevalidationErrors(err);
        return;
      }
      console.error(err?.responseJSON?.error || err?.message);
      notifyError('Failed to edit comment');
    } finally {
      setEdits((p) => ({
        ...p,
        [comment.id]: {
          // @ts-expect-error <StrictNullChecks/>
          ...(p[comment.id] || {}),
          isSavingEdit: false,
        },
      }));
    }
  };

  const handleFlagMarkAsSpam = (comment: CommentType<any>) => {
    openConfirmation({
      title: !comment.markedAsSpamAt
        ? 'Confirm flag as spam'
        : 'Unflag as spam?',
      description: !comment.markedAsSpamAt ? (
        <>
          <p>Are you sure you want to flag this comment as spam?</p>
          <br />
          <p>
            Flagging as spam will help filter out unwanted content. Comments
            flagged as spam are hidden from the main feed and can&apos;t be
            interacted with. For transparency, spam can still be viewed by
            community members if they choose to &quot;Include comments flagged
            as spam.&quot;
          </p>
          <br />
          <p>Note that you can always unflag a comment as spam.</p>
        </>
      ) : (
        <>
          <p>
            Are you sure you want to unflag this comment as spam? Flagging as
            spam will help filter out unwanted content.
          </p>
          <br />
          <p>
            For transparency, spam can still be viewed by community members if
            they choose to &quot;Include comments flagged as spam.&quot;
            <br />
          </p>
        </>
      ),
      buttons: [
        {
          label: 'Cancel',
          buttonType: 'primary',
          buttonHeight: 'sm',
        },
        {
          label: !comment.markedAsSpamAt ? 'Confirm' : 'Unflag as spam?',
          buttonType: 'destructive',
          buttonHeight: 'sm',
          onClick: async () => {
            try {
              await toggleCommentSpamStatus({
                communityId,
                commentId: comment.id,
                isSpam: !comment.markedAsSpamAt,
                address: user.activeAccount?.address || '',
              });
            } catch (err) {
              console.log(err);
            }
          },
        },
      ],
    });
  };

  return (
    <div className="CommentsTree">
      {commentsList.map((comment, index) => {
        const nextComment = commentsList[index + 1];
        const nextCommentThreadLevel = nextComment?.threadLevel;

        return (
          <React.Fragment key={comment.id + '' + comment.markedAsSpamAt}>
            <div className={`Comment comment-${comment.id}`}>
              {comment.threadLevel > 0 && (
                <div className="thread-connectors-container">
                  {Array(comment.threadLevel)
                    .fill(undefined)
                    .map((_, i) => (
                      <div
                        key={i}
                        className={clsx('thread-connector', {
                          replying:
                            isReplying &&
                            i === comment.threadLevel - 1 &&
                            parentCommentId === comment.id,
                          // vertical line is shorter when the thread is finished
                          smaller: i >= nextCommentThreadLevel || !nextComment,
                        })}
                      />
                    ))}
                </div>
              )}
              <CommentCard
                key={`${comment.id}-${comment.text}`}
                disabledActionsTooltipText={disabledActionsTooltipText}
                isThreadArchived={!!thread.archivedAt}
                canReply={
                  !!user.activeAccount &&
                  !thread.archivedAt &&
                  !thread.lockedAt &&
                  canReply
                }
                maxReplyLimitReached={comment.maxReplyLimitReached}
                canReact={
                  !thread.archivedAt &&
                  (!!user.activeAccount || isAdmin) &&
                  canReact
                }
                canEdit={!isLocked && (comment.isCommentAuthor || isAdminOrMod)}
                editDraft={edits?.[comment.id]?.editDraft || ''}
                onEditStart={() => handleEditStart(comment)}
                onEditCancel={(hasContentChanged: boolean) =>
                  handleEditCancel(comment, hasContentChanged)
                }
                onEditConfirm={async (newDelta) =>
                  await handleEditConfirm(comment, newDelta)
                }
                isSavingEdit={edits?.[comment.id]?.isSavingEdit || false}
                isEditing={edits?.[comment.id]?.isEditing || false}
                canDelete={
                  !isLocked && (comment.isCommentAuthor || isAdminOrMod)
                }
                replyBtnVisible={comment.replyBtnVisible}
                onReply={() => {
                  setParentCommentId(comment.id);
                  setIsReplying(true);
                  scrollToElement();
                }}
                onDelete={() => handleDeleteComment(comment)}
                isSpam={!!comment.markedAsSpamAt}
                onSpamToggle={() => handleFlagMarkAsSpam(comment)}
                canToggleSpam={
                  !isLocked && (comment.isCommentAuthor || isAdminOrMod)
                }
                comment={comment}
                shareURL={`${window.location.origin}${window.location.pathname}?comment=${comment.id}`}
              />
            </div>
            <div ref={scrollToRef}></div>
            {isReplying && parentCommentId === comment.id && (
              <CreateComment
                handleIsReplying={handleIsReplying}
                parentCommentId={parentCommentId}
                rootThread={thread}
                canComment={canComment}
              />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
};

1	import { ContentType } from '@hicommonwealth/shared';
2	import { buildUpdateCommentInput } from 'client/scripts/state/api/comments/editComment';
3	import { useAuthModalStore } from 'client/scripts/state/ui/modals';
4	import clsx from 'clsx';
5	import { SessionKeyError } from 'controllers/server/sessions';
6	import { GetThreadActionTooltipTextResponse } from 'helpers/threads';
7	import { CommentsFeaturedFilterTypes } from 'models/types';
8	import type { DeltaStatic } from 'quill';
9	import React, { useEffect, useRef, useState } from 'react';
10	import app from 'state';
11	import {
12	useDeleteCommentMutation,
13	useEditCommentMutation,
14	useFetchCommentsQuery,
15	useToggleCommentSpamStatusMutation,
16	} from 'state/api/comments';
17	import useUserStore from 'state/ui/user';
18	import { CreateComment } from 'views/components/Comments/CreateComment';
19	import {
20	deserializeDelta,
21	serializeDelta,
22	} from 'views/components/react_quill_editor/utils';
23	import { openConfirmation } from 'views/modals/confirmation_modal';
24	import { notifyError } from '../../../../controllers/app/notifications';
25	import type { Comment as CommentType } from '../../../../models/Comment';
26	import Thread from '../../../../models/Thread';
27	import Permissions from '../../../../utils/Permissions';
28	import { CommentCard } from '../CommentCard';
29	import { clearEditingLocalStorage } from '../CommentTree/helpers';
30	import './CommentTree.scss';
31	import { jumpHighlightComment } from './helpers';
32	import usePrepareCommentsList from './usePrepareCommentsList';
33
34	type CommentsTreeAttrs = {
35	comments: Array<CommentType<any>>;
36	thread: Thread;
37	setIsGloballyEditing?: (status: boolean) => void;
38	includeSpams: boolean;
39	isReplying: boolean;
40	setIsReplying: (status: boolean) => void;
41	parentCommentId: number;
42	setParentCommentId: (id: number) => void;
43	fromDiscordBot?: boolean;
44	canReact?: boolean;
45	canReply?: boolean;
46	canComment: boolean;
47	commentSortType: CommentsFeaturedFilterTypes;
48	disabledActionsTooltipText?: GetThreadActionTooltipTextResponse;
49	};
50
51	export const CommentTree = ({	×
52	comments,
53	thread,
54	setIsGloballyEditing,
55	includeSpams,
56	fromDiscordBot,
57	isReplying,
58	setIsReplying,
59	parentCommentId,
60	setParentCommentId,
61	canReact = true,	×
62	canReply = true,	×
63	canComment,
64	commentSortType,
65	disabledActionsTooltipText,
66	}: CommentsTreeAttrs) => {
67	const urlParams = new URLSearchParams(location.search);	×
68	const focusCommentsParam = urlParams.get('focusComments') === 'true';	×
69
70	const user = useUserStore();	×
71	const { checkForSessionKeyRevalidationErrors } = useAuthModalStore();	×
72
73	useEffect(() => {	×
74	let timeout;
75
76	if (focusCommentsParam) {	×
77	timeout = setTimeout(() => {	×
78	const ele = document.getElementsByClassName('CommentsTree')[0];	×
79	ele.scrollIntoView({	×
80	behavior: 'smooth',
81	block: 'start',
82	});
83	}, 100);
84	}
85
86	return () => {	×
87	timeout !== undefined && clearTimeout(timeout);	×
88	};
89	// we only want to run this on first mount
90	// eslint-disable-next-line react-hooks/exhaustive-deps
91	}, []);
92
93	const [highlightedComment, setHighlightedComment] = useState(false);	×
94
95	const communityId = app.activeChainId() \|\| '';	×
96
97	const { data: allComments = [] } = useFetchCommentsQuery({	×
98	communityId,
99	threadId: parseInt(`${thread.id}`),
100	apiEnabled: !!communityId,
101	});
102
103	const { mutateAsync: deleteComment } = useDeleteCommentMutation({	×
104	communityId,
105	threadId: thread.id,
106	existingNumberOfComments: thread.numberOfComments,
107	});
108
109	const { mutateAsync: editComment } = useEditCommentMutation({	×
110	communityId,
111	threadId: thread.id,
112	});
113
114	const { mutateAsync: toggleCommentSpamStatus } =
115	useToggleCommentSpamStatusMutation({	×
116	communityId,
117	threadId: thread.id,
118	});
119
120	const isAdmin = Permissions.isSiteAdmin() \|\| Permissions.isCommunityAdmin();	×
121
122	const [edits, setEdits] = useState<{	×
123	[commentId: number]: {
124	isEditing?: boolean;
125	editDraft?: string;
126	isSavingEdit?: boolean;
127	contentDelta?: DeltaStatic;
128	};
129	}>();
130
131	const isAdminOrMod =
132	Permissions.isSiteAdmin() \|\|	×
133	Permissions.isCommunityAdmin() \|\|
134	Permissions.isCommunityModerator();
135
136	const isLocked = !!(thread instanceof Thread && thread.readOnly);	×
137
138	useEffect(() => {	×
139	if (comments?.length > 0 && !highlightedComment) {	×
140	setHighlightedComment(true);	×
141
142	const commentId = window.location.search.startsWith('?comment=')	×
143	? window.location.search.replace('?comment=', '')
144	: null;
145
146	if (commentId) jumpHighlightComment(Number(commentId));	×
147	}
148	}, [comments?.length, highlightedComment]);
149
150	const commentsList = usePrepareCommentsList({	×
151	levelZeroComments: comments,
152	allComments,
153	threadId: thread.id,
154	includeSpams,
155	commentSortType,
156	isLocked,
157	// @ts-expect-error <StrictNullChecks/>
158	fromDiscordBot,
159	isLoggedIn: user.isLoggedIn,
160	});
161
162	const scrollToRef = useRef(null);	×
163
164	const scrollToElement = () => {	×
165	if (scrollToRef.current) {	×
166	// @ts-expect-error <StrictNullChecks/>
167	scrollToRef.current.scrollIntoView({	×
168	behavior: 'smooth',
169	block: 'center',
170	});
171	}
172	};
173
174	// eslint-disable-next-line @typescript-eslint/no-shadow
175	const handleIsReplying = (isReplying: boolean, id?: number) => {	×
176	if (isReplying) {	×
177	// @ts-expect-error <StrictNullChecks/>
178	setParentCommentId(id);	×
179	setIsReplying(true);	×
180	} else {
181	// @ts-expect-error <StrictNullChecks/>
182	setParentCommentId(undefined);	×
183	setIsReplying(false);	×
184	}
185	};
186
187	const handleDeleteComment = (comment: CommentType<any>) => {	×
188	openConfirmation({	×
189	title: 'Delete Comment',
190	description: <>Delete this comment?</>,
191	buttons: [
192	{
193	label: 'Delete',
194	buttonType: 'destructive',
195	buttonHeight: 'sm',
196	onClick: async () => {
197	try {	×
NEW 198	await deleteComment({ comment_id: comment.id });	×
199	} catch (err) {
200	if (err instanceof SessionKeyError) {	×
201	checkForSessionKeyRevalidationErrors(err);	×
202	return;	×
203	}
204	console.error(err.response.data.error \|\| err?.message);	×
205	notifyError('Failed to delete comment');	×
206	}
207	},
208	},
209	{
210	label: 'Cancel',
211	buttonType: 'primary',
212	buttonHeight: 'sm',
213	},
214	],
215	});
216	};
217
218	const handleEditCancel = (	×
219	comment: CommentType<any>,
220	hasContentChanged: boolean,
221	) => {
222	if (hasContentChanged) {	×
223	openConfirmation({	×
224	title: 'Cancel editing?',
225	description: <>Changes will not be saved.</>,
226	buttons: [
227	{
228	label: 'Yes',
229	buttonType: 'primary',
230	buttonHeight: 'sm',
231	onClick: () => {
232	setEdits((p) => ({	×
233	...p,
234	[comment.id]: {
235	// @ts-expect-error <StrictNullChecks/>
236	...(p[comment.id] \|\| {}),	×
237	isEditing: false,
238	editDraft: '',
239	},
240	}));
241	// @ts-expect-error <StrictNullChecks/>
242	setIsGloballyEditing(false);	×
243	clearEditingLocalStorage(comment.id, ContentType.Comment);	×
244	},
245	},
246	{
247	label: 'No',
248	buttonType: 'secondary',
249	buttonHeight: 'sm',
250	},
251	],
252	});
253	} else {
254	setEdits((p) => ({	×
255	...p,
256	[comment.id]: {
257	// @ts-expect-error <StrictNullChecks/>
258	...(p[comment.id] \|\| {}),	×
259	isEditing: false,
260	editDraft: '',
261	},
262	}));
263	// @ts-expect-error <StrictNullChecks/>
264	setIsGloballyEditing(false);	×
265	}
266	};
267
268	const handleEditStart = (comment: CommentType<any>) => {	×
269	const editDraft = localStorage.getItem(	×
270	`${app.activeChainId()}-edit-comment-${comment.id}-storedText`,
271	);
272	if (editDraft) {	×
273	clearEditingLocalStorage(comment.id, ContentType.Comment);	×
274	const body = deserializeDelta(editDraft);	×
275
276	openConfirmation({	×
277	title: 'Info',
278	description: <>Previous changes found. Restore edits?</>,
279	buttons: [
280	{
281	label: 'Restore',
282	buttonType: 'primary',
283	buttonHeight: 'sm',
284	onClick: () => {
285	setEdits((p) => ({	×
286	...p,
287	[comment.id]: {
288	...(p?.[comment.id] \|\| {}),	×
289	isEditing: true,
290	editDraft: editDraft,
291	contentDelta: body,
292	},
293	}));
294	// @ts-expect-error <StrictNullChecks/>
295	setIsGloballyEditing(true);	×
296	},
297	},
298	{
299	label: 'Cancel',
300	buttonType: 'secondary',
301	buttonHeight: 'sm',
302	onClick: () => {
303	setEdits((p) => ({	×
304	...p,
305	[comment.id]: {
306	...(p?.[comment.id] \|\| {}),	×
307	isEditing: true,
308	editDraft: '',
309	contentDelta: body,
310	},
311	}));
312	// @ts-expect-error <StrictNullChecks/>
313	setIsGloballyEditing(true);	×
314	},
315	},
316	],
317	});
318	} else {
319	setEdits((p) => ({	×
320	...p,
321	[comment.id]: {
322	...(p?.[comment.id] \|\| {}),	×
323	isEditing: true,
324	editDraft: '',
325	contentDelta: deserializeDelta(comment.text),
326	},
327	}));
328	// @ts-expect-error <StrictNullChecks/>
329	setIsGloballyEditing(true);	×
330	}
331	};
332
333	const handleEditConfirm = async (	×
334	comment: CommentType<any>,
335	newDelta: DeltaStatic,
336	) => {
337	setEdits((p) => ({	×
338	...p,
339	[comment.id]: {
340	// @ts-expect-error <StrictNullChecks/>
341	...(p[comment.id] \|\| {}),	×
342	isSavingEdit: true,
343	},
344	}));
345
346	try {	×
347	const input = await buildUpdateCommentInput({	×
348	commentId: comment.id,
349	updatedBody: serializeDelta(newDelta) \|\| comment.text,	×
350	commentMsgId: comment.canvasMsgId,
351	communityId,
352	profile: {
353	userId: user.activeAccount?.profile?.userId \|\| 0,	×
354	address: user.activeAccount?.address \|\| '',	×
355	avatarUrl: user.activeAccount?.profile?.avatarUrl \|\| '',	×
356	name: user.activeAccount?.profile?.name \|\| '',	×
357	lastActive: user.activeAccount?.profile?.lastActive?.toString() \|\| '',	×
358	},
359	});
360	await editComment(input);	×
361	setEdits((p) => ({	×
362	...p,
363	[comment.id]: {
364	// @ts-expect-error <StrictNullChecks/>
365	...(p[comment.id] \|\| {}),	×
366	isEditing: false,
367	},
368	}));
369
370	// @ts-expect-error <StrictNullChecks/>
371	setIsGloballyEditing(false);	×
372	clearEditingLocalStorage(comment.id, ContentType.Comment);	×
373	} catch (err) {
374	if (err instanceof SessionKeyError) {	×
375	checkForSessionKeyRevalidationErrors(err);	×
376	return;	×
377	}
378	console.error(err?.responseJSON?.error \|\| err?.message);	×
379	notifyError('Failed to edit comment');	×
380	} finally {
381	setEdits((p) => ({	×
382	...p,
383	[comment.id]: {
384	// @ts-expect-error <StrictNullChecks/>
385	...(p[comment.id] \|\| {}),	×
386	isSavingEdit: false,
387	},
388	}));
389	}
390	};
391
392	const handleFlagMarkAsSpam = (comment: CommentType<any>) => {	×
393	openConfirmation({	×
394	title: !comment.markedAsSpamAt	×
395	? 'Confirm flag as spam'
396	: 'Unflag as spam?',
397	description: !comment.markedAsSpamAt ? (	×
398	<>
399	<p>Are you sure you want to flag this comment as spam?</p>
400	<br />
401	<p>
402	Flagging as spam will help filter out unwanted content. Comments
403	flagged as spam are hidden from the main feed and can't be
404	interacted with. For transparency, spam can still be viewed by
405	community members if they choose to "Include comments flagged
406	as spam."
407	</p>
408	<br />
409	<p>Note that you can always unflag a comment as spam.</p>
410	</>
411	) : (
412	<>
413	<p>
414	Are you sure you want to unflag this comment as spam? Flagging as
415	spam will help filter out unwanted content.
416	</p>
417	<br />
418	<p>
419	For transparency, spam can still be viewed by community members if
420	they choose to "Include comments flagged as spam."
421	<br />
422	</p>
423	</>
424	),
425	buttons: [
426	{
427	label: 'Cancel',
428	buttonType: 'primary',
429	buttonHeight: 'sm',
430	},
431	{
432	label: !comment.markedAsSpamAt ? 'Confirm' : 'Unflag as spam?',	×
433	buttonType: 'destructive',
434	buttonHeight: 'sm',
435	onClick: async () => {
436	try {	×
437	await toggleCommentSpamStatus({	×
438	communityId,
439	commentId: comment.id,
440	isSpam: !comment.markedAsSpamAt,
441	address: user.activeAccount?.address \|\| '',	×
442	});
443	} catch (err) {
444	console.log(err);	×
445	}
446	},
447	},
448	],
449	});
450	};
451
452	return (	×
453	<div className="CommentsTree">
454	{commentsList.map((comment, index) => {
455	const nextComment = commentsList[index + 1];	×
456	const nextCommentThreadLevel = nextComment?.threadLevel;	×
457
458	return (	×
459	<React.Fragment key={comment.id + '' + comment.markedAsSpamAt}>
460	<div className={`Comment comment-${comment.id}`}>
461	{comment.threadLevel > 0 && (	×
462	<div className="thread-connectors-container">
463	{Array(comment.threadLevel)
464	.fill(undefined)
465	.map((_, i) => (
466	<div	×
467	key={i}
468	className={clsx('thread-connector', {
469	replying:
470	isReplying &&	×
471	i === comment.threadLevel - 1 &&
472	parentCommentId === comment.id,
473	// vertical line is shorter when the thread is finished
474	smaller: i >= nextCommentThreadLevel \|\| !nextComment,	×
475	})}
476	/>
477	))}
478	</div>
479	)}
480	<CommentCard
481	key={`${comment.id}-${comment.text}`}
482	disabledActionsTooltipText={disabledActionsTooltipText}
483	isThreadArchived={!!thread.archivedAt}
484	canReply={
485	!!user.activeAccount &&	×
486	!thread.archivedAt &&
487	!thread.lockedAt &&
488	canReply
489	}
490	maxReplyLimitReached={comment.maxReplyLimitReached}
491	canReact={
492	!thread.archivedAt &&	×
493	(!!user.activeAccount \|\| isAdmin) &&
494	canReact
495	}
496	canEdit={!isLocked && (comment.isCommentAuthor \|\| isAdminOrMod)}	×
497	editDraft={edits?.[comment.id]?.editDraft \|\| ''}	×
498	onEditStart={() => handleEditStart(comment)}	×
499	onEditCancel={(hasContentChanged: boolean) =>
500	handleEditCancel(comment, hasContentChanged)	×
501	}
502	onEditConfirm={async (newDelta) =>
503	await handleEditConfirm(comment, newDelta)	×
504	}
505	isSavingEdit={edits?.[comment.id]?.isSavingEdit \|\| false}	×
506	isEditing={edits?.[comment.id]?.isEditing \|\| false}	×
507	canDelete={
508	!isLocked && (comment.isCommentAuthor \|\| isAdminOrMod)	×
509	}
510	replyBtnVisible={comment.replyBtnVisible}
511	onReply={() => {
512	setParentCommentId(comment.id);	×
513	setIsReplying(true);	×
514	scrollToElement();	×
515	}}
516	onDelete={() => handleDeleteComment(comment)}	×
517	isSpam={!!comment.markedAsSpamAt}
518	onSpamToggle={() => handleFlagMarkAsSpam(comment)}	×
519	canToggleSpam={
520	!isLocked && (comment.isCommentAuthor \|\| isAdminOrMod)	×
521	}
522	comment={comment}
523	shareURL={`${window.location.origin}${window.location.pathname}?comment=${comment.id}`}
524	/>
525	</div>
526	<div ref={scrollToRef}></div>
527	{isReplying && parentCommentId === comment.id && (	×
528	<CreateComment
529	handleIsReplying={handleIsReplying}
530	parentCommentId={parentCommentId}
531	rootThread={thread}
532	canComment={canComment}
533	/>
534	)}
535	</React.Fragment>
536	);
537	})}
538	</div>
539	);
540	};

hicommonwealth / commonwealth / 10890990780

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous