src/shared/components/modlog.tsx

   1 import {
   2   fetchUsers,
   3   getUpdatedSearchId,
   4   myAuth,
   5   personToChoice,
   6   setIsoData,
   7 } from "@utils/app";
   8 import { isBrowser } from "@utils/browser";
   9 import {
  10   debounce,
  11   getIdFromString,
  12   getPageFromString,
  13   getQueryParams,
  14   getQueryString,
  15 } from "@utils/helpers";
  16 import { amAdmin, amMod } from "@utils/roles";
  17 import type { QueryParams } from "@utils/types";
  18 import { Choice, RouteDataResponse } from "@utils/types";
  19 import { NoOptionI18nKeys } from "i18next";
  20 import { Component, linkEvent } from "inferno";
  21 import { T } from "inferno-i18next-dess";
  22 import { Link } from "inferno-router";
  23 import { RouteComponentProps } from "inferno-router/dist/Route";
  24 import {
  25   AdminPurgeCommentView,
  26   AdminPurgeCommunityView,
  27   AdminPurgePersonView,
  28   AdminPurgePostView,
  29   GetCommunity,
  30   GetCommunityResponse,
  31   GetModlog,
  32   GetModlogResponse,
  33   GetPersonDetails,
  34   GetPersonDetailsResponse,
  35   ModAddCommunityView,
  36   ModAddView,
  37   ModBanFromCommunityView,
  38   ModBanView,
  39   ModFeaturePostView,
  40   ModLockPostView,
  41   ModRemoveCommentView,
  42   ModRemoveCommunityView,
  43   ModRemovePostView,
  44   ModTransferCommunityView,
  45   ModlogActionType,
  46   Person,
  47 } from "lemmy-js-client";
  48 import moment from "moment";
  49 import { fetchLimit } from "../config";
  50 import { InitialFetchRequest } from "../interfaces";
  51 import { FirstLoadService, I18NextService } from "../services";
  52 import { HttpService, RequestState } from "../services/HttpService";
  53 import { HtmlTags } from "./common/html-tags";
  54 import { Icon, Spinner } from "./common/icon";
  55 import { MomentTime } from "./common/moment-time";
  56 import { Paginator } from "./common/paginator";
  57 import { SearchableSelect } from "./common/searchable-select";
  58 import { CommunityLink } from "./community/community-link";
  59 import { PersonListing } from "./person/person-listing";
  60
  61 type FilterType = "mod" | "user";
  62
  63 type View =
  64   | ModRemovePostView
  65   | ModLockPostView
  66   | ModFeaturePostView
  67   | ModRemoveCommentView
  68   | ModRemoveCommunityView
  69   | ModBanFromCommunityView
  70   | ModBanView
  71   | ModAddCommunityView
  72   | ModTransferCommunityView
  73   | ModAddView
  74   | AdminPurgePersonView
  75   | AdminPurgeCommunityView
  76   | AdminPurgePostView
  77   | AdminPurgeCommentView;
  78
  79 type ModlogData = RouteDataResponse<{
  80   res: GetModlogResponse;
  81   communityRes: GetCommunityResponse;
  82   modUserResponse: GetPersonDetailsResponse;
  83   userResponse: GetPersonDetailsResponse;
  84 }>;
  85
  86 interface ModlogType {
  87   id: number;
  88   type_: ModlogActionType;
  89   moderator?: Person;
  90   view: View;
  91   when_: string;
  92 }
  93
  94 const getModlogQueryParams = () =>
  95   getQueryParams<ModlogProps>({
  96     actionType: getActionFromString,
  97     modId: getIdFromString,
  98     userId: getIdFromString,
  99     page: getPageFromString,
 100   });
 101
 102 interface ModlogState {
 103   res: RequestState<GetModlogResponse>;
 104   communityRes: RequestState<GetCommunityResponse>;
 105   loadingModSearch: boolean;
 106   loadingUserSearch: boolean;
 107   modSearchOptions: Choice[];
 108   userSearchOptions: Choice[];
 109 }
 110
 111 interface ModlogProps {
 112   page: number;
 113   userId?: number | null;
 114   modId?: number | null;
 115   actionType: ModlogActionType;
 116 }
 117
 118 function getActionFromString(action?: string): ModlogActionType {
 119   return action !== undefined ? (action as ModlogActionType) : "All";
 120 }
 121
 122 const getModlogActionMapper =
 123   (
 124     actionType: ModlogActionType,
 125     getAction: (view: View) => { id: number; when_: string }
 126   ) =>
 127   (view: View & { moderator?: Person; admin?: Person }): ModlogType => {
 128     const { id, when_ } = getAction(view);
 129
 130     return {
 131       id,
 132       type_: actionType,
 133       view,
 134       when_,
 135       moderator: view.moderator ?? view.admin,
 136     };
 137   };
 138
 139 function buildCombined({
 140   removed_comments,
 141   locked_posts,
 142   featured_posts,
 143   removed_communities,
 144   removed_posts,
 145   added,
 146   added_to_community,
 147   admin_purged_comments,
 148   admin_purged_communities,
 149   admin_purged_persons,
 150   admin_purged_posts,
 151   banned,
 152   banned_from_community,
 153   transferred_to_community,
 154 }: GetModlogResponse): ModlogType[] {
 155   const combined = removed_posts
 156     .map(
 157       getModlogActionMapper(
 158         "ModRemovePost",
 159         ({ mod_remove_post }: ModRemovePostView) => mod_remove_post
 160       )
 161     )
 162     .concat(
 163       locked_posts.map(
 164         getModlogActionMapper(
 165           "ModLockPost",
 166           ({ mod_lock_post }: ModLockPostView) => mod_lock_post
 167         )
 168       )
 169     )
 170     .concat(
 171       featured_posts.map(
 172         getModlogActionMapper(
 173           "ModFeaturePost",
 174           ({ mod_feature_post }: ModFeaturePostView) => mod_feature_post
 175         )
 176       )
 177     )
 178     .concat(
 179       removed_comments.map(
 180         getModlogActionMapper(
 181           "ModRemoveComment",
 182           ({ mod_remove_comment }: ModRemoveCommentView) => mod_remove_comment
 183         )
 184       )
 185     )
 186     .concat(
 187       removed_communities.map(
 188         getModlogActionMapper(
 189           "ModRemoveCommunity",
 190           ({ mod_remove_community }: ModRemoveCommunityView) =>
 191             mod_remove_community
 192         )
 193       )
 194     )
 195     .concat(
 196       banned_from_community.map(
 197         getModlogActionMapper(
 198           "ModBanFromCommunity",
 199           ({ mod_ban_from_community }: ModBanFromCommunityView) =>
 200             mod_ban_from_community
 201         )
 202       )
 203     )
 204     .concat(
 205       added_to_community.map(
 206         getModlogActionMapper(
 207           "ModAddCommunity",
 208           ({ mod_add_community }: ModAddCommunityView) => mod_add_community
 209         )
 210       )
 211     )
 212     .concat(
 213       transferred_to_community.map(
 214         getModlogActionMapper(
 215           "ModTransferCommunity",
 216           ({ mod_transfer_community }: ModTransferCommunityView) =>
 217             mod_transfer_community
 218         )
 219       )
 220     )
 221     .concat(
 222       added.map(
 223         getModlogActionMapper("ModAdd", ({ mod_add }: ModAddView) => mod_add)
 224       )
 225     )
 226     .concat(
 227       banned.map(
 228         getModlogActionMapper("ModBan", ({ mod_ban }: ModBanView) => mod_ban)
 229       )
 230     )
 231     .concat(
 232       admin_purged_persons.map(
 233         getModlogActionMapper(
 234           "AdminPurgePerson",
 235           ({ admin_purge_person }: AdminPurgePersonView) => admin_purge_person
 236         )
 237       )
 238     )
 239     .concat(
 240       admin_purged_communities.map(
 241         getModlogActionMapper(
 242           "AdminPurgeCommunity",
 243           ({ admin_purge_community }: AdminPurgeCommunityView) =>
 244             admin_purge_community
 245         )
 246       )
 247     )
 248     .concat(
 249       admin_purged_posts.map(
 250         getModlogActionMapper(
 251           "AdminPurgePost",
 252           ({ admin_purge_post }: AdminPurgePostView) => admin_purge_post
 253         )
 254       )
 255     )
 256     .concat(
 257       admin_purged_comments.map(
 258         getModlogActionMapper(
 259           "AdminPurgeComment",
 260           ({ admin_purge_comment }: AdminPurgeCommentView) =>
 261             admin_purge_comment
 262         )
 263       )
 264     );
 265
 266   // Sort them by time
 267   combined.sort((a, b) => b.when_.localeCompare(a.when_));
 268
 269   return combined;
 270 }
 271
 272 function renderModlogType({ type_, view }: ModlogType) {
 273   switch (type_) {
 274     case "ModRemovePost": {
 275       const mrpv = view as ModRemovePostView;
 276       const {
 277         mod_remove_post: { reason, removed },
 278         post: { name, id },
 279       } = mrpv;
 280
 281       return (
 282         <>
 283           <span>{removed ? "Removed " : "Restored "}</span>
 284           <span>
 285             Post <Link to={`/post/${id}`}>{name}</Link>
 286           </span>
 287           {reason && (
 288             <span>
 289               <div>reason: {reason}</div>
 290             </span>
 291           )}
 292         </>
 293       );
 294     }
 295
 296     case "ModLockPost": {
 297       const {
 298         mod_lock_post: { locked },
 299         post: { id, name },
 300       } = view as ModLockPostView;
 301
 302       return (
 303         <>
 304           <span>{locked ? "Locked " : "Unlocked "}</span>
 305           <span>
 306             Post <Link to={`/post/${id}`}>{name}</Link>
 307           </span>
 308         </>
 309       );
 310     }
 311
 312     case "ModFeaturePost": {
 313       const {
 314         mod_feature_post: { featured, is_featured_community },
 315         post: { id, name },
 316       } = view as ModFeaturePostView;
 317
 318       return (
 319         <>
 320           <span>{featured ? "Featured " : "Unfeatured "}</span>
 321           <span>
 322             Post <Link to={`/post/${id}`}>{name}</Link>
 323           </span>
 324           <span>{is_featured_community ? " In Community" : " In Local"}</span>
 325         </>
 326       );
 327     }
 328     case "ModRemoveComment": {
 329       const mrc = view as ModRemoveCommentView;
 330       const {
 331         mod_remove_comment: { reason, removed },
 332         comment: { id, content },
 333         commenter,
 334       } = mrc;
 335
 336       return (
 337         <>
 338           <span>{removed ? "Removed " : "Restored "}</span>
 339           <span>
 340             Comment <Link to={`/comment/${id}`}>{content}</Link>
 341           </span>
 342           <span>
 343             {" "}
 344             by <PersonListing person={commenter} />
 345           </span>
 346           {reason && (
 347             <span>
 348               <div>reason: {reason}</div>
 349             </span>
 350           )}
 351         </>
 352       );
 353     }
 354
 355     case "ModRemoveCommunity": {
 356       const mrco = view as ModRemoveCommunityView;
 357       const {
 358         mod_remove_community: { reason, expires, removed },
 359         community,
 360       } = mrco;
 361
 362       return (
 363         <>
 364           <span>{removed ? "Removed " : "Restored "}</span>
 365           <span>
 366             Community <CommunityLink community={community} />
 367           </span>
 368           {reason && (
 369             <span>
 370               <div>reason: {reason}</div>
 371             </span>
 372           )}
 373           {expires && (
 374             <span>
 375               <div>expires: {moment.utc(expires).fromNow()}</div>
 376             </span>
 377           )}
 378         </>
 379       );
 380     }
 381
 382     case "ModBanFromCommunity": {
 383       const mbfc = view as ModBanFromCommunityView;
 384       const {
 385         mod_ban_from_community: { reason, expires, banned },
 386         banned_person,
 387         community,
 388       } = mbfc;
 389
 390       return (
 391         <>
 392           <span>{banned ? "Banned " : "Unbanned "}</span>
 393           <span>
 394             <PersonListing person={banned_person} />
 395           </span>
 396           <span> from the community </span>
 397           <span>
 398             <CommunityLink community={community} />
 399           </span>
 400           {reason && (
 401             <span>
 402               <div>reason: {reason}</div>
 403             </span>
 404           )}
 405           {expires && (
 406             <span>
 407               <div>expires: {moment.utc(expires).fromNow()}</div>
 408             </span>
 409           )}
 410         </>
 411       );
 412     }
 413
 414     case "ModAddCommunity": {
 415       const {
 416         mod_add_community: { removed },
 417         modded_person,
 418         community,
 419       } = view as ModAddCommunityView;
 420
 421       return (
 422         <>
 423           <span>{removed ? "Removed " : "Appointed "}</span>
 424           <span>
 425             <PersonListing person={modded_person} />
 426           </span>
 427           <span> as a mod to the community </span>
 428           <span>
 429             <CommunityLink community={community} />
 430           </span>
 431         </>
 432       );
 433     }
 434
 435     case "ModTransferCommunity": {
 436       const { community, modded_person } = view as ModTransferCommunityView;
 437
 438       return (
 439         <>
 440           <span>Transferred</span>
 441           <span>
 442             <CommunityLink community={community} />
 443           </span>
 444           <span> to </span>
 445           <span>
 446             <PersonListing person={modded_person} />
 447           </span>
 448         </>
 449       );
 450     }
 451
 452     case "ModBan": {
 453       const {
 454         mod_ban: { reason, expires, banned },
 455         banned_person,
 456       } = view as ModBanView;
 457
 458       return (
 459         <>
 460           <span>{banned ? "Banned " : "Unbanned "}</span>
 461           <span>
 462             <PersonListing person={banned_person} />
 463           </span>
 464           {reason && (
 465             <span>
 466               <div>reason: {reason}</div>
 467             </span>
 468           )}
 469           {expires && (
 470             <span>
 471               <div>expires: {moment.utc(expires).fromNow()}</div>
 472             </span>
 473           )}
 474         </>
 475       );
 476     }
 477
 478     case "ModAdd": {
 479       const {
 480         mod_add: { removed },
 481         modded_person,
 482       } = view as ModAddView;
 483
 484       return (
 485         <>
 486           <span>{removed ? "Removed " : "Appointed "}</span>
 487           <span>
 488             <PersonListing person={modded_person} />
 489           </span>
 490           <span> as an admin </span>
 491         </>
 492       );
 493     }
 494     case "AdminPurgePerson": {
 495       const {
 496         admin_purge_person: { reason },
 497       } = view as AdminPurgePersonView;
 498
 499       return (
 500         <>
 501           <span>Purged a Person</span>
 502           {reason && (
 503             <span>
 504               <div>reason: {reason}</div>
 505             </span>
 506           )}
 507         </>
 508       );
 509     }
 510
 511     case "AdminPurgeCommunity": {
 512       const {
 513         admin_purge_community: { reason },
 514       } = view as AdminPurgeCommunityView;
 515
 516       return (
 517         <>
 518           <span>Purged a Community</span>
 519           {reason && (
 520             <span>
 521               <div>reason: {reason}</div>
 522             </span>
 523           )}
 524         </>
 525       );
 526     }
 527
 528     case "AdminPurgePost": {
 529       const {
 530         admin_purge_post: { reason },
 531         community,
 532       } = view as AdminPurgePostView;
 533
 534       return (
 535         <>
 536           <span>Purged a Post from from </span>
 537           <CommunityLink community={community} />
 538           {reason && (
 539             <span>
 540               <div>reason: {reason}</div>
 541             </span>
 542           )}
 543         </>
 544       );
 545     }
 546
 547     case "AdminPurgeComment": {
 548       const {
 549         admin_purge_comment: { reason },
 550         post: { id, name },
 551       } = view as AdminPurgeCommentView;
 552
 553       return (
 554         <>
 555           <span>
 556             Purged a Comment from <Link to={`/post/${id}`}>{name}</Link>
 557           </span>
 558           {reason && (
 559             <span>
 560               <div>reason: {reason}</div>
 561             </span>
 562           )}
 563         </>
 564       );
 565     }
 566
 567     default:
 568       return <></>;
 569   }
 570 }
 571
 572 const Filter = ({
 573   filterType,
 574   onChange,
 575   value,
 576   onSearch,
 577   options,
 578   loading,
 579 }: {
 580   filterType: FilterType;
 581   onChange: (option: Choice) => void;
 582   value?: number | null;
 583   onSearch: (text: string) => void;
 584   options: Choice[];
 585   loading: boolean;
 586 }) => (
 587   <div className="col-sm-6 mb-3">
 588     <label className="mb-2" htmlFor={`filter-${filterType}`}>
 589       {I18NextService.i18n.t(`filter_by_${filterType}` as NoOptionI18nKeys)}
 590     </label>
 591     <SearchableSelect
 592       id={`filter-${filterType}`}
 593       value={value ?? 0}
 594       options={[
 595         {
 596           label: I18NextService.i18n.t("all"),
 597           value: "0",
 598         },
 599       ].concat(options)}
 600       onChange={onChange}
 601       onSearch={onSearch}
 602       loading={loading}
 603     />
 604   </div>
 605 );
 606
 607 async function createNewOptions({
 608   id,
 609   oldOptions,
 610   text,
 611 }: {
 612   id?: number | null;
 613   oldOptions: Choice[];
 614   text: string;
 615 }) {
 616   const newOptions: Choice[] = [];
 617
 618   if (id) {
 619     const selectedUser = oldOptions.find(
 620       ({ value }) => value === id.toString()
 621     );
 622
 623     if (selectedUser) {
 624       newOptions.push(selectedUser);
 625     }
 626   }
 627
 628   if (text.length > 0) {
 629     newOptions.push(
 630       ...(await fetchUsers(text))
 631         .slice(0, Number(fetchLimit))
 632         .map<Choice>(personToChoice)
 633     );
 634   }
 635
 636   return newOptions;
 637 }
 638
 639 export class Modlog extends Component<
 640   RouteComponentProps<{ communityId?: string }>,
 641   ModlogState
 642 > {
 643   private isoData = setIsoData<ModlogData>(this.context);
 644
 645   state: ModlogState = {
 646     res: { state: "empty" },
 647     communityRes: { state: "empty" },
 648     loadingModSearch: false,
 649     loadingUserSearch: false,
 650     userSearchOptions: [],
 651     modSearchOptions: [],
 652   };
 653
 654   constructor(
 655     props: RouteComponentProps<{ communityId?: string }>,
 656     context: any
 657   ) {
 658     super(props, context);
 659     this.handlePageChange = this.handlePageChange.bind(this);
 660     this.handleUserChange = this.handleUserChange.bind(this);
 661     this.handleModChange = this.handleModChange.bind(this);
 662
 663     // Only fetch the data if coming from another route
 664     if (!isBrowser() || FirstLoadService.isFirstLoad) {
 665       const { res, communityRes, modUserResponse, userResponse } =
 666         this.isoData.routeData;
 667
 668       this.state = {
 669         ...this.state,
 670         res,
 671         communityRes,
 672       };
 673
 674       if (modUserResponse.state === "success") {
 675         this.state = {
 676           ...this.state,
 677           modSearchOptions: [personToChoice(modUserResponse.data.person_view)],
 678         };
 679       }
 680
 681       if (userResponse.state === "success") {
 682         this.state = {
 683           ...this.state,
 684           userSearchOptions: [personToChoice(userResponse.data.person_view)],
 685         };
 686       }
 687     }
 688   }
 689
 690   async componentDidMount() {
 691     await this.refetch();
 692   }
 693
 694   get combined() {
 695     const res = this.state.res;
 696     const combined = res.state == "success" ? buildCombined(res.data) : [];
 697
 698     return (
 699       <tbody>
 700         {combined.map(i => (
 701           <tr key={i.id}>
 702             <td>
 703               <MomentTime published={i.when_} />
 704             </td>
 705             <td>
 706               {this.amAdminOrMod && i.moderator ? (
 707                 <PersonListing person={i.moderator} />
 708               ) : (
 709                 <div>{this.modOrAdminText(i.moderator)}</div>
 710               )}
 711             </td>
 712             <td>{renderModlogType(i)}</td>
 713           </tr>
 714         ))}
 715       </tbody>
 716     );
 717   }
 718
 719   get amAdminOrMod(): boolean {
 720     const amMod_ =
 721       this.state.communityRes.state == "success" &&
 722       amMod(this.state.communityRes.data.moderators);
 723     return amAdmin() || amMod_;
 724   }
 725
 726   modOrAdminText(person?: Person): string {
 727     return person &&
 728       this.isoData.site_res.admins.some(
 729         ({ person: { id } }) => id === person.id
 730       )
 731       ? I18NextService.i18n.t("admin")
 732       : I18NextService.i18n.t("mod");
 733   }
 734
 735   get documentTitle(): string {
 736     return `Modlog - ${this.isoData.site_res.site_view.site.name}`;
 737   }
 738
 739   render() {
 740     const {
 741       loadingModSearch,
 742       loadingUserSearch,
 743       userSearchOptions,
 744       modSearchOptions,
 745     } = this.state;
 746     const { actionType, modId, userId } = getModlogQueryParams();
 747
 748     return (
 749       <div className="modlog container-lg">
 750         <HtmlTags
 751           title={this.documentTitle}
 752           path={this.context.router.route.match.url}
 753         />
 754
 755         <div>
 756           <div
 757             className="alert alert-warning text-sm-start text-xs-center"
 758             role="alert"
 759           >
 760             <Icon
 761               icon="alert-triangle"
 762               inline
 763               classes="me-sm-2 mx-auto d-sm-inline d-block"
 764             />
 765             <T i18nKey="modlog_content_warning" class="d-inline">
 766               #<strong>#</strong>#
 767             </T>
 768           </div>
 769           {this.state.communityRes.state === "success" && (
 770             <h5>
 771               <Link
 772                 className="text-body"
 773                 to={`/c/${this.state.communityRes.data.community_view.community.name}`}
 774               >
 775                 /c/{this.state.communityRes.data.community_view.community.name}{" "}
 776               </Link>
 777               <span>{I18NextService.i18n.t("modlog")}</span>
 778             </h5>
 779           )}
 780           <div className="row mb-2">
 781             <div className="col-sm-6">
 782               <select
 783                 value={actionType}
 784                 onChange={linkEvent(this, this.handleFilterActionChange)}
 785                 className="form-select"
 786                 aria-label="action"
 787               >
 788                 <option disabled aria-hidden="true">
 789                   {I18NextService.i18n.t("filter_by_action")}
 790                 </option>
 791                 <option value={"All"}>{I18NextService.i18n.t("all")}</option>
 792                 <option value={"ModRemovePost"}>Removing Posts</option>
 793                 <option value={"ModLockPost"}>Locking Posts</option>
 794                 <option value={"ModFeaturePost"}>Featuring Posts</option>
 795                 <option value={"ModRemoveComment"}>Removing Comments</option>
 796                 <option value={"ModRemoveCommunity"}>
 797                   Removing Communities
 798                 </option>
 799                 <option value={"ModBanFromCommunity"}>
 800                   Banning From Communities
 801                 </option>
 802                 <option value={"ModAddCommunity"}>
 803                   Adding Mod to Community
 804                 </option>
 805                 <option value={"ModTransferCommunity"}>
 806                   Transferring Communities
 807                 </option>
 808                 <option value={"ModAdd"}>Adding Mod to Site</option>
 809                 <option value={"ModBan"}>Banning From Site</option>
 810               </select>
 811             </div>
 812           </div>
 813           <div className="row mb-2">
 814             <Filter
 815               filterType="user"
 816               onChange={this.handleUserChange}
 817               onSearch={this.handleSearchUsers}
 818               value={userId}
 819               options={userSearchOptions}
 820               loading={loadingUserSearch}
 821             />
 822             {!this.isoData.site_res.site_view.local_site
 823               .hide_modlog_mod_names && (
 824               <Filter
 825                 filterType="mod"
 826                 onChange={this.handleModChange}
 827                 onSearch={this.handleSearchMods}
 828                 value={modId}
 829                 options={modSearchOptions}
 830                 loading={loadingModSearch}
 831               />
 832             )}
 833           </div>
 834           {this.renderModlogTable()}
 835         </div>
 836       </div>
 837     );
 838   }
 839
 840   renderModlogTable() {
 841     switch (this.state.res.state) {
 842       case "loading":
 843         return (
 844           <h5>
 845             <Spinner large />
 846           </h5>
 847         );
 848       case "success": {
 849         const page = getModlogQueryParams().page;
 850         return (
 851           <div className="table-responsive">
 852             <table id="modlog_table" className="table table-sm table-hover">
 853               <thead className="pointer">
 854                 <tr>
 855                   <th> {I18NextService.i18n.t("time")}</th>
 856                   <th>{I18NextService.i18n.t("mod")}</th>
 857                   <th>{I18NextService.i18n.t("action")}</th>
 858                 </tr>
 859               </thead>
 860               {this.combined}
 861             </table>
 862             <Paginator page={page} onChange={this.handlePageChange} />
 863           </div>
 864         );
 865       }
 866     }
 867   }
 868
 869   handleFilterActionChange(i: Modlog, event: any) {
 870     i.updateUrl({
 871       actionType: event.target.value as ModlogActionType,
 872       page: 1,
 873     });
 874   }
 875
 876   handlePageChange(page: number) {
 877     this.updateUrl({ page });
 878   }
 879
 880   handleUserChange(option: Choice) {
 881     this.updateUrl({ userId: getIdFromString(option.value) ?? null, page: 1 });
 882   }
 883
 884   handleModChange(option: Choice) {
 885     this.updateUrl({ modId: getIdFromString(option.value) ?? null, page: 1 });
 886   }
 887
 888   handleSearchUsers = debounce(async (text: string) => {
 889     const { userId } = getModlogQueryParams();
 890     const { userSearchOptions } = this.state;
 891     this.setState({ loadingUserSearch: true });
 892
 893     const newOptions = await createNewOptions({
 894       id: userId,
 895       text,
 896       oldOptions: userSearchOptions,
 897     });
 898
 899     this.setState({
 900       userSearchOptions: newOptions,
 901       loadingUserSearch: false,
 902     });
 903   });
 904
 905   handleSearchMods = debounce(async (text: string) => {
 906     const { modId } = getModlogQueryParams();
 907     const { modSearchOptions } = this.state;
 908     this.setState({ loadingModSearch: true });
 909
 910     const newOptions = await createNewOptions({
 911       id: modId,
 912       text,
 913       oldOptions: modSearchOptions,
 914     });
 915
 916     this.setState({
 917       modSearchOptions: newOptions,
 918       loadingModSearch: false,
 919     });
 920   });
 921
 922   async updateUrl({ actionType, modId, page, userId }: Partial<ModlogProps>) {
 923     const {
 924       page: urlPage,
 925       actionType: urlActionType,
 926       modId: urlModId,
 927       userId: urlUserId,
 928     } = getModlogQueryParams();
 929
 930     const queryParams: QueryParams<ModlogProps> = {
 931       page: (page ?? urlPage).toString(),
 932       actionType: actionType ?? urlActionType,
 933       modId: getUpdatedSearchId(modId, urlModId),
 934       userId: getUpdatedSearchId(userId, urlUserId),
 935     };
 936
 937     const communityId = this.props.match.params.communityId;
 938
 939     this.props.history.push(
 940       `/modlog${communityId ? `/${communityId}` : ""}${getQueryString(
 941         queryParams
 942       )}`
 943     );
 944
 945     await this.refetch();
 946   }
 947
 948   async refetch() {
 949     const auth = myAuth();
 950     const { actionType, page, modId, userId } = getModlogQueryParams();
 951     const { communityId: urlCommunityId } = this.props.match.params;
 952     const communityId = getIdFromString(urlCommunityId);
 953
 954     this.setState({ res: { state: "loading" } });
 955     this.setState({
 956       res: await HttpService.client.getModlog({
 957         community_id: communityId,
 958         page,
 959         limit: fetchLimit,
 960         type_: actionType,
 961         other_person_id: userId ?? undefined,
 962         mod_person_id: !this.isoData.site_res.site_view.local_site
 963           .hide_modlog_mod_names
 964           ? modId ?? undefined
 965           : undefined,
 966         auth,
 967       }),
 968     });
 969
 970     if (communityId) {
 971       this.setState({ communityRes: { state: "loading" } });
 972       this.setState({
 973         communityRes: await HttpService.client.getCommunity({
 974           id: communityId,
 975           auth,
 976         }),
 977       });
 978     }
 979   }
 980
 981   static async fetchInitialData({
 982     client,
 983     path,
 984     query: { modId: urlModId, page, userId: urlUserId, actionType },
 985     auth,
 986     site,
 987   }: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<ModlogData> {
 988     const pathSplit = path.split("/");
 989     const communityId = getIdFromString(pathSplit[2]);
 990     const modId = !site.site_view.local_site.hide_modlog_mod_names
 991       ? getIdFromString(urlModId)
 992       : undefined;
 993     const userId = getIdFromString(urlUserId);
 994
 995     const modlogForm: GetModlog = {
 996       page: getPageFromString(page),
 997       limit: fetchLimit,
 998       community_id: communityId,
 999       type_: getActionFromString(actionType),
1000       mod_person_id: modId,
1001       other_person_id: userId,
1002       auth,
1003     };
1004
1005     let communityResponse: RequestState<GetCommunityResponse> = {
1006       state: "empty",
1007     };
1008
1009     if (communityId) {
1010       const communityForm: GetCommunity = {
1011         id: communityId,
1012         auth,
1013       };
1014
1015       communityResponse = await client.getCommunity(communityForm);
1016     }
1017
1018     let modUserResponse: RequestState<GetPersonDetailsResponse> = {
1019       state: "empty",
1020     };
1021
1022     if (modId) {
1023       const getPersonForm: GetPersonDetails = {
1024         person_id: modId,
1025         auth,
1026       };
1027
1028       modUserResponse = await client.getPersonDetails(getPersonForm);
1029     }
1030
1031     let userResponse: RequestState<GetPersonDetailsResponse> = {
1032       state: "empty",
1033     };
1034
1035     if (userId) {
1036       const getPersonForm: GetPersonDetails = {
1037         person_id: userId,
1038         auth,
1039       };
1040
1041       userResponse = await client.getPersonDetails(getPersonForm);
1042     }
1043
1044     return {
1045       res: await client.getModlog(modlogForm),
1046       communityRes: communityResponse,
1047       modUserResponse,
1048       userResponse,
1049     };
1050   }
1051 }