From a7568dd422286d2b00d4bb9a69d0456ad9d86246 Mon Sep 17 00:00:00 2001
From: Xen0Xys <red57101@gmail.com>
Date: Mon, 17 Jun 2024 21:19:55 +0200
Subject: [PATCH] :zap: Add response caching in states for better performances

---
 components/webtoons/episodes/EpisodeList.vue | 6 ++++++
 components/webtoons/webtoons/WebtoonList.vue | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/components/webtoons/episodes/EpisodeList.vue b/components/webtoons/episodes/EpisodeList.vue
index bbd969e..e7832af 100644
--- a/components/webtoons/episodes/EpisodeList.vue
+++ b/components/webtoons/episodes/EpisodeList.vue
@@ -13,8 +13,14 @@ const maxIndex = ref<number>(30);
 const id = useRoute().params.id as any as number;
 
 function loadEpisodes(){
+    const webtoonState: any = useState(`webtoon-${id}`);
+    if (webtoonState.value){
+        episodes.value = webtoonState.value;
+        return;
+    }
     getEpisodes(id).then(response => {
         episodes.value = response.data;
+        webtoonState.value = response.data;
     });
 }
 
diff --git a/components/webtoons/webtoons/WebtoonList.vue b/components/webtoons/webtoons/WebtoonList.vue
index a2a9b31..b54ef0c 100644
--- a/components/webtoons/webtoons/WebtoonList.vue
+++ b/components/webtoons/webtoons/WebtoonList.vue
@@ -18,6 +18,11 @@ function increaseMaxIndex(){
 }
 
 onMounted(async() => {
+    const webtoonsState: any = useState("webtoons");
+    if (webtoonsState.value && webtoonsState.value.length){
+        webtoons.value = webtoonsState.value;
+        return;
+    }
     const response = await getWebtoons();
     webtoons.value = response.data;
     // Sort webtoons by title
@@ -26,6 +31,7 @@ onMounted(async() => {
     webtoons.value.sort((a, b) => b.hasNewEpisodes - a.hasNewEpisodes);
     // Then by isNew
     webtoons.value.sort((a, b) => b.isNew - a.isNew);
+    webtoonsState.value = webtoons.value;
 });
 
 // Computed property for filtered webtoons