) : (

- - +

- { - this.state.communityName.match({ ++ {this.state.communityName.match({ + some: name => ( - ++ + /c/{name}{" "} + + ), + none: <>, - }) - } ++ })} + {i18n.t("modlog")} +

+ + - { - this.state.siteRes.site_view.match({ - some: site_view => !site_view.site.hide_modlog_mod_names.unwrapOr(false) && ( ++ {this.state.siteRes.site_view.match({ ++ some: site_view => ++ !site_view.site.hide_modlog_mod_names.unwrapOr(false) && ( + + ), - none: <>, - }) - } ++ none: <>, ++ })} + ++ + +

+ @@@ -600,6 -655,11 +676,11 @@@ ); } + handleFilterActionChange(i: Modlog, event: any) { + i.setState({ filter_action: event.target.value }); + i.refetch(); + } + handlePageChange(val: number) { this.setState({ page: val }); this.refetch(); @@@ -608,10 -668,12 +689,12 @@@ refetch() { let modlogForm = new GetModlog({ community_id: this.state.communityId, - mod_person_id: None, page: Some(this.state.page), limit: Some(fetchLimit), auth: auth(false).ok(), + type_: this.state.filter_action, + other_person_id: this.state.filter_user, + mod_person_id: this.state.filter_mod, }); WebSocketService.Instance.send(wsClient.getModlog(modlogForm)); @@@ -628,6 -690,82 +711,86 @@@ }); } + setupUserFilter() { + if (isBrowser()) { + let selectId: any = document.getElementById("filter-user"); + if (selectId) { + this.userChoices = new Choices(selectId, choicesModLogConfig); + this.userChoices.passedElement.element.addEventListener( + "choice", + (e: any) => { + this.state.filter_user = Some(Number(e.detail.choice.value)); + this.setState(this.state); + this.refetch(); + }, + false + ); + this.userChoices.passedElement.element.addEventListener( + "search", + debounce(async (e: any) => { + try { + let users = (await fetchUsers(e.detail.value)).users; + this.userChoices.setChoices( - users.map(u => {return { - value: u.person.id.toString(), - label: u.person.name, - }}), ++ users.map(u => { ++ return { ++ value: u.person.id.toString(), ++ label: u.person.name, ++ }; ++ }), + "value", + "label", + true + ); + } catch (err) { + console.log(err); + } + }), + false + ); + } + } + } + + setupModFilter() { + if (isBrowser()) { + let selectId: any = document.getElementById("filter-mod"); + if (selectId) { + this.modChoices = new Choices(selectId, choicesModLogConfig); + this.modChoices.passedElement.element.addEventListener( + "choice", + (e: any) => { + this.state.filter_mod = Some(Number(e.detail.choice.value)); + this.setState(this.state); + this.refetch(); + }, + false + ); + this.modChoices.passedElement.element.addEventListener( + "search", + debounce(async (e: any) => { + try { + let mods = (await fetchUsers(e.detail.value)).users; + this.modChoices.setChoices( - mods.map(u => {return { - value: u.person.id.toString(), - label: u.person.name, - }}), ++ mods.map(u => { ++ return { ++ value: u.person.id.toString(), ++ label: u.person.name, ++ }; ++ }), + "value", + "label", + true + ); + } catch (err) { + console.log(err); + } + }), + false + ); + } + } + } + static fetchInitialData(req: InitialFetchRequest): Promise[] { let pathSplit = req.path.split("/"); let communityId = Some(pathSplit[3]).map(Number); @@@ -639,6 -777,8 +802,8 @@@ community_id: communityId, mod_person_id: None, auth: req.auth, + type_: ModlogActionType.All, - other_person_id: None ++ other_person_id: None, }); promises.push(req.client.getModlog(modlogForm)); @@@ -671,6 -811,7 +836,7 @@@ } else if (op == UserOperation.GetCommunity) { let data = wsJsonToRes(msg, GetCommunityResponse); this.state.communityMods = Some(data.moderators); + this.state.communityName = Some(data.community_view.community.name); } } } diff --combined src/shared/utils.ts index 3354fcc,ab3f879..19b48c1 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@@ -4,10 -4,7 +4,10 @@@ import emojiShortName from "emoji-short import { BlockCommunityResponse, BlockPersonResponse, + Comment as CommentI, + CommentNode as CommentNodeI, CommentReportView, + CommentSortType, CommentView, CommunityBlockView, CommunityModeratorView, @@@ -42,7 -39,12 +42,7 @@@ import tippy from "tippy.js" import Toastify from "toastify-js"; import { httpBase } from "./env"; import { i18n, languages } from "./i18next"; -import { - CommentNode as CommentNodeI, - CommentSortType, - DataType, - IsoData, -} from "./interfaces"; +import { DataType, IsoData } from "./interfaces"; import { UserService, WebSocketService } from "./services"; var Tribute: any; @@@ -72,7 -74,6 +72,7 @@@ export const postRefetchSeconds: numbe export const fetchLimit = 20; export const trendingFetchLimit = 6; export const mentionDropdownFetchLimit = 10; +export const commentTreeMaxDepth = 8; export const relTags = "noopener nofollow"; @@@ -210,10 -211,9 +210,10 @@@ export function canMod export function canAdmin( admins: Option, creator_id: number, - myUserInfo = UserService.Instance.myUserInfo + myUserInfo = UserService.Instance.myUserInfo, + onSelf = false ): boolean { - return canMod(None, admins, creator_id, myUserInfo); + return canMod(None, admins, creator_id, myUserInfo, onSelf); } export function isMod( @@@ -611,7 -611,7 +611,7 @@@ export function notifyComment(comment_v let info: NotifyInfo = { name: comment_view.creator.name, icon: comment_view.creator.avatar, - link: `/post/${comment_view.post.id}/comment/${comment_view.comment.id}`, + link: `/comment/${comment_view.comment.id}`, body: comment_view.comment.content, }; notify(info, router); @@@ -813,14 -813,12 +813,14 @@@ export function getRecipientIdFromProps : 1; } -export function getIdFromProps(props: any): number { - return Number(props.match.params.id); +export function getIdFromProps(props: any): Option { + let id: string = props.match.params.post_id; + return id ? Some(Number(id)) : None; } -export function getCommentIdFromProps(props: any): number { - return Number(props.match.params.comment_id); +export function getCommentIdFromProps(props: any): Option { + let id: string = props.match.params.comment_id; + return id ? Some(Number(id)) : None; } export function getUsernameFromProps(props: any): string { @@@ -831,7 -829,6 +831,7 @@@ export function editCommentRes(data: Co let found = comments.find(c => c.comment.id == data.comment.id); if (found) { found.comment.content = data.comment.content; + found.comment.distinguished = data.comment.distinguished; found.comment.updated = data.comment.updated; found.comment.removed = data.comment.removed; found.comment.deleted = data.comment.deleted; @@@ -988,12 -985,61 +988,12 @@@ export function updateRegistrationAppli export function commentsToFlatNodes(comments: CommentView[]): CommentNodeI[] { let nodes: CommentNodeI[] = []; for (let comment of comments) { - nodes.push({ comment_view: comment }); + nodes.push({ comment_view: comment, children: [], depth: 0 }); } return nodes; } -function commentSort(tree: CommentNodeI[], sort: CommentSortType) { - // First, put removed and deleted comments at the bottom, then do your other sorts - if (sort == CommentSortType.Top) { - tree.sort( - (a, b) => - +a.comment_view.comment.removed - +b.comment_view.comment.removed || - +a.comment_view.comment.deleted - +b.comment_view.comment.deleted || - b.comment_view.counts.score - a.comment_view.counts.score - ); - } else if (sort == CommentSortType.New) { - tree.sort( - (a, b) => - +a.comment_view.comment.removed - +b.comment_view.comment.removed || - +a.comment_view.comment.deleted - +b.comment_view.comment.deleted || - b.comment_view.comment.published.localeCompare( - a.comment_view.comment.published - ) - ); - } else if (sort == CommentSortType.Old) { - tree.sort( - (a, b) => - +a.comment_view.comment.removed - +b.comment_view.comment.removed || - +a.comment_view.comment.deleted - +b.comment_view.comment.deleted || - a.comment_view.comment.published.localeCompare( - b.comment_view.comment.published - ) - ); - } else if (sort == CommentSortType.Hot) { - tree.sort( - (a, b) => - +a.comment_view.comment.removed - +b.comment_view.comment.removed || - +a.comment_view.comment.deleted - +b.comment_view.comment.deleted || - hotRankComment(b.comment_view as CommentView) - - hotRankComment(a.comment_view as CommentView) - ); - } - - // Go through the children recursively - for (let node of tree) { - if (node.children) { - commentSort(node.children, sort); - } - } -} - -export function commentSortSortType(tree: CommentNodeI[], sort: SortType) { - commentSort(tree, convertCommentSortType(sort)); -} - -function convertCommentSortType(sort: SortType): CommentSortType { +export function convertCommentSortType(sort: SortType): CommentSortType { if ( sort == SortType.TopAll || sort == SortType.TopDay || @@@ -1013,32 -1059,21 +1013,32 @@@ export function buildCommentsTree( comments: CommentView[], - commentSortType: CommentSortType + parentComment: boolean ): CommentNodeI[] { let map = new Map(); + let depthOffset = !parentComment + ? 0 + : getDepthFromComment(comments[0].comment); + for (let comment_view of comments) { let node: CommentNodeI = { comment_view: comment_view, children: [], - depth: 0, + depth: getDepthFromComment(comment_view.comment) - depthOffset, }; map.set(comment_view.comment.id, { ...node }); } + let tree: CommentNodeI[] = []; + + // if its a parent comment fetch, then push the first comment to the top node. + if (parentComment) { + tree.push(map.get(comments[0].comment.id)); + } + for (let comment_view of comments) { let child = map.get(comment_view.comment.id); - let parent_id = comment_view.comment.parent_id; + let parent_id = getCommentParentId(comment_view.comment); parent_id.match({ some: parentId => { let parent = map.get(parentId); @@@ -1048,37 -1083,26 +1048,37 @@@ } }, none: () => { - tree.push(child); + if (!parentComment) { + tree.push(child); + } }, }); - - setDepth(child); } - commentSort(tree, commentSortType); - return tree; } -function setDepth(node: CommentNodeI, i = 0) { - for (let child of node.children) { - child.depth = i; - setDepth(child, i + 1); +export function getCommentParentId(comment: CommentI): Option { + let split = comment.path.split("."); + // remove the 0 + split.shift(); + + if (split.length > 1) { + return Some(Number(split[split.length - 2])); + } else { + return None; } } -export function insertCommentIntoTree(tree: CommentNodeI[], cv: CommentView) { +export function getDepthFromComment(comment: CommentI): number { + return comment.path.split(".").length - 2; +} + +export function insertCommentIntoTree( + tree: CommentNodeI[], + cv: CommentView, + parentComment: boolean +) { // Building a fake node to be used for later let node: CommentNodeI = { comment_view: cv, @@@ -1086,7 -1110,7 +1086,7 @@@ depth: 0, }; - cv.comment.parent_id.match({ + getCommentParentId(cv.comment).match({ some: parentId => { let parentComment = searchCommentTree(tree, parentId); parentComment.match({ @@@ -1098,9 -1122,7 +1098,9 @@@ }); }, none: () => { - tree.unshift(node); + if (!parentComment) { + tree.unshift(node); + } }, }); } @@@ -1127,7 -1149,6 +1127,7 @@@ export function searchCommentTree export const colorList: string[] = [ hsl(0), + hsl(50), hsl(100), hsl(150), hsl(200), @@@ -1271,7 -1292,7 +1271,7 @@@ export function showLocal(isoData: IsoD .unwrapOr(false); } - interface ChoicesValue { + export interface ChoicesValue { value: string; label: string; } @@@ -1359,6 -1380,39 +1359,40 @@@ export const choicesConfig = }, }; + export const choicesModLogConfig = { + shouldSort: false, + searchResultLimit: fetchLimit, + classNames: { + containerOuter: "choices mb-2 custom-select col-4 px-0", - containerInner: "choices__inner bg-secondary border-0 py-0 modlog-choices-font-size", ++ containerInner: ++ "choices__inner bg-secondary border-0 py-0 modlog-choices-font-size", + input: "form-control", + inputCloned: "choices__input--cloned w-100", + list: "choices__list", + listItems: "choices__list--multiple", + listSingle: "choices__list--single py-0", + listDropdown: "choices__list--dropdown", + item: "choices__item bg-secondary", + itemSelectable: "choices__item--selectable", + itemDisabled: "choices__item--disabled", + itemChoice: "choices__item--choice", + placeholder: "choices__placeholder", + group: "choices__group", + groupHeading: "choices__heading", + button: "choices__button", + activeState: "is-active", + focusState: "is-focused", + openState: "is-open", + disabledState: "is-disabled", + highlightedState: "text-info", + selectedState: "text-info", + flippedState: "is-flipped", + loadingState: "is-loading", + noResults: "has-no-results", + noChoices: "has-no-choices", + }, + }; + export function communitySelectName(cv: CommunityView): string { return cv.community.local ? cv.community.title @@@ -1418,15 -1472,3 +1452,15 @@@ export function enableDownvotes(siteRes export function enableNsfw(siteRes: GetSiteResponse): boolean { return siteRes.site_view.map(s => s.site.enable_nsfw).unwrapOr(false); } + +export function postToCommentSortType(sort: SortType): CommentSortType { + if ([SortType.Active, SortType.Hot].includes(sort)) { + return CommentSortType.Hot; + } else if ([SortType.New, SortType.NewComments].includes(sort)) { + return CommentSortType.New; + } else if (sort == SortType.Old) { + return CommentSortType.Old; + } else { + return CommentSortType.Top; + } +}

{i18n.t("time")}	{i18n.t("mod")}