refactor(Composables): Implement cache until function and replace it in posts manually caching

Author: xGooddevilx

src/composables/cache.composable.js

@@ -0,0 +1,16 @@
+import StorageService from "@/services/storage.service";
+
+export default function useLocaleStorageCache() {
+    const getCache = (key) => {
+        return StorageService.get(key);
+    };
+    const clearCache = (key) => StorageService.delete(key);
+
+    const setCache = (key, value) => StorageService.set(key, value);
+
+    return {
+        getCache,
+        clearCache,
+        setCache,
+    };
+}

src/composables/posts.composable.js

@@ -1,31 +1,31 @@
 import { ref } from "vue";
 import { useLoading } from "./loading.composable";
 import PostsServices from "@/services/posts.services";
-import StorageService from "@/services/storage.service";
+import useLocaleStorageCache from "./cache.composable";
 
 export default function useFetchPost() {
     const { endLoading, isLoading, startLoading } = useLoading();
+    const { getCache, setCache } = useLocaleStorageCache();
 
     const post = ref(null);
 
-    async function fetchPost (id) {
-        const cachedPosts = StorageService.get("cached-posts") || {};
+    async function fetchPost(id) {
+        const cachedPosts = getCache("cached-posts") || {};
 
         if (cachedPosts[`post-${id}`]) {
             post.value = cachedPosts[`post-${id}`];
-            return
-        }
-        else{
+            return;
+        } else {
             startLoading();
             return PostsServices.getOneById(id)
-            .then((response) => {
-                post.value = response.data;
-                StorageService.set('cached-posts', { ...cachedPosts, [`post-${id}`]: response.data })
-                return response;
-            })
-            .finally(() => {
-                endLoading();
-            });
+                .then((response) => {
+                    post.value = response.data;
+                    setCache('cached-posts', { ...cachedPosts, [`post-${id}`]: response.data })
+                    return response;
+                })
+                .finally(() => {
+                    endLoading();
+                });
         }
     }