74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import { createSignal, createEffect, For, Show } from "solid-js";
|
|
import type { CommentSortingProps } from "~/types/comment";
|
|
import CommentBlock from "./CommentBlock";
|
|
|
|
export default function CommentSorting(props: CommentSortingProps) {
|
|
const [clickedOnce, setClickedOnce] = createSignal(false);
|
|
const [showingBlock, setShowingBlock] = createSignal<Map<number, boolean>>(
|
|
new Map(props.topLevelComments?.map((comment) => [comment.id, true]))
|
|
);
|
|
|
|
// Update showing block when top level comments change
|
|
createEffect(() => {
|
|
setShowingBlock(
|
|
new Map(props.topLevelComments?.map((comment) => [comment.id, true]))
|
|
);
|
|
});
|
|
|
|
// Reset clickedOnce after timeout
|
|
createEffect(() => {
|
|
if (clickedOnce()) {
|
|
setTimeout(() => setClickedOnce(false), 300);
|
|
}
|
|
});
|
|
|
|
const checkForDoubleClick = (id: number) => {
|
|
if (clickedOnce()) {
|
|
setShowingBlock((prev) => {
|
|
const newMap = new Map(prev);
|
|
newMap.set(id, !prev.get(id));
|
|
return newMap;
|
|
});
|
|
} else {
|
|
setClickedOnce(true);
|
|
}
|
|
};
|
|
|
|
// Comments are already sorted from server, no need for client-side sorting
|
|
return (
|
|
<For each={props.topLevelComments}>
|
|
{(topLevelComment) => (
|
|
<div
|
|
onClick={() => checkForDoubleClick(topLevelComment.id)}
|
|
class="bg-mantle mt-4 max-w-full rounded-lg py-2 pl-2 shadow-xl select-none sm:pl-4 md:pl-8 lg:pl-12"
|
|
>
|
|
<Show
|
|
when={showingBlock().get(topLevelComment.id)}
|
|
fallback={<div class="h-4" />}
|
|
>
|
|
<CommentBlock
|
|
comment={topLevelComment}
|
|
projectID={props.postID}
|
|
recursionCount={1}
|
|
allComments={props.allComments}
|
|
child_comments={props.allComments?.filter(
|
|
(comment) => comment.parent_comment_id === topLevelComment.id
|
|
)}
|
|
privilegeLevel={props.privilegeLevel}
|
|
currentUserID={props.currentUserID}
|
|
reactionMap={props.reactionMap}
|
|
level={0}
|
|
socket={props.socket}
|
|
userCommentMap={props.userCommentMap}
|
|
toggleModification={props.toggleModification}
|
|
newComment={props.newComment}
|
|
commentSubmitLoading={props.commentSubmitLoading}
|
|
commentReaction={props.commentReaction}
|
|
/>
|
|
</Show>
|
|
</div>
|
|
)}
|
|
</For>
|
|
);
|
|
}
|