From: Anon <makotech222@gmail.com>
Date: Sat, 4 Jun 2022 16:47:10 +0000 (-0500)
Subject: Add support for filtering mod logs
X-Git-Url: http://these/git/%7B%60%24%7BwebArchiveUrl%7D/%22%7B%7D/%22https:/nerdica.net/README.ja.md?a=commitdiff_plain;h=a8ab4e0558820e26a6308e732b2ee1e11dec1051;p=lemmy-ui.git

Add support for filtering mod logs
---

diff --git a/lemmy-translations b/lemmy-translations
index 7c1b691..29c689a 160000
--- a/lemmy-translations
+++ b/lemmy-translations
@@ -1 +1 @@
-Subproject commit 7c1b691af63845a2fe2f8219b4620b8db3c9c3ba
+Subproject commit 29c689af8d16417c1b84d9491f6bcea888720a87
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index fe728ca..3ec52d0 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -375,6 +375,10 @@ br.big {
   border-radius: 4px;
 }
 
+.modlog-choices-font-size {
+  font-size: .9375rem !important;
+}
+
 .preview-lines {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx
index 09a7ca3..e2266fe 100644
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@@ -54,6 +54,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
       description: None,
       community_creation_admin_only: None,
       auth: undefined,
+      hide_modlog_mod_names: Some(true),
     }),
     loading: false,
     themeList: None,
@@ -98,6 +99,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           default_theme: Some(site.default_theme),
           default_post_listing_type: Some(site.default_post_listing_type),
           legal_information: site.legal_information,
+          hide_modlog_mod_names: site.hide_modlog_mod_names,
           auth: undefined,
         });
       },
@@ -437,6 +439,25 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               </div>
             </div>
           </div>
+          <div class="form-group row">
+            <div class="col-12">
+              <div class="form-check">
+                <input
+                  class="form-check-input"
+                  id="create-site-hide-modlog-mod-names"
+                  type="checkbox"
+                  checked={toUndefined(this.state.siteForm.hide_modlog_mod_names)}
+                  onChange={linkEvent(this, this.handleSiteHideModlogModNames)}
+                />
+                <label
+                  class="form-check-label"
+                  htmlFor="create-site-hide-modlog-mod-names"
+                >
+                  {i18n.t("hide_modlog_mod_names")}
+                </label>
+              </div>
+            </div>
+          </div>
           <div class="form-group row">
             <div class="col-12">
               <button
@@ -495,6 +516,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
         default_theme: sForm.default_theme,
         default_post_listing_type: sForm.default_post_listing_type,
         auth: auth().unwrap(),
+        hide_modlog_mod_names: sForm.hide_modlog_mod_names
       });
       WebSocketService.Instance.send(wsClient.createSite(form));
     }
@@ -561,6 +583,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     i.setState(i.state);
   }
 
