ui/src/components/modlog.tsx

   1 import { Component } from 'inferno';
   2 import { Link } from 'inferno-router';
   3 import { Subscription } from "rxjs";
   4 import { retryWhen, delay, take } from 'rxjs/operators';
   5 import { UserOperation, GetModlogForm, GetModlogResponse, ModRemovePost, ModLockPost, ModRemoveComment, ModRemoveCommunity, ModBanFromCommunity, ModBan, ModAddCommunity, ModAdd } from '../interfaces';
   6 import { WebSocketService } from '../services';
   7 import { msgOp, addTypeInfo } from '../utils';
   8 import { MomentTime } from './moment-time';
   9 import * as moment from 'moment';
  10
  11 interface ModlogState {
  12   combined: Array<{type_: string, data: ModRemovePost | ModLockPost | ModRemoveCommunity}>,
  13   communityId?: number,
  14   communityName?: string,
  15   loading: boolean;
  16 }
  17
  18 export class Modlog extends Component<any, ModlogState> {
  19   private subscription: Subscription;
  20   private emptyState: ModlogState = {
  21     combined: [],
  22     loading: true,
  23   }
  24
  25   constructor(props: any, context: any) {
  26     super(props, context);
  27
  28     this.state = this.emptyState;
  29     this.state.communityId = this.props.match.params.community_id ? Number(this.props.match.params.community_id) : undefined;
  30     this.subscription = WebSocketService.Instance.subject
  31     .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  32     .subscribe(
  33       (msg) => this.parseMessage(msg),
  34         (err) => console.error(err),
  35         () => console.log('complete')
  36     );
  37
  38     let modlogForm: GetModlogForm = {
  39       community_id: this.state.communityId
  40     };
  41     WebSocketService.Instance.getModlog(modlogForm);
  42   }
  43
  44   componentWillUnmount() {
  45     this.subscription.unsubscribe();
  46   }
  47
  48   setCombined(res: GetModlogResponse) {
  49     let removed_posts = addTypeInfo(res.removed_posts, "removed_posts");
  50     let locked_posts = addTypeInfo(res.locked_posts, "locked_posts");
  51     let removed_comments = addTypeInfo(res.removed_comments, "removed_comments");
  52     let removed_communities = addTypeInfo(res.removed_communities, "removed_communities");
  53     let banned_from_community = addTypeInfo(res.banned_from_community, "banned_from_community");
  54     let added_to_community = addTypeInfo(res.added_to_community, "added_to_community");
  55
  56     this.state.combined.push(...removed_posts);
  57     this.state.combined.push(...locked_posts);
  58     this.state.combined.push(...removed_comments);
  59     this.state.combined.push(...removed_communities);
  60     this.state.combined.push(...banned_from_community);
  61     this.state.combined.push(...added_to_community);
  62
  63     if (this.state.communityId && this.state.combined.length > 0) {
  64       this.state.communityName = this.state.combined[0].data.community_name;
  65     }
  66
  67     // Sort them by time
  68     this.state.combined.sort((a, b) => b.data.when_.localeCompare(a.data.when_));
  69
  70     this.setState(this.state);
  71   }
  72
  73   combined() {
  74     return (
  75       <tbody>
  76         {this.state.combined.map(i =>
  77           <tr>
  78             <td><MomentTime data={i.data} /></td>
  79             <td><Link to={`/user/${i.data.mod_user_id}`}>{i.data.mod_user_name}</Link></td>
  80             <td>
  81               {i.type_ == 'removed_posts' &&
  82                 <>
  83                   {(i.data as ModRemovePost).removed? 'Removed' : 'Restored'}
  84                   <span> Post <Link to={`/post/${(i.data as ModRemovePost).post_id}`}>{(i.data as ModRemovePost).post_name}</Link></span>
  85                   <div>{(i.data as ModRemovePost).reason && ` reason: ${(i.data as ModRemovePost).reason}`}</div>
  86                 </>
  87               }
  88               {i.type_ == 'locked_posts' &&
  89                 <>
  90                   {(i.data as ModLockPost).locked? 'Locked' : 'Unlocked'}
  91                   <span> Post <Link to={`/post/${(i.data as ModLockPost).post_id}`}>{(i.data as ModLockPost).post_name}</Link></span>
  92                 </>
  93               }
  94               {i.type_ == 'removed_comments' &&
  95                 <>
  96                   {(i.data as ModRemoveComment).removed? 'Removed' : 'Restored'}
  97                   <span> Comment <Link to={`/post/${(i.data as ModRemoveComment).post_id}/comment/${(i.data as ModRemoveComment).comment_id}`}>{(i.data as ModRemoveComment).comment_content}</Link></span>
  98                   <div>{(i.data as ModRemoveComment).reason && ` reason: ${(i.data as ModRemoveComment).reason}`}</div>
  99                 </>
 100               }
 101               {i.type_ == 'removed_communities' &&
 102                 <>
 103                   {(i.data as ModRemoveCommunity).removed ? 'Removed' : 'Restored'}
 104                   <span> Community <Link to={`/community/${i.data.community_id}`}>{i.data.community_name}</Link></span>
 105                   <div>{(i.data as ModRemoveCommunity).reason && ` reason: ${(i.data as ModRemoveCommunity).reason}`}</div>
 106                   <div>{(i.data as ModRemoveCommunity).expires && ` expires: ${moment.utc((i.data as ModRemoveCommunity).expires).fromNow()}`}</div>
 107                 </>
 108               }
 109               {i.type_ == 'banned_from_community' &&
 110                 <>
 111                   <span>{(i.data as ModBanFromCommunity).banned ? 'Banned ' : 'Unbanned '} </span>
 112                   <span><Link to={`/user/${(i.data as ModBanFromCommunity).other_user_id}`}>{(i.data as ModBanFromCommunity).other_user_name}</Link></span>
 113                   <div>{(i.data as ModBanFromCommunity).reason && ` reason: ${(i.data as ModBanFromCommunity).reason}`}</div>
 114                   <div>{(i.data as ModBanFromCommunity).expires && ` expires: ${moment.utc((i.data as ModBanFromCommunity).expires).fromNow()}`}</div>
 115                 </>
 116               }
 117               {i.type_ == 'added_to_community' &&
 118                 <>
 119                   <span>{(i.data as ModAddCommunity).removed ? 'Removed ' : 'Appointed '} </span>
 120                   <span><Link to={`/user/${(i.data as ModAddCommunity).other_user_id}`}>{(i.data as ModAddCommunity).other_user_name}</Link></span>
 121                   <span> as a mod to the community </span>
 122                   <span><Link to={`/community/${i.data.community_id}`}>{i.data.community_name}</Link></span>
 123                 </>
 124               }
 125             </td>
 126           </tr>
 127                      )
 128         }
 129
 130       </tbody>
 131     );
 132
 133   }
 134
 135   render() {
 136     return (
 137       <div class="container">
 138         {this.state.loading ?
 139         <h4 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> :
 140         <div>
 141           <h4>
 142             {this.state.communityName && <Link className="text-white" to={`/community/${this.state.communityId}`}>/f/{this.state.communityName} </Link>}
 143             <span>Modlog</span>
 144           </h4>
 145           <div class="table-responsive">
 146             <table id="modlog_table" class="table table-sm table-hover">
 147               <thead class="pointer">
 148                 <tr>
 149                   <th>Time</th>
 150                   <th>Mod</th>
 151                   <th>Action</th>
 152                 </tr>
 153               </thead>
 154               {this.combined()}
 155             </table>
 156           </div>
 157         </div>
 158         }
 159       </div>
 160     );
 161   }
 162
 163   parseMessage(msg: any) {
 164     console.log(msg);
 165     let op: UserOperation = msgOp(msg);
 166     if (msg.error) {
 167       alert(msg.error);
 168       return;
 169     } else if (op == UserOperation.GetModlog) {
 170       let res: GetModlogResponse = msg;
 171       this.state.loading = false;
 172       this.setCombined(res);
 173     }
 174   }
 175 }