feat: vue3 custom store

Author: DubAvenXP

src/characters/pages/CharacterId.vue

@@ -1,13 +1,105 @@
 <script setup lang="ts">
+import { useRoute } from "vue-router";
+import characterStore from "@/store/characters.store";
 
+import rickAndMortyApi from "@/api/rickAndMortyApi";
+import type { Character } from "@/interfaces/character";
+import { useQuery } from "@tanstack/vue-query";
+
+const route = useRoute();
+
+// 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 { data: character } = useQuery<Character>(
+    ["character", id],
+    () => getCharacterCacheFirst(id),
+    {
+        onSuccess: (data) => {
+            characterStore.loadId(data);
+        },
+    }
+);
 </script>
 
 <template>
     <div>
-        <h1>CharacterId</h1>
+        <h1>Character #{{ id }}</h1>
+        <h1 v-if="!character">Loading...</h1>
+        <h1 v-else-if="characterStore.characters.hasError">
+            {{ characterStore.characters.errorMessage }}
+        </h1>
+        <div v-else class="card">
+            <figure>
+                <img :src="character.image" :alt="character.name" class="card-image" />
+            </figure>
+            <div class="card-content">
+                <h2>{{ character.name }}</h2>
+                <p>{{ character.species }}</p>
+                <p>Origin: {{ character.origin.name }}</p>
+                <p>Location: {{ character.location.name }}</p>
+            </div>
+        </div>
     </div>
 </template>
 
 <style scoped>
+.card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 2rem 0;
+    padding: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 0.5rem;
+}
+
+figure {
+    width: 100%;
+    height: 250px;
+    background-color: #333;
+    padding: 10px;
+    display: flex;
+    place-content: center;
+}
+
+.card-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+
+.card-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 1rem 0;
+}
+
+.card-content > * {
+    margin: 0.5rem 0;
+}
 
+.card-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
 </style>

src/characters/pages/CharacterList.vue

@@ -6,29 +6,37 @@ 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";
 
 const props = defineProps<{ title: string; visible: boolean }>();
 
 
-const getCharacters = async (): Promise<Character[]> => {
+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: characters,
-} = useQuery(["characters"], getCharacters);
+// const { isError, isLoading, error, data,} =
+useQuery(["characters"], getCharactersCacheFirst, {
+    onSuccess: (characters) => {
+        characterStore.loadCharacters(characters);
+    },
+    // onError: (error) => {
+    // },
+});
+
 
 </script>
 
 <template>
-    <h1 v-if="isLoading">Loading...</h1>
+    <h1 v-if="characterStore.characters.isLoading">Loading...</h1>
+    <h1 v-else-if="characterStore.characters.hasError">
+        {{ characterStore.characters.errorMessage }}
+    </h1>
     <template v-else>
         <h2>{{ props.title }}</h2>
-        <CardList :characters="characters!"/>
+        <CardList :characters="characterStore.characters.list"/>
     </template>
 </template>
 

src/characters/router/index.ts

@@ -1,8 +1,10 @@
 import type { RouteRecordRaw } from "vue-router";
 
+const ROUTE_NAME = "characters";
+
 export const characterRoute: RouteRecordRaw = {
-    path: "/characters",
-    redirect: "/characters/list",
+    path: `/${ROUTE_NAME}`,
+    redirect: `/${ROUTE_NAME}/list`,
     name: "Characters",
     component: () => import("@/characters/layout/CharacterLayout.vue"),
     children: [

src/main.ts

@@ -4,6 +4,7 @@ import router from "./router";
 import { VueQueryPlugin } from "@tanstack/vue-query";
 
 import "./assets/main.css";
+import "@/store/characters.store"
 
 const app = createApp(App);
 
@@ -12,7 +13,7 @@ VueQueryPlugin.install(app, {
     queryClientConfig: {
         defaultOptions: {
             queries: {
-                cacheTime: 1000 * 120,
+                cacheTime: 2000,
                 refetchOnReconnect: 'always',
             }
         }

src/store/characters.store.ts

@@ -0,0 +1,118 @@
+import { reactive } from "vue";
+
+import type { Character, ResponseCharacter } from "@/interfaces/character";
+import rickAndMortyApi from "@/api/rickAndMortyApi";
+import { isAxiosError } from "axios";
+
+interface Store {
+    characters: {
+        list: Character[];
+        count: number;
+        isLoading: boolean;
+        hasError: boolean;
+        errorMessage: string | null;
+    }
+
+    ids: {
+        isLoading: boolean;
+        hasError: boolean;
+        errorMessage: string | null;
+        list: {
+            [id: string]: Character;
+        }
+    }
+
+    // Characters methods
+    startLoadingCharacters: () => void;
+    loadCharacters: (data: Character[]) => void;
+    loadCharactersFailed: (error: string) => void;
+
+    // Ids methods
+    startLoadingId: (id: string) => Promise<void>;
+    loadId: (data: Character) => void;
+    loadIdFailed: (error: string) => void;
+    checkId: (id: string) => boolean;
+}
+
+// Initial state
+const characterStore = reactive<Store>({
+    characters: {
+        count: 0,
+        list: [],
+        isLoading: true,
+        hasError: false,
+        errorMessage: null
+    },
+    ids: {
+        isLoading: true,
+        hasError: false,
+        errorMessage: null,
+        list: {}
+    },
+
+    async startLoadingCharacters() {
+        try {
+            this.characters.isLoading = true;
+            const { data } = await rickAndMortyApi.get<ResponseCharacter>("/character");
+            this.loadCharacters(data.results);
+        } catch (error) {
+            if (isAxiosError(error)) this.loadCharactersFailed(error.message);
+        } finally {
+            this.characters.isLoading = false;
+        }
+    },
+    loadCharacters(data: Character[]) {
+        this.characters = {
+            ...this.characters,
+            list: data,
+            count: data.length,
+            isLoading: false,
+        }
+    },
+    loadCharactersFailed(error: string) {
+        this.characters = {
+            count: 0,
+            hasError: true,
+            errorMessage: error,
+            isLoading: false,
+            list: []
+        }
+    },
+
+    // Ids methods
+    async startLoadingId(id: string): Promise<void> {
+        try {
+            this.ids = {
+                ...this.ids,
+                isLoading: true,
+                hasError: false,
+                errorMessage: null
+            }
+            const { data } = await rickAndMortyApi.get<Character>(`character/${id}`);
+            this.loadId(data);
+        } catch (error) {
+            if (isAxiosError(error)) this.loadIdFailed(error.message);
+        } finally {
+            this.ids.isLoading = false;
+        }
+    },
+    loadId(data: Character) {
+        this.ids.list[data.id] = data;
+    },
+    loadIdFailed(error: string) {
+        this.ids = {
+            ...this.ids,
+            hasError: true,
+            errorMessage: error,
+            isLoading: false,
+        }
+    },
+    checkId(id: string) {
+        return !!this.ids.list[id];
+    }
+})
+
+
+characterStore.startLoadingCharacters();
+
+export default characterStore;