tech(basic): add hooks directory

Author: ramsunvtech

recipes/slim/snippets/sources/hooks/useFetch.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react'
+import axios from 'axios'
+
+export default function useFetch(url){
+    
+  const [response, setResponse] = useState(undefined)
+  const [error, setError] = useState()
+  const [loading, setLoading] = useState(false)
+
+  useEffect(async () => {
+      if (!url || url.trim() === '') return
+      try {
+        setLoading(true)
+        const result = await axios.get(url)
+        setResponse(result.data)
+      } catch (err) {
+        setError(err)
+      } finally {
+        setLoading(false)
+      }
+  }, [url])
+
+  return { response, error, loading }
+}

recipes/slim/snippets/sources/hooks/useOnlineStatus.js

@@ -0,0 +1,21 @@
+function useOnlineStatus() {
+  const [online, setOnline] = useState(window.navigator.onLine)
+
+  useEffect(() => {
+    function handleOnline() {
+      setOnline(true)
+    }
+    function handleOffline() {
+      setOnline(false)
+    }
+    window.addEventListener('online', handleOnline)
+    window.addEventListener('offline', handleOffline)
+    return () => {
+      window.removeEventListener('online', handleOnline)
+      window.removeEventListener('offline', handleOffline)
+    }
+  }, [])
+  return online
+}
+
+export default useOnlineStatus

recipes/slim/snippets/sources/hooks/usePost.js

@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import axios from 'axios'
+
+export default function usePost(url, methodName = 'sendPostData'){
+    
+  const [response, setResponse] = useState(undefined)
+  const [error, setError] = useState()
+  const [loading, setLoading] = useState(false)
+
+ const postData = async (payload) => {
+      if (!url || url.trim() === '') return
+      try {
+        setLoading(true)
+        const result = await axios.post(url, payload)
+        setResponse(result.data)
+      } catch (err) {
+        setError(err)
+      } finally {
+        setLoading(false)
+      }
+  }
+  
+  return { response, error, loading, [methodName]:postData }
+}