Codebase 101

import { environment } from '../../environments/environment'
import { Injectable, inject } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { catchError, map } from 'rxjs/operators'

@Injectable({
  providedIn: 'root'
})
export class FeedbackService {
  private readonly http = inject(HttpClient)

  private readonly hostServer = environment.hostServer
  private readonly host = this.hostServer + '/api/Feedbacks'

  find (params?: any) {
    return this.http.get(this.host + '/', {
      params
    }).pipe(map((response: any) => response.data), catchError((err) => { throw err }))
  }

  save (params: any) {
    return this.http.post(this.host + '/', params).pipe(map((response: any) => response.data), catchError((err) => { throw err }))
  }

  del (id: number) {
    return this.http.delete(`${this.host}/${id}`).pipe(map((response: any) => response.data), catchError((err) => { throw err }))
  }
}

import { FeedbackService } from '../Services/feedback.service'
import { CaptchaService } from '../Services/captcha.service'
import { UserService } from '../Services/user.service'
import { UntypedFormControl, Validators } from '@angular/forms'
import { Component, type OnInit, inject } from '@angular/core'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faPaperPlane, faStar } from '@fortawesome/free-solid-svg-icons'
import { FormSubmitService } from '../Services/form-submit.service'
import { TranslateService } from '@ngx-translate/core'
import { SnackBarHelperService } from '../Services/snack-bar-helper.service'

library.add(faStar, faPaperPlane)

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss']
})
export class ContactComponent implements OnInit {
  private readonly userService = inject(UserService)
  private readonly captchaService = inject(CaptchaService)
  private readonly feedbackService = inject(FeedbackService)
  private readonly formSubmitService = inject(FormSubmitService)
  private readonly translate = inject(TranslateService)
  private readonly snackBarHelperService = inject(SnackBarHelperService)

  public authorControl: UntypedFormControl = new UntypedFormControl({ value: '', disabled: true }, [])
  public feedbackControl: UntypedFormControl = new UntypedFormControl('', [Validators.required, Validators.maxLength(160)])
  public captchaControl: UntypedFormControl = new UntypedFormControl('', [Validators.required, Validators.pattern('-?[\\d]*')])
  public userIdControl: UntypedFormControl = new UntypedFormControl('', [])
  public rating = 0
  public feedback: any = undefined
  public captcha: any
  public captchaId: any
  public confirmation: any
  public error: any

  ngOnInit (): void {
    this.userService.whoAmI(['id', 'email']).subscribe({
      next: (data: any) => {
        this.feedback = {}
        this.userIdControl.setValue(data.id)
        this.feedback.UserId = data.id
        this.authorControl.setValue(data.email ? `***${data.email.slice(3)}` : 'anonymous')
      },
      error: (err) => {
        this.feedback = undefined
        console.log(err)
      }
    })
    this.getNewCaptcha()
    this.formSubmitService.attachEnterKeyHandler('feedback-form', 'submitButton', () => { this.save() })
  }

  getNewCaptcha () {
    this.captchaService.getCaptcha().subscribe({
      next: (data: any) => {
        this.captcha = data.captcha
        this.captchaId = data.captchaId
      },
      error: (err) => err
    })
  }

  save () {
    this.feedback.captchaId = this.captchaId
    this.feedback.captcha = this.captchaControl.value
    this.feedback.comment = `${this.feedbackControl.value} (${this.authorControl.value})`
    this.feedback.rating = this.rating
    this.feedback.UserId = this.userIdControl.value
    this.feedbackService.save(this.feedback).subscribe({
      next: (savedFeedback) => {
        const messageKey = savedFeedback.rating === 5 ? 'FEEDBACK_FIVE_STAR_THANK_YOU' : 'FEEDBACK_THANK_YOU'
        this.translate.get(messageKey).subscribe({
          next: (msg) => { this.snackBarHelperService.open(msg) },
          error: (translationId) => { this.snackBarHelperService.open(translationId) }
        })
        this.feedback = {}
        this.ngOnInit()
        this.resetForm()
      },
      error: (err) => {
        console.log(err)
        this.snackBarHelperService.open(err.error, 'errorBar')
        this.feedback = {}
        this.resetCaptcha()
      }
    })
  }

  resetForm () {
    this.authorControl.markAsUntouched()
    this.authorControl.markAsPristine()
    this.authorControl.setValue('')
    this.feedbackControl.markAsUntouched()
    this.feedbackControl.markAsPristine()
    this.feedbackControl.setValue('')
    this.rating = 0
    this.resetCaptcha()
  }

