fork of hey-api/openapi-ts because I need some additional things
mokkenstorm.dev
1import { JsonPipe } from '@angular/common';
2import { Component, effect, inject, signal, viewChild } from '@angular/core';
3import { FormsModule, NgForm } from '@angular/forms';
4import { MatButtonModule } from '@angular/material/button';
5import { MatCardModule } from '@angular/material/card';
6import { MatFormFieldModule } from '@angular/material/form-field';
7import { MatInputModule } from '@angular/material/input';
8import { MatProgressSpinner } from '@angular/material/progress-spinner';
9import { MatSnackBar } from '@angular/material/snack-bar';
10import {
11 injectMutation,
12 injectQuery,
13} from '@tanstack/angular-query-experimental';
14
15import type { Pet } from '../../client';
16import {
17 addPetMutation,
18 getPetByIdOptions,
19 updatePetMutation,
20} from '../../client/@tanstack/angular-query-experimental.gen';
21
22@Component({
23 imports: [
24 JsonPipe,
25 FormsModule,
26 MatButtonModule,
27 MatCardModule,
28 MatFormFieldModule,
29 MatInputModule,
30 MatProgressSpinner,
31 ],
32 selector: 'app-pet-store',
33 standalone: true,
34 styleUrls: ['./pet-store.component.css'],
35 templateUrl: './pet-store.component.html',
36})
37export class PetStoreComponent {
38 #snackbar = inject(MatSnackBar);
39 form = viewChild.required(NgForm);
40
41 petId = signal<Pet['id']>(undefined);
42
43 petState = injectQuery(() => ({
44 enabled: (this.petId() ?? 0) > 0,
45 ...getPetByIdOptions({
46 path: { petId: this.petId()! },
47 }),
48 }));
49
50 addPet = injectMutation(() => ({
51 ...addPetMutation(),
52 onError: (err) => {
53 this.#snackbar.open(err.message);
54 },
55 onSuccess: () => {
56 this.#snackbar.open('Pet added successfully!');
57 },
58 }));
59 updatePet = injectMutation(() => ({
60 ...updatePetMutation(),
61 onError: (err) => {
62 this.#snackbar.open(err.message);
63 },
64 onSuccess: () => {
65 this.#snackbar.open('Pet updated successfully!');
66 },
67 }));
68
69 nextPetState: Partial<Pet> = {};
70
71 constructor() {
72 effect(() => {
73 const err = this.petState.error();
74
75 if (err) {
76 this.#snackbar.open(String(err));
77 }
78 });
79
80 effect(() => {
81 this.nextPetState = { ...this.petState.data() };
82 });
83 }
84
85 getRandomPet() {
86 // random id 1-10
87 this.petId.set(Math.floor(Math.random() * (10 - 1 + 1) + 1));
88 }
89
90 handleUpdatePet = async (event: Event) => {
91 event.preventDefault();
92
93 await this.updatePet.mutateAsync({
94 body: this.nextPetState as Pet,
95 });
96 };
97
98 onSubmit = async (form: NgForm) => {
99 if (!form.valid) {
100 return;
101 }
102
103 await this.addPet.mutateAsync({
104 body: this.nextPetState as Pet,
105 });
106 };
107}