+  handleSiteHideModlogModNames(i: SiteForm, event: any) {
+    i.state.siteForm.hide_modlog_mod_names = Some(event.target.checked);
+    i.setState(i.state);
+  }
+
   handleSiteDefaultTheme(i: SiteForm, event: any) {
     i.state.siteForm.default_theme = Some(event.target.value);
     i.setState(i.state);
diff --git a/src/shared/components/modlog.tsx b/src/shared/components/modlog.tsx
index c90dd64..e0674f8 100644
--- a/src/shared/components/modlog.tsx
+++ b/src/shared/components/modlog.tsx
@@ -1,5 +1,5 @@
 import { None, Option, Some } from "@sniptt/monads";
-import { Component } from "inferno";
+import { Component, linkEvent } from "inferno";
 import { Link } from "inferno-router";
 import {
   AdminPurgeCommentView,
@@ -17,12 +17,14 @@ import {
   ModBanFromCommunityView,
   ModBanView,
   ModLockPostView,
+  ModlogActionType,
   ModRemoveCommentView,
   ModRemoveCommunityView,
   ModRemovePostView,
   ModStickyPostView,
   ModTransferCommunityView,
   PersonSafe,
+  toUndefined,
   UserOperation,
   wsJsonToRes,
   wsUserOp,
@@ -36,7 +38,11 @@ import {
   amAdmin,
   amMod,
   auth,
+  choicesConfig,
+  choicesModLogConfig,
+  debounce,
   fetchLimit,
+  fetchUsers,
   isBrowser,
   setIsoData,
   toast,
@@ -49,53 +55,43 @@ import { MomentTime } from "./common/moment-time";
 import { Paginator } from "./common/paginator";
 import { CommunityLink } from "./community/community-link";
 import { PersonListing } from "./person/person-listing";
-
-enum ModlogEnum {
-  ModRemovePost,
-  ModLockPost,
-  ModStickyPost,
-  ModRemoveComment,
-  ModRemoveCommunity,
-  ModBanFromCommunity,
-  ModAddCommunity,
-  ModTransferCommunity,
-  ModAdd,
-  ModBan,
-  AdminPurgePerson,
-  AdminPurgeCommunity,
-  AdminPurgePost,
-  AdminPurgeComment,
-}
-
 type ModlogType = {
   id: number;
-  type_: ModlogEnum;
-  moderator: PersonSafe;
+  type_: ModlogActionType;
+  moderator: Option<PersonSafe>;
   view:
-    | ModRemovePostView
-    | ModLockPostView
-    | ModStickyPostView
-    | ModRemoveCommentView
-    | ModRemoveCommunityView
-    | ModBanFromCommunityView
-    | ModBanView
-    | ModAddCommunityView
-    | ModTransferCommunityView
-    | ModAddView
-    | AdminPurgePersonView
-    | AdminPurgeCommunityView
-    | AdminPurgePostView
-    | AdminPurgeCommentView;
+  | ModRemovePostView
+  | ModLockPostView
+  | ModStickyPostView
+  | ModRemoveCommentView
+  | ModRemoveCommunityView
+  | ModBanFromCommunityView
+  | ModBanView
+  | ModAddCommunityView
+  | ModTransferCommunityView
+  | ModAddView
+  | AdminPurgePersonView
+  | AdminPurgeCommunityView
+  | AdminPurgePostView
+  | AdminPurgeCommentView;
   when_: string;
 };
+var Choices: any;
+if (isBrowser()) {
+  Choices = require("choices.js");
+}
 
 interface ModlogState {
   res: Option<GetModlogResponse>;
   communityId: Option<number>;
   communityMods: Option<CommunityModeratorView[]>;
+  communityName: Option<string>,
   page: number;
   siteRes: GetSiteResponse;
   loading: boolean;
+  filter_action: ModlogActionType,
+  filter_user: Option<number>,
+  filter_mod: Option<number>,
 }
 
 export class Modlog extends Component<any, ModlogState> {
@@ -105,18 +101,22 @@ export class Modlog extends Component<any, ModlogState> {
     GetCommunityResponse
   );
   private subscription: Subscription;
+  private userChoices: any;
+  private modChoices: any;
   private emptyState: ModlogState = {
     res: None,
     communityId: None,
     communityMods: None,
+    communityName: None,
     page: 1,
     loading: true,
     siteRes: this.isoData.site_res,
+    filter_action: ModlogActionType.All,
+    filter_user: None,
+    filter_mod: None,
   };
-
   constructor(props: any, context: any) {
     super(props, context);
-
     this.state = this.emptyState;
     this.handlePageChange = this.handlePageChange.bind(this);
 
@@ -145,6 +145,11 @@ export class Modlog extends Component<any, ModlogState> {
     }
   }
 
+  componentDidMount() {
+    this.setupUserFilter();
+    this.setupModFilter();
+  }
+
   componentWillUnmount() {
     if (isBrowser()) {
       this.subscription.unsubscribe();
@@ -154,7 +159,7 @@ export class Modlog extends Component<any, ModlogState> {
   buildCombined(res: GetModlogResponse): ModlogType[] {
     let removed_posts: ModlogType[] = res.removed_posts.map(r => ({
       id: r.mod_remove_post.id,
-      type_: ModlogEnum.ModRemovePost,
+      type_: ModlogActionType.ModRemovePost,
       view: r,
       moderator: r.moderator,
       when_: r.mod_remove_post.when_,
@@ -162,7 +167,7 @@ export class Modlog extends Component<any, ModlogState> {
 
     let locked_posts: ModlogType[] = res.locked_posts.map(r => ({
       id: r.mod_lock_post.id,
-      type_: ModlogEnum.ModLockPost,
+      type_: ModlogActionType.ModLockPost,
       view: r,
       moderator: r.moderator,
       when_: r.mod_lock_post.when_,
@@ -170,7 +175,7 @@ export class Modlog extends Component<any, ModlogState> {
 
     let stickied_posts: ModlogType[] = res.stickied_posts.map(r => ({
       id: r.mod_sticky_post.id,
-      type_: ModlogEnum.ModStickyPost,
+      type_: ModlogActionType.ModStickyPost,
       view: r,
       moderator: r.moderator,
       when_: r.mod_sticky_post.when_,
@@ -178,7 +183,7 @@ export class Modlog extends Component<any, ModlogState> {
 
     let removed_comments: ModlogType[] = res.removed_comments.map(r => ({
       id: r.mod_remove_comment.id,
-      type_: ModlogEnum.ModRemoveComment,
+      type_: ModlogActionType.ModRemoveComment,
       view: r,
       moderator: r.moderator,
       when_: r.mod_remove_comment.when_,
@@ -186,7 +191,7 @@ export class Modlog extends Component<any, ModlogState> {
 
     let removed_communities: ModlogType[] = res.removed_communities.map(r => ({
       id: r.mod_remove_community.id,
-      type_: ModlogEnum.ModRemoveCommunity,
+      type_: ModlogActionType.ModRemoveCommunity,
       view: r,
       moderator: r.moderator,
       when_: r.mod_remove_community.when_,
@@ -195,7 +200,7 @@ export class Modlog extends Component<any, ModlogState> {
     let banned_from_community: ModlogType[] = res.banned_from_community.map(
       r => ({
         id: r.mod_ban_from_community.id,
-        type_: ModlogEnum.ModBanFromCommunity,
+        type_: ModlogActionType.ModBanFromCommunity,
         view: r,
         moderator: r.moderator,
         when_: r.mod_ban_from_community.when_,
@@ -204,7 +209,7 @@ export class Modlog extends Component<any, ModlogState> {
 
     let added_to_community: ModlogType[] = res.added_to_community.map(r => ({
       id: r.mod_add_community.id,
-      type_: ModlogEnum.ModAddCommunity,
+      type_: ModlogActionType.ModAddCommunity,
       view: r,
       moderator: r.moderator,
       when_: r.mod_add_community.when_,
@@ -213,7 +218,7 @@ export class Modlog extends Component<any, ModlogState> {
     let transferred_to_community: ModlogType[] =
       res.transferred_to_community.map(r => ({
         id: r.mod_transfer_community.id,
-        type_: ModlogEnum.ModTransferCommunity,
+        type_: ModlogActionType.ModTransferCommunity,
         view: r,
         moderator: r.moderator,
         when_: r.mod_transfer_community.when_,
@@ -221,7 +226,7 @@ export class Modlog extends Component<any, ModlogState> {
 
     let added: ModlogType[] = res.added.map(r => ({
       id: r.mod_add.id,
-      type_: ModlogEnum.ModAdd,
+      type_: ModlogActionType.ModAdd,
       view: r,
       moderator: r.moderator,
       when_: r.mod_add.when_,
@@ -229,7 +234,7 @@ export class Modlog extends Component<any, ModlogState> {
 
     let banned: ModlogType[] = res.banned.map(r => ({
       id: r.mod_ban.id,
-      type_: ModlogEnum.ModBan,
+      type_: ModlogActionType.ModBan,
       view: r,
       moderator: r.moderator,
       when_: r.mod_ban.when_,
@@ -237,7 +242,7 @@ export class Modlog extends Component<any, ModlogState> {
 
     let purged_persons: ModlogType[] = res.admin_purged_persons.map(r => ({
       id: r.admin_purge_person.id,
-      type_: ModlogEnum.AdminPurgePerson,
+      type_: ModlogActionType.AdminPurgePerson,
       view: r,
       moderator: r.admin,
       when_: r.admin_purge_person.when_,
@@ -246,7 +251,7 @@ export class Modlog extends Component<any, ModlogState> {
     let purged_communities: ModlogType[] = res.admin_purged_communities.map(
       r => ({
         id: r.admin_purge_community.id,
-        type_: ModlogEnum.AdminPurgeCommunity,
+        type_: ModlogActionType.AdminPurgeCommunity,
         view: r,
         moderator: r.admin,
         when_: r.admin_purge_community.when_,
@@ -255,7 +260,7 @@ export class Modlog extends Component<any, ModlogState> {
 
     let purged_posts: ModlogType[] = res.admin_purged_posts.map(r => ({
       id: r.admin_purge_post.id,
-      type_: ModlogEnum.AdminPurgePost,
+      type_: ModlogActionType.AdminPurgePost,
       view: r,
       moderator: r.admin,
       when_: r.admin_purge_post.when_,
@@ -263,7 +268,7 @@ export class Modlog extends Component<any, ModlogState> {
 
     let purged_comments: ModlogType[] = res.admin_purged_comments.map(r => ({
       id: r.admin_purge_comment.id,
-      type_: ModlogEnum.AdminPurgeComment,
+      type_: ModlogActionType.AdminPurgeComment,
       view: r,
       moderator: r.admin,
       when_: r.admin_purge_comment.when_,
@@ -294,7 +299,7 @@ export class Modlog extends Component<any, ModlogState> {
 
   renderModlogType(i: ModlogType) {
     switch (i.type_) {
-      case ModlogEnum.ModRemovePost: {
+      case ModlogActionType.ModRemovePost: {
         let mrpv = i.view as ModRemovePostView;
         return [
           mrpv.mod_remove_post.removed.unwrapOr(false)
@@ -309,7 +314,7 @@ export class Modlog extends Component<any, ModlogState> {
           }),
         ];
       }
-      case ModlogEnum.ModLockPost: {
+      case ModlogActionType.ModLockPost: {
         let mlpv = i.view as ModLockPostView;
         return [
           mlpv.mod_lock_post.locked.unwrapOr(false) ? "Locked " : "Unlocked ",
@@ -318,7 +323,7 @@ export class Modlog extends Component<any, ModlogState> {
           </span>,
         ];
       }
-      case ModlogEnum.ModStickyPost: {
+      case ModlogActionType.ModStickyPost: {
         let mspv = i.view as ModStickyPostView;
         return [
           mspv.mod_sticky_post.stickied.unwrapOr(false)
@@ -329,7 +334,7 @@ export class Modlog extends Component<any, ModlogState> {
           </span>,
         ];
       }
-      case ModlogEnum.ModRemoveComment: {
+      case ModlogActionType.ModRemoveComment: {
         let mrc = i.view as ModRemoveCommentView;
         return [
           mrc.mod_remove_comment.removed.unwrapOr(false)
@@ -351,7 +356,7 @@ export class Modlog extends Component<any, ModlogState> {
           }),
         ];
       }
-      case ModlogEnum.ModRemoveCommunity: {
+      case ModlogActionType.ModRemoveCommunity: {
         let mrco = i.view as ModRemoveCommunityView;
         return [
           mrco.mod_remove_community.removed.unwrapOr(false)
@@ -372,7 +377,7 @@ export class Modlog extends Component<any, ModlogState> {
           }),
         ];
       }
-      case ModlogEnum.ModBanFromCommunity: {
+      case ModlogActionType.ModBanFromCommunity: {
         let mbfc = i.view as ModBanFromCommunityView;
         return [
           <span>
@@ -399,7 +404,7 @@ export class Modlog extends Component<any, ModlogState> {
           }),
         ];
       }
-      case ModlogEnum.ModAddCommunity: {
+      case ModlogActionType.ModAddCommunity: {
         let mac = i.view as ModAddCommunityView;
         return [
           <span>
@@ -416,7 +421,7 @@ export class Modlog extends Component<any, ModlogState> {
           </span>,
         ];
       }
-      case ModlogEnum.ModTransferCommunity: {
+      case ModlogActionType.ModTransferCommunity: {
         let mtc = i.view as ModTransferCommunityView;
         return [
           <span>
@@ -433,7 +438,7 @@ export class Modlog extends Component<any, ModlogState> {
           </span>,
         ];
       }
-      case ModlogEnum.ModBan: {
+      case ModlogActionType.ModBan: {
         let mb = i.view as ModBanView;
         return [
           <span>
@@ -454,7 +459,7 @@ export class Modlog extends Component<any, ModlogState> {
           }),
         ];
       }
-      case ModlogEnum.ModAdd: {
+      case ModlogActionType.ModAdd: {
         let ma = i.view as ModAddView;
         return [
           <span>
@@ -466,7 +471,7 @@ export class Modlog extends Component<any, ModlogState> {
           <span> as an admin </span>,
         ];
       }
-      case ModlogEnum.AdminPurgePerson: {
+      case ModlogActionType.AdminPurgePerson: {
         let ap = i.view as AdminPurgePersonView;
         return [
           <span>Purged a Person</span>,
@@ -476,7 +481,7 @@ export class Modlog extends Component<any, ModlogState> {
           }),
         ];
       }
-      case ModlogEnum.AdminPurgeCommunity: {
+      case ModlogActionType.AdminPurgeCommunity: {
         let ap = i.view as AdminPurgeCommunityView;
         return [
           <span>Purged a Community</span>,
@@ -486,7 +491,7 @@ export class Modlog extends Component<any, ModlogState> {
           }),
         ];
       }
-      case ModlogEnum.AdminPurgePost: {
+      case ModlogActionType.AdminPurgePost: {
         let ap = i.view as AdminPurgePostView;
         return [
           <span>Purged a Post from from </span>,
@@ -497,7 +502,7 @@ export class Modlog extends Component<any, ModlogState> {
           }),
         ];
       }
-      case ModlogEnum.AdminPurgeComment: {
+      case ModlogActionType.AdminPurgeComment: {
         let ap = i.view as AdminPurgeCommentView;
         return [
           <span>
@@ -527,7 +532,7 @@ export class Modlog extends Component<any, ModlogState> {
             </td>
             <td>
               {this.amAdminOrMod ? (
-                <PersonListing person={i.moderator} />
+                <PersonListing person={i.moderator.unwrap()} />
               ) : (
                 <div>{this.modOrAdminText(i.moderator)}</div>
               )}
@@ -546,14 +551,11 @@ export class Modlog extends Component<any, ModlogState> {
     );
   }
 
-  modOrAdminText(person: PersonSafe): string {
-    if (
-      this.isoData.site_res.admins.map(a => a.person.id).includes(person.id)
-    ) {
-      return i18n.t("admin");
-    } else {
-      return i18n.t("mod");
-    }
+  modOrAdminText(person: Option<PersonSafe>): string {
+    return person.match({
+      some: res => this.isoData.site_res.admins.map(a => a.person.id).includes(res.id) ? i18n.t("admin") : i18n.t("mod"),
+      none: i18n.t("mod"),
+    });
   }
 
   get documentTitle(): string {
@@ -565,7 +567,7 @@ export class Modlog extends Component<any, ModlogState> {
 
   render() {
     return (
-      <div class="container">
+      <div className="container">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -578,9 +580,57 @@ export class Modlog extends Component<any, ModlogState> {
           </h5>
         ) : (
           <div>
-            <div class="table-responsive">
-              <table id="modlog_table" class="table table-sm table-hover">
-                <thead class="pointer">
+            <h5>
+              {this.state.communityName.isSome() && (
+                <Link
+                  className="text-body"
+                  to={`/c/${this.state.communityName}`}
+                >
+                  /c/{this.state.communityName}{" "}
+                </Link>
+              )}
+              <span>{i18n.t("modlog")}</span>
+            </h5>
+            <form className="form-inline mr-2">
+              <select
+                value={this.state.filter_action}
+                onChange={linkEvent(this, this.handleFilterActionChange)}
+                className="custom-select col-4 mb-2"
+                aria-label="action">
+                <option disabled aria-hidden="true">{i18n.t("filter_by_action")}</option>
+                <option value={ModlogActionType.All}>{i18n.t("all")}</option>
+                <option value={ModlogActionType.ModRemovePost}>Removing Posts</option>
+                <option value={ModlogActionType.ModLockPost}>Locking Posts</option>
+                <option value={ModlogActionType.ModStickyPost}>Stickying Posts</option>
+                <option value={ModlogActionType.ModRemoveComment}>Removing Comments</option>
+                <option value={ModlogActionType.ModRemoveCommunity}>Removing Communities</option>
+                <option value={ModlogActionType.ModBanFromCommunity}>Banning From Communities</option>
+                <option value={ModlogActionType.ModAddCommunity}>Adding Mod to Community</option>
+                <option value={ModlogActionType.ModTransferCommunity}>Transfering Communities</option>
+                <option value={ModlogActionType.ModAdd}>Adding Mod to Site</option>
+                <option value={ModlogActionType.ModBan}>Banning From Site</option>
+              </select>
+              {
+                this.state.siteRes.site_view.match({
+                  some: site_view => !site_view.site.hide_modlog_mod_names.unwrapOr(false) &&  (
+                    <select
+                      id="filter-mod"
+                      value={toUndefined(this.state.filter_mod)}>
+                      <option>{i18n.t("filter_by_mod")}</option>
+                    </select>
+                  ),
+                  none: <></>,
+                })
+              }
+              <select
+                id="filter-user"
+                value={toUndefined(this.state.filter_user)}>
+                <option>{i18n.t("filter_by_user")}</option>
+              </select> 
+            </form>
+            <div className="table-responsive">
+              <table id="modlog_table" className="table table-sm table-hover">
+                <thead className="pointer">
                   <tr>
                     <th> {i18n.t("time")}</th>
                     <th>{i18n.t("mod")}</th>
@@ -600,6 +650,11 @@ export class Modlog extends Component<any, ModlogState> {
     );
   }
 
+  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 +663,12 @@ export class Modlog extends Component<any, ModlogState> {
   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 +685,82 @@ export class Modlog extends Component<any, ModlogState> {
     });
   }
 
+  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,
+                }}),
+                "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,
+                }}),
+                "value",
+                "label",
+                true
+              );
+            } catch (err) {
+              console.log(err);
+            }
+          }),
+          false
+        );
+      }
+    }
+  }
+
   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
     let pathSplit = req.path.split("/");
     let communityId = Some(pathSplit[3]).map(Number);
@@ -639,6 +772,8 @@ export class Modlog extends Component<any, ModlogState> {
       community_id: communityId,
       mod_person_id: None,
       auth: req.auth,
+      type_: ModlogActionType.All,
+      other_person_id: None
     });
 
     promises.push(req.client.getModlog(modlogForm));
@@ -671,6 +806,7 @@ export class Modlog extends Component<any, ModlogState> {
     } else if (op == UserOperation.GetCommunity) {
       let data = wsJsonToRes<GetCommunityResponse>(msg, GetCommunityResponse);
       this.state.communityMods = Some(data.moderators);
+      this.state.communityName = Some(data.community_view.community.name);
     }
   }
 }
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
index a911621..ab3f879 100644
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@@ -1292,7 +1292,7 @@ export function showLocal(isoData: IsoData): boolean {
     .unwrapOr(false);
 }
 
-interface ChoicesValue {
+export interface ChoicesValue {
   value: string;
   label: string;
 }
@@ -1380,6 +1380,39 @@ 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",
+    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