  resetCaptcha () {
    this.captchaControl.markAsUntouched()
    this.captchaControl.markAsPristine()
    this.captchaControl.setValue('')
  }
}

<div class="center-container">
  <mat-card appearance="outlined" class="mat-elevation-z6">
    <div class="mdc-card">
      <h1 class="mat-headline-medium" translate>SECTION_CUSTOMER_FEEDBACK</h1>

      <div class="form-container" id="feedback-form">

        <input hidden type="text" id="userId" ngDefaultControl [formControl]="userIdControl"/>

        <mat-form-field appearance="outline" color="tertiary">
          <mat-label translate>LABEL_AUTHOR</mat-label>
          <input ngDefaultControl [formControl]="authorControl" matInput type="text" aria-label="Field with the name of the author">
        </mat-form-field>

        <mat-form-field appearance="outline" color="tertiary">
          <mat-label translate>LABEL_COMMENT</mat-label>
          <mat-hint translate>
            <i class="fas fa-exclamation-circle"></i>
            <em class="feedback-hint" translate>{{ 'MAX_TEXTAREA_LENGTH' | translate: {length: '160'} }}</em>
          </mat-hint>
          <textarea #comment id="comment" ngDefaultControl [formControl]="feedbackControl" matInput
            matAutosizeMinRows="4" matAutosizeMaxRows="4" matTextareaAutosize cols="50" maxlength="160"
            placeholder="{{ 'WRITE_REVIEW_PLACEHOLDER' | translate}}"
            aria-label="Field for entering the comment or the feedback"></textarea>
          <mat-hint align="end">{{comment.value?.length || 0}}/160</mat-hint>
          @if (feedbackControl.invalid && feedbackControl.errors.required) {
            <mat-error translate>MANDATORY_COMMENT</mat-error>
          }
        </mat-form-field>

        <div class="rating-container">
          <label class="rating-label" translate>LABEL_RATING</label>
          <mat-slider id="rating" min="1" max="5" step="1" showTickMarks discrete [displayWith]="formatRating" aria-label="Slider for selecting the star rating">
            <input matSliderThumb [(ngModel)]="rating" />
          </mat-slider>
        </div>

        <div class="captcha-info">
          <label class="captcha-label">CAPTCHA:</label>&nbsp;&nbsp;
          <span class="captcha-note" translate>LABEL_WHAT_IS</span>&nbsp;
          <code id="captcha" aria-label="CAPTCHA code which must be solved">{{captcha}}</code>&nbsp;
          <label class="captcha-note">?</label>
        </div>
        <mat-form-field appearance="outline" color="tertiary">
          <mat-label translate>LABEL_RESULT</mat-label>
          <input id="captchaControl" ngDefaultControl [formControl]="captchaControl" matInput type="text"
            placeholder="{{ 'MANDATORY_CAPTCHA' | translate}}"
            aria-label="Field for the result of the CAPTCHA code" pattern="-?[\d]*">
          @if (captchaControl.invalid && captchaControl.errors.required) {
            <mat-error translate>MANDATORY_CAPTCHA</mat-error>
          }
          @if (captchaControl.invalid && captchaControl.errors.pattern) {
            <mat-error translate>INVALID_CAPTCHA</mat-error>
          }
        </mat-form-field>

      </div>

      <button type="submit" id="submitButton" mat-raised-button color="primary"
        [disabled]="authorControl.invalid || feedbackControl.invalid || captchaControl.invalid || !rating"
        (click)="save()" aria-label="Button to send the review">
        <mat-icon>send</mat-icon>
        {{'BTN_SUBMIT' | translate}}
      </button>
    </div>
  </mat-card>
</div>

{"message":"One of my favorites!","author":"admin@juice-sh.op","product":1,"_id":"PaZjAKKMaxWieSF65"}

{ "orderId": "fe01-28005c57431f8587", "totalPrice": 30.92, "products": [ { "quantity": 3, "name": "Apple Juice (1000ml)", "price": 1.99, "total": 5.97, "bonus": 0 }, { "quantity": 5, "name": "Raspberry Juice (1000ml)", "price": 4.99, "total": 24.950000000000003, "bonus": 0 } ], "bonus": 0, "eta": "0" }

export default async () => {
  const creators = [
    createSecurityQuestions,
    createUsers,
    createChallenges,
    createRandomFakeUsers,
    createProducts,
    createBaskets,
    createBasketItems,
    createAnonymousFeedback,
    createComplaints,
    createRecycleItem,
    createOrders,
    createQuantity,
    createWallet,
    createDeliveryMethods,
    createMemories,
    prepareFilesystem
  ]

  for (const creator of creators) {
    await creator()
  }
}