moddit

backend.ts

import axios from "axios";
export const moddit = functions.https.onRequest(async (req, res) => {
  console.log("[moddit] req", req.body);
  try {
    const sub = req.body.sub || "KotakuInAction";
    const limit = req.body.limit || 100;
    const offset = req.body.offset || 0;
    const url = `https://www.reddit.com/r/${sub}/about/log/.json?feed=7e9b27126097f51ae6c9cd5b049af34891da6ba6&user=publicmodlogs&limit=${limit}&offset=${offset}`;
    const resp = await axios.get(url);
    console.log("[moddit] resp", resp.data);
    res
      .set("Access-Control-Allow-Origin", "*")
      .set("Access-Control-Allow-Headers", "Content-Type")
      .set("Access-Control-Allow-Methods", "GET, POST, OPTIONS, DELETE");
    return res.send(resp.data);
  } catch (err) {
    return res.send(err);
  }
});

log-viewer.component.html

<div class="main-container">
  <div class="content-container">
    <div class="content-area">
      <h1>modlog viewer - moddit</h1>
      <ng-container *ngIf="(logs$ | async) as logs; else loading">
        <clr-datagrid class="datagrid-compact">
          <clr-dg-column [clrDgField]="'id'">ID</clr-dg-column>
          <clr-dg-column [clrDgField]="'created_utc'">When</clr-dg-column>
          <clr-dg-column [clrDgField]="'action'">Action</clr-dg-column>
          <clr-dg-column [clrDgField]="'mod'">Mod</clr-dg-column>
          <clr-dg-column [clrDgField]="'target_author'">User</clr-dg-column>
          <clr-dg-column>Details</clr-dg-column>

          <clr-dg-row *clrDgItems="let action of logs" [clrDgItem]="action">
            <clr-dg-cell
              ><a
                [href]="'https://reddit.com' + action.target_permalink"
                target="_blank"
                >{{ formatActionId(action) }}</a
              ></clr-dg-cell
            >
            <clr-dg-cell>{{
              formatActionTimestamp(action) | date: "medium"
            }}</clr-dg-cell>
            <clr-dg-cell>{{ formatActionType(action) }}</clr-dg-cell>
            <clr-dg-cell
              ><a
                [href]="'https://reddit.com/u/' + action.mod"
                target="_blank"
                >{{ action.mod }}</a
              ></clr-dg-cell
            >
            <clr-dg-cell
              ><a
                [href]="'https://reddit.com/u/' + action.mod"
                target="_blank"
                >{{ action.target_author }}</a
              ></clr-dg-cell
            >
            <clr-dg-cell>{{
              action.description ||
                action.target_body ||
                action.target_title ||
                action.details
            }}</clr-dg-cell>
            <clr-dg-row-detail *clrIfExpanded>
              <clr-stack-view>
                <clr-stack-block *ngIf="action.target_author">
                  <clr-stack-label>Author</clr-stack-label>
                  <clr-stack-content
                    ><a
                      [href]="'https://reddit.com/u/' + action.mod"
                      target="_blank"
                      >{{ action.target_author }}</a
                    ></clr-stack-content
                  >
                </clr-stack-block>
                <clr-stack-block *ngIf="action.target_title">
                  <clr-stack-label>Title</clr-stack-label>
                  <clr-stack-content>{{
                    action.target_title
                  }}</clr-stack-content>
                </clr-stack-block>
                <clr-stack-block *ngIf="action.target_body">
                  <clr-stack-label>Body</clr-stack-label>
                  <clr-stack-content>{{
                    action.target_body
                  }}</clr-stack-content>
                </clr-stack-block>
                <clr-stack-block *ngIf="action.description">
                  <clr-stack-label>Description</clr-stack-label>
                  <clr-stack-content>{{
                    action.description
                  }}</clr-stack-content>
                </clr-stack-block>
                <clr-stack-block *ngIf="action.details">
                  <clr-stack-label>Details</clr-stack-label>
                  <clr-stack-content>{{ action.details }}</clr-stack-content>
                </clr-stack-block>
              </clr-stack-view>
            </clr-dg-row-detail>
          </clr-dg-row>
          <clr-dg-footer>
            <clr-dg-pagination #pagination [clrDgPageSize]="50">
              <clr-dg-page-size [clrPageSizeOptions]="[10, 25, 50, 100]"
                >Actions per page</clr-dg-page-size
              >
              {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
              {{ pagination.totalItems }} actions.
            </clr-dg-pagination>
          </clr-dg-footer>
        </clr-datagrid>
      </ng-container>
      <ng-template #loading>
        <div class="spinner" style="position:fixed;top:50%;left:50%">
          <span>Loading...</span>
        </div>
      </ng-template>
    </div>
  </div>
</div>

log-viewer.component.ts

import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import { ModditService } from "../shared/moddit.service";
import { Observable } from "rxjs";
import { switchMap, map, tap } from "rxjs/operators";
import * as moment from "moment";

@Component({
  selector: "app-log-viewer",
  templateUrl: "./log-viewer.component.html",
  styleUrls: ["./log-viewer.component.scss"]
})
export class LogViewerComponent implements OnInit {
  logs$: Observable<any[]>;
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private moddit: ModditService
  ) {}

  ngOnInit() {
    this.logs$ = this.activatedRoute.params.pipe(
      switchMap(params => {
        return this.moddit.logs(params.sub);
      }),
      map((result: any) => {
        return result.data.children.map(child => child.data);
      })
    );
  }

  formatActionTimestamp(action) {
    return moment.unix(action.created_utc);
  }

  formatActionId(action) {
    return action.id.replace("ModAction_", "");
  }

  formatActionType(action) {
    switch (action.action.toLowerCase()) {
      case "unsticky":
        return "Unstickied";
      case "sticky":
        return "Stickied";
      case "approvecomment":
        return "Comment Approved";
      case "removecomment":
        return "Comment Removed";
      case "approvelink":
        return "Link Approved";
      case "removelink":
        return "Link Removed";
      case "distinguish":
        return "Post Moderated";
      case "editflair":
        return "Flair Edited";
      case "muteuser":
        return "User Muted";
      case "unmuteuser":
        return "User Unmuted";
      case "wikirevise":
        return "Wiki Revision";
      case "banuser":
        return "User Banned";
      case "ignorereports":
        return "Report Ignored";
      default:
        return "Unknown Action";
    }
  }
}

moddit.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class ModditService {
  constructor(private http: HttpClient) {}

  logs(sub = "KotakuInAction", limit = 100, offset = 0) {
    return this.http.post(
      "https://us-central1-hawaiifi-bc749.cloudfunctions.net/moddit",
      { sub, limit, offset }
    );
  }
}