feat: useCharacter (id) composable

Author: DubAvenXP

src/characters/composables/index.ts

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

src/characters/composables/useCharacter.ts

@@ -0,0 +1,54 @@
+import { computed, ref } from "vue";
+
+import type { Character } from "@/interfaces/character";
+import rickAndMortyApi from "@/api/rickAndMortyApi";
+import { useQuery } from "@tanstack/vue-query";
+import { isAxiosError } from "axios";
+
+const characterSet = ref<{ [id: string]: Character }>({});
+const hasError = ref<boolean>(false);
+const errorMessage = ref<string | null>(null);
+
+const getCharacter = async (id: string): Promise<Character> => {
+    if (characterSet.value[id]) return characterSet.value[id];
+
+    const { data } = await rickAndMortyApi.get<Character>(`/character/${id}`);
+    return data;
+};
+
+const loadCharacter = (data: Character) => {
+    hasError.value = false;
+    errorMessage.value = null;
+    characterSet.value[data.id] = data;
+};
+
+const loadCharacterError = (error: unknown) => {
+    hasError.value = true;
+    if (isAxiosError(error)) {
+        errorMessage.value = error.response?.data.error;
+    }
+};
+
+export const useCharacter = (id: string) => {
+    const { isLoading } = useQuery<Character>(
+        ["character", id],
+        () => getCharacter(id),
+        {
+            onSuccess: loadCharacter,
+            onError: loadCharacterError,
+        }
+    );
+
+    return {
+        // properties
+        list: characterSet,
+        hasError,
+        errorMessage,
+        isLoading,
+
+        // getters
+        character: computed<Character | null>(() => characterSet.value[id]),
+    };
+};
+
+export default useCharacter;

src/characters/composables/useCharacters.ts

@@ -7,7 +7,6 @@ import { isAxiosError } from 'axios';
 
 // defined in the global state
 const characters = ref<Character[]>([]);
-const isLoading = ref<boolean>(true);
 const hasError = ref<boolean>(false);
 const errorMessage = ref<string | null>(null);
 
@@ -21,19 +20,17 @@ const loadCharacters = (data: Character[]) => {
     hasError.value = false;
     errorMessage.value = null;
     characters.value = data;
-    isLoading.value = false;
 };
 
 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, {
+export const useCharacters = () => {
+    const { isLoading } = useQuery(["characters"], getCharacters, {
         onSuccess: loadCharacters,
         onError: loadError,
     });
@@ -51,5 +48,3 @@ const useCharacters = () => {
         // methods
     };
 };
-
-export default useCharacters;

src/characters/pages/CharacterId.vue

@@ -1,50 +1,38 @@
 <script setup lang="ts">
-import { useRoute } from "vue-router";
-import characterStore from "@/store/characters.store";
+import { watch, watchEffect } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCharacter } from "@/characters/composables";
 
-import rickAndMortyApi from "@/api/rickAndMortyApi";
-import type { Character } from "@/interfaces/character";
-import { useQuery } from "@tanstack/vue-query";
 
 const route = useRoute();
+const router = useRouter();
 
 // in this case the reactivity will be lost
 const { id } = route.params as { id: string };
 
-const getCharacterCacheFirst = async (
-    characterId: string
-): Promise<Character> => {
-    if (characterStore.checkId(characterId)) {
-        return characterStore.ids.list[characterId];
-    }
-
-    const { data } = await rickAndMortyApi.get<Character>(
-        `/character/${characterId}`
-    );
-    return data;
-};
+const { character, isLoading, hasError, errorMessage } = useCharacter(id);
 
-const { data: character } = useQuery<Character>(
-    ["character", id],
-    () => getCharacterCacheFirst(id),
-    {
-        onSuccess: (data) => {
-            characterStore.loadId(data);
-        },
+watchEffect(() => {
+    if (!isLoading.value && hasError.value) {
+        router.replace("/characters");
     }
-);
+});
 </script>
 
 <template>
     <div>
         <h1>Character #{{ id }}</h1>
-        <h1 v-if="!character">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>
-        <div v-else class="card">
+        <div v-else-if="character" class="card">
             <figure>
-                <img :src="character.image" :alt="character.name" class="card-image" />
+                <img
+                    :src="character.image"
+                    :alt="character.name"
+                    class="card-image"
+                />
             </figure>
             <div class="card-content">
                 <h2>{{ character.name }}</h2>
@@ -83,7 +71,6 @@ figure {
     object-fit: contain;
 }
 
-
 .card-content {
     width: 100%;
     display: flex;
@@ -102,4 +89,8 @@ figure {
     display: flex;
     justify-content: center;
 }
+
+h1 {
+    margin: 2rem 0;
+}
 </style>

src/characters/pages/CharacterList.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import CardList from "@/characters/components/CardList.vue";
-import useCharacters from "../composables/useCharacters";
+import { useCharacters } from "@/characters/composables";
 
 const props = defineProps<{ title: string; visible: boolean }>();
-const { isLoading, hasError, errorMessage, characters, count } = useCharacters();
+const { isLoading, hasError, errorMessage, characters, count } =
+    useCharacters();
 </script>
 
 <template>