@replyke/core 7.0.0-beta.104 → 7.0.0-beta.106

package/dist/esm/hooks/comments/useCommentSectionData.js

@@ -1,50 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { useCallback, useEffect, useRef, useState } from "react";
 import useCreateComment from "./useCreateComment";
 import { handleError } from "../../utils/handleError";
@@ -58,42 +11,40 @@ import { useEntity, useFetchEntity, useFetchEntityByForeignId, useFetchEntityByS
 import { isUUID } from "../../utils/isUUID";
 import { useStableObject } from "../useStableObject";
 function useCommentSectionData(props) {
-    var _this = this;
-    var _a, _b;
-    var entityProp = props.entity, entityId = props.entityId, foreignId = props.foreignId, shortId = props.shortId, createIfNotFound = props.createIfNotFound, _c = props.defaultSortBy, defaultSortBy = _c === void 0 ? "top" : _c, _d = props.limit, limit = _d === void 0 ? 15 : _d, _e = props.callbacks, callbacksProp = _e === void 0 ? {} : _e, highlightedCommentId = props.highlightedCommentId, mentionTriggersProp = props.mentionTriggers;
-    var mentionTriggers = {
-        user: (_a = mentionTriggersProp === null || mentionTriggersProp === void 0 ? void 0 : mentionTriggersProp.user) !== null && _a !== void 0 ? _a : "@",
-        space: (_b = mentionTriggersProp === null || mentionTriggersProp === void 0 ? void 0 : mentionTriggersProp.space) !== null && _b !== void 0 ? _b : "#",
+    const { entity: entityProp, entityId, foreignId, shortId, createIfNotFound, defaultSortBy = "top", limit = 15, callbacks: callbacksProp = {}, highlightedCommentId, mentionTriggers: mentionTriggersProp, } = props;
+    const mentionTriggers = {
+        user: mentionTriggersProp?.user ?? "@",
+        space: mentionTriggersProp?.space ?? "#",
     };
     // Stabilize callbacks reference to prevent unnecessary re-renders
-    var callbacks = useStableObject(callbacksProp);
-    var _f = useEntity(), entityFromContext = _f.entity, setContextEntity = _f.setEntity;
-    var _g = useState(entityProp !== null && entityProp !== void 0 ? entityProp : entityFromContext), entity = _g[0], setEntity = _g[1];
-    var user = useUser().user;
-    var _h = useEntityComments({
-        entityId: entity === null || entity === void 0 ? void 0 : entity.id,
-        defaultSortBy: defaultSortBy,
-        limit: limit,
+    const callbacks = useStableObject(callbacksProp);
+    const { entity: entityFromContext, setEntity: setContextEntity } = useEntity();
+    const [entity, setEntity] = useState(entityProp ?? entityFromContext);
+    const { user } = useUser();
+    const { entityCommentsTree, comments, newComments, loading, hasMore, sortBy, setSortBy, loadMore, addCommentsToTree, removeCommentFromTree, markCommentAsDeleted, } = useEntityComments({
+        entityId: entity?.id,
+        defaultSortBy,
+        limit,
         include: "user",
-    }), entityCommentsTree = _h.entityCommentsTree, comments = _h.comments, newComments = _h.newComments, loading = _h.loading, hasMore = _h.hasMore, sortBy = _h.sortBy, setSortBy = _h.setSortBy, loadMore = _h.loadMore, addCommentsToTree = _h.addCommentsToTree, removeCommentFromTree = _h.removeCommentFromTree, markCommentAsDeleted = _h.markCommentAsDeleted;
-    var createComment = useCreateComment();
-    var deleteComment = useDeleteComment();
-    var updateComment = useUpdateComment();
-    var addReaction = useAddReaction();
-    var fetchComment = useFetchComment();
-    var fetchEntity = useFetchEntity();
-    var fetchEntityByForeignId = useFetchEntityByForeignId();
-    var fetchEntityByShortId = useFetchEntityByShortId();
-    var _j = useState(null), highlightedComment = _j[0], setHighlightedComment = _j[1];
-    var fetchingCommentIdRef = useRef(null);
-    var fetchedStatus = useRef({}); // Track status by unique key
-    var submittingComment = useRef(false);
-    var _k = useState(false), submittingCommentState = _k[0], setSubmittingCommentState = _k[1]; // required to trigger rerenders
-    var _l = useState(null), pushMention = _l[0], setPushMention = _l[1];
+    });
+    const createComment = useCreateComment();
+    const deleteComment = useDeleteComment();
+    const updateComment = useUpdateComment();
+    const addReaction = useAddReaction();
+    const fetchComment = useFetchComment();
+    const fetchEntity = useFetchEntity();
+    const fetchEntityByForeignId = useFetchEntityByForeignId();
+    const fetchEntityByShortId = useFetchEntityByShortId();
+    const [highlightedComment, setHighlightedComment] = useState(null);
+    const fetchingCommentIdRef = useRef(null);
+    const fetchedStatus = useRef({}); // Track status by unique key
+    const submittingComment = useRef(false);
+    const [submittingCommentState, setSubmittingCommentState] = useState(false); // required to trigger rerenders
+    const [pushMention, setPushMention] = useState(null);
     // const previousPushMention = useRef<null | User>(null);
-    var _m = useState(null), repliedToComment = _m[0], setRepliedToComment = _m[1];
-    var _o = useState(false), showReplyBanner = _o[0], setShowReplyBanner = _o[1];
-    var _p = useState(null), selectedComment = _p[0], setSelectedComment = _p[1];
+    const [repliedToComment, setRepliedToComment] = useState(null);
+    const [showReplyBanner, setShowReplyBanner] = useState(false);
+    const [selectedComment, setSelectedComment] = useState(null);
     // const handleSetPushMention = (user: User | null) => {
     //   if(!user?.username)
     //   setPushMention((prevMention) => {
@@ -104,147 +55,143 @@ function useCommentSectionData(props) {
     //   });
     // };
     // For replies that appear as a child of the comment they are replying to.
-    var handleDeepReply = useCallback(function (comment) {
+    const handleDeepReply = useCallback((comment) => {
         setRepliedToComment(comment);
         setShowReplyBanner(true);
     }, [setRepliedToComment]);
     // For replies that appear at the same level as the comment they are replying to. Includes a mention (e.g. @username).
-    var handleShallowReply = useCallback(function (comment) {
-        var _a;
-        setRepliedToComment({ id: (_a = comment.parentId) !== null && _a !== void 0 ? _a : undefined });
+    const handleShallowReply = useCallback((comment) => {
+        setRepliedToComment({ id: comment.parentId ?? undefined });
         if (comment.user)
             setPushMention(comment.user);
     }, [setRepliedToComment]);
-    var handleCreateComment = useCallback(function (props) { return __awaiter(_this, void 0, void 0, function () {
-        var parentId, content, gif, mentions, autoReaction, filteredMentions, TEMP_ID, tempNewComment, newCommentData, err_1;
-        var _a;
-        var _b, _c, _d, _e, _f;
-        return __generator(this, function (_g) {
-            switch (_g.label) {
-                case 0:
-                    parentId = props.parentId, content = props.content, gif = props.gif, mentions = props.mentions, autoReaction = props.autoReaction;
-                    if (submittingComment.current)
-                        return [2 /*return*/];
-                    if (!entity) {
-                        console.error("Invalid entity in useCommentSection");
-                        return [2 /*return*/];
-                    }
-                    if (!user) {
-                        (_b = callbacks === null || callbacks === void 0 ? void 0 : callbacks.loginRequiredCallback) === null || _b === void 0 ? void 0 : _b.call(callbacks);
-                        return [2 /*return*/];
-                    }
-                    if ((callbacks === null || callbacks === void 0 ? void 0 : callbacks.usernameRequiredCallback) && !user.username) {
-                        callbacks === null || callbacks === void 0 ? void 0 : callbacks.usernameRequiredCallback();
-                        return [2 /*return*/];
-                    }
-                    if (!gif && (!content || content.length <= 1)) {
-                        callbacks === null || callbacks === void 0 ? void 0 : callbacks.commentTooShortCallback();
-                        return [2 /*return*/];
-                    }
-                    submittingComment.current = true;
-                    setSubmittingCommentState(true);
-                    filteredMentions = content
-                        ? (mentions || []).filter(function (mention) {
-                            if (mention.type === "space") {
-                                return content.includes(mentionTriggers.space + mention.slug);
-                            }
-                            return content.includes(mentionTriggers.user + mention.username);
-                        })
-                        : [];
-                    TEMP_ID = Math.random().toString(36).substring(2, 7);
-                    tempNewComment = {
-                        id: TEMP_ID,
-                        foreignId: null,
-                        projectId: "TEMP_PROJECT_ID",
-                        userId: user.id,
-                        parentId: (_c = parentId !== null && parentId !== void 0 ? parentId : repliedToComment === null || repliedToComment === void 0 ? void 0 : repliedToComment.id) !== null && _c !== void 0 ? _c : null,
-                        entityId: entity.id,
-                        content: content !== null && content !== void 0 ? content : null,
-                        gif: gif !== null && gif !== void 0 ? gif : null,
-                        mentions: filteredMentions,
-                        user: __assign(__assign({}, user), { bio: null, birthdate: new Date(), location: null, createdAt: new Date(), avatarFileId: null, bannerFileId: null }),
-                        upvotes: [],
-                        downvotes: [],
-                        userReaction: autoReaction !== null && autoReaction !== void 0 ? autoReaction : null,
-                        reactionCounts: {
-                            upvote: autoReaction === "upvote" ? 1 : 0,
-                            downvote: autoReaction === "downvote" ? 1 : 0,
-                            like: autoReaction === "like" ? 1 : 0,
-                            love: autoReaction === "love" ? 1 : 0,
-                            wow: autoReaction === "wow" ? 1 : 0,
-                            sad: autoReaction === "sad" ? 1 : 0,
-                            angry: autoReaction === "angry" ? 1 : 0,
-                            funny: autoReaction === "funny" ? 1 : 0,
-                        },
-                        createdAt: new Date(),
-                        updatedAt: new Date(),
-                        deletedAt: null,
-                        parentDeletedAt: null,
-                        userDeletedAt: null,
-                        repliesCount: 0,
-                        metadata: {},
-                        moderationStatus: null,
-                        moderatedAt: null,
-                        moderatedById: null,
-                        moderatedByType: null,
-                        moderationReason: null,
-                    };
-                    setRepliedToComment(null);
-                    setShowReplyBanner(false);
-                    setPushMention(null);
-                    _g.label = 1;
-                case 1:
-                    _g.trys.push([1, 3, 4, 5]);
-                    addCommentsToTree([tempNewComment], true);
-                    return [4 /*yield*/, createComment({
-                            entityId: entity.id,
-                            parentCommentId: (_d = parentId !== null && parentId !== void 0 ? parentId : repliedToComment === null || repliedToComment === void 0 ? void 0 : repliedToComment.id) !== null && _d !== void 0 ? _d : null,
-                            content: content,
-                            gif: gif,
-                            mentions: filteredMentions,
-                        })];
-                case 2:
-                    newCommentData = _g.sent();
-                    if (newCommentData) {
-                        removeCommentFromTree(TEMP_ID);
-                        if (autoReaction) {
-                            // Add comment with optimistic reaction data while the API call is in flight
-                            addCommentsToTree([__assign(__assign({}, newCommentData), { userReaction: autoReaction, reactionCounts: __assign(__assign({}, newCommentData.reactionCounts), (_a = {}, _a[autoReaction] = ((_f = (_e = newCommentData.reactionCounts) === null || _e === void 0 ? void 0 : _e[autoReaction]) !== null && _f !== void 0 ? _f : 0) + 1, _a)) })], true);
-                            // Fire-and-forget: update the tree with server truth when the reaction API resolves
-                            addReaction({
-                                targetType: "comment",
-                                targetId: newCommentData.id,
-                                reactionType: autoReaction,
-                            })
-                                .then(function (updatedComment) {
-                                addCommentsToTree([updatedComment], true);
-                            })
-                                .catch(function () { });
-                        }
-                        else {
-                            addCommentsToTree([newCommentData], true);
-                        }
-                    }
-                    setContextEntity === null || setContextEntity === void 0 ? void 0 : setContextEntity(function (prevEntity) {
-                        if (!prevEntity)
-                            return prevEntity;
-                        return __assign(__assign({}, prevEntity), { repliesCount: prevEntity.repliesCount + 1 });
-                    });
-                    return [2 /*return*/, newCommentData];
-                case 3:
-                    err_1 = _g.sent();
-                    // TODO: currently we remove the temp comment from the tree but don't offer the user any option to retry. It's as if they've never sent anything and all they typed is gone. We need to add a flag for comment in the tree that says t failed so we can give he user a try again button
-                    removeCommentFromTree(TEMP_ID);
-                    handleError(err_1, "Failed to submit a new comment: ");
-                    return [2 /*return*/, undefined];
-                case 4:
-                    submittingComment.current = false;
-                    setSubmittingCommentState(false);
-                    return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
+    const handleCreateComment = useCallback(async (props) => {
+        const { parentId, content, gif, mentions, autoReaction } = props;
+        if (submittingComment.current)
+            return;
+        if (!entity) {
+            console.error("Invalid entity in useCommentSection");
+            return;
+        }
+        if (!user) {
+            callbacks?.loginRequiredCallback?.();
+            return;
+        }
+        if (callbacks?.usernameRequiredCallback && !user.username) {
+            callbacks?.usernameRequiredCallback();
+            return;
+        }
+        if (!gif && (!content || content.length <= 1)) {
+            callbacks?.commentTooShortCallback();
+            return;
+        }
+        submittingComment.current = true;
+        setSubmittingCommentState(true);
+        // Filter mentions to include only those whose trigger + identifier appears in the content
+        const filteredMentions = content
+            ? (mentions || []).filter((mention) => {
+                if (mention.type === "space") {
+                    return content.includes(mentionTriggers.space + mention.slug);
+                }
+                return content.includes(mentionTriggers.user + mention.username);
+            })
+            : [];
+        const TEMP_ID = Math.random().toString(36).substring(2, 7);
+        const tempNewComment = {
+            id: TEMP_ID,
+            foreignId: null,
+            projectId: "TEMP_PROJECT_ID",
+            userId: user.id,
+            parentId: parentId ?? repliedToComment?.id ?? null,
+            entityId: entity.id,
+            content: content ?? null,
+            gif: gif ?? null,
+            mentions: filteredMentions,
+            user: {
+                ...user,
+                bio: null,
+                birthdate: new Date(),
+                location: null,
+                createdAt: new Date(),
+                avatarFileId: null,
+                bannerFileId: null,
+            },
+            upvotes: [],
+            downvotes: [],
+            userReaction: autoReaction ?? null,
+            reactionCounts: {
+                upvote: autoReaction === "upvote" ? 1 : 0,
+                downvote: autoReaction === "downvote" ? 1 : 0,
+                like: autoReaction === "like" ? 1 : 0,
+                love: autoReaction === "love" ? 1 : 0,
+                wow: autoReaction === "wow" ? 1 : 0,
+                sad: autoReaction === "sad" ? 1 : 0,
+                angry: autoReaction === "angry" ? 1 : 0,
+                funny: autoReaction === "funny" ? 1 : 0,
+            },
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            deletedAt: null,
+            parentDeletedAt: null,
+            userDeletedAt: null,
+            repliesCount: 0,
+            metadata: {},
+            moderationStatus: null,
+            moderatedAt: null,
+            moderatedById: null,
+            moderatedByType: null,
+            moderationReason: null,
+        };
+        setRepliedToComment(null);
+        setShowReplyBanner(false);
+        setPushMention(null);
+        try {
+            addCommentsToTree([tempNewComment], true);
+            const newCommentData = await createComment({
+                entityId: entity.id,
+                parentCommentId: parentId ?? repliedToComment?.id ?? null,
+                content,
+                gif,
+                mentions: filteredMentions,
+            });
+            if (newCommentData) {
+                removeCommentFromTree(TEMP_ID);
+                if (autoReaction) {
+                    // Add comment with optimistic reaction data while the API call is in flight
+                    addCommentsToTree([{ ...newCommentData, userReaction: autoReaction, reactionCounts: { ...newCommentData.reactionCounts, [autoReaction]: (newCommentData.reactionCounts?.[autoReaction] ?? 0) + 1 } }], true);
+                    // Fire-and-forget: update the tree with server truth when the reaction API resolves
+                    addReaction({
+                        targetType: "comment",
+                        targetId: newCommentData.id,
+                        reactionType: autoReaction,
+                    })
+                        .then((updatedComment) => {
+                        addCommentsToTree([updatedComment], true);
+                    })
+                        .catch(() => { });
+                }
+                else {
+                    addCommentsToTree([newCommentData], true);
+                }
             }
-        });
-    }); }, [
+            setContextEntity?.((prevEntity) => {
+                if (!prevEntity)
+                    return prevEntity;
+                return { ...prevEntity, repliesCount: prevEntity.repliesCount + 1 };
+            });
+            return newCommentData;
+        }
+        catch (err) {
+            // TODO: currently we remove the temp comment from the tree but don't offer the user any option to retry. It's as if they've never sent anything and all they typed is gone. We need to add a flag for comment in the tree that says t failed so we can give he user a try again button
+            removeCommentFromTree(TEMP_ID);
+            handleError(err, "Failed to submit a new comment: ");
+            return undefined;
+        }
+        finally {
+            submittingComment.current = false;
+            setSubmittingCommentState(false);
+        }
+    }, [
         user,
         addCommentsToTree,
         removeCommentFromTree,
@@ -254,167 +201,111 @@ function useCommentSectionData(props) {
         repliedToComment,
         callbacks,
     ]);
-    var handleDeleteComment = useCallback(function (_a) { return __awaiter(_this, [_a], void 0, function (_b) {
-        var err_2;
-        var commentId = _b.commentId;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    if (!isUUID(commentId))
-                        return [2 /*return*/];
-                    _c.label = 1;
-                case 1:
-                    _c.trys.push([1, 3, , 4]);
-                    // Reddit-style: mark as deleted placeholder instead of removing from tree
-                    markCommentAsDeleted(commentId);
-                    return [4 /*yield*/, deleteComment({ commentId: commentId })];
-                case 2:
-                    _c.sent();
-                    setContextEntity === null || setContextEntity === void 0 ? void 0 : setContextEntity(function (prevEntity) {
-                        if (!prevEntity)
-                            return prevEntity;
-                        return __assign(__assign({}, prevEntity), { repliesCount: prevEntity.repliesCount - 1 });
-                    });
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_2 = _c.sent();
-                    handleError(err_2, "Failed to delete comment");
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+    const handleDeleteComment = useCallback(async ({ commentId }) => {
+        if (!isUUID(commentId))
+            return;
+        try {
+            // Reddit-style: mark as deleted placeholder instead of removing from tree
+            markCommentAsDeleted(commentId);
+            await deleteComment({ commentId });
+            setContextEntity?.((prevEntity) => {
+                if (!prevEntity)
+                    return prevEntity;
+                return { ...prevEntity, repliesCount: prevEntity.repliesCount - 1 };
+            });
+        }
+        catch (err) {
+            handleError(err, "Failed to delete comment");
+        }
+    }, [deleteComment, markCommentAsDeleted]);
+    const handleUpdateComment = useCallback(async ({ commentId, content }) => {
+        try {
+            const updatedComment = await updateComment({ commentId, content });
+            if (updatedComment) {
+                console.log("update comment in tree. Implement!");
             }
-        });
-    }); }, [deleteComment, markCommentAsDeleted]);
-    var handleUpdateComment = useCallback(function (_a) { return __awaiter(_this, [_a], void 0, function (_b) {
-        var updatedComment, err_3;
-        var commentId = _b.commentId, content = _b.content;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    _c.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, updateComment({ commentId: commentId, content: content })];
-                case 1:
-                    updatedComment = _c.sent();
-                    if (updatedComment) {
-                        console.log("update comment in tree. Implement!");
-                    }
-                    return [3 /*break*/, 3];
-                case 2:
-                    err_3 = _c.sent();
-                    handleError(err_3, "Failed to update comment");
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
+        }
+        catch (err) {
+            handleError(err, "Failed to update comment");
+        }
+    }, [updateComment]);
+    useEffect(() => {
+        const handleFetchSingleComment = async () => {
+            if (fetchingCommentIdRef.current === highlightedCommentId) {
+                return; // Skip if already fetching for this comment ID
             }
-        });
-    }); }, [updateComment]);
-    useEffect(function () {
-        var handleFetchSingleComment = function () { return __awaiter(_this, void 0, void 0, function () {
-            var fetchedCommentData, targetComment, parentComment, err_4;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (fetchingCommentIdRef.current === highlightedCommentId) {
-                            return [2 /*return*/]; // Skip if already fetching for this comment ID
-                        }
-                        fetchingCommentIdRef.current = highlightedCommentId;
-                        _b.label = 1;
-                    case 1:
-                        _b.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, fetchComment({
-                                commentId: highlightedCommentId,
-                                include: ["user", "parent"],
-                            })];
-                    case 2:
-                        fetchedCommentData = _b.sent();
-                        if (!fetchedCommentData) {
-                            console.error("Issue fetching single comment comment not found");
-                            return [2 /*return*/];
-                        }
-                        if (!fetchedCommentData.comment) {
-                            console.error("Highlighted comment not found");
-                            return [2 /*return*/];
-                        }
-                        targetComment = fetchedCommentData.comment;
-                        parentComment = (_a = targetComment.parentComment) !== null && _a !== void 0 ? _a : null;
-                        // Maintain backward-compatible state structure
-                        setHighlightedComment({
-                            comment: targetComment,
-                            parentComment: parentComment,
-                        });
-                        addCommentsToTree === null || addCommentsToTree === void 0 ? void 0 : addCommentsToTree(parentComment ? [targetComment, parentComment] : [targetComment]);
-                        return [3 /*break*/, 4];
-                    case 3:
-                        err_4 = _b.sent();
-                        handleError(err_4, "Fetching single comment failed");
-                        return [3 /*break*/, 4];
-                    case 4: return [2 /*return*/];
+            fetchingCommentIdRef.current = highlightedCommentId;
+            try {
+                const fetchedCommentData = await fetchComment({
+                    commentId: highlightedCommentId,
+                    include: ["user", "parent"],
+                });
+                if (!fetchedCommentData) {
+                    console.error("Issue fetching single comment comment not found");
+                    return;
                 }
-            });
-        }); };
+                if (!fetchedCommentData.comment) {
+                    console.error("Highlighted comment not found");
+                    return;
+                }
+                const targetComment = fetchedCommentData.comment;
+                const parentComment = targetComment.parentComment ?? null;
+                // Maintain backward-compatible state structure
+                setHighlightedComment({
+                    comment: targetComment,
+                    parentComment: parentComment,
+                });
+                addCommentsToTree?.(parentComment ? [targetComment, parentComment] : [targetComment]);
+            }
+            catch (err) {
+                handleError(err, "Fetching single comment failed");
+            }
+        };
         if (highlightedCommentId) {
             handleFetchSingleComment();
         }
     }, [highlightedCommentId, fetchComment, addCommentsToTree]);
-    useEffect(function () {
-        var handleFetchEntity = function () { return __awaiter(_this, void 0, void 0, function () {
-            var uniqueKey, fetchedEntity, err_5;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!foreignId && !entityId && !shortId) {
-                            return [2 /*return*/];
-                        }
-                        if (entity && entityId && entity.id === entityId)
-                            return [2 /*return*/];
-                        if (entity && foreignId && entity.foreignId === foreignId)
-                            return [2 /*return*/];
-                        if (entity && shortId && entity.shortId === shortId)
-                            return [2 /*return*/];
-                        uniqueKey = "".concat(entityId !== null && entityId !== void 0 ? entityId : "", "-").concat(foreignId !== null && foreignId !== void 0 ? foreignId : "", "-").concat(shortId !== null && shortId !== void 0 ? shortId : "");
-                        if (fetchedStatus.current[uniqueKey])
-                            return [2 /*return*/];
-                        fetchedStatus.current[uniqueKey] = true;
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 8, , 9]);
-                        fetchedEntity = null;
-                        if (!entityId) return [3 /*break*/, 3];
-                        return [4 /*yield*/, fetchEntity({
-                                entityId: entityId,
-                            })];
-                    case 2:
-                        fetchedEntity = _a.sent();
-                        return [3 /*break*/, 7];
-                    case 3:
-                        if (!foreignId) return [3 /*break*/, 5];
-                        return [4 /*yield*/, fetchEntityByForeignId({
-                                foreignId: foreignId,
-                                createIfNotFound: createIfNotFound,
-                            })];
-                    case 4:
-                        fetchedEntity = _a.sent();
-                        return [3 /*break*/, 7];
-                    case 5:
-                        if (!shortId) return [3 /*break*/, 7];
-                        return [4 /*yield*/, fetchEntityByShortId({
-                                shortId: shortId,
-                            })];
-                    case 6:
-                        fetchedEntity = _a.sent();
-                        _a.label = 7;
-                    case 7:
-                        if (fetchedEntity) {
-                            setEntity(fetchedEntity);
-                        }
-                        return [3 /*break*/, 9];
-                    case 8:
-                        err_5 = _a.sent();
-                        handleError(err_5, "Fetching entity failed");
-                        return [3 /*break*/, 9];
-                    case 9: return [2 /*return*/];
+    useEffect(() => {
+        const handleFetchEntity = async () => {
+            if (!foreignId && !entityId && !shortId) {
+                return;
+            }
+            if (entity && entityId && entity.id === entityId)
+                return;
+            if (entity && foreignId && entity.foreignId === foreignId)
+                return;
+            if (entity && shortId && entity.shortId === shortId)
+                return;
+            const uniqueKey = `${entityId ?? ""}-${foreignId ?? ""}-${shortId ?? ""}`;
+            if (fetchedStatus.current[uniqueKey])
+                return;
+            fetchedStatus.current[uniqueKey] = true;
+            try {
+                let fetchedEntity = null;
+                if (entityId) {
+                    fetchedEntity = await fetchEntity({
+                        entityId,
+                    });
                 }
-            });
-        }); };
+                else if (foreignId) {
+                    fetchedEntity = await fetchEntityByForeignId({
+                        foreignId,
+                        createIfNotFound,
+                    });
+                }
+                else if (shortId) {
+                    fetchedEntity = await fetchEntityByShortId({
+                        shortId,
+                    });
+                }
+                if (fetchedEntity) {
+                    setEntity(fetchedEntity);
+                }
+            }
+            catch (err) {
+                handleError(err, "Fetching entity failed");
+            }
+        };
         handleFetchEntity();
     }, [
         fetchEntity,
@@ -427,29 +318,29 @@ function useCommentSectionData(props) {
         createIfNotFound,
     ]);
     return {
-        entity: entity,
-        callbacks: callbacks,
-        entityCommentsTree: entityCommentsTree,
-        comments: comments,
-        newComments: newComments,
-        highlightedComment: highlightedComment,
-        loading: loading,
-        hasMore: hasMore,
+        entity,
+        callbacks,
+        entityCommentsTree,
+        comments,
+        newComments,
+        highlightedComment,
+        loading,
+        hasMore,
         submittingComment: submittingCommentState,
-        loadMore: loadMore,
-        sortBy: sortBy,
-        setSortBy: setSortBy,
-        pushMention: pushMention,
-        selectedComment: selectedComment,
-        setSelectedComment: setSelectedComment,
-        repliedToComment: repliedToComment,
-        setRepliedToComment: setRepliedToComment,
-        showReplyBanner: showReplyBanner,
-        setShowReplyBanner: setShowReplyBanner,
-        addCommentsToTree: addCommentsToTree,
-        removeCommentFromTree: removeCommentFromTree,
-        handleShallowReply: handleShallowReply,
-        handleDeepReply: handleDeepReply,
+        loadMore,
+        sortBy,
+        setSortBy,
+        pushMention,
+        selectedComment,
+        setSelectedComment,
+        repliedToComment,
+        setRepliedToComment,
+        showReplyBanner,
+        setShowReplyBanner,
+        addCommentsToTree,
+        removeCommentFromTree,
+        handleShallowReply,
+        handleDeepReply,
         createComment: handleCreateComment,
         updateComment: handleUpdateComment,
         deleteComment: handleDeleteComment,