@iankibetsh/vue-streamline 1.1.6 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/vue-streamline",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "Vue library for streamlining laravel backend services with @iankibet/streamline composer package",
  "type": "module",
   "scripts": {

package/src/App.vue

@@ -2,19 +2,19 @@
 import useStreamline from './composables/useStreamline.js'
 import { onMounted, ref, toRefs } from 'vue'
 
-const {loading, service:paybillService, getActionUrl} = useStreamline('mpesa/paybill',3)
+const {loading, service:paybillService, getActionUrl} = useStreamline('mpesa/paybill',32)
 
 
 const foundPaybill = ref(null)
 
 onMounted(()=>{
-  paybillService.callAnyMethod(3).then(res=>{
-    foundPaybill.value = res
-  })
+  // paybillService.getPaybill(32).then(res=>{
+  //   foundPaybill.value = res
+  // })
 })
 const findPaybill = async ()=>{
-  foundPaybill.value = await paybillService.getPaybill(3)
-  console.log(getActionUrl('getPaybill',3))
+  foundPaybill.value = await paybillService.getPaybill(32)
+  console.log(getActionUrl('getPaybill',32))
 }
 </script>
 
@@ -22,7 +22,9 @@ const findPaybill = async ()=>{
   <div>
     <hr/>
     <h3 class="text-success" >Loading : {{ loading }}</h3>
+    <h5>Found Paybill : {{ paybillService.paybill }}</h5>
     <h1 @click="findPaybill">Get Paybill</h1>
+    {{ foundPaybill }}
   </div>
 </template>
 

package/src/composables/useStreamline.js

@@ -1,111 +1,135 @@
-import Axios from 'axios'
-import { inject, onMounted, reactive, ref, toRefs } from 'vue'
+import Axios from 'axios';
+import { inject, onMounted, reactive, ref } from 'vue';
 
 const useStreamline = (stream, ...initialArgs) => {
-    let formData = {}
-    const loading = ref(false)
+    let formData = {};
+    const loading = ref(false);
+    const propertiesFetched = ref(false);
+    const fetching = ref(false);
+    // cache key for local storage, include initialArgs in the key
+    const cacheKey = `streamline_${stream}_${initialArgs.join('_')}`;
 
-    // Inject headers and apiEndpoint
-    const streamlineUrl = inject('streamlineUrl')
-    const streamlineHeaders = inject('streamlineHeaders')
+    // Inject headers and API endpoint
+    const streamlineUrl = inject('streamlineUrl');
+    const streamlineHeaders = inject('streamlineHeaders');
+    const enableCache = inject('enableCache');
 
     const axios = Axios.create({
         headers: {
-            ...streamlineHeaders
-        }
-    })
-    const handler = {
-        get(target, prop, receiver) {
-            if (prop in target) {
-                return target[prop]
-            }
-            return async (...args) => {
-                loading.value = true
-                try {
-                    const response = await axios.post(streamlineUrl, {
-                        action: prop,
-                        stream,
-                        ...formData,
-                        params: args
-                    })
-                    return response.data
-                } catch (error) {
-                    console.error(`Error calling ${prop} on stream ${stream}`, error)
-                    throw error
-                } finally {
-                    loading.value = false
-                }
-            }
-        }
-    }
-
-    const service = reactive({
-    }) // Make the service object reactive
+            ...streamlineHeaders,
+        },
+    });
 
-    // Function to fetch the public properties of the service class
     const fetchServiceProperties = async () => {
+        if (loading.value || fetching.value || propertiesFetched.value) return;
+        fetching.value = true;
+
         try {
-            loading.value = true
+            loading.value = true;
             const response = await axios.post(streamlineUrl, {
                 action: 'onMounted',
                 stream,
-                params: initialArgs
-            })
-            assignPropertiesAndMethods(response.data)
+                params: initialArgs,
+            });
+            assignPropertiesAndMethods(response.data);
+            enableCache && localStorage.setItem(cacheKey, JSON.stringify(response.data));
         } catch (error) {
-            console.error(`Error fetching properties for stream ${stream}`, error)
-            throw error
+            console.error(`Error fetching properties for stream ${stream}`, error);
+            throw error;
         } finally {
-            loading.value = false
+            propertiesFetched.value = true;
+            fetching.value = false;
+            loading.value = false;
         }
