forms/client/src/app/review/review.component.ts

import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { FormControl, ReactiveFormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";
import { ErrorComponent } from "../error/error.component.js";
import { SingleLineComponent } from "../inputs/single-line/single-line.component.js";
import type { ApiService } from "../api.service.js";

/**
 *
 */
@Component({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule,
    SingleLineComponent,
    ErrorComponent,
  ],
  selector:    'app-review',
  styleUrl:    './review.component.css',
  templateUrl: "./review.component.html",
})
export class ReviewComponent {
  public error = "";
  public token = new FormControl("");
  public valid = false;
  public data: Array<{ email: string; id: string; info: Array<{ key: string; value: unknown }> }> = [];

  public view:
    | ""
    | "appeals"
    | "commissions"
    | "contacts"
    | "events"
    | "meetings"
    | "mentorships"
    | "staff" = "";

  /**
   * @param apiService
   */
  constructor(private readonly apiService: ApiService) {
    const storedToken = localStorage.getItem("token");
    if (!storedToken) {
      return;
    }
    this.token.setValue(storedToken);
    this.valid = true;

    /*
     * This.apiService
     *   .validateToken(storedToken)
     *   .then((valid) => {
     *     if (valid) {
     *       this.valid = true;
     *     } else {
     *       this.error = 'The token found in local storage is invalid.';
     *       this.valid = false;
     *     }
     *   })
     *   .catch(() => {
     *     this.error = 'An error occurred while validating your stored token.';
     *     this.valid = false;
     *   });
     */
  }

  /**
   * @param e
   */
  public submit(e: MouseEvent): void {
    this.error = "";
    const { form } = e.target as HTMLButtonElement;
    const valid = form?.reportValidity();
    if (!valid) {
      return;
    }

    this.apiService.
      validateToken(this.token.value).
      then((valid) => {
        if (valid) {
          this.valid = true;
          localStorage.setItem("token", this.token.value as string);
        } else {
          this.error = "The token you entered is invalid.";
          this.valid = false;
        }
      }).
      catch(() => {
        this.error = "An error occurred while submitting the form.";
        this.valid = false;
      });
  }

  /**
   * @param id
   */
  public markReviewed(id: string): void {
    const view = this.view as "appeals" | "commissions" | "contacts" | "events" | "meetings" | "mentorships" | "staff";
    this.apiService.markReviewed(view, id, this.token.value!).then((data) => {
      if ("error" in data) {
        this.error = data.error;
      } else {
        this.data = this.data.filter((item) => {
          return item.id !== id;
        });
      }
    });
  }

  /**
   * @param view
   */
  public setView(
    view:
      | "appeals"
      | "commissions"
      | "contacts"
      | "events"
      | "meetings"
      | "mentorships"
      | "staff",
  ): void {
    this.view = view;
    this.apiService.getData(view, this.token.value!).then((data) => {
      if ("error" in data) {
        this.error = data.error;
      } else {
        this.data = (data.data as Array<
          { email: string; id: string } & Record<string, unknown>
        >).map((item) => {
          const object: { email: string; id: string; info: Array<{ key: string; value: unknown }> } = { email: item.email, id: item.id, info: [] };
          for (const key in item) {
            if (![ "email", "id" ].includes(key)) {
              object.info.push({ key, value: item[key] });
            }
          }
          return object;
        });
      }
    });
  }
}