ui/src/components/modlog.tsx

   1 import { Component, linkEvent } 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, fetchLimit } 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   page: number;
  16   loading: boolean;
  17 }
  18
  19 export class Modlog extends Component<any, ModlogState> {
  20   private subscription: Subscription;
  21   private emptyState: ModlogState = {
  22     combined: [],
  23     page: 1,
  24     loading: true,
  25   }
  26
  27   constructor(props: any, context: any) {
  28     super(props, context);
  29
  30     this.state = this.emptyState;
  31     this.state.communityId = this.props.match.params.community_id ? Number(this.props.match.params.community_id) : undefined;
  32     this.subscription = WebSocketService.Instance.subject
  33     .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  34     .subscribe(
  35       (msg) => this.parseMessage(msg),
  36         (err) => console.error(err),
  37         () => console.log('complete')
  38     );
  39
  40     this.refetch();
  41   }
  42
  43   componentWillUnmount() {
  44     this.subscription.unsubscribe();
  45   }
  46
  47   setCombined(res: GetModlogResponse) {
  48     let removed_posts = addTypeInfo(res.removed_posts, "removed_posts");
  49     let locked_posts = addTypeInfo(res.locked_posts, "locked_posts");
  50     let removed_comments = addTypeInfo(res.removed_comments, "removed_comments");
  51     let removed_communities = addTypeInfo(res.removed_communities, "removed_communities");
  52     let banned_from_community = addTypeInfo(res.banned_from_community, "banned_from_community");
  53     let added_to_community = addTypeInfo(res.added_to_community, "added_to_community");
  54     this.state.combined = [];
  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             {this.paginator()}
 157           </div>
 158         </div>
 159         }
 160       </div>
 161     );
 162   }
 163
 164   paginator() {
 165     return (
 166       <div class="mt-2">
 167         {this.state.page > 1 &&
 168           <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}>Prev</button>
 169         }
 170         <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}>Next</button>
 171       </div>
 172     );
 173   }
 174
 175   nextPage(i: Modlog) {
 176     i.state.page++;
 177     i.setState(i.state);
 178     i.refetch();
 179   }
 180
 181   prevPage(i: Modlog) {
 182     i.state.page--;
 183     i.setState(i.state);
 184     i.refetch();
 185   }
 186
 187   refetch(){
 188     let modlogForm: GetModlogForm = {
 189       community_id: this.state.communityId,
 190       page: this.state.page,
 191       limit: fetchLimit,
 192     };
 193     WebSocketService.Instance.getModlog(modlogForm);
 194   }
 195
 196   parseMessage(msg: any) {
 197     console.log(msg);
 198     let op: UserOperation = msgOp(msg);
 199     if (msg.error) {
 200       alert(msg.error);
 201       return;
 202     } else if (op == UserOperation.GetModlog) {
 203       let res: GetModlogResponse = msg;
 204       this.state.loading = false;
 205       this.setCombined(res);
 206     }
 207   }
 208 }