feat: begin cleaning up hooks

GUI/ETVR/ETVR.code-workspace

@@ -13,6 +13,7 @@
         "rust-analyzer.checkOnSave.extraArgs": ["--all-targets"],
         "rust-analyzer.checkOnSave.command": "clippy",
         "rust-analyzer.checkOnSave.allTargets": true,
+        "rust-analyzer.files.watcher": "client",
         "rust-analyzer.files.excludeDirs": [
             "**/target",
             "**/node_modules",
@@ -29,7 +30,6 @@
             "**/src/styles",
             "**/src/utils"
         ],
-        "rust-analyzer.files.watcher": "client",
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "[toml]": {
             "editor.defaultFormatter": "tamasfe.even-better-toml"

GUI/ETVR/src/components/Loader/index.tsx

@@ -35,4 +35,18 @@ const Loader = (props: LoaderProps) => {
     )
 }
 
+export const OrangeLoader = () => {
+    return (
+        <div class="flex justify-center items-center">
+            <Loader
+                gradient="orange"
+                gradientMid="rgba(255, 153, 0, 0.594)"
+                gradientBot="rgba(255, 153, 0, 0.144)"
+                width="100px"
+                height="100px"
+            />
+        </div>
+    )
+}
+
 export default Loader

GUI/ETVR/src/utils/hooks/api/useMDNSScanner.ts

@@ -1,29 +1,44 @@
 import { invoke } from '@tauri-apps/api/tauri'
-import { createSignal } from 'solid-js'
+import { createEffect, createResource, createSignal } from 'solid-js'
+
+interface IProps {
+    serviceType: string
+    scanTime: number
+}
+
+const scan = async (source, { value, refetching }) => {
+    const { serviceType, scanTime } = source
+
+    const res = await invoke('run_mdns_query', {
+        serviceType,
+        scanTime,
+    })
+
+    if (typeof res === 'string') {
+        const parsedResponse = JSON.parse(res)
+        return parsedResponse
+    }
+    return []
+}
 
 export const useMDNSScanner = (serviceType: string, scanTime: number) => {
-    const [res, setRes] = createSignal(null)
-    const [loading, setLoading] = createSignal(false)
-    const [error, setError] = createSignal(null)
-
-    const scan = () => {
-        setLoading(true)
-        invoke('run_mdns_query', {
-            serviceType,
-            scanTime,
-        })
-            .then((response) => {
-                if (typeof response === 'string') {
-                    const parsedResponse = JSON.parse(response)
-                    setRes(parsedResponse)
-                }
-            })
-            .catch((err) => {
-                setError(err)
-            })
-            .finally(() => {
-                setLoading(false)
+    // create an object with the serviceType and scanTime as the key
+    // this will allow us to create a new resource if the serviceType or scanTime changes
+
+    const [resData, setResData] = createSignal<IProps>({
+        serviceType: serviceType,
+        scanTime: scanTime,
+    })
+
+    createEffect(() => {
+        if (serviceType !== resData().serviceType || scanTime !== resData().scanTime) {
+            setResData({
+                serviceType: serviceType,
+                scanTime: scanTime,
             })
-    }
-    return { res, loading, error, scan }
+        }
+    })
+
+    const [data, { mutate, refetch }] = createResource(resData, scan)
+    return { data, mutate, refetch, resData, setResData }
 }

GUI/ETVR/src/utils/hooks/api/useRequest.ts

@@ -1,5 +1,5 @@
 import { invoke } from '@tauri-apps/api/tauri'
-import { createSignal, createEffect } from 'solid-js'
+import { createSignal, createEffect, createResource } from 'solid-js'
 import { setRestStatus, RESTStatus } from '@src/store/api/restAPI'
 import { endpoints } from '@src/store/api/selectors'
 import { cameras } from '@src/store/camera/selectors'
@@ -10,7 +10,7 @@ interface IProps {
     args?: string
 }
 
-export const useRequestHook = () => {
+export const useRequestHook = async () => {
     const [data, setData] = createSignal({})
     const _endpoints = endpoints()
     const doRequest = (props: IProps) => {