refactor

Author: ososuna

02-pinia-app/db/db.json

@@ -6,7 +6,7 @@
  "picture": "https://via.placeholder.com/150/yellow",
  "age": 29,
  "eyeColor": "brown",
- "name": "Donovan Bernardo",
+ "name": "Donovan Fernando",
  "gender": "male",
  "company": "BIOSPAN",
  "email": "donovanbernard@biospan.com",
@@ -136,7 +136,7 @@
  "picture": "https://via.placeholder.com/150/white",
  "age": 53,
  "eyeColor": "blue",
- "name": "Lester Gilmore!!!",
+ "name": "Lester Gilmore",
  "gender": "male",
  "company": "ZILLANET",
  "email": "lestergilmore@zillanet.com",

02-pinia-app/src/clients/composables/useClient.ts

@@ -1,29 +1,43 @@
-import { ref, watch } from 'vue';
-import { useQuery } from '@tanstack/vue-query';
+import { ref, watch, computed } from 'vue';
+import { useQuery, useMutation } from '@tanstack/vue-query';
 import clientsApi from '@/api/clientsApi';
 import type { Client } from '@/clients/interfaces/client';
 
-const getClient = async (id: number): Promise<Client> => {
+const getClient = async ( id: number ): Promise<Client> => {
  const { data } = await clientsApi.get(`/${ id }`);
  return data;
 }
 
+const updateClient = async( client: Client ): Promise<Client> => {
+ const { data } = await clientsApi.patch<Client>(`/${ client.id }`, client);
+ return data;
+}
+
 const useClient = ( id: number ) => {
 
  const client = ref<Client>();
 
- const { isLoading, data } = useQuery(
+ const clientMutation = useMutation( updateClient );
+ 
+ const { data, isError, isLoading } = useQuery(
  ['client', id],
  () => getClient(id),
+ { retry: false }
  );
 
  watch(data, () => {
  if ( data.value ) client.value = {...data.value};
  }, { immediate: true });
 
  return {
+ clientMutation,
  client,
- isLoading
+ isError,
+ isLoading,
+ updateClient: clientMutation.mutate,
+ isUpdating: computed( () => clientMutation.isLoading.value ),
+ isUpdatingSuccess: computed( () => clientMutation.isSuccess.value ),
+ isErrorUpdating: computed( () => clientMutation.isError.value )
  }
 
 }

02-pinia-app/src/clients/pages/ClientPage.vue

@@ -1,44 +1,41 @@
 <script setup lang="ts">
 import { watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { useMutation, useQueryClient } from '@tanstack/vue-query';
-import clientsApi from '@/api/clientsApi';
+import { useRoute, useRouter } from 'vue-router';
 import LoadingModalComponent from '@/shared/components/LoadingModalComponent.vue';
 import useClient from '@/clients/composables/useClient';
-import type { Client } from '@/clients/interfaces/client';
 
 const route = useRoute();
-const queryClient = useQueryClient();
+const router = useRouter();
 
-const { client, isLoading } = useClient( +route.params.id );
-
-const updateClient = async( client: Client ):Promise<Client> => {
- // await new Promise( resolve => {
- // setTimeout( () => resolve( true ), 1500 )
- // });
- const { data } = await clientsApi.patch<Client>(`/${client.id}`, client);
- const queries = queryClient.getQueryCache().findAll(['clients?page='], { exact: false });
- queries.forEach( query => query.fetch() );
- return data;
-}
-
-const clientMutation = useMutation( updateClient );
+const {
+ clientMutation,
+ client,
+ isError,
+ isLoading,
+ isUpdating,
+ isUpdatingSuccess,
+ updateClient
+} = useClient( +route.params.id );
 
 watch(clientMutation.isSuccess, () => {
  setTimeout(() => {
  clientMutation.reset();
  }, 2000);
 });
 
+watch(isError, () => {
+ if ( isError.value ) router.replace('/clients'); 
+});
+
 </script>
 
 <template>
-<h3 v-if="clientMutation.isLoading.value">Saving...</h3>
-<h3 v-if="clientMutation.isSuccess.value">Saved</h3>
+<h3 v-if="isUpdating">Saving...</h3>
+<h3 v-if="isUpdatingSuccess">Saved</h3>
 <LoadingModalComponent v-if="isLoading" />
 <div v-if="client">
  <h2>{{ client.name }}</h2>
- <form @submit.prevent="clientMutation.mutate(client!)">
+ <form @submit.prevent="updateClient(client!)">
  <input
  type="text"
  placeholder="Name"
@@ -53,7 +50,7 @@ watch(clientMutation.isSuccess, () => {
  <br>
  <button
  type="submit"
- :disabled="clientMutation.isLoading.value"
+ :disabled="isUpdating"
  >
  Save
  </button>