-    }
-
+    };
 
-    // Function to assign properties and methods to the service object
     const assignPropertiesAndMethods = (data) => {
-        Object.assign(service, data.properties) // Assign the properties to the reactive service object
+        Object.assign(service, data.properties); // Assign the properties to the reactive service object
         for (const method of data.methods) {
             const fn = async (...args) => {
-                loading.value = true
+                loading.value = true;
                 try {
                     const response = await axios.post(streamlineUrl, {
                         action: method,
                         stream,
                         ...formData,
-                        params: args
-                    })
-                    return response.data
+                        params: args,
+                    });
+                    return response.data;
                 } catch (error) {
-                    console.error(`Error calling ${method} on stream ${stream}`, error)
-                    throw error
+                    console.error(`Error calling ${method} on stream ${stream}`, error);
+                    throw error;
                 } finally {
-                    loading.value = false
+                    loading.value = false;
                 }
-            }
-            service[method] = fn
+            };
+            service[method] = fn;
         }
-    }
+    };
 
-    const getActionUrl = (action, ...args) => {
-       // console log all arguments to this
+    const handler = {
+        get(target, prop, receiver) {
+            // Fetch properties if not already fetched
+            if (!propertiesFetched.value && !loading.value) {
+                fetchServiceProperties().then(() => target[prop]);
+            }
+
+            // Handle existing properties
+            if (prop in target) {
+                return target[prop];
+            }
+            // Handle nonexistent properties or dynamic methods
+            return (...args) => {
+                loading.value = true;
+                return axios
+                    .post(streamlineUrl, {
+                        action: prop,
+                        stream,
+                        ...formData,
+                        params: args,
+                    })
+                    .then((response) => {
+                        loading.value = false;
+                        return response.data;
+                    })
+                    .catch((error) => {
+                        loading.value = false;
+                        console.error(`Error calling ${prop} on stream ${stream}`, error);
+                        throw error;
+                    });
+            };
+        },
+    };
 
+    const getActionUrl = (action, ...args) => {
+        console.log('getActionUrl called with:', action, args);
         const post = {
             action,
             stream,
-            params: args
+            params: args,
+        };
+        return `${streamlineUrl}?${new URLSearchParams(post).toString()}`;
+    };
+
+    const service = reactive({}); // Make the service object reactive
+
+    onMounted(() => {
+        if (!enableCache) return;
+        const cachedData = localStorage.getItem(cacheKey);
+        if (cachedData) {
+            assignPropertiesAndMethods(JSON.parse(cachedData));
+        }
+        if (initialArgs.length > 0) {
+            fetchServiceProperties();
         }
-        return streamlineUrl + '?' + new URLSearchParams(post).toString()
 
-    }
-    onMounted(()=>{
-        fetchServiceProperties()
-    })
+    });
 
     return {
         loading,
         service: new Proxy(service, handler),
-        getActionUrl
-    }
-}
+        getActionUrl,
+    };
+};
 
-export default useStreamline
+export default useStreamline;

package/src/main.js

@@ -10,7 +10,8 @@ const streamlineUrl = 'http://2022-sharasms.test/api/streamline'
 const app = createApp(App)
 app.use(streamline,{
     streamlineHeaders,
-    streamlineUrl
+    streamlineUrl,
+    enableCache: true
 })
 
 app.mount('#app')

package/src/plugins/streamline.js

@@ -2,6 +2,7 @@ const streamline = {
     install(app, options) {
         app.provide('streamlineUrl', options.streamlineUrl)
         app.provide('streamlineHeaders', options.streamlineHeaders)
+        app.provide('enableCache', options.enableCache)
     }
 }