src/shared/components/modlog.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Helmet } from 'inferno-helmet';
   3 import { Link } from 'inferno-router';
   4 import { Subscription } from 'rxjs';
   5 import { retryWhen, delay, take } from 'rxjs/operators';
   6 import {
   7   UserOperation,
   8   GetModlogForm,
   9   GetModlogResponse,
  10   ModRemovePost,
  11   ModLockPost,
  12   ModStickyPost,
  13   ModRemoveComment,
  14   ModRemoveCommunity,
  15   ModBanFromCommunity,
  16   ModBan,
  17   ModAddCommunity,
  18   ModAdd,
  19   WebSocketJsonResponse,
  20   GetSiteResponse,
  21   Site,
  22 } from 'lemmy-js-client';
  23 import { WebSocketService } from '../services';
  24 import { wsJsonToRes, addTypeInfo, fetchLimit, toast } from '../utils';
  25 import { MomentTime } from './moment-time';
  26 import moment from 'moment';
  27 import { i18n } from '../i18next';
  28
  29 interface ModlogState {
  30   combined: {
  31     type_: string;
  32     data:
  33       | ModRemovePost
  34       | ModLockPost
  35       | ModStickyPost
  36       | ModRemoveCommunity
  37       | ModAdd
  38       | ModBan;
  39   }[];
  40   communityId?: number;
  41   communityName?: string;
  42   page: number;
  43   site: Site;
  44   loading: boolean;
  45 }
  46
  47 export class Modlog extends Component<any, ModlogState> {
  48   private subscription: Subscription;
  49   private emptyState: ModlogState = {
  50     combined: [],
  51     page: 1,
  52     loading: true,
  53     site: undefined,
  54   };
  55
  56   constructor(props: any, context: any) {
  57     super(props, context);
  58
  59     this.state = this.emptyState;
  60     this.state.communityId = this.props.match.params.community_id
  61       ? Number(this.props.match.params.community_id)
  62       : undefined;
  63     this.subscription = WebSocketService.Instance.subject
  64       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  65       .subscribe(
  66         msg => this.parseMessage(msg),
  67         err => console.error(err),
  68         () => console.log('complete')
  69       );
  70
  71     this.refetch();
  72     WebSocketService.Instance.getSite();
  73   }
  74
  75   componentWillUnmount() {
  76     this.subscription.unsubscribe();
  77   }
  78
  79   setCombined(res: GetModlogResponse) {
  80     let removed_posts = addTypeInfo(res.removed_posts, 'removed_posts');
  81     let locked_posts = addTypeInfo(res.locked_posts, 'locked_posts');
  82     let stickied_posts = addTypeInfo(res.stickied_posts, 'stickied_posts');
  83     let removed_comments = addTypeInfo(
  84       res.removed_comments,
  85       'removed_comments'
  86     );
  87     let removed_communities = addTypeInfo(
  88       res.removed_communities,
  89       'removed_communities'
  90     );
  91     let banned_from_community = addTypeInfo(
  92       res.banned_from_community,
  93       'banned_from_community'
  94     );
  95     let added_to_community = addTypeInfo(
  96       res.added_to_community,
  97       'added_to_community'
  98     );
  99     let added = addTypeInfo(res.added, 'added');
 100     let banned = addTypeInfo(res.banned, 'banned');
 101     this.state.combined = [];
 102
 103     this.state.combined.push(...removed_posts);
 104     this.state.combined.push(...locked_posts);
 105     this.state.combined.push(...stickied_posts);
 106     this.state.combined.push(...removed_comments);
 107     this.state.combined.push(...removed_communities);
 108     this.state.combined.push(...banned_from_community);
 109     this.state.combined.push(...added_to_community);
 110     this.state.combined.push(...added);
 111     this.state.combined.push(...banned);
 112
 113     if (this.state.communityId && this.state.combined.length > 0) {
 114       this.state.communityName = (this.state.combined[0]
 115         .data as ModRemovePost).community_name;
 116     }
 117
 118     // Sort them by time
 119     this.state.combined.sort((a, b) =>
 120       b.data.when_.localeCompare(a.data.when_)
 121     );
 122
 123     this.setState(this.state);
 124   }
 125
 126   combined() {
 127     return (
 128       <tbody>
 129         {this.state.combined.map(i => (
 130           <tr>
 131             <td>
 132               <MomentTime data={i.data} />
 133             </td>
 134             <td>
 135               <Link to={`/u/${i.data.mod_user_name}`}>
 136                 {i.data.mod_user_name}
 137               </Link>
 138             </td>
 139             <td>
 140               {i.type_ == 'removed_posts' && (
 141                 <>
 142                   {(i.data as ModRemovePost).removed ? 'Removed' : 'Restored'}
 143                   <span>
 144                     {' '}
 145                     Post{' '}
 146                     <Link to={`/post/${(i.data as ModRemovePost).post_id}`}>
 147                       {(i.data as ModRemovePost).post_name}
 148                     </Link>
 149                   </span>
 150                   <div>
 151                     {(i.data as ModRemovePost).reason &&
 152                       ` reason: ${(i.data as ModRemovePost).reason}`}
 153                   </div>
 154                 </>
 155               )}
 156               {i.type_ == 'locked_posts' && (
 157                 <>
 158                   {(i.data as ModLockPost).locked ? 'Locked' : 'Unlocked'}
 159                   <span>
 160                     {' '}
 161                     Post{' '}
 162                     <Link to={`/post/${(i.data as ModLockPost).post_id}`}>
 163                       {(i.data as ModLockPost).post_name}
 164                     </Link>
 165                   </span>
 166                 </>
 167               )}
 168               {i.type_ == 'stickied_posts' && (
 169                 <>
 170                   {(i.data as ModStickyPost).stickied
 171                     ? 'Stickied'
 172                     : 'Unstickied'}
 173                   <span>
 174                     {' '}
 175                     Post{' '}
 176                     <Link to={`/post/${(i.data as ModStickyPost).post_id}`}>
 177                       {(i.data as ModStickyPost).post_name}
 178                     </Link>
 179                   </span>
 180                 </>
 181               )}
 182               {i.type_ == 'removed_comments' && (
 183                 <>
 184                   {(i.data as ModRemoveComment).removed
 185                     ? 'Removed'
 186                     : 'Restored'}
 187                   <span>
 188                     {' '}
 189                     Comment{' '}
 190                     <Link
 191                       to={`/post/${
 192                         (i.data as ModRemoveComment).post_id
 193                       }/comment/${(i.data as ModRemoveComment).comment_id}`}
 194                     >
 195                       {(i.data as ModRemoveComment).comment_content}
 196                     </Link>
 197                   </span>
 198                   <span>
 199                     {' '}
 200                     by{' '}
 201                     <Link
 202                       to={`/u/${
 203                         (i.data as ModRemoveComment).comment_user_name
 204                       }`}
 205                     >
 206                       {(i.data as ModRemoveComment).comment_user_name}
 207                     </Link>
 208                   </span>
 209                   <div>
 210                     {(i.data as ModRemoveComment).reason &&
 211                       ` reason: ${(i.data as ModRemoveComment).reason}`}
 212                   </div>
 213                 </>
 214               )}
 215               {i.type_ == 'removed_communities' && (
 216                 <>
 217                   {(i.data as ModRemoveCommunity).removed
 218                     ? 'Removed'
 219                     : 'Restored'}
 220                   <span>
 221                     {' '}
 222                     Community{' '}
 223                     <Link
 224                       to={`/c/${(i.data as ModRemoveCommunity).community_name}`}
 225                     >
 226                       {(i.data as ModRemoveCommunity).community_name}
 227                     </Link>
 228                   </span>
 229                   <div>
 230                     {(i.data as ModRemoveCommunity).reason &&
 231                       ` reason: ${(i.data as ModRemoveCommunity).reason}`}
 232                   </div>
 233                   <div>
 234                     {(i.data as ModRemoveCommunity).expires &&
 235                       ` expires: ${moment
 236                         .utc((i.data as ModRemoveCommunity).expires)
 237                         .fromNow()}`}
 238                   </div>
 239                 </>
 240               )}
 241               {i.type_ == 'banned_from_community' && (
 242                 <>
 243                   <span>
 244                     {(i.data as ModBanFromCommunity).banned
 245                       ? 'Banned '
 246                       : 'Unbanned '}{' '}
 247                   </span>
 248                   <span>
 249                     <Link
 250                       to={`/u/${
 251                         (i.data as ModBanFromCommunity).other_user_name
 252                       }`}
 253                     >
 254                       {(i.data as ModBanFromCommunity).other_user_name}
 255                     </Link>
 256                   </span>
 257                   <span> from the community </span>
 258                   <span>
 259                     <Link
 260                       to={`/c/${
 261                         (i.data as ModBanFromCommunity).community_name
 262                       }`}
 263                     >
 264                       {(i.data as ModBanFromCommunity).community_name}
 265                     </Link>
 266                   </span>
 267                   <div>
 268                     {(i.data as ModBanFromCommunity).reason &&
 269                       ` reason: ${(i.data as ModBanFromCommunity).reason}`}
 270                   </div>
 271                   <div>
 272                     {(i.data as ModBanFromCommunity).expires &&
 273                       ` expires: ${moment
 274                         .utc((i.data as ModBanFromCommunity).expires)
 275                         .fromNow()}`}
 276                   </div>
 277                 </>
 278               )}
 279               {i.type_ == 'added_to_community' && (
 280                 <>
 281                   <span>
 282                     {(i.data as ModAddCommunity).removed
 283                       ? 'Removed '
 284                       : 'Appointed '}{' '}
 285                   </span>
 286                   <span>
 287                     <Link
 288                       to={`/u/${(i.data as ModAddCommunity).other_user_name}`}
 289                     >
 290                       {(i.data as ModAddCommunity).other_user_name}
 291                     </Link>
 292                   </span>
 293                   <span> as a mod to the community </span>
 294                   <span>
 295                     <Link
 296                       to={`/c/${(i.data as ModAddCommunity).community_name}`}
 297                     >
 298                       {(i.data as ModAddCommunity).community_name}
 299                     </Link>
 300                   </span>
 301                 </>
 302               )}
 303               {i.type_ == 'banned' && (
 304                 <>
 305                   <span>
 306                     {(i.data as ModBan).banned ? 'Banned ' : 'Unbanned '}{' '}
 307                   </span>
 308                   <span>
 309                     <Link to={`/u/${(i.data as ModBan).other_user_name}`}>
 310                       {(i.data as ModBan).other_user_name}
 311                     </Link>
 312                   </span>
 313                   <div>
 314                     {(i.data as ModBan).reason &&
 315                       ` reason: ${(i.data as ModBan).reason}`}
 316                   </div>
 317                   <div>
 318                     {(i.data as ModBan).expires &&
 319                       ` expires: ${moment
 320                         .utc((i.data as ModBan).expires)
 321                         .fromNow()}`}
 322                   </div>
 323                 </>
 324               )}
 325               {i.type_ == 'added' && (
 326                 <>
 327                   <span>
 328                     {(i.data as ModAdd).removed ? 'Removed ' : 'Appointed '}{' '}
 329                   </span>
 330                   <span>
 331                     <Link to={`/u/${(i.data as ModAdd).other_user_name}`}>
 332                       {(i.data as ModAdd).other_user_name}
 333                     </Link>
 334                   </span>
 335                   <span> as an admin </span>
 336                 </>
 337               )}
 338             </td>
 339           </tr>
 340         ))}
 341       </tbody>
 342     );
 343   }
 344
 345   get documentTitle(): string {
 346     if (this.state.site) {
 347       return `Modlog - ${this.state.site.name}`;
 348     } else {
 349       return 'Lemmy';
 350     }
 351   }
 352
 353   render() {
 354     return (
 355       <div class="container">
 356         <Helmet title={this.documentTitle} />
 357         {this.state.loading ? (
 358           <h5 class="">
 359             <svg class="icon icon-spinner spin">
 360               <use xlinkHref="#icon-spinner"></use>
 361             </svg>
 362           </h5>
 363         ) : (
 364           <div>
 365             <h5>
 366               {this.state.communityName && (
 367                 <Link
 368                   className="text-body"
 369                   to={`/c/${this.state.communityName}`}
 370                 >
 371                   /c/{this.state.communityName}{' '}
 372                 </Link>
 373               )}
 374               <span>{i18n.t('modlog')}</span>
 375             </h5>
 376             <div class="table-responsive">
 377               <table id="modlog_table" class="table table-sm table-hover">
 378                 <thead class="pointer">
 379                   <tr>
 380                     <th> {i18n.t('time')}</th>
 381                     <th>{i18n.t('mod')}</th>
 382                     <th>{i18n.t('action')}</th>
 383                   </tr>
 384                 </thead>
 385                 {this.combined()}
 386               </table>
 387               {this.paginator()}
 388             </div>
 389           </div>
 390         )}
 391       </div>
 392     );
 393   }
 394
 395   paginator() {
 396     return (
 397       <div class="mt-2">
 398         {this.state.page > 1 && (
 399           <button
 400             class="btn btn-secondary mr-1"
 401             onClick={linkEvent(this, this.prevPage)}
 402           >
 403             {i18n.t('prev')}
 404           </button>
 405         )}
 406         <button
 407           class="btn btn-secondary"
 408           onClick={linkEvent(this, this.nextPage)}
 409         >
 410           {i18n.t('next')}
 411         </button>
 412       </div>
 413     );
 414   }
 415
 416   nextPage(i: Modlog) {
 417     i.state.page++;
 418     i.setState(i.state);
 419     i.refetch();
 420   }
 421
 422   prevPage(i: Modlog) {
 423     i.state.page--;
 424     i.setState(i.state);
 425     i.refetch();
 426   }
 427
 428   refetch() {
 429     let modlogForm: GetModlogForm = {
 430       community_id: this.state.communityId,
 431       page: this.state.page,
 432       limit: fetchLimit,
 433     };
 434     WebSocketService.Instance.getModlog(modlogForm);
 435   }
 436
 437   parseMessage(msg: WebSocketJsonResponse) {
 438     console.log(msg);
 439     let res = wsJsonToRes(msg);
 440     if (msg.error) {
 441       toast(i18n.t(msg.error), 'danger');
 442       return;
 443     } else if (res.op == UserOperation.GetModlog) {
 444       let data = res.data as GetModlogResponse;
 445       this.state.loading = false;
 446       window.scrollTo(0, 0);
 447       this.setCombined(data);
 448     } else if (res.op == UserOperation.GetSite) {
 449       let data = res.data as GetSiteResponse;
 450       this.state.site = data.site;
 451       this.setState(this.state);
 452     }
 453   }
 454 }