feat: useCharacter composable

Author: DubAvenXP

package.json

@@ -1,5 +1,5 @@
 {
-    "name": "breakingbad",
+    "name": "rick-and-morty",
     "version": "0.0.0",
     "private": true,
     "scripts": {

src/characters/composables/index.ts

@@ -1 +1 @@
-export * from './useCharacters';
+export * from './useCharacters.old';

src/characters/composables/useCharacters.old.ts

@@ -0,0 +1,53 @@
+import { ref, onMounted } from "vue";
+import axios from "axios";
+
+import rickAndMortyApi from "@/api/rickAndMortyApi";
+import type { Character, ResponseCharacter } from "@/interfaces/character";
+
+// Global state
+const characters = ref<Character[]>([]);
+const isLoading = ref<boolean>(true);
+const hasError = ref<boolean>(false);
+const errorMessage = ref<string | undefined>();
+
+export const useCharactersOld = () => {
+    // With suspense
+    // const { data } = await rickAndMortyApi.get<ResponseCharacter>('/character');
+    // const characters = ref<Character[]>(data.results);
+
+    // Local state
+    // const characters = ref<Character[]>([]);
+    // const isLoading = ref<boolean>(true);
+
+    onMounted(async () => {
+        await loadCharacters();
+    });
+
+    const loadCharacters = async () => {
+        if (characters.value.length) return;
+
+        try {
+            isLoading.value = true;
+            const { data } = await rickAndMortyApi.get<ResponseCharacter>(
+                "/character"
+            );
+            characters.value = data.results;
+        } catch (error) {
+            hasError.value = true;
+            if (axios.isAxiosError(error)) {
+                return (errorMessage.value = error.message);
+            }
+
+            errorMessage.value = JSON.stringify(error);
+        } finally {
+            isLoading.value = false;
+        }
+    };
+
+    return {
+        characters,
+        isLoading,
+        hasError,
+        errorMessage,
+    };
+};

src/characters/composables/useCharacters.ts

@@ -1,53 +1,55 @@
-import { ref, onMounted } from "vue";
-import axios from "axios";
+import { computed, ref } from "vue";
+import { useQuery } from "@tanstack/vue-query";
 
-import rickAndMortyApi from "@/api/rickAndMortyApi";
 import type { Character, ResponseCharacter } from "@/interfaces/character";
+import rickAndMortyApi from '@/api/rickAndMortyApi';
+import { isAxiosError } from 'axios';
 
-// Global state
+// defined in the global state
 const characters = ref<Character[]>([]);
 const isLoading = ref<boolean>(true);
 const hasError = ref<boolean>(false);
-const errorMessage = ref<string | undefined>();
+const errorMessage = ref<string | null>(null);
 
-export const useCharacters = () => {
-    // With suspense
-    // const { data } = await rickAndMortyApi.get<ResponseCharacter>('/character');
-    // const characters = ref<Character[]>(data.results);
+const getCharacters = async (): Promise<Character[]> => {
+    if (characters.value.length) return characters.value;
+    const { data } = await rickAndMortyApi.get<ResponseCharacter>("/character");
+    return data.results;
+};
 
-    // Local state
-    // const characters = ref<Character[]>([]);
-    // const isLoading = ref<boolean>(true);
+const loadCharacters = (data: Character[]) => {
+    hasError.value = false;
+    errorMessage.value = null;
+    characters.value = data;
+    isLoading.value = false;
+};
 
-    onMounted(async () => {
-        await loadCharacters();
+const loadError = (error: unknown) => {
+    hasError.value = true;
+    if (isAxiosError(error)) {
+        errorMessage.value = error.response?.data.error;
+    }
+    isLoading.value = false;
+}
+
+const useCharacters = () => {
+    const {} = useQuery(["characters"], getCharacters, {
+        onSuccess: loadCharacters,
+        onError: loadError,
     });
 
-    const loadCharacters = async () => {
-        if (characters.value.length) return;
-
-        try {
-            isLoading.value = true;
-            const { data } = await rickAndMortyApi.get<ResponseCharacter>(
-                "/character"
-            );
-            characters.value = data.results;
-        } catch (error) {
-            hasError.value = true;
-            if (axios.isAxiosError(error)) {
-                return (errorMessage.value = error.message);
-            }
-
-            errorMessage.value = JSON.stringify(error);
-        } finally {
-            isLoading.value = false;
-        }
-    };
-
     return {
+        // properties
         characters,
         isLoading,
         hasError,
         errorMessage,
+
+        // getters
+        count: computed(() => characters.value.length),
+
+        // methods
     };
 };
+
+export default useCharacters;

src/characters/pages/CharacterList.vue

@@ -1,42 +1,19 @@
 <script setup lang="ts">
-import { useQuery } from "@tanstack/vue-query";
-
-import rickAndMortyApi from "@/api/rickAndMortyApi";
-
 import CardList from "@/characters/components/CardList.vue";
-
-import type { Character, ResponseCharacter } from "@/interfaces/character";
-import characterStore from "@/store/characters.store";
+import useCharacters from "../composables/useCharacters";
 
 const props = defineProps<{ title: string; visible: boolean }>();
-
-
-const getCharactersCacheFirst = async (): Promise<Character[]> => {
-    if (characterStore.characters.count) return characterStore.characters.list;
-    const { data } = await rickAndMortyApi.get<ResponseCharacter>("/character");
-    return data.results;
-};
-
-// const { isError, isLoading, error, data,} =
-useQuery(["characters"], getCharactersCacheFirst, {
-    onSuccess: (characters) => {
-        characterStore.loadCharacters(characters);
-    },
-    // onError: (error) => {
-    // },
-});
-
-
+const { isLoading, hasError, errorMessage, characters, count } = useCharacters();
 </script>
 
 <template>
-    <h1 v-if="characterStore.characters.isLoading">Loading...</h1>
-    <h1 v-else-if="characterStore.characters.hasError">
-        {{ characterStore.characters.errorMessage }}
+    <h1 v-if="isLoading">Loading...</h1>
+    <h1 v-else-if="hasError">
+        {{ errorMessage }}
     </h1>
     <template v-else>
-        <h2>{{ props.title }}</h2>
-        <CardList :characters="characterStore.characters.list"/>
+        <h2>{{ props.title }} - {{ count }}</h2>
+        <CardList :characters="characters" />
     </template>
 </template>
 

src/main.ts

@@ -4,7 +4,7 @@ import router from "./router";
 import { VueQueryPlugin } from "@tanstack/vue-query";
 
 import "./assets/main.css";
-import "@/store/characters.store"
+// import "@/store/characters.store"
 
 const app = createApp